feat: add accent color block

Author: MatteoGabriele

app/components/AccentColorPicker.vue

@@ -5,7 +5,7 @@ const { accentColors, selectedAccentColor, setAccentColor } = useAccentColor()
 </script>
 
 <template>
-  <div role="listbox" aria-label="Accent colors" class="flex items-center justify-between">
+  <div role="listbox" aria-label="Accent colors" class="flex items-center gap-4">
     <button
       v-for="color in accentColors"
       :key="color.id"

app/pages/settings.vue

@@ -120,8 +120,13 @@ useSeoMeta({
         </a>
       </div>
 
-      <div class="p-3 border-t border-border">
-        <AccentColorPicker />
+      <div class="pt-2 mt-2 border-t border-border">
+        <h2 class="text-xs text-fg-subtle uppercase tracking-wider px-2 py-1">
+          {{ $t('settings.accent_colors') }}
+        </h2>
+        <div class="px-2 py-2">
+          <AccentColorPicker />
+        </div>
       </div>
     </div>
   </main>

i18n/locales/en.json

@@ -48,7 +48,8 @@
     "theme_dark": "Dark",
     "theme_system": "System",
     "language": "Language",
-    "help_translate": "Help translate npmx"
+    "help_translate": "Help translate npmx",
+    "accent_colors": "Accent colors"
   },
   "common": {
     "loading": "Loading...",

i18n/locales/it.json

@@ -37,7 +37,8 @@
     "relative_dates": "Date relative",
     "include_types": "Includi {'@'}types durante l'installazione",
     "language": "Lingua",
-    "help_translate": "Aiuta a tradurre npmx"
+    "help_translate": "Aiuta a tradurre npmx",
+    "accent_colors": "Colori di accento"
   },
   "common": {
     "loading": "Caricando...",