From eeab438ea72f84d6eb29e83e64d849f9083c7590 Mon Sep 17 00:00:00 2001
From: Pandipipas <62224708+Pandipipas@users.noreply.github.com>
Date: Wed, 25 Feb 2026 14:29:04 +0100
Subject: [PATCH] Reorganize settings view into single sectioned card

---
 src/dashboard/scoreko-dev/views/Settings.vue | 142 ++++++++++---------
 1 file changed, 74 insertions(+), 68 deletions(-)

diff --git a/src/dashboard/scoreko-dev/views/Settings.vue b/src/dashboard/scoreko-dev/views/Settings.vue
index 5da11ab..8c09b96 100644
--- a/src/dashboard/scoreko-dev/views/Settings.vue
+++ b/src/dashboard/scoreko-dev/views/Settings.vue
@@ -90,77 +90,83 @@ useHead(() => ({ title: t('settingsTitle') }));
       {{ t('settingsDescription') }}
     </div>
 
-    <div class="row q-col-gutter-lg items-start">
-      <div class="col-12 col-md-4">
-        <QCard
-          flat
-          bordered
-          class="q-pa-md"
-        >
-          <QCardSection class="q-pa-none">
-            <QSelect
-              v-model="selectedLanguage"
-              emit-value
-              map-options
-              :label="t('settingsLanguageLabel')"
-              :options="languageOptions"
-            />
-            <div class="text-caption text-grey-5 q-mt-sm">
-              {{ t('settingsLanguageHint') }}
-            </div>
-          </QCardSection>
-        </QCard>
-      </div>
+    <QCard
+      flat
+      bordered
+      class="q-pa-md settings-card"
+    >
+      <QCardSection class="q-pa-none q-mb-lg">
+        <div class="text-subtitle1 q-mb-sm">
+          {{ t('settingsLanguageLabel') }}
+        </div>
 
-      <div class="col-12 col-md-8">
-        <QCard
-          flat
-          bordered
-          class="q-pa-md"
-        >
-          <QCardSection class="q-pa-none">
-            <div class="text-subtitle1 q-mb-md">
-              {{ t('settingsShortcutTitle') }}
-            </div>
+        <QSelect
+          v-model="selectedLanguage"
+          emit-value
+          map-options
+          :label="t('settingsLanguageLabel')"
+          :options="languageOptions"
+        />
 
-            <div class="text-caption text-grey-5 q-mb-md">
-              {{ t('settingsShortcutDescription') }}
-            </div>
+        <div class="text-caption text-grey-5 q-mt-sm">
+          {{ t('settingsLanguageHint') }}
+        </div>
+      </QCardSection>
 
-            <div class="column q-gutter-md">
-              <QInput
-                v-for="field in shortcutFields"
-                :key="field.action"
-                :model-value="shortcutSettingsStore.shortcuts[field.action]"
-                readonly
-                :label="field.label"
-              >
-                <template #append>
-                  <QBtn
-                    flat
-                    round
-                    dense
-                    :icon="recordingAction === field.action ? 'stop_circle' : 'keyboard'"
-                    :color="recordingAction === field.action ? 'negative' : 'primary'"
-                    @click="startRecording(field.action)"
-                  />
-                </template>
-                <template #hint>
-                  {{ recordingAction === field.action ? t('settingsShortcutRecordingHint') : field.hint }}
-                </template>
-              </QInput>
-            </div>
+      <QSeparator class="q-mb-lg" />
 
-            <QBtn
-              class="q-mt-md"
-              color="primary"
-              outline
-              :label="t('settingsShortcutReset')"
-              @click="shortcutSettingsStore.resetShortcuts"
-            />
-          </QCardSection>
-        </QCard>
-      </div>
-    </div>
+      <QCardSection class="q-pa-none">
+        <div class="row items-center justify-between q-mb-sm">
+          <div class="text-subtitle1">
+            {{ t('settingsShortcutTitle') }}
+          </div>
+          <QBtn
+            round
+            dense
+            flat
+            color="primary"
+            icon="restart_alt"
+            :aria-label="t('settingsShortcutReset')"
+            @click="shortcutSettingsStore.resetShortcuts"
+          >
+            <QTooltip>{{ t('settingsShortcutReset') }}</QTooltip>
+          </QBtn>
+        </div>
+
+        <div class="text-caption text-grey-5 q-mb-md">
+          {{ t('settingsShortcutDescription') }}
+        </div>
+
+        <div class="column q-gutter-md">
+          <QInput
+            v-for="field in shortcutFields"
+            :key="field.action"
+            :model-value="shortcutSettingsStore.shortcuts[field.action]"
+            readonly
+            :label="field.label"
+          >
+            <template #append>
+              <QBtn
+                flat
+                round
+                dense
+                :icon="recordingAction === field.action ? 'stop_circle' : 'keyboard'"
+                :color="recordingAction === field.action ? 'negative' : 'primary'"
+                @click="startRecording(field.action)"
+              />
+            </template>
+            <template #hint>
+              {{ recordingAction === field.action ? t('settingsShortcutRecordingHint') : field.hint }}
+            </template>
+          </QInput>
+        </div>
+      </QCardSection>
+    </QCard>
   </QPage>
 </template>
+
+<style scoped>
+.settings-card {
+  max-width: 720px;
+}
+</style>