♻️ refactor!: massive refactor

apps/web/components/ui-preferences.tsx

@@ -15,12 +15,22 @@ export function UiPreferences({ compact = false }: { compact?: boolean }) {
 
   return (
     <div className="flex flex-wrap items-center gap-2">
-      <label className={cx("inline-flex items-center rounded border px-2", subtleButtonClass(isDark), wrapperHeight)}>
-        <span className={cx("mr-2 font-semibold opacity-70", textSize)}>{t("ui.locale")}</span>
+      <label
+        className={cx(
+          "inline-flex items-center rounded border px-2",
+          subtleButtonClass(isDark),
+          wrapperHeight,
+        )}
+      >
+        <span className={cx("mr-2 font-semibold opacity-70", textSize)}>
+          {t("ui.locale")}
+        </span>
         <select
           aria-label={t("ui.locale")}
           value={locale}
-          onChange={(event) => setLocale(event.target.value as "en" | "th" | "ja")}
+          onChange={(event) =>
+            setLocale(event.target.value as "en" | "th" | "ja")
+          }
           className={cx(
             "bg-transparent font-semibold outline-none",
             textSize,
@@ -35,13 +45,23 @@ export function UiPreferences({ compact = false }: { compact?: boolean }) {
       <button
         type="button"
         onClick={() => {
-          const next = theme === "light" ? "dark" : theme === "dark" ? "system" : "light";
+          const next =
+            theme === "light" ? "dark" : theme === "dark" ? "system" : "light";
           setTheme(next);
         }}
-        className={cx("rounded border px-3 font-semibold", subtleButtonClass(isDark), wrapperHeight, textSize)}
+        className={cx(
+          "rounded border px-3 font-semibold",
+          subtleButtonClass(isDark),
+          wrapperHeight,
+          textSize,
+        )}
       >
-        {theme === "dark" ? t("ui.darkMode") : theme === "system" ? t("ui.systemMode") : t("ui.lightMode")}
+        {theme === "dark"
+          ? t("ui.darkMode")
+          : theme === "system"
+            ? t("ui.systemMode")
+            : t("ui.lightMode")}
       </button>
     </div>
   );
-}
+}