Style and localize the preference section of settings

src/assets/locales/en.json

@@ -408,10 +408,13 @@
         "urlPlaceholder": "https://"
       }
     },
-    "locale": {
+    "preferences": {
       "language": "Application language",
       "languageDescription": "Language applied to the entire application.",
-      "title": "Locale"
+      "title": "Preferences",
+      "thumbnail": "Generate thumbnails",
+      "thumbnailDescription": "Most of the time, videos don't have thumbnails. You can enable this setting to generate them on the fly but they can make your video slower.",
+      "thumbnailLabel": "Generate thumbnails"
     },
     "reset": "Reset",
     "save": "Save",

src/components/buttons/Toggle.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 
-export function Toggle(props: { onClick: () => void; enabled?: boolean }) {
+export function Toggle(props: { onClick?: () => void; enabled?: boolean }) {
   return (
     <button
       type="button"

src/pages/parts/settings/PreferencesPart.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from "react-i18next";
 
+import { Toggle } from "@/components/buttons/Toggle";
 import { FlagIcon } from "@/components/FlagIcon";
 import { Dropdown } from "@/components/form/Dropdown";
 import { Heading1 } from "@/components/utils/Text";
@@ -28,22 +29,39 @@ export function PreferencesPart(props: {
   );
 
   return (
-    <div>
+    <div className="space-y-12">
-      <Heading1 border>{t("settings.locale.title")}</Heading1>
+      <Heading1 border>{t("settings.preferences.title")}</Heading1>
-      <p className="text-white font-bold mb-3">
+      <div>
-        {t("settings.locale.language")}
+        <p className="text-white font-bold mb-3">
-      </p>
+          {t("settings.preferences.language")}
-      <p className="max-w-[20rem] font-medium">
+        </p>
-        {t("settings.locale.languageDescription")}
+        <p className="max-w-[20rem] font-medium">
-      </p>
+          {t("settings.preferences.languageDescription")}
-      <Dropdown
+        </p>
-        options={options}
+        <Dropdown
-        selectedItem={selected || options[0]}
+          options={options}
-        setSelectedItem={(opt) => props.setLanguage(opt.id)}
+          selectedItem={selected || options[0]}
-      />
+          setSelectedItem={(opt) => props.setLanguage(opt.id)}
-      <p onClick={() => props.setEnableThumbnails(!props.enableThumbnails)}>
+        />
-        thumbnails: {props.enableThumbnails.toString()}
+      </div>
-      </p>
+
+      <div>
+        <p className="text-white font-bold mb-3">
+          {t("settings.preferences.thumbnail")}
+        </p>
+        <p className="max-w-[25rem] font-medium">
+          {t("settings.preferences.thumbnailDescription")}
+        </p>
+        <div
+          onClick={() => props.setEnableThumbnails(!props.enableThumbnails)}
+          className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg"
+        >
+          <Toggle enabled={props.enableThumbnails} />
+          <p className="flex-1 text-white font-bold">
+            {t("settings.preferences.thumbnailLabel")}
+          </p>
+        </div>
+      </div>
     </div>
   );
 }

src/pages/parts/settings/SidebarPart.tsx

@@ -44,7 +44,7 @@ export function SidebarPart() {
       icon: Icons.USER,
     },
     {
-      textKey: "settings.locale.title",
+      textKey: "settings.preferences.title",
       id: "settings-preferences",
       icon: Icons.SETTINGS,
     },