From ae5103e8007e628b0dbc6858e5307c369ead53fc Mon Sep 17 00:00:00 2001
From: PandaDEV <70103896+0PandaDEV@users.noreply.github.com>
Date: Sun, 16 Mar 2025 23:38:57 +0100
Subject: [PATCH] feat: update BottomBar component to include platform-specific
 key modifiers and improve action button layout

---
 components/BottomBar.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/BottomBar.vue b/components/BottomBar.vue
index c978c99..4bb59b9 100644
--- a/components/BottomBar.vue
+++ b/components/BottomBar.vue
@@ -7,12 +7,16 @@
     <div class="buttons">
       <div v-if="primaryAction" class="paste" @click="handlePrimaryClick">
         <p class="text">{{ primaryAction.text }}</p>
-        <component :is="primaryAction.icon" />
+        <div class="keys">
+          <Key v-if="(os === 'windows' || os === 'linux') && primaryAction.showModifier" :input="'Ctrl'" />
+          <IconsCmd v-if="os === 'macos' && primaryAction.showModifier" />
+          <component :is="primaryAction.icon" :input="primaryAction.input" />
+        </div>
       </div>
       <div v-if="secondaryAction" class="divider"></div>
       <div v-if="secondaryAction" class="actions" @click="handleSecondaryClick">
         <p class="text">{{ secondaryAction.text }}</p>
-        <div>
+        <div class="keys">
           <Key v-if="(os === 'windows' || os === 'linux') && secondaryAction.showModifier" :input="'Ctrl'" />
           <IconsCmd v-if="os === 'macos' && secondaryAction.showModifier" />
           <component :is="secondaryAction.icon" :input="secondaryAction.input" />
@@ -96,7 +100,7 @@ onMounted(async () => {
       color: var(--text);
     }
 
-    .actions div {
+    .keys {
       display: flex;
       align-items: center;
       gap: 2px;