From 455b60a9943d6c08d364cf4f5365a95e1f87db08 Mon Sep 17 00:00:00 2001
From: PandaDEV <70103896+0PandaDEV@users.noreply.github.com>
Date: Sat, 15 Mar 2025 00:33:29 +0100
Subject: [PATCH] feat: enhance BottomBar and TopBar components with dynamic
 actions and improved styling; integrate actions in index.vue

---
 components/BottomBar.vue | 32 ++++++++++++++++++++++----------
 components/TopBar.vue    | 20 ++++++++++----------
 pages/index.vue          | 14 +++++++++++++-
 3 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/components/BottomBar.vue b/components/BottomBar.vue
index 053c510..2ec32ed 100644
--- a/components/BottomBar.vue
+++ b/components/BottomBar.vue
@@ -5,17 +5,17 @@
       <p class="name">Qopy</p>
     </div>
     <div class="buttons">
-      <div class="paste">
-        <p class="text">Paste</p>
-        <IconsEnter />
+      <div v-if="primaryAction" class="paste" @click="primaryAction.onClick">
+        <p class="text">{{ primaryAction.text }}</p>
+        <component :is="primaryAction.icon" />
       </div>
-      <div class="divider"></div>
-      <div class="actions">
-        <p class="text">Actions</p>
+      <div v-if="secondaryAction" class="divider"></div>
+      <div v-if="secondaryAction" class="actions" @click="secondaryAction.onClick">
+        <p class="text">{{ secondaryAction.text }}</p>
         <div>
-          <IconsCtrl v-if="os === 'windows' || os === 'linux'" />
-          <IconsCmd v-if="os === 'macos'" />
-          <IconsK />
+          <IconsCtrl v-if="(os === 'windows' || os === 'linux') && secondaryAction.showModifier" />
+          <IconsCmd v-if="os === 'macos' && secondaryAction.showModifier" />
+          <component :is="secondaryAction.icon" />
         </div>
       </div>
     </div>
@@ -25,6 +25,18 @@
 <script setup lang="ts">
 import { platform } from "@tauri-apps/plugin-os";
 
+interface Action {
+  text: string;
+  icon: any;
+  onClick?: () => void;
+  showModifier?: boolean;
+}
+
+const props = defineProps<{
+  primaryAction?: Action;
+  secondaryAction?: Action;
+}>();
+
 const os = ref<string>("");
 
 onMounted(() => {
@@ -34,7 +46,7 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .bottombar {
-  height: 40px;
+  min-height: 40px;
   width: 100%;
   border-top: 1px solid var(--border);
   backdrop-filter: blur(18px);
diff --git a/components/TopBar.vue b/components/TopBar.vue
index e745674..951bee3 100644
--- a/components/TopBar.vue
+++ b/components/TopBar.vue
@@ -14,27 +14,27 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref } from "vue";
 
-const searchQuery = ref('')
-const searchInput = ref<HTMLInputElement | null>(null)
+const searchQuery = ref("");
+const searchInput = ref<HTMLInputElement | null>(null);
 
 const emit = defineEmits<{
-  (e: 'search', query: string): void
-  (e: 'focus'): void
-}>()
+  (e: "search", query: string): void;
+  (e: "focus"): void;
+}>();
 
 const onSearch = () => {
-  emit('search', searchQuery.value)
-}
+  emit("search", searchQuery.value);
+};
 
-defineExpose({ searchInput })
+defineExpose({ searchInput });
 </script>
 
 <style lang="scss">
 .topbar {
   width: 100%;
-  height: 56px;
+  min-height: 56px;
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
diff --git a/pages/index.vue b/pages/index.vue
index ba0531a..d5e1fd1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -66,7 +66,17 @@
         </OverlayScrollbarsComponent>
       </div>
     </div>
-    <BottomBar />
+    <BottomBar
+      :primary-action="{
+        text: 'Paste',
+        icon: IconsEnter,
+        onClick: pasteSelectedItem,
+      }"
+      :secondary-action="{
+        text: 'Actions',
+        icon: IconsK,
+        showModifier: true,
+      }" />
   </main>
 </template>
 
@@ -95,6 +105,8 @@ import {
   selectedElement,
   useSelectedResult,
 } from "~/lib/selectedResult";
+import IconsEnter from "~/components/Icons/Enter.vue";
+import IconsK from "~/components/Icons/K.vue";
 
 interface GroupedHistory {
   label: string;