More ergonomic settings (#34)

Author: kadiryazici

src/components/SettingItem.vue

@@ -36,6 +36,7 @@ defineProps<Props>()
     &-title {
       color: var(--text);
       font-size: 14px;
+      padding-left: 15px;
     }
 
     &-right {

src/pages/SettingsPage.vue

@@ -16,7 +16,6 @@ import { useKey } from '../composables/useKey'
 import { useTauriEvent } from '../composables/useTauriEvent'
 import Separator from '../components/Separator.vue'
 import Tooltip from '../components/Tooltip.vue'
-import { useElementNavigation } from '../composables/useElementNavigation'
 import SlotRef from '../components/SlotRef.vue'
 import MenuItems, { menuItem } from '../components/MenuItems.vue'
 import Popover from '../components/Popover.vue'
@@ -90,14 +89,6 @@ async function handleUpdateShowSystemNotifications(value: boolean) {
   showSystemNotifications.value = value
 }
 
-const container = ref<HTMLElement | null>(null)
-useElementNavigation({
-  target: container,
-  targetQuery: 'button:not(.settings-header-back-button)',
-  navigateNextHotkey: 'down',
-  navigatePreviousHotkey: 'up',
-})
-
 const selectedColorText = computedEager(() => {
   switch (AppStorage.get('colorPreference')) {
     case ColorPreference.System:
@@ -150,7 +141,6 @@ function handleScroll(e: Event) {
 
 <template>
   <div
-    ref="container"
     class="settings"
     @scroll="handleScroll"
   >
@@ -187,7 +177,37 @@ function handleScroll(e: Event) {
         dot
         style="margin-bottom: 20px;"
       >
-        Notifications
+        Appearance
+      </PageHeader>
+
+      <SettingItem title="Theme">
+        <SlotRef>
+          <template #default>
+            <AppButton>
+              {{ selectedColorText }}
+
+              <template #icon>
+                <Icons.ChevronDown />
+              </template>
+            </AppButton>
+          </template>
+
+          <template #ref="{ el }">
+            <Popover
+              :target="el"
+              :wowerlayOptions="{ position: 'bottom-end' }"
+            >
+              <MenuItems :items="selectColorItems" />
+            </Popover>
+          </template>
+        </SlotRef>
+      </SettingItem>
+
+      <PageHeader
+        dot
+        style="margin: 20px 0px;"
+      >
+        System
       </PageHeader>
 
       <SettingItem title="Sounds">
@@ -208,24 +228,6 @@ function handleScroll(e: Event) {
 
       <Separator style="margin: 2px auto" />
 
-      <SettingItem title="Show only participating">
-        <Switch
-          :modelValue="showOnlyParticipating"
-          @update:modelValue="showOnlyParticipating = $event"
-        />
-      </SettingItem>
-
-      <Separator style="margin: 2px auto" />
-
-      <SettingItem title="Show read notifications">
-        <Switch
-          :modelValue="showReadNotifications"
-          @update:modelValue="showReadNotifications = $event"
-        />
-      </SettingItem>
-
-      <Separator style="margin: 2px auto" />
-
       <SettingItem title="Show system notifications">
         <Switch
           :modelValue="showSystemNotifications"
@@ -237,30 +239,23 @@ function handleScroll(e: Event) {
         dot
         style="margin: 20px 0px;"
       >
-        Appearance
+        Notifications
       </PageHeader>
 
-      <SettingItem title="Theme">
-        <SlotRef>
-          <template #default>
-            <AppButton>
-              {{ selectedColorText }}
+      <SettingItem title="Show only participating">
+        <Switch
+          :modelValue="showOnlyParticipating"
+          @update:modelValue="showOnlyParticipating = $event"
+        />
+      </SettingItem>
 
-              <template #icon>
-                <Icons.ChevronDown />
-              </template>
-            </AppButton>
-          </template>
+      <Separator style="margin: 2px auto" />
 
-          <template #ref="{ el }">
-            <Popover
-              :target="el"
-              :wowerlayOptions="{ position: 'bottom-end' }"
-            >
-              <MenuItems :items="selectColorItems" />
-            </Popover>
-          </template>
-        </SlotRef>
+      <SettingItem title="Show read notifications">
+        <Switch
+          :modelValue="showReadNotifications"
+          @update:modelValue="showReadNotifications = $event"
+        />
       </SettingItem>
     </div>
   </div>