Implement fuzzy page search using fuse.js (#86)

src/components/SettingsView/Components/Switch.vue

@@ -5,8 +5,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-
 defineProps<{
   state: boolean;
 }>();
@@ -14,16 +12,16 @@ defineProps<{
 
 <style lang="scss">
 .switch {
-  height: 2rem;
+  height: 1.5rem;
   background-color: $gray;
-  width: 3.75rem;
+  width: 2.5rem;
   padding: $smaller;
   position: relative;
   transition: all 0.25s ease;
 
   .circle {
     transition: all 0.25s ease;
-    height: 1.5rem;
+    height: 1rem;
     aspect-ratio: 1;
     background-color: $gray1;
     position: absolute;
@@ -37,7 +35,7 @@ defineProps<{
 
   .circle {
     background-color: $white;
-    left: calc((100% - ($smaller + 1.5rem)));
+    left: calc((100% - ($smaller + 1rem)));
   }
 }
 </style>

src/components/SettingsView/Content.vue

@@ -20,7 +20,7 @@ defineProps<{
 <style lang="scss">
 .settingscontent {
   width: 100%;
-  max-width: 40rem;
+  // max-width: 40rem;
   margin: 0 auto;
 }
 </style>

src/components/SettingsView/Group.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="settingsgroup">
-    <div>
-      <h4 v-if="group.title">{{ group.title }}</h4>
+    <div v-if="group.name || group.desc">
+      <h4 v-if="group.name">{{ group.name }}</h4>
       <div class="desc" v-if="group.desc">{{ group.desc }}</div>
     </div>
-    <div class="setting rounded bg-primary pad-lg">
+    <div class="setting rounded border pad-lg">
       <div
         v-for="(setting, index) in group.settings"
         :key="index"
         :class="{ inactive: setting.inactive && setting.inactive() }"
       >
-        <div class="title">
+        <div class="title ellip" @click="setting.action()">
           {{ setting.title }}
         </div>
         <div class="options">
@@ -69,6 +69,7 @@ defineProps<{
 
     .title {
       margin: auto 0;
+      user-select: none;
     }
   }
 }

src/components/SettingsView/Nav.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="settingsnav">
-    <div class="buttongroup rounded bg-primary">
+    <div class="buttongroup rounded-sm bg-primary">
       <button v-for="(group, index) in settingGroups" :key="index">
         {{ group.title }}
       </button>