feat: new settings ui

assets/css/settings.scss

@@ -36,35 +36,99 @@ $mutedtext: #78756f;
   }
 }
 
-.keybind-container {
+p {
+  font-family: SFRoundedMedium;
+}
+
+.settings-container {
+  width: 100%;
+  margin-top: 26px;
+  position: relative;
+  font-size: 12px;
+  font-family: SFRoundedMedium;
+
+  .settings {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-left: -26px;
+    display: flex;
+    gap: 24px;
+
+    .names {
       display: flex;
       flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  gap: 6px;
-  z-index: -1;
+      gap: 16px;
 
-  .title {
-    font-size: 20px;
-    font-weight: 800;
+      p {
+        font-family: SFRoundedSemiBold;
+        color: $text2;
+      }
+    }
+
+    .actions {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      color: $mutedtext;
+    }
+  }
+}
+
+.launch {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  input[type="checkbox"] {
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    background-color: transparent;
+    border-radius: 5px;
+    border: 1px solid $mutedtext;
+    position: relative;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:checked {
+      ~ .checkmark {
+        opacity: 1;
+      }
+    }
+  }
+
+  .checkmark {
+    height: 14px;
+    width: 14px;
+    position: absolute;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  p {
+    color: $text2;
+  }
 }
 
 .keybind-input {
+  width: min-content;
+  white-space: nowrap;
   padding: 6px;
   border: 1px solid $divider;
   color: $text2;
   display: flex;
-    border-radius: 13px;
+  border-radius: 10px;
   outline: none;
-    gap: 6px;
+  gap: 4px;
 
   .key {
     color: $text2;
     font-family: SFRoundedMedium;
     background-color: $divider;
-      padding: 6px 8px;
-      border-radius: 8px;
+    padding: 2px 6px;
+    border-radius: 6px;
+    font-size: 14px;
   }
 }
 
@@ -72,11 +136,14 @@ $mutedtext: #78756f;
   border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
-  &.empty-keybind {
-    .keybind-input {
+.empty-keybind {
   border-color: rgba(255, 82, 82, 0.298);
 }
-  }
+
+.top-bar {
+  width: 100%;
+  height: 56px;
+  border-bottom: 1px solid $divider;
 }
 
 .bottom-bar {
@@ -144,6 +211,10 @@ $mutedtext: #78756f;
       transition: all 0.2s;
       cursor: pointer;
 
+      p {
+        color: $text;
+      }
+
       &.disabled {
         pointer-events: none;
         opacity: 0.5;

pages/settings.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="bg">
+    <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" />
@@ -26,16 +28,49 @@
         </div>
       </div>
     </div>
-    <div
-      class="keybind-container"
-      :class="{ 'empty-keybind': showEmptyKeybindError }">
-      <h2 class="title">Record a new Hotkey</h2>
+    <div class="settings-container">
+      <div class="settings">
+        <div class="names">
+          <p style="line-height: 14px">Startup</p>
+          <p style="line-height: 34px">Qopy Hotkey</p>
+        </div>
+        <div class="actions">
+          <div class="launch">
+            <input
+              type="checkbox"
+              id="launch"
+              v-model="autostart"
+              @change="toggleAutostart" />
+            <label for="launch" class="checkmark">
+              <svg
+                width="14"
+                height="14"
+                viewBox="0 0 14 14"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg">
+                <g>
+                  <rect width="14" height="14" />
+                  <path
+                    id="Path"
+                    d="M0 2.00696L2.25015 4.25L6 0"
+                    fill="none"
+                    stroke-width="1.5"
+                    stroke="#E5DFD5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    transform="translate(4 5)" />
+                </g>
+              </svg>
+            </label>
+            <p for="launch">Launch Qopy at login</p>
+          </div>
           <div
             @blur="onBlur"
             @focus="onFocus"
             class="keybind-input"
             ref="keybindInput"
-        tabindex="0">
+            tabindex="0"
+            :class="{ 'empty-keybind': showEmptyKeybindError }">
             <span class="key" v-if="keybind.length === 0">Click here</span>
             <template v-else>
               <span
@@ -49,6 +84,8 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -58,6 +95,7 @@ import { platform } from "@tauri-apps/plugin-os";
 import { useRouter } from "vue-router";
 import { Key } from "wrdu-keyboard/key";
 import { KeyValues, KeyLabels } from "../types/keys";
+import { disable, enable } from "@tauri-apps/plugin-autostart";
 
 const activeModifiers = reactive<Set<KeyValues>>(new Set());
 const isKeybindInputFocused = ref(false);
@@ -68,6 +106,8 @@ const os = ref("");
 const router = useRouter();
 const keyboard = useKeyboard();
 const showEmptyKeybindError = ref(false);
+const autostart = ref(false);
+const { $settings } = useNuxtApp();
 
 const modifierKeySet = new Set([
   KeyValues.AltLeft,
@@ -130,16 +170,25 @@ const onKeyDown = (event: KeyboardEvent) => {
 
 const saveKeybind = async () => {
   if (keybind.value.length > 0) {
-    await invoke("save_keybind", { keybind: keybind.value });
+    await $settings.saveSetting("keybind", JSON.stringify(keybind.value));
     router.push("/");
   } else {
     showEmptyKeybindError.value = true;
   }
 };
 
+const toggleAutostart = async () => {
+  if (autostart.value === true) {
+    await enable();
+  } else {
+    await disable();
+  }
+  await $settings.saveSetting("autostart", autostart.value ? "true" : "false");
+};
+
 os.value = platform();
 
-onMounted(() => {
+onMounted(async () => {
   keyboard.down([Key.All], (event) => {
     if (isKeybindInputFocused.value) {
       onKeyDown(event);
@@ -183,6 +232,8 @@ onMounted(() => {
       });
       break;
   }
+
+  autostart.value = (await $settings.getSetting("autostart")) === "true";
 });
 
 onUnmounted(() => {