diff --git a/packages/settings/src/preferences/definitions.ts b/packages/settings/src/preferences/definitions.ts index 8e82ec684..528ce8aba 100644 --- a/packages/settings/src/preferences/definitions.ts +++ b/packages/settings/src/preferences/definitions.ts @@ -1,14 +1,68 @@ export const userPreferenceDefinitions = [ - { key: "colorScheme", kind: "select", guest: true, mutationGroup: "colorScheme", aliases: ["theme", "dark", "light", "auto"] }, + { + key: "colorScheme", + kind: "select", + guest: true, + mutationGroup: "colorScheme", + aliases: ["theme", "dark", "light", "auto"], + }, { key: "locale", kind: "select", guest: true, mutationGroup: "locale", aliases: ["language", "translation"] }, - { key: "defaultSearchEngineId", kind: "searchEngine", guest: false, mutationGroup: "searchPreferences", aliases: ["search", "search engine"] }, - { key: "openSearchInNewTab", kind: "boolean", guest: false, mutationGroup: "searchPreferences", aliases: ["search", "new tab", "external"] }, - { key: "ddgBangs", kind: "boolean", guest: false, mutationGroup: "searchPreferences", aliases: ["duckduckgo", "bangs", "search"] }, - { key: "firstDayOfWeek", kind: "select", guest: false, mutationGroup: "firstDayOfWeek", aliases: ["calendar", "week", "weekday"] }, - { key: "homeBoardId", kind: "board", guest: false, mutationGroup: "homeBoards", aliases: ["home", "board", "dashboard"] }, - { key: "mobileHomeBoardId", kind: "board", guest: false, mutationGroup: "homeBoards", aliases: ["mobile", "home", "board", "dashboard"] }, - { key: "pingIconsEnabled", kind: "boolean", guest: false, mutationGroup: "pingIconsEnabled", aliases: ["ping", "icon", "status"] }, - { key: "fullPreferencesPage", kind: "link", guest: false, mutationGroup: null, aliases: ["settings", "manage", "profile"] }, + { + key: "defaultSearchEngineId", + kind: "searchEngine", + guest: false, + mutationGroup: "searchPreferences", + aliases: ["search", "search engine"], + }, + { + key: "openSearchInNewTab", + kind: "boolean", + guest: false, + mutationGroup: "searchPreferences", + aliases: ["search", "new tab", "external"], + }, + { + key: "ddgBangs", + kind: "boolean", + guest: false, + mutationGroup: "searchPreferences", + aliases: ["duckduckgo", "bangs", "search"], + }, + { + key: "firstDayOfWeek", + kind: "select", + guest: false, + mutationGroup: "firstDayOfWeek", + aliases: ["calendar", "week", "weekday"], + }, + { + key: "homeBoardId", + kind: "board", + guest: false, + mutationGroup: "homeBoards", + aliases: ["home", "board", "dashboard"], + }, + { + key: "mobileHomeBoardId", + kind: "board", + guest: false, + mutationGroup: "homeBoards", + aliases: ["mobile", "home", "board", "dashboard"], + }, + { + key: "pingIconsEnabled", + kind: "boolean", + guest: false, + mutationGroup: "pingIconsEnabled", + aliases: ["ping", "icon", "status"], + }, + { + key: "fullPreferencesPage", + kind: "link", + guest: false, + mutationGroup: null, + aliases: ["settings", "manage", "profile"], + }, ] as const; export type UserPreferenceDefinition = (typeof userPreferenceDefinitions)[number]; diff --git a/packages/spotlight/src/modes/command/children/preferences/settings-children.tsx b/packages/spotlight/src/modes/command/children/preferences/settings-children.tsx index 095394902..04b4bdb31 100644 --- a/packages/spotlight/src/modes/command/children/preferences/settings-children.tsx +++ b/packages/spotlight/src/modes/command/children/preferences/settings-children.tsx @@ -26,7 +26,17 @@ type SettingsAction = ChildrenAction>; const weekDays = dayjs.weekdays(false); -const BooleanRow = ({ label, Icon, checked, isPending }: { label: string; Icon: TablerIcon; checked: boolean; isPending: boolean }) => ( +const BooleanRow = ({ + label, + Icon, + checked, + isPending, +}: { + label: string; + Icon: TablerIcon; + checked: boolean; + isPending: boolean; +}) => ( @@ -42,7 +52,9 @@ const SelectRow = ({ label, Icon, valueLabel }: { label: string; Icon: TablerIco {label} - {valueLabel} + + {valueLabel} + ); @@ -73,12 +85,15 @@ const useSettingsActions = (_: Record, query: string): Settings return localeConfigurations[val as keyof typeof localeConfigurations]?.name ?? String(val); }, defaultSearchEngineId: () => - searchEnginesQuery.data?.find((e) => e.value === preferences.getPreference("defaultSearchEngineId").value)?.label ?? t("searchEngine.none" as never), + searchEnginesQuery.data?.find((e) => e.value === preferences.getPreference("defaultSearchEngineId").value) + ?.label ?? t("searchEngine.none" as never), firstDayOfWeek: () => weekDays[preferences.getPreference("firstDayOfWeek").value as DayOfWeek] ?? "", homeBoardId: () => - boardsQuery.data?.find((b) => b.id === preferences.getPreference("homeBoardId").value)?.name ?? t("board.none" as never), + boardsQuery.data?.find((b) => b.id === preferences.getPreference("homeBoardId").value)?.name ?? + t("board.none" as never), mobileHomeBoardId: () => - boardsQuery.data?.find((b) => b.id === preferences.getPreference("mobileHomeBoardId").value)?.name ?? t("board.none" as never), + boardsQuery.data?.find((b) => b.id === preferences.getPreference("mobileHomeBoardId").value)?.name ?? + t("board.none" as never), }; return visiblePreferenceDefinitions(isAuthenticated) @@ -93,7 +108,9 @@ const useSettingsActions = (_: Record, query: string): Settings const pref = preferences.getPreference(definition.key); return { key: definition.key, - Component: () => , + Component: () => ( + + ), useInteraction: interaction.javaScript(() => ({ onSelect: pref.isPending ? () => undefined : () => pref.setValue(!(pref.value as boolean) as never), closeSpotlightOnTrigger: false, @@ -114,7 +131,9 @@ const useSettingsActions = (_: Record, query: string): Settings if (!children) return null; return { key: definition.key, - Component: () => , + Component: () => ( + + ), useInteraction: interaction.children(children), }; } @@ -131,7 +150,9 @@ export const settingsChildrenOptions = createChildrenOptions {t("title")} - {t("children.detail.backHint")} + + {t("children.detail.backHint")} + ); }, diff --git a/packages/spotlight/src/modes/preferences/groups.tsx b/packages/spotlight/src/modes/preferences/groups.tsx index 37c6bc922..33b229ef3 100644 --- a/packages/spotlight/src/modes/preferences/groups.tsx +++ b/packages/spotlight/src/modes/preferences/groups.tsx @@ -10,9 +10,7 @@ import { createGroup } from "../../lib/group"; import { preferenceChildrenOptionsByKey, preferenceIcons } from "../../preferences/preference-registry"; import { settingsChildrenOptions } from "../command/children/preferences/settings-children"; -type PreferencesGroupOption = - | { key: "settings"; preferenceKey: null } - | { key: string; preferenceKey: string }; +type PreferencesGroupOption = { key: "settings"; preferenceKey: null } | { key: string; preferenceKey: string }; const settingsOption: PreferencesGroupOption = { key: "settings", preferenceKey: null }; diff --git a/packages/spotlight/src/preferences/use-user-preference.ts b/packages/spotlight/src/preferences/use-user-preference.ts index cf6c78f77..f2ea49d13 100644 --- a/packages/spotlight/src/preferences/use-user-preference.ts +++ b/packages/spotlight/src/preferences/use-user-preference.ts @@ -10,10 +10,7 @@ import { useSession } from "@homarr/auth/client"; import type { ColorScheme } from "@homarr/definitions"; import { showErrorNotification } from "@homarr/notifications"; import type { SettingsContextProps } from "@homarr/settings/creator"; -import { - userPreferenceDefinitions, - userPreferenceDefinitionByKey, -} from "@homarr/settings"; +import { userPreferenceDefinitions, userPreferenceDefinitionByKey } from "@homarr/settings"; import type { UserPreferenceKey } from "@homarr/settings"; import { useSettings } from "@homarr/settings"; import { useChangeLocale, useCurrentLocale, useI18n } from "@homarr/translation/client"; @@ -77,7 +74,11 @@ export const useUserPreferences = () => { const userId = session?.user.id; const pendingRef = useRef>({}); - useSyncExternalStore(subscribeOptimistic, () => optimisticVersion, () => optimisticVersion); + useSyncExternalStore( + subscribeOptimistic, + () => optimisticVersion, + () => optimisticVersion, + ); const refresh = () => router.refresh(); @@ -87,9 +88,7 @@ export const useUserPreferences = () => { const pingMutation = clientApi.user.changePingIconsEnabled.useMutation({ onSuccess: refresh }); const getEffective = (key: UserPreferenceKey): unknown => - key in optimisticRef.current - ? optimisticRef.current[key] - : settingsRef.current[key as keyof SettingsContextProps]; + key in optimisticRef.current ? optimisticRef.current[key] : settingsRef.current[key as keyof SettingsContextProps]; const pick = (field: UserPreferenceKey, changedKey: UserPreferenceKey, value: unknown) => field === changedKey ? value : getEffective(field); @@ -108,10 +107,8 @@ export const useUserPreferences = () => { homeBoardId: pick("homeBoardId", key, value) as string | null, mobileHomeBoardId: pick("mobileHomeBoardId", key, value) as string | null, }), - firstDayOfWeek: (_key, value) => - firstDayMutation.mutateAsync({ id: userId!, firstDayOfWeek: value as DayOfWeek }), - pingIconsEnabled: (_key, value) => - pingMutation.mutateAsync({ id: userId!, pingIconsEnabled: value as boolean }), + firstDayOfWeek: (_key, value) => firstDayMutation.mutateAsync({ id: userId!, firstDayOfWeek: value as DayOfWeek }), + pingIconsEnabled: (_key, value) => pingMutation.mutateAsync({ id: userId!, pingIconsEnabled: value as boolean }), }; const groupPending: Record = {