From ab3380b68e35fd4345a5b98d8d85e6fb670d4b30 Mon Sep 17 00:00:00 2001
From: Ann <true1ann@tutamail.com>
Date: Fri, 4 Apr 2025 16:49:05 +0300
Subject: [PATCH] Add search button, dock restructure

---
 src/App.vue               |  6 +++++-
 src/components/Search.vue | 10 +++++++++-
 src/style.scss            | 29 ++++++++++++++++++++++++-----
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c5eb28f..f095323 100644
--- a/src/App.vue
+++ b/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([])
diff --git a/src/components/Search.vue b/src/components/Search.vue
index d406f80..27f0eed 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -1 +1,9 @@
-<!-- Nothing to see here! (yet) -->
\ No newline at end of file
+<template>
+  <button id="search-button" @click="openSearch()">Search</button>
+</template>
+
+<script setup>
+async function openSearch() {
+  alert('Not yet');
+}
+</script>
\ No newline at end of file
diff --git a/src/style.scss b/src/style.scss
index dafc3b5..ea1bc2b 100644
--- a/src/style.scss
+++ b/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;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  width: 100%;
 }
 
 .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;