1115 行
32 KiB
TypeScript
1115 行
32 KiB
TypeScript
import { CATEGORIES } from '@/consts'
|
|
import { apiGet, apiPatch } from '@/lib/api'
|
|
import { DEFAULT_KEY_BINDINGS, normaliseKeyBinding } from '@/lib/keyboardShortcuts'
|
|
|
|
import type { Category, FetchPostsOrder, FetchTagsOrder } from '@/types'
|
|
import type { KeyBinding, ShortcutActionId } from '@/lib/keyboardShortcuts'
|
|
|
|
export type UserSettings = {
|
|
theme: 'system' | 'light' | 'dark'
|
|
autoFetchTitle: 'auto' | 'manual' | 'off'
|
|
autoFetchThumbnail: 'auto' | 'manual' | 'off'
|
|
wikiEditorMode: 'split' | 'write' | 'preview' }
|
|
|
|
export type ThemeTagColours = Record<Category, string>
|
|
export type BuiltinThemeId = 'light' | 'dark'
|
|
export type ThemeId = BuiltinThemeId | `custom:${ string }`
|
|
export type ActiveThemeId = ThemeId | 'system'
|
|
export type ResolvedTheme = 'light' | 'dark'
|
|
export type ThemeTokens = {
|
|
background: string
|
|
foreground: string
|
|
card: string
|
|
cardForeground: string
|
|
popover: string
|
|
popoverForeground: string
|
|
primary: string
|
|
primaryForeground: string
|
|
secondary: string
|
|
secondaryForeground: string
|
|
muted: string
|
|
mutedForeground: string
|
|
accent: string
|
|
accentForeground: string
|
|
destructive: string
|
|
destructiveForeground: string
|
|
border: string
|
|
input: string
|
|
ring: string
|
|
link: string
|
|
tagColours: ThemeTagColours
|
|
}
|
|
export type ClientTheme = {
|
|
id: ThemeId
|
|
name: string
|
|
builtin: boolean
|
|
baseTheme: BuiltinThemeId
|
|
tokens: ThemeTokens }
|
|
export type CustomClientTheme =
|
|
ClientTheme & { builtin: false }
|
|
|
|
export type TheatreLayoutMode = 'threeColumns' | 'tagsBottom' | 'commentsBottom'
|
|
export type TheatreTagFlow = 'vertical' | 'horizontal'
|
|
export type GekanatorBackgroundMotionMode = 'on' | 'calm' | 'off'
|
|
export type ClientAnimationMode = 'normal' | 'reduced' | 'off'
|
|
export type ClientEmbedAutoLoadMode = 'auto' | 'manual' | 'off'
|
|
export type ClientThumbnailMode = 'normal' | 'light' | 'off'
|
|
export type ClientPaneBreakpoint = 'desktop' | 'tablet'
|
|
export type ClientListKey = 'postList' | 'postSearch' | 'tagList'
|
|
export type ClientListLimit = 20 | 50 | 100
|
|
|
|
type ClientPaneSettings = {
|
|
widthPxByBreakpoint?: Partial<Record<ClientPaneBreakpoint, number>>
|
|
collapsed?: boolean }
|
|
|
|
type ClientListSettings = {
|
|
limit?: ClientListLimit
|
|
order?: string }
|
|
|
|
export type ClientKeyboardSettings = {
|
|
enabled?: boolean
|
|
bindings?: Partial<Record<ShortcutActionId, KeyBinding | null>>
|
|
}
|
|
|
|
export type ClientAppearanceSettings = {
|
|
activeThemeId?: ActiveThemeId
|
|
customThemes?: Record<string, CustomClientTheme>
|
|
// Legacy fields kept for migration from the earlier appearance model.
|
|
theme?: UserSettings['theme']
|
|
tagColours?: Partial<ThemeTagColours> }
|
|
|
|
export type ClientBehaviorSettings = {
|
|
animation?: ClientAnimationMode
|
|
embedAutoLoad?: ClientEmbedAutoLoadMode
|
|
thumbnailMode?: ClientThumbnailMode
|
|
}
|
|
|
|
// DB-backed settings. At present only `theme` is surfaced in `/users/settings`.
|
|
// The remaining fields are retained for existing backend work and are not wired
|
|
// to the common settings UI yet.
|
|
export const DEFAULT_USER_SETTINGS: UserSettings = {
|
|
theme: 'system',
|
|
autoFetchTitle: 'manual',
|
|
autoFetchThumbnail: 'manual',
|
|
wikiEditorMode: 'split' }
|
|
|
|
// Browser-local settings only. These are device or screen specific.
|
|
export type ClientSettings = {
|
|
appearance?: ClientAppearanceSettings
|
|
behavior?: ClientBehaviorSettings
|
|
keyboard?: ClientKeyboardSettings
|
|
panes?: Record<string, ClientPaneSettings>
|
|
lists?: Partial<Record<ClientListKey, ClientListSettings>>
|
|
theatre?: {
|
|
layoutMode?: TheatreLayoutMode
|
|
tagFlow?: TheatreTagFlow
|
|
}
|
|
gekanator?: {
|
|
backgroundMotion?: GekanatorBackgroundMotionMode
|
|
}
|
|
reducedMotion?: string
|
|
embedAutoLoad?: string
|
|
thumbnailMode?: string }
|
|
|
|
export const CLIENT_SETTINGS_STORAGE_KEY = 'btrc_hub.client_settings'
|
|
export const CLIENT_SETTINGS_EVENT = 'btrc-hub:client-settings-change'
|
|
export const THEME_OPTIONS = ['system', 'light', 'dark'] as const
|
|
export const LIST_LIMIT_OPTIONS = [20, 50, 100] as const
|
|
export const POST_LIST_ORDER_OPTIONS = [
|
|
'title:asc',
|
|
'title:desc',
|
|
'url:asc',
|
|
'url:desc',
|
|
'original_created_at:asc',
|
|
'original_created_at:desc',
|
|
'created_at:asc',
|
|
'created_at:desc',
|
|
'updated_at:asc',
|
|
'updated_at:desc',
|
|
] as const satisfies readonly FetchPostsOrder[]
|
|
export const TAG_LIST_ORDER_OPTIONS = [
|
|
'name:asc',
|
|
'name:desc',
|
|
'category:asc',
|
|
'category:desc',
|
|
'post_count:asc',
|
|
'post_count:desc',
|
|
'created_at:asc',
|
|
'created_at:desc',
|
|
'updated_at:asc',
|
|
'updated_at:desc',
|
|
] as const satisfies readonly FetchTagsOrder[]
|
|
export const DEFAULT_POST_LIST_LIMIT: ClientListLimit = 20
|
|
export const DEFAULT_POST_LIST_ORDER: FetchPostsOrder = 'original_created_at:desc'
|
|
export const DEFAULT_TAG_LIST_ORDER: FetchTagsOrder = 'post_count:desc'
|
|
export const DEFAULT_LIGHT_THEME_TAG_COLOURS: ThemeTagColours = {
|
|
deerjikist: '#9f1239',
|
|
meme: '#6b21a8',
|
|
character: '#4d7c0f',
|
|
general: '#155e75',
|
|
material: '#c2410c',
|
|
meta: '#a16207',
|
|
nico: '#4b5563',
|
|
}
|
|
export const DEFAULT_DARK_THEME_TAG_COLOURS: ThemeTagColours = {
|
|
deerjikist: '#fb7185',
|
|
meme: '#d8b4fe',
|
|
character: '#bef264',
|
|
general: '#67e8f9',
|
|
material: '#fdba74',
|
|
meta: '#fde047',
|
|
nico: '#e5e7eb',
|
|
}
|
|
export const DEFAULT_THEME_TAG_COLOURS = DEFAULT_LIGHT_THEME_TAG_COLOURS
|
|
export const LIGHT_THEME_TOKENS: ThemeTokens = {
|
|
background: '0 0% 100%',
|
|
foreground: '222.2 84% 4.9%',
|
|
card: '0 0% 100%',
|
|
cardForeground: '222.2 84% 4.9%',
|
|
popover: '0 0% 100%',
|
|
popoverForeground: '222.2 84% 4.9%',
|
|
primary: '222.2 47.4% 11.2%',
|
|
primaryForeground: '210 40% 98%',
|
|
secondary: '210 40% 96.1%',
|
|
secondaryForeground: '222.2 47.4% 11.2%',
|
|
muted: '210 40% 96.1%',
|
|
mutedForeground: '215.4 16.3% 46.9%',
|
|
accent: '210 40% 96.1%',
|
|
accentForeground: '222.2 47.4% 11.2%',
|
|
destructive: '0 72.2% 50.6%',
|
|
destructiveForeground: '210 40% 98%',
|
|
border: '214.3 31.8% 91.4%',
|
|
input: '214.3 31.8% 91.4%',
|
|
ring: '222.2 84% 4.9%',
|
|
link: '221.2 83.2% 53.3%',
|
|
tagColours: DEFAULT_LIGHT_THEME_TAG_COLOURS,
|
|
}
|
|
export const DARK_THEME_TOKENS: ThemeTokens = {
|
|
background: '222.2 84% 4.9%',
|
|
foreground: '210 40% 98%',
|
|
card: '222.2 84% 4.9%',
|
|
cardForeground: '210 40% 98%',
|
|
popover: '222.2 84% 4.9%',
|
|
popoverForeground: '210 40% 98%',
|
|
primary: '210 40% 98%',
|
|
primaryForeground: '222.2 47.4% 11.2%',
|
|
secondary: '217.2 32.6% 17.5%',
|
|
secondaryForeground: '210 40% 98%',
|
|
muted: '217.2 32.6% 17.5%',
|
|
mutedForeground: '215 20.2% 65.1%',
|
|
accent: '217.2 32.6% 17.5%',
|
|
accentForeground: '210 40% 98%',
|
|
destructive: '0 62.8% 45%',
|
|
destructiveForeground: '210 40% 98%',
|
|
border: '217.2 32.6% 17.5%',
|
|
input: '217.2 32.6% 17.5%',
|
|
ring: '212.7 26.8% 83.9%',
|
|
link: '213.1 93.9% 67.8%',
|
|
tagColours: DEFAULT_DARK_THEME_TAG_COLOURS,
|
|
}
|
|
export const BUILTIN_THEMES: Record<BuiltinThemeId, ClientTheme> = {
|
|
light: {
|
|
id: 'light',
|
|
name: 'ライト・モード',
|
|
builtin: true,
|
|
baseTheme: 'light',
|
|
tokens: LIGHT_THEME_TOKENS,
|
|
},
|
|
dark: {
|
|
id: 'dark',
|
|
name: 'ダーク・モード',
|
|
builtin: true,
|
|
baseTheme: 'dark',
|
|
tokens: DARK_THEME_TOKENS,
|
|
},
|
|
}
|
|
|
|
const LEGACY_THEATRE_LAYOUT_STORAGE_KEY = 'theatre-layout-mode'
|
|
const LEGACY_THEATRE_TAG_FLOW_STORAGE_KEY = 'theatre-tag-flow'
|
|
const LEGACY_GEKANATOR_BACKGROUND_MOTION_STORAGE_KEY =
|
|
'gekanator:background-motion:v1'
|
|
const LEGACY_MIGRATED_THEME_ID = 'custom:legacy-migrated'
|
|
|
|
|
|
const createCustomThemeId = (): `custom:${ string }` => {
|
|
const randomPart =
|
|
globalThis.crypto?.randomUUID?.()
|
|
?? `${ Date.now ().toString (36) }-${ Math.random ().toString (36).slice (2) }`
|
|
|
|
return `custom:${ randomPart }`
|
|
}
|
|
|
|
|
|
export const fetchUserSettings = async (): Promise<UserSettings> => {
|
|
const raw = await apiGet<{
|
|
theme: UserSettings['theme']
|
|
auto_fetch_title: UserSettings['autoFetchTitle']
|
|
auto_fetch_thumbnail: UserSettings['autoFetchThumbnail']
|
|
wiki_editor_mode: UserSettings['wikiEditorMode']
|
|
}> ('/users/settings')
|
|
|
|
return {
|
|
theme: raw.theme,
|
|
autoFetchTitle: raw.auto_fetch_title,
|
|
autoFetchThumbnail: raw.auto_fetch_thumbnail,
|
|
wikiEditorMode: raw.wiki_editor_mode,
|
|
}
|
|
}
|
|
|
|
|
|
export const updateUserSettings = async (
|
|
settings: Partial<{ theme: UserSettings['theme'] }>,
|
|
): Promise<UserSettings> => {
|
|
const raw = await apiPatch<{
|
|
theme: UserSettings['theme']
|
|
auto_fetch_title: UserSettings['autoFetchTitle']
|
|
auto_fetch_thumbnail: UserSettings['autoFetchThumbnail']
|
|
wiki_editor_mode: UserSettings['wikiEditorMode']
|
|
}> ('/users/settings', settings)
|
|
|
|
return {
|
|
theme: raw.theme,
|
|
autoFetchTitle: raw.auto_fetch_title,
|
|
autoFetchThumbnail: raw.auto_fetch_thumbnail,
|
|
wikiEditorMode: raw.wiki_editor_mode,
|
|
}
|
|
}
|
|
|
|
|
|
const safeParseClientSettings = (raw: string | null): ClientSettings => {
|
|
if (!(raw))
|
|
return { }
|
|
|
|
try
|
|
{
|
|
const parsed = JSON.parse (raw)
|
|
return parsed && typeof parsed === 'object' ? parsed as ClientSettings : { }
|
|
}
|
|
catch
|
|
{
|
|
return { }
|
|
}
|
|
}
|
|
|
|
|
|
export const loadClientSettings = (): ClientSettings =>
|
|
safeParseClientSettings (localStorage.getItem (CLIENT_SETTINGS_STORAGE_KEY))
|
|
|
|
|
|
export const saveClientSettings = (settings: ClientSettings): void => {
|
|
localStorage.setItem (CLIENT_SETTINGS_STORAGE_KEY, JSON.stringify (settings))
|
|
|
|
if (typeof window !== 'undefined')
|
|
{
|
|
window.dispatchEvent (new CustomEvent (CLIENT_SETTINGS_EVENT, {
|
|
detail: settings,
|
|
}))
|
|
}
|
|
}
|
|
|
|
|
|
export const updateClientSettings = (
|
|
updater: (settings: ClientSettings) => ClientSettings,
|
|
): ClientSettings => {
|
|
const next = updater (loadClientSettings ())
|
|
saveClientSettings (next)
|
|
return next
|
|
}
|
|
|
|
|
|
const validListLimit = (value: unknown): ClientListLimit | null =>
|
|
value === 20 || value === 50 || value === 100 ? value : null
|
|
|
|
|
|
const normaliseAnimationMode = (value: unknown): ClientAnimationMode | null => {
|
|
if (value === 'normal' || value === 'reduced' || value === 'off')
|
|
return value
|
|
if (value === 'true')
|
|
return 'reduced'
|
|
if (value === 'false')
|
|
return 'normal'
|
|
return null
|
|
}
|
|
|
|
|
|
const normaliseEmbedAutoLoadMode = (value: unknown): ClientEmbedAutoLoadMode | null =>
|
|
value === 'auto' || value === 'manual' || value === 'off' ? value : null
|
|
|
|
|
|
const normaliseThumbnailMode = (value: unknown): ClientThumbnailMode | null =>
|
|
value === 'normal' || value === 'light' || value === 'off' ? value : null
|
|
|
|
|
|
const normaliseKeyboardBindings = (
|
|
bindings: unknown,
|
|
): Partial<Record<ShortcutActionId, KeyBinding | null>> => {
|
|
if (!(bindings) || typeof bindings !== 'object')
|
|
return { }
|
|
|
|
return Object.keys (DEFAULT_KEY_BINDINGS).reduce<
|
|
Partial<Record<ShortcutActionId, KeyBinding | null>>
|
|
> (
|
|
(normalised, actionId) => {
|
|
const value = (bindings as Record<string, unknown>)[actionId]
|
|
if (value === null)
|
|
{
|
|
normalised[actionId as ShortcutActionId] = null
|
|
return normalised
|
|
}
|
|
|
|
const binding = normaliseKeyBinding (value)
|
|
if (binding != null)
|
|
normalised[actionId as ShortcutActionId] = binding
|
|
|
|
return normalised
|
|
},
|
|
{ },
|
|
)
|
|
}
|
|
|
|
|
|
export const getClientKeyboardSettings = (): ClientKeyboardSettings => {
|
|
const keyboard = loadClientSettings ().keyboard
|
|
|
|
return {
|
|
enabled: keyboard?.enabled !== false,
|
|
bindings: normaliseKeyboardBindings (keyboard?.bindings),
|
|
}
|
|
}
|
|
|
|
|
|
const legacyAnimationMode = (): ClientAnimationMode | null =>
|
|
normaliseAnimationMode (loadClientSettings ().reducedMotion)
|
|
|
|
|
|
const legacyEmbedAutoLoadMode = (): ClientEmbedAutoLoadMode | null =>
|
|
normaliseEmbedAutoLoadMode (loadClientSettings ().embedAutoLoad)
|
|
|
|
|
|
const legacyThumbnailMode = (): ClientThumbnailMode | null =>
|
|
normaliseThumbnailMode (loadClientSettings ().thumbnailMode)
|
|
|
|
|
|
export const getClientAnimationMode = (): ClientAnimationMode =>
|
|
loadClientSettings ().behavior?.animation
|
|
?? legacyAnimationMode ()
|
|
?? 'normal'
|
|
|
|
|
|
export const applyClientAnimationMode = (mode: ClientAnimationMode): void => {
|
|
if (typeof document === 'undefined')
|
|
return
|
|
|
|
if (mode === 'normal')
|
|
{
|
|
delete document.documentElement.dataset.animation
|
|
return
|
|
}
|
|
|
|
document.documentElement.dataset.animation = mode
|
|
}
|
|
|
|
|
|
export const setClientAnimationMode = (
|
|
animation: ClientAnimationMode,
|
|
): ClientBehaviorSettings =>
|
|
setClientBehaviorSettings ({
|
|
...getClientBehaviorSettings (),
|
|
animation,
|
|
})
|
|
|
|
export const getClientEmbedAutoLoadMode = (): ClientEmbedAutoLoadMode =>
|
|
loadClientSettings ().behavior?.embedAutoLoad
|
|
?? legacyEmbedAutoLoadMode ()
|
|
?? 'auto'
|
|
|
|
|
|
export const setClientEmbedAutoLoadMode = (
|
|
embedAutoLoad: ClientEmbedAutoLoadMode,
|
|
): ClientBehaviorSettings =>
|
|
setClientBehaviorSettings ({
|
|
...getClientBehaviorSettings (),
|
|
embedAutoLoad,
|
|
})
|
|
|
|
|
|
export const getClientThumbnailMode = (): ClientThumbnailMode =>
|
|
loadClientSettings ().behavior?.thumbnailMode
|
|
?? legacyThumbnailMode ()
|
|
?? 'normal'
|
|
|
|
|
|
export const setClientThumbnailMode = (
|
|
thumbnailMode: ClientThumbnailMode,
|
|
): ClientBehaviorSettings =>
|
|
setClientBehaviorSettings ({
|
|
...getClientBehaviorSettings (),
|
|
thumbnailMode,
|
|
})
|
|
|
|
|
|
export const getClientBehaviorSettings = (): ClientBehaviorSettings => ({
|
|
animation: getClientAnimationMode (),
|
|
embedAutoLoad: getClientEmbedAutoLoadMode (),
|
|
thumbnailMode: getClientThumbnailMode (),
|
|
})
|
|
|
|
|
|
export const setClientBehaviorSettings = (
|
|
behavior: ClientBehaviorSettings,
|
|
): ClientBehaviorSettings => {
|
|
const next: ClientBehaviorSettings = {
|
|
animation: (
|
|
normaliseAnimationMode (behavior.animation)
|
|
?? getClientAnimationMode ()
|
|
),
|
|
embedAutoLoad: (
|
|
normaliseEmbedAutoLoadMode (behavior.embedAutoLoad)
|
|
?? getClientEmbedAutoLoadMode ()
|
|
),
|
|
thumbnailMode: (
|
|
normaliseThumbnailMode (behavior.thumbnailMode)
|
|
?? getClientThumbnailMode ()
|
|
),
|
|
}
|
|
|
|
updateClientSettings (settings => ({
|
|
...settings,
|
|
behavior: next,
|
|
}))
|
|
applyClientAnimationMode (next.animation ?? 'normal')
|
|
return next
|
|
}
|
|
|
|
|
|
export const setClientKeyboardSettings = (
|
|
keyboard: ClientKeyboardSettings,
|
|
): ClientKeyboardSettings => {
|
|
const next: ClientKeyboardSettings = {
|
|
enabled: keyboard.enabled !== false,
|
|
bindings: normaliseKeyboardBindings (keyboard.bindings),
|
|
}
|
|
|
|
updateClientSettings (settings => ({
|
|
...settings,
|
|
keyboard: next,
|
|
}))
|
|
|
|
return next
|
|
}
|
|
|
|
|
|
export const getEffectiveKeyBindings = (
|
|
bindings: Partial<Record<ShortcutActionId, KeyBinding | null>> =
|
|
getClientKeyboardSettings ().bindings ?? { },
|
|
): Record<ShortcutActionId, KeyBinding | null> =>
|
|
Object.keys (DEFAULT_KEY_BINDINGS).reduce<Record<ShortcutActionId, KeyBinding | null>> (
|
|
(effectiveBindings, actionId) => {
|
|
const key = actionId as ShortcutActionId
|
|
effectiveBindings[key] =
|
|
Object.prototype.hasOwnProperty.call (bindings, key)
|
|
? bindings[key] ?? null
|
|
: DEFAULT_KEY_BINDINGS[key]
|
|
return effectiveBindings
|
|
},
|
|
{ ...DEFAULT_KEY_BINDINGS },
|
|
)
|
|
|
|
|
|
export const setClientKeyBinding = (
|
|
actionId: ShortcutActionId,
|
|
binding: KeyBinding | null,
|
|
): ClientKeyboardSettings => {
|
|
const current = getClientKeyboardSettings ()
|
|
|
|
return setClientKeyboardSettings ({
|
|
...current,
|
|
bindings: {
|
|
...(current.bindings ?? { }),
|
|
[actionId]: binding,
|
|
},
|
|
})
|
|
}
|
|
|
|
|
|
export const resetClientKeyBinding = (
|
|
actionId: ShortcutActionId,
|
|
): ClientKeyboardSettings => {
|
|
const current = getClientKeyboardSettings ()
|
|
const nextBindings = { ...(current.bindings ?? { }) }
|
|
delete nextBindings[actionId]
|
|
|
|
return setClientKeyboardSettings ({
|
|
...current,
|
|
bindings: nextBindings,
|
|
})
|
|
}
|
|
|
|
|
|
export const resetAllClientKeyBindings = (): ClientKeyboardSettings => {
|
|
const current = getClientKeyboardSettings ()
|
|
|
|
return setClientKeyboardSettings ({
|
|
...current,
|
|
bindings: { },
|
|
})
|
|
}
|
|
|
|
|
|
const normaliseHexColour = (value: string): string | null =>
|
|
/^#[0-9a-fA-F]{6}$/.test (value) ? value.toLowerCase () : null
|
|
|
|
|
|
const isBuiltinThemeId = (value: string): value is BuiltinThemeId =>
|
|
value === 'light' || value === 'dark'
|
|
|
|
|
|
const isCustomThemeId = (value: string): value is `custom:${ string }` =>
|
|
value.startsWith ('custom:')
|
|
|
|
|
|
const themeCopyName = (baseTheme: BuiltinThemeId): string =>
|
|
`${ BUILTIN_THEMES[baseTheme].name }のコピー`
|
|
|
|
|
|
const appearanceFromSettings = (): ClientAppearanceSettings =>
|
|
loadClientSettings ().appearance ?? { }
|
|
|
|
|
|
export const hasStoredClientThemeSelection = (): boolean => {
|
|
const appearance = appearanceFromSettings ()
|
|
return (
|
|
appearance.activeThemeId != null
|
|
|| appearance.customThemes != null
|
|
|| appearance.theme != null
|
|
|| appearance.tagColours != null
|
|
)
|
|
}
|
|
|
|
|
|
const mixHexColour = (
|
|
source: string,
|
|
target: string,
|
|
ratio: number,
|
|
): string => {
|
|
const clampedRatio = Math.max (0, Math.min (1, ratio))
|
|
const src = source.slice (1)
|
|
const dst = target.slice (1)
|
|
const channels = [0, 2, 4].map (offset => {
|
|
const srcValue = parseInt (src.slice (offset, offset + 2), 16)
|
|
const dstValue = parseInt (dst.slice (offset, offset + 2), 16)
|
|
const mixed = Math.round (
|
|
srcValue + (dstValue - srcValue) * clampedRatio,
|
|
)
|
|
return mixed.toString (16).padStart (2, '0')
|
|
})
|
|
|
|
return `#${ channels.join ('') }`
|
|
}
|
|
|
|
|
|
export const getClientThemeMode = (): UserSettings['theme'] =>
|
|
(() => {
|
|
const appearance = appearanceFromSettings ()
|
|
const customThemes = getClientCustomThemes ()
|
|
|
|
if (appearance.activeThemeId === 'system')
|
|
return 'system'
|
|
if (appearance.activeThemeId === 'light' || appearance.activeThemeId === 'dark')
|
|
return appearance.activeThemeId
|
|
if (
|
|
typeof appearance.activeThemeId === 'string'
|
|
&& customThemes[appearance.activeThemeId] != null
|
|
)
|
|
return customThemes[appearance.activeThemeId].baseTheme
|
|
|
|
return appearance.theme ?? DEFAULT_USER_SETTINGS.theme
|
|
}) ()
|
|
|
|
|
|
export const setClientThemeMode = (theme: UserSettings['theme']): void => {
|
|
updateClientSettings (settings => ({
|
|
...settings,
|
|
appearance: {
|
|
...(settings.appearance ?? { }),
|
|
activeThemeId: theme,
|
|
theme,
|
|
},
|
|
}))
|
|
}
|
|
|
|
|
|
export const seedClientThemeMode = (theme: UserSettings['theme']): void => {
|
|
if (hasStoredClientThemeSelection ())
|
|
return
|
|
|
|
setClientThemeMode (theme)
|
|
}
|
|
|
|
|
|
const prefersDarkTheme = (): boolean =>
|
|
window.matchMedia ('(prefers-color-scheme: dark)').matches
|
|
|
|
|
|
export const resolveThemeMode = (
|
|
theme: UserSettings['theme'],
|
|
): ResolvedTheme =>
|
|
theme === 'system'
|
|
? (prefersDarkTheme () ? 'dark' : 'light')
|
|
: theme
|
|
|
|
|
|
export const defaultThemeTagColoursFor = (
|
|
theme: ResolvedTheme,
|
|
): ThemeTagColours =>
|
|
theme === 'dark'
|
|
? DEFAULT_DARK_THEME_TAG_COLOURS
|
|
: DEFAULT_LIGHT_THEME_TAG_COLOURS
|
|
|
|
|
|
const normaliseThemeTagColours = (
|
|
input: Partial<ThemeTagColours> | null | undefined,
|
|
fallback: ThemeTagColours,
|
|
): ThemeTagColours =>
|
|
CATEGORIES.reduce<ThemeTagColours> (
|
|
(colours, category) => {
|
|
const candidate = input?.[category]
|
|
colours[category] =
|
|
typeof candidate === 'string' && normaliseHexColour (candidate) != null
|
|
? candidate
|
|
: fallback[category]
|
|
return colours
|
|
},
|
|
{ ...fallback },
|
|
)
|
|
|
|
|
|
const normaliseCustomTheme = (
|
|
rawTheme: unknown,
|
|
): CustomClientTheme | null => {
|
|
if (!(rawTheme) || typeof rawTheme !== 'object')
|
|
return null
|
|
|
|
const theme = rawTheme as Record<string, unknown>
|
|
const id = typeof theme.id === 'string' ? theme.id : null
|
|
const name = typeof theme.name === 'string' ? theme.name : null
|
|
const baseTheme = typeof theme.baseTheme === 'string' ? theme.baseTheme : null
|
|
if (
|
|
id == null
|
|
|| !(isCustomThemeId (id))
|
|
|| name == null
|
|
|| baseTheme == null
|
|
|| !(isBuiltinThemeId (baseTheme))
|
|
)
|
|
return null
|
|
|
|
return {
|
|
id,
|
|
name,
|
|
builtin: false,
|
|
baseTheme,
|
|
tokens: {
|
|
...(
|
|
baseTheme === 'dark'
|
|
? DARK_THEME_TOKENS
|
|
: LIGHT_THEME_TOKENS
|
|
),
|
|
...(theme.tokens && typeof theme.tokens === 'object'
|
|
? theme.tokens as Partial<ThemeTokens>
|
|
: { }),
|
|
tagColours: normaliseThemeTagColours (
|
|
(
|
|
theme.tokens
|
|
&& typeof theme.tokens === 'object'
|
|
&& 'tagColours' in theme.tokens
|
|
)
|
|
? (theme.tokens as { tagColours?: Partial<ThemeTagColours> }).tagColours
|
|
: theme.tagColours as Partial<ThemeTagColours> | undefined,
|
|
defaultThemeTagColoursFor (baseTheme),
|
|
),
|
|
},
|
|
}
|
|
}
|
|
|
|
|
|
export const getClientCustomThemes = (): Record<string, CustomClientTheme> => {
|
|
const appearance = appearanceFromSettings ()
|
|
const customThemes = appearance.customThemes
|
|
|
|
if (customThemes && typeof customThemes === 'object')
|
|
{
|
|
return Object.entries (customThemes).reduce<Record<string, CustomClientTheme>> (
|
|
(themes, [key, rawTheme]) => {
|
|
const theme = normaliseCustomTheme (rawTheme)
|
|
if (theme != null)
|
|
themes[key] = theme
|
|
return themes
|
|
},
|
|
{ },
|
|
)
|
|
}
|
|
|
|
const legacyTagColours = appearance.tagColours
|
|
if (!(legacyTagColours) || Object.keys (legacyTagColours).length === 0)
|
|
return { }
|
|
|
|
const baseTheme = resolveThemeMode (appearance.theme ?? DEFAULT_USER_SETTINGS.theme)
|
|
return {
|
|
[LEGACY_MIGRATED_THEME_ID]: {
|
|
id: LEGACY_MIGRATED_THEME_ID,
|
|
name: themeCopyName (baseTheme),
|
|
builtin: false,
|
|
baseTheme,
|
|
tokens: {
|
|
...(baseTheme === 'dark' ? DARK_THEME_TOKENS : LIGHT_THEME_TOKENS),
|
|
tagColours: normaliseThemeTagColours (
|
|
legacyTagColours,
|
|
defaultThemeTagColoursFor (baseTheme),
|
|
),
|
|
},
|
|
},
|
|
}
|
|
}
|
|
|
|
|
|
export const getClientActiveThemeId = (): ActiveThemeId => {
|
|
const appearance = appearanceFromSettings ()
|
|
const customThemes = getClientCustomThemes ()
|
|
|
|
if (
|
|
typeof appearance.activeThemeId === 'string'
|
|
&& (
|
|
appearance.activeThemeId === 'system'
|
|
|| isBuiltinThemeId (appearance.activeThemeId)
|
|
|| customThemes[appearance.activeThemeId] != null
|
|
)
|
|
)
|
|
return appearance.activeThemeId
|
|
|
|
if (
|
|
Object.keys (customThemes).length > 0
|
|
&& appearance.tagColours != null
|
|
&& Object.keys (appearance.tagColours).length > 0
|
|
)
|
|
return LEGACY_MIGRATED_THEME_ID
|
|
|
|
if (typeof appearance.theme === 'string' && (
|
|
appearance.theme === 'system'
|
|
|| appearance.theme === 'light'
|
|
|| appearance.theme === 'dark'
|
|
))
|
|
return appearance.theme
|
|
|
|
return DEFAULT_USER_SETTINGS.theme
|
|
}
|
|
|
|
|
|
export const getThemeById = (
|
|
themeId: ThemeId,
|
|
customThemes: Record<string, CustomClientTheme>,
|
|
): ClientTheme =>
|
|
isBuiltinThemeId (themeId)
|
|
? BUILTIN_THEMES[themeId]
|
|
: (customThemes[themeId] ?? BUILTIN_THEMES.light)
|
|
|
|
|
|
export const getResolvedThemeFromSelection = (
|
|
activeThemeId: ActiveThemeId,
|
|
customThemes: Record<string, CustomClientTheme>,
|
|
): ClientTheme =>
|
|
activeThemeId === 'system'
|
|
? BUILTIN_THEMES[resolveThemeMode ('system')]
|
|
: getThemeById (activeThemeId, customThemes)
|
|
|
|
|
|
export const deriveUserThemeModeFromSelection = (
|
|
activeThemeId: ActiveThemeId,
|
|
customThemes: Record<string, CustomClientTheme>,
|
|
): UserSettings['theme'] => {
|
|
if (activeThemeId === 'system')
|
|
return 'system'
|
|
|
|
return getThemeById (activeThemeId, customThemes).baseTheme
|
|
}
|
|
|
|
|
|
export const createCustomThemeFromBase = (
|
|
baseTheme: BuiltinThemeId,
|
|
tokens?: ThemeTokens,
|
|
): CustomClientTheme => {
|
|
const id = createCustomThemeId ()
|
|
return {
|
|
id,
|
|
name: themeCopyName (baseTheme),
|
|
builtin: false,
|
|
baseTheme,
|
|
tokens: tokens ?? {
|
|
...(baseTheme === 'dark' ? DARK_THEME_TOKENS : LIGHT_THEME_TOKENS),
|
|
},
|
|
}
|
|
}
|
|
|
|
|
|
export const getClientThemeTagColours = (
|
|
activeThemeId: ActiveThemeId = getClientActiveThemeId (),
|
|
customThemes: Record<string, CustomClientTheme> = getClientCustomThemes (),
|
|
): ThemeTagColours => {
|
|
return {
|
|
...getResolvedThemeFromSelection (activeThemeId, customThemes).tokens.tagColours,
|
|
}
|
|
}
|
|
|
|
|
|
export const setClientAppearanceThemes = (
|
|
activeThemeId: ActiveThemeId,
|
|
customThemes: Record<string, CustomClientTheme>,
|
|
): void => {
|
|
updateClientSettings (settings => ({
|
|
...settings,
|
|
appearance: {
|
|
...(settings.appearance ?? { }),
|
|
activeThemeId,
|
|
customThemes,
|
|
theme: undefined,
|
|
tagColours: undefined,
|
|
},
|
|
}))
|
|
}
|
|
|
|
|
|
export const setClientThemeTagColours = (
|
|
tagColours: ThemeTagColours,
|
|
activeThemeId: ActiveThemeId = getClientActiveThemeId (),
|
|
customThemes: Record<string, CustomClientTheme> = getClientCustomThemes (),
|
|
): void => {
|
|
if (activeThemeId === 'system' || isBuiltinThemeId (activeThemeId))
|
|
return
|
|
|
|
setClientAppearanceThemes (
|
|
activeThemeId,
|
|
{
|
|
...customThemes,
|
|
[activeThemeId]: {
|
|
...customThemes[activeThemeId],
|
|
tokens: {
|
|
...customThemes[activeThemeId].tokens,
|
|
tagColours,
|
|
},
|
|
},
|
|
},
|
|
)
|
|
}
|
|
|
|
|
|
export const applyThemeMode = (theme: UserSettings['theme']): void => {
|
|
const root = document.documentElement
|
|
const resolvedTheme = resolveThemeMode (theme)
|
|
|
|
root.classList.toggle ('dark', resolvedTheme === 'dark')
|
|
root.style.colorScheme = resolvedTheme
|
|
}
|
|
|
|
|
|
export const applyThemeTagColours = (tagColours: ThemeTagColours): void => {
|
|
const root = document.documentElement
|
|
|
|
CATEGORIES.forEach (category => {
|
|
const colour = tagColours[category]
|
|
root.style.setProperty (`--tag-colour-${ category }`, colour)
|
|
root.style.setProperty (
|
|
`--tag-colour-${ category }-hover`,
|
|
mixHexColour (colour, '#ffffff', .18),
|
|
)
|
|
})
|
|
}
|
|
|
|
|
|
export const applyThemeTokens = (tokens: ThemeTokens): void => {
|
|
const root = document.documentElement
|
|
|
|
root.style.setProperty ('--background', tokens.background)
|
|
root.style.setProperty ('--foreground', tokens.foreground)
|
|
root.style.setProperty ('--card', tokens.card)
|
|
root.style.setProperty ('--card-foreground', tokens.cardForeground)
|
|
root.style.setProperty ('--popover', tokens.popover)
|
|
root.style.setProperty ('--popover-foreground', tokens.popoverForeground)
|
|
root.style.setProperty ('--primary', tokens.primary)
|
|
root.style.setProperty ('--primary-foreground', tokens.primaryForeground)
|
|
root.style.setProperty ('--secondary', tokens.secondary)
|
|
root.style.setProperty ('--secondary-foreground', tokens.secondaryForeground)
|
|
root.style.setProperty ('--muted', tokens.muted)
|
|
root.style.setProperty ('--muted-foreground', tokens.mutedForeground)
|
|
root.style.setProperty ('--accent', tokens.accent)
|
|
root.style.setProperty ('--accent-foreground', tokens.accentForeground)
|
|
root.style.setProperty ('--destructive', tokens.destructive)
|
|
root.style.setProperty ('--destructive-foreground', tokens.destructiveForeground)
|
|
root.style.setProperty ('--border', tokens.border)
|
|
root.style.setProperty ('--input', tokens.input)
|
|
root.style.setProperty ('--ring', tokens.ring)
|
|
root.style.setProperty ('--theme-link', tokens.link)
|
|
|
|
applyThemeTagColours (tokens.tagColours)
|
|
}
|
|
|
|
|
|
export const applyThemeSelection = (
|
|
activeThemeId: ActiveThemeId,
|
|
customThemes: Record<string, CustomClientTheme>,
|
|
): void => {
|
|
const theme = getResolvedThemeFromSelection (activeThemeId, customThemes)
|
|
applyThemeMode (theme.baseTheme)
|
|
applyThemeTokens (theme.tokens)
|
|
}
|
|
|
|
|
|
export const applyClientAppearance = (): void => {
|
|
applyThemeSelection (getClientActiveThemeId (), getClientCustomThemes ())
|
|
}
|
|
|
|
|
|
export const getClientListLimit = (
|
|
listKey: ClientListKey,
|
|
): ClientListLimit | null => {
|
|
const value = loadClientSettings ().lists?.[listKey]?.limit
|
|
return validListLimit (value)
|
|
}
|
|
|
|
|
|
export const getClientListOrder = <T extends string>(
|
|
listKey: ClientListKey,
|
|
): T | null => {
|
|
const value = loadClientSettings ().lists?.[listKey]?.order
|
|
return typeof value === 'string' ? value as T : null
|
|
}
|
|
|
|
|
|
export const setClientListSettings = (
|
|
listKey: ClientListKey,
|
|
{ limit, order }: { limit?: ClientListLimit
|
|
order?: string },
|
|
): void => {
|
|
updateClientSettings (settings => ({
|
|
...settings,
|
|
lists: {
|
|
...(settings.lists ?? { }),
|
|
[listKey]: {
|
|
...(settings.lists?.[listKey] ?? { }),
|
|
...(limit == null ? { } : { limit }),
|
|
...(order == null ? { } : { order }),
|
|
},
|
|
},
|
|
}))
|
|
}
|
|
|
|
|
|
const legacyTheatreLayoutMode = (): TheatreLayoutMode | null => {
|
|
const value = localStorage.getItem (LEGACY_THEATRE_LAYOUT_STORAGE_KEY)
|
|
return (
|
|
value === 'threeColumns'
|
|
|| value === 'tagsBottom'
|
|
|| value === 'commentsBottom'
|
|
) ? value : null
|
|
}
|
|
|
|
|
|
const legacyTheatreTagFlow = (): TheatreTagFlow | null => {
|
|
const value = localStorage.getItem (LEGACY_THEATRE_TAG_FLOW_STORAGE_KEY)
|
|
return (value === 'vertical' || value === 'horizontal') ? value : null
|
|
}
|
|
|
|
|
|
const legacyGekanatorBackgroundMotion = (): GekanatorBackgroundMotionMode | null => {
|
|
const value = localStorage.getItem (LEGACY_GEKANATOR_BACKGROUND_MOTION_STORAGE_KEY)
|
|
return (value === 'on' || value === 'calm' || value === 'off') ? value : null
|
|
}
|
|
|
|
|
|
export const getClientTheatreLayoutMode = (): TheatreLayoutMode =>
|
|
loadClientSettings ().theatre?.layoutMode
|
|
?? legacyTheatreLayoutMode ()
|
|
?? 'threeColumns'
|
|
|
|
|
|
export const setClientTheatreLayoutMode = (layoutMode: TheatreLayoutMode): void => {
|
|
updateClientSettings (settings => ({
|
|
...settings,
|
|
theatre: { ...(settings.theatre ?? { }), layoutMode } }))
|
|
}
|
|
|
|
|
|
export const getClientTheatreTagFlow = (): TheatreTagFlow =>
|
|
loadClientSettings ().theatre?.tagFlow
|
|
?? legacyTheatreTagFlow ()
|
|
?? 'vertical'
|
|
|
|
|
|
export const setClientTheatreTagFlow = (tagFlow: TheatreTagFlow): void => {
|
|
updateClientSettings (settings => ({
|
|
...settings,
|
|
theatre: { ...(settings.theatre ?? { }), tagFlow } }))
|
|
}
|
|
|
|
|
|
export const getClientGekanatorBackgroundMotion =
|
|
(): GekanatorBackgroundMotionMode =>
|
|
loadClientSettings ().gekanator?.backgroundMotion
|
|
?? legacyGekanatorBackgroundMotion ()
|
|
?? 'on'
|
|
|
|
|
|
export const setClientGekanatorBackgroundMotion = (
|
|
backgroundMotion: GekanatorBackgroundMotionMode,
|
|
): void => {
|
|
updateClientSettings (settings => ({
|
|
...settings,
|
|
gekanator: { ...(settings.gekanator ?? { }), backgroundMotion },
|
|
}))
|
|
}
|
|
|
|
|
|
export const getClientPaneWidthPx = (
|
|
paneKey: string,
|
|
breakpoint: ClientPaneBreakpoint,
|
|
): number | null => {
|
|
const value = loadClientSettings ().panes?.[paneKey]?.widthPxByBreakpoint?.[breakpoint]
|
|
return typeof value === 'number' ? value : null
|
|
}
|
|
|
|
|
|
export const setClientPaneWidthPx = (
|
|
paneKey: string,
|
|
breakpoint: ClientPaneBreakpoint,
|
|
widthPx: number,
|
|
): void => {
|
|
updateClientSettings (settings => ({
|
|
...settings,
|
|
panes: {
|
|
...(settings.panes ?? { }),
|
|
[paneKey]: {
|
|
...(settings.panes?.[paneKey] ?? { }),
|
|
widthPxByBreakpoint: {
|
|
...(settings.panes?.[paneKey]?.widthPxByBreakpoint ?? { }),
|
|
[breakpoint]: widthPx,
|
|
},
|
|
},
|
|
},
|
|
}))
|
|
}
|
|
|
|
|
|
export const setClientPaneCollapsed = (
|
|
paneKey: string,
|
|
collapsed: boolean,
|
|
): void => {
|
|
updateClientSettings (settings => ({
|
|
...settings,
|
|
panes: {
|
|
...(settings.panes ?? { }),
|
|
[paneKey]: {
|
|
...(settings.panes?.[paneKey] ?? { }),
|
|
collapsed,
|
|
},
|
|
},
|
|
}))
|
|
}
|