feat: enhance BottomBar and TopBar components with dynamic actions and improved styling; integrate actions in index.vue

components/BottomBar.vue

@@ -5,17 +5,17 @@
       <p class="name">Qopy</p>
     </div>
     <div class="buttons">
-      <div class="paste">
+      <div v-if="primaryAction" class="paste" @click="primaryAction.onClick">
-        <p class="text">Paste</p>
+        <p class="text">{{ primaryAction.text }}</p>
-        <IconsEnter />
+        <component :is="primaryAction.icon" />
       </div>
-      <div class="divider"></div>
+      <div v-if="secondaryAction" class="divider"></div>
-      <div class="actions">
+      <div v-if="secondaryAction" class="actions" @click="secondaryAction.onClick">
-        <p class="text">Actions</p>
+        <p class="text">{{ secondaryAction.text }}</p>
         <div>
-          <IconsCtrl v-if="os === 'windows' || os === 'linux'" />
+          <IconsCtrl v-if="(os === 'windows' || os === 'linux') && secondaryAction.showModifier" />
-          <IconsCmd v-if="os === 'macos'" />
+          <IconsCmd v-if="os === 'macos' && secondaryAction.showModifier" />
-          <IconsK />
+          <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);

components/TopBar.vue

@@ -14,27 +14,27 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref } from "vue";
 
-const searchQuery = ref('')
+const searchQuery = ref("");
-const searchInput = ref<HTMLInputElement | null>(null)
+const searchInput = ref<HTMLInputElement | null>(null);
 
 const emit = defineEmits<{
-  (e: 'search', query: string): void
+  (e: "search", query: string): void;
-  (e: 'focus'): 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;

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;