Add search button, dock restructure

src/App.vue

@@ -13,13 +13,17 @@
       </template>
     </Suspense>
   </div>
-  <Dock></Dock>
+  <div id="dock-wrapper">
+    <Search></Search>
+    <Dock></Dock>
+  </div>
 </template>
 
 <script setup>
 import { ref, computed, onUnmounted } from 'vue';
 import AppIcon from './components/AppIcon.vue';
 import Dock from './components/Dock.vue';
+import Search from './components/Search.vue';
 import Settings from './components/Settings.vue';
 
 const apps = ref([])

src/components/Search.vue

@@ -1 +1,9 @@
-<!-- Nothing to see here! (yet) -->
+<template>
+  <button id="search-button" @click="openSearch()">Search</button>
+</template>
+
+<script setup>
+async function openSearch() {
+  alert('Not yet');
+}
+</script>

src/style.scss

@@ -47,19 +47,27 @@ body {
   }  
 }
 
+#dock-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 5%;
+}
+
 #dock {
   padding: 5%;
-  margin: 5%;
   gap: 15px;
   border-radius: 24px;
   background-color: rgba(0,0,0,0.25);
   border: 1px solid white;
   display: flex;
   justify-content: center;
-  position: fixed;
+  width: 100%;
-  bottom: 0;
-  left: 0;
-  right: 0;
 }
 
 .section {
@@ -71,6 +79,17 @@ body {
   color: white;
 }
 
+#search-button {
+  border: none;
+  border: 1px solid white;
+  border-radius: 300px;
+  padding: 2% 4%;
+  background-color: rgba(0,0,0,0.25);
+  color: white;
+  width: max-content;
+  margin-bottom: 3%;
+}
+
 .ui-button {
   border: none;
   border: 1px solid white;