feat: new settings ui

assets/css/settings.scss

@@ -36,49 +36,116 @@ $mutedtext: #78756f;
   }
 }
 
-.keybind-container {
+p {
-  display: flex;
+  font-family: SFRoundedMedium;
-  flex-direction: column;
+}
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-  gap: 6px;
-  z-index: -1;
 
-  .title {
+.settings-container {
-    font-size: 20px;
+  width: 100%;
-    font-weight: 800;
+  margin-top: 26px;
-  }
+  position: relative;
+  font-size: 12px;
+  font-family: SFRoundedMedium;
 
-  .keybind-input {
+  .settings {
-    padding: 6px;
+    position: absolute;
-    border: 1px solid $divider;
+    left: 50%;
-    color: $text2;
+    transform: translateX(-50%);
+    margin-left: -26px;
     display: flex;
-    border-radius: 13px;
+    gap: 24px;
-    outline: none;
-    gap: 6px;
 
-    .key {
+    .names {
-      color: $text2;
+      display: flex;
-      font-family: SFRoundedMedium;
+      flex-direction: column;
-      background-color: $divider;
+      gap: 16px;
-      padding: 6px 8px;
+
-      border-radius: 8px;
+      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;
+      }
     }
   }
 
-  .keybind-input:focus {
+  .checkmark {
-    border: 1px solid rgba(255, 255, 255, 0.2);
+    height: 14px;
+    width: 14px;
+    position: absolute;
+    opacity: 0;
+    transition: opacity 0.2s;
   }
 
-  &.empty-keybind {
+  p {
-    .keybind-input {
+    color: $text2;
-      border-color: rgba(255, 82, 82, 0.298);
-    }
   }
 }
 
+.keybind-input {
+  width: min-content;
+  white-space: nowrap;
+  padding: 6px;
+  border: 1px solid $divider;
+  color: $text2;
+  display: flex;
+  border-radius: 10px;
+  outline: none;
+  gap: 4px;
+
+  .key {
+    color: $text2;
+    font-family: SFRoundedMedium;
+    background-color: $divider;
+    padding: 2px 6px;
+    border-radius: 6px;
+    font-size: 14px;
+  }
+}
+
+.keybind-input:focus {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.empty-keybind {
+  border-color: rgba(255, 82, 82, 0.298);
+}
+
+.top-bar {
+  width: 100%;
+  height: 56px;
+  border-bottom: 1px solid $divider;
+}
+
 .bottom-bar {
   height: 40px;
   width: calc(100vw - 2px);
@@ -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">
-    <NuxtLink to="/" class="back">
+    <div class="top-bar">
-      <img src="../public/back_arrow.svg" />
+      <NuxtLink to="/" class="back">
-      <p>Back</p>
+        <img src="../public/back_arrow.svg" />
-    </NuxtLink>
+        <p>Back</p>
+      </NuxtLink>
+    </div>
     <div class="bottom-bar">
       <div class="left">
         <img alt="" class="logo" src="../public/logo.png" width="18px" />
@@ -26,26 +28,61 @@
         </div>
       </div>
     </div>
-    <div
+    <div class="settings-container">
-      class="keybind-container"
+      <div class="settings">
-      :class="{ 'empty-keybind': showEmptyKeybindError }">
+        <div class="names">
-      <h2 class="title">Record a new Hotkey</h2>
+          <p style="line-height: 14px">Startup</p>
-      <div
+          <p style="line-height: 34px">Qopy Hotkey</p>
-        @blur="onBlur"
+        </div>
-        @focus="onFocus"
+        <div class="actions">
-        class="keybind-input"
+          <div class="launch">
-        ref="keybindInput"
+            <input
-        tabindex="0">
+              type="checkbox"
-        <span class="key" v-if="keybind.length === 0">Click here</span>
+              id="launch"
-        <template v-else>
+              v-model="autostart"
-          <span
+              @change="toggleAutostart" />
-            :key="index"
+            <label for="launch" class="checkmark">
-            class="key"
+              <svg
-            :class="{ modifier: isModifier(key) }"
+                width="14"
-            v-for="(key, index) in keybind">
+                height="14"
-            {{ keyToLabel(key) }}
+                viewBox="0 0 14 14"
-          </span>
+                fill="none"
-        </template>
+                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"
+            :class="{ 'empty-keybind': showEmptyKeybindError }">
+            <span class="key" v-if="keybind.length === 0">Click here</span>
+            <template v-else>
+              <span
+                :key="index"
+                class="key"
+                :class="{ modifier: isModifier(key) }"
+                v-for="(key, index) in keybind">
+                {{ keyToLabel(key) }}
+              </span>
+            </template>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -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(() => {