Redesign page search input area

+ redefine global search input colors
+ redesign settings page
+ move settings text to a strings module
+ add title and description to now playing settings

src/settings/general/extend-width.ts

@@ -1,10 +1,11 @@
 import { Setting, SettingType } from "@/interfaces/settings";
 import useSettingsStore from "@/stores/settings";
+import { appWidthStrings } from "./../strings";
 
 const settings = useSettingsStore;
 
 const extend_to_full_width: Setting = {
-  title: "Extend app to full screen width",
+  title: appWidthStrings.settings.extend,
   type: SettingType.binary,
   source: () => settings().extend_width,
   action: () => settings().toggleExtendWidth(),

src/settings/general/index.ts

@@ -1,13 +1,21 @@
 import { SettingCategory } from "@/interfaces/settings";
+import * as strings from "../strings";
+import extendWidth from "./extend-width";
 import nowPlaying from "./now-playing";
 import sidebarSettings from "./sidebar";
-import extendWidth from "./extend-width";
+
+const npStrings = strings.nowPlayingStrings;
 
 export default {
   title: "General",
   groups: [
     {
-      settings: [...sidebarSettings, ...nowPlaying, ...extendWidth],
+      settings: [...sidebarSettings, ...extendWidth],
+    },
+    {
+      title: npStrings.title,
+      desc: npStrings.desc,
+      settings: [...nowPlaying],
     },
   ],
 } as SettingCategory;

src/settings/general/now-playing.ts

@@ -1,14 +1,14 @@
 import { Setting, SettingType } from "@/interfaces/settings";
 import useSettingsStore from "@/stores/settings";
+import { nowPlayingStrings as data } from "../strings";
 
 const settings = useSettingsStore;
 
-const use_alt_np: Setting = {
-  title: "Use alternate now playing card",
+const disable_np_img: Setting = {
+  title: data.settings.album_art,
   type: SettingType.binary,
-  source: () => settings().use_alt_np,
-  inactive: () => settings().disable_show_alt_np,
-  action: () => settings().toggleUseRightNP(),
+  source: () => settings().use_np_img,
+  action: () => settings().toggleUseNPImg(),
 };
 
-export default [use_alt_np];
+export default [disable_np_img];

src/settings/general/sidebar.ts

@@ -1,10 +1,11 @@
+import { sidebarStrings } from "./../strings";
 import { Setting, SettingType } from "@/interfaces/settings";
 import useSettingsStore from "@/stores/settings";
 
 const settings = useSettingsStore;
 
 const use_sidebar: Setting = {
-  title: "Use right sidebar",
+  title: sidebarStrings.settings.use_sidebar,
   type: SettingType.binary,
   source: () => settings().use_sidebar,
   action: () => settings().toggleDisableSidebar(),

src/settings/strings.ts

@@ -0,0 +1,30 @@
+/**
+ * Settings data strings
+ */
+interface S {
+  title?: string;
+  desc?: string;
+  settings: {
+    [key: string]: string;
+  };
+}
+
+export const nowPlayingStrings = {
+  title: "Now playing",
+  desc: "Settings related to the current song",
+  settings: {
+    album_art: "Show album art on the left sidebar",
+  },
+} as S;
+
+export const appWidthStrings = {
+  settings: {
+    extend: "Extend app to full screen width",
+  },
+} as S;
+
+export const sidebarStrings = <S>{
+  settings: {
+    use_sidebar: "Show right sidebar",
+  },
+};