Vue3 (#1594)

* WIP vue3

* WIP vue3

* WIP vue3

* Migrates to vitejs

* Fixes js tests and removes not needed modules

* Fixes unmount

* Updates to use css instead for space

* Fixes tests and rebases one more time

* Uses orgua

* Fixes migrations bugs with oruga and fixes scroll

* Fixes v-deep

* Fixes icons to prod

* Fixes icons to prod

* Adds favicon back

* Transitions some to composition api

* Updates another component to comp api

* Cleans defineProps

* Updates log messages

* Moves more to compose api

* Cleans up styles and rewrites event source

* Tries to fix DOMPurify

* Removes postcss

* WIP typescript

* Improves importing

* Converts all to ts

* Converts main to ts

* Makes changes for tsconfig

* Moves more to ts

* Adds typing to store

* More typing

* Updates to ts

* Updates the rest to ts

* Fixes computes

* Fixes unmount

* Adds cypress with custom base fixed

* Fixes jest tests

* Fixes golang tests

* Adds gitignore for cypress

* Removes int in favor of e2e with cypress

* Tries to fix int tests again

* Adds title

* Updates e2e tests

* Uses vue for isMobile

* Removes app spec

* Cleans up docker

* Adds drop down for settings

* Fixes bug with restart

* Fixes scroll up bug

* Adds tests for light mode

assets/components/SideMenu.vue

@@ -10,20 +10,20 @@
       </div>
       <div class="column is-narrow has-text-right px-1">
         <button
-          class="button is-small is-rounded is-settings-control pl-1 pr-1"
+          class="button is-rounded is-settings-control"
           @click="$emit('search')"
           title="Search containers (⌘ + k, ⌃k)"
         >
-          <search-icon />
+          <span class="icon">
+            <mdi-light-magnify />
+          </span>
         </button>
       </div>
       <div class="column is-narrow has-text-right px-0">
-        <router-link
-          :to="{ name: 'settings' }"
-          active-class="is-active"
-          class="button is-small is-rounded is-settings-control pl-1 pr-1"
-        >
-          <settings-icon />
+        <router-link :to="{ name: 'settings' }" active-class="is-active" class="button is-rounded is-settings-control">
+          <span class="icon">
+            <mdi-light-cog />
+          </span>
         </router-link>
       </div>
     </div>
@@ -46,7 +46,7 @@
                 v-show="!activeContainersById[item.id]"
                 title="Pin as column"
               >
-                <columns-icon />
+                <cil-columns />
               </span>
             </div>
           </div>
@@ -56,21 +56,13 @@
   </aside>
 </template>
 
-<script>
-import { mapActions, mapGetters, mapState } from "vuex";
-
-import SearchIcon from "~icons/mdi-light/magnify";
-import SettingsIcon from "~icons/mdi-light/cog";
-import ColumnsIcon from "~icons/cil/columns";
+<script lang="ts">
+import { mapActions, mapGetters } from "vuex";
 
 export default {
   props: [],
   name: "SideMenu",
-  components: {
-    SearchIcon,
-    SettingsIcon,
-    ColumnsIcon,
-  },
+
   data() {
     return {};
   },