From 7ba418f4cc17ee2d1dc0ea14d3a241b97e1fb5f4 Mon Sep 17 00:00:00 2001
From: pandadev <70103896+0PandaDEV@users.noreply.github.com>
Date: Sun, 16 Mar 2025 20:33:51 +0100
Subject: [PATCH] refactor: update BottomBar component to improve action
 handling and add input support for secondary action

---
 components/BottomBar.vue | 34 +++++++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/components/BottomBar.vue b/components/BottomBar.vue
index 2ec32ed..30a91b3 100644
--- a/components/BottomBar.vue
+++ b/components/BottomBar.vue
@@ -5,17 +5,17 @@
       <p class="name">Qopy</p>
     </div>
     <div class="buttons">
-      <div v-if="primaryAction" class="paste" @click="primaryAction.onClick">
+      <div v-if="primaryAction" class="paste" @click="handlePrimaryClick">
         <p class="text">{{ primaryAction.text }}</p>
         <component :is="primaryAction.icon" />
       </div>
       <div v-if="secondaryAction" class="divider"></div>
-      <div v-if="secondaryAction" class="actions" @click="secondaryAction.onClick">
+      <div v-if="secondaryAction" class="actions" @click="handleSecondaryClick">
         <p class="text">{{ secondaryAction.text }}</p>
         <div>
           <IconsCtrl v-if="(os === 'windows' || os === 'linux') && secondaryAction.showModifier" />
           <IconsCmd v-if="os === 'macos' && secondaryAction.showModifier" />
-          <component :is="secondaryAction.icon" />
+          <component :is="secondaryAction.icon" :input="secondaryAction.input" />
         </div>
       </div>
     </div>
@@ -23,13 +23,17 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue';
 import { platform } from "@tauri-apps/plugin-os";
+import IconsCtrl from './Icons/Ctrl.vue';
+import IconsCmd from './Icons/Cmd.vue';
 
 interface Action {
   text: string;
   icon: any;
   onClick?: () => void;
   showModifier?: boolean;
+  input?: string;
 }
 
 const props = defineProps<{
@@ -39,8 +43,22 @@ const props = defineProps<{
 
 const os = ref<string>("");
 
-onMounted(() => {
-  os.value = platform();
+const handlePrimaryClick = (event: MouseEvent) => {
+  event.stopPropagation();
+  if (props.primaryAction?.onClick) {
+    props.primaryAction.onClick();
+  }
+};
+
+const handleSecondaryClick = (event: MouseEvent) => {
+  event.stopPropagation();
+  if (props.secondaryAction?.onClick) {
+    props.secondaryAction.onClick();
+  }
+};
+
+onMounted(async () => {
+  os.value = await platform();
 });
 </script>
 
@@ -111,6 +129,12 @@ onMounted(() => {
       background-color: var(--border);
     }
 
+    .paste:active,
+    .actions:active {
+      background-color: var(--border-active, #444);
+      transform: scale(0.98);
+    }
+
     &:hover .paste:hover ~ .divider,
     &:hover .divider:has(+ .actions:hover) {
       opacity: 0;