From 60d17442fcfa936d0631867dce31bfb1a93d0dbf Mon Sep 17 00:00:00 2001
From: PandaDEV <70103896+0PandaDEV@users.noreply.github.com>
Date: Sat, 15 Mar 2025 00:33:21 +0100
Subject: [PATCH] refactor: update layout structure in settings.vue and
 settings.scss for improved responsiveness and clarity; replace .bg with
 <main> and integrate BottomBar component

---
 assets/css/settings.scss | 17 +++++++++--------
 pages/settings.vue       | 33 +++++++++++----------------------
 2 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/assets/css/settings.scss b/assets/css/settings.scss
index 7f2eed0..1f0b682 100644
--- a/assets/css/settings.scss
+++ b/assets/css/settings.scss
@@ -6,15 +6,15 @@ $text: #e5dfd5;
 $text2: #ada9a1;
 $mutedtext: #78756f;
 
-.bg {
-  width: 750px;
-  height: 474px;
+main {
+  width: 100vw;
+  height: 100vh;
   background-color: $primary;
   border: 1px solid $divider;
+  display: flex;
+  flex-direction: column;
   border-radius: 12px;
-  z-index: -1;
-  position: fixed;
-  outline: none;
+  justify-content: space-between;
 }
 
 .back {
@@ -42,6 +42,7 @@ p {
 
 .settings-container {
   width: 100%;
+  height: 100%;
   margin-top: 26px;
   position: relative;
   font-size: 12px;
@@ -59,7 +60,7 @@ p {
       display: flex;
       flex-direction: column;
       gap: 16px;
-      
+
       p {
         font-family: SFRoundedSemiBold;
         color: $text2;
@@ -144,7 +145,7 @@ p {
 
 .top-bar {
   width: 100%;
-  height: 56px;
+  min-height: 56px;
   border-bottom: 1px solid $divider;
 }
 
diff --git a/pages/settings.vue b/pages/settings.vue
index 2c0b080..654fcfb 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,30 +1,11 @@
 <template>
-  <div class="bg">
+  <main>
     <div class="top-bar">
       <NuxtLink to="/" class="back">
         <img src="../public/back_arrow.svg" />
         <p>Back</p>
       </NuxtLink>
     </div>
-    <div class="bottom-bar">
-      <div class="left">
-        <img alt="" class="logo" src="../public/logo.png" width="18px" />
-        <p>Qopy</p>
-      </div>
-      <div class="right">
-        <div
-          @click="saveKeybind"
-          class="actions"
-          :class="{ disabled: keybind.length === 0 }">
-          <p>Save</p>
-          <div>
-            <IconsCmd v-if="os === 'macos'" />
-            <IconsCtrl v-if="os === 'linux' || os === 'windows'" />
-            <IconsEnter />
-          </div>
-        </div>
-      </div>
-    </div>
     <div class="settings-container">
       <div class="settings">
         <div class="names">
@@ -82,17 +63,25 @@
         </div>
       </div>
     </div>
-  </div>
+    <BottomBar
+      :primary-action="{
+        text: 'Save',
+        icon: IconsEnter,
+        onClick: saveKeybind,
+        showModifier: true,
+      }" />
+  </main>
 </template>
 
 <script setup lang="ts">
-import { invoke } from "@tauri-apps/api/core";
 import { onMounted, onUnmounted, reactive, ref } from "vue";
 import { platform } from "@tauri-apps/plugin-os";
 import { useRouter } from "vue-router";
 import { KeyValues, KeyLabels } from "../types/keys";
 import { disable, enable } from "@tauri-apps/plugin-autostart";
 import { Key, keyboard } from "wrdu-keyboard";
+import BottomBar from "../components/BottomBar.vue";
+import IconsEnter from "~/components/Icons/Enter.vue";
 
 const activeModifiers = reactive<Set<KeyValues>>(new Set());
 const isKeybindInputFocused = ref(false);