miteruzo/btrc-hub
1
0
フォーク 0
コード 課題 62 Pull リクエスト 1 リリース Wiki アクティビティ

#34

ソースを参照
このコミットが含まれているのは:
みてるぞ
2026-07-05 20:18:16 +09:00
親 021d13a262
コミット a0c1b8ba31
5個のファイルの変更，578行の追加，339行の削除
Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む
frontend/src/App.tsx
+12 -27
ファイルの表示
@@ -16,12 +16,9 @@ import { applyClientAppearance,
fetchUserThemeSlots,
fetchUserSettings,
getClientThemeMode,
getClientActiveThemeSlot,
hasStoredClientThemeSelection,
normaliseThemeSlotSelectionAgainstSlots,
normaliseUserThemeSlots,
setCachedUserThemeSlots,
setClientActiveThemeSlot,
seedClientThemeMode } from '@/lib/settings'
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
@@ -182,30 +179,18 @@ const App: FC = () => {
return
void (async () => {
try
{
const [settings, themeSlots] = await Promise.all ([
fetchUserSettings (),
fetchUserThemeSlots (),
])
const storedThemeSlots = normaliseUserThemeSlots (themeSlots)
const initialSelection = (
hasStoredClientThemeSelection ()
? getClientActiveThemeSlot ()
: (settings.theme === 'system'
? 'system'
: `builtin:${ settings.theme }`)
)
const nextSelection = normaliseThemeSlotSelectionAgainstSlots (
initialSelection,
storedThemeSlots,
)
setCachedUserThemeSlots (storedThemeSlots)
seedClientThemeMode (settings.theme)
if (nextSelection !== initialSelection)
setClientActiveThemeSlot (nextSelection)
applyClientAppearance ()
}
try
{
const [settings, themeSlots] = await Promise.all ([
fetchUserSettings (),
fetchUserThemeSlots (),
])
const storedThemeSlots = normaliseUserThemeSlots (themeSlots)
setCachedUserThemeSlots (storedThemeSlots)
if (!(hasStoredClientThemeSelection ()))
seedClientThemeMode (settings.theme)
applyClientAppearance ()
}
catch
{
return
frontend/src/components/TopNav.tsx
+14 -15
ファイルの表示
@@ -208,12 +208,11 @@ const TopNav: FC<Props> = ({ user }) => {
return (
<>
<nav className="top-nav-root px-3 flex justify-between items-center w-full
border-b">
<nav className="top-nav-root px-3 flex justify-between items-center w-full">
<div className="flex items-center gap-2 h-12">
<PrefetchLink
to="/posts"
className="top-nav-link mx-4 text-xl font-bold"
className="top-nav-brand-link mx-4 text-xl font-bold"
onClick={() => {
scroll (0, 0)
}}>
@@ -245,7 +244,7 @@ const TopNav: FC<Props> = ({ user }) => {
ref={(el: (HTMLAnchorElement | null)) => {
itemsRef.current[i] = el
}}
className={cn ('top-nav-link relative z-10 flex h-full items-center px-5',
className={cn ('top-nav-menu-link relative z-10 flex h-full items-center px-5',
(i === openItemIdx) && 'font-bold')}>
{item.name}
</PrefetchLink>
@@ -260,7 +259,7 @@ const TopNav: FC<Props> = ({ user }) => {
setMoreVsbl (true)
measure (-1)
}}
className={cn ('top-nav-link relative z-10 flex h-full items-center px-5',
className={cn ('top-nav-menu-link relative z-10 flex h-full items-center px-5',
(openItemIdx < 0 || moreVsbl) && 'font-bold')}>
その他 &raquo;
</PrefetchLink>
@@ -271,7 +270,7 @@ const TopNav: FC<Props> = ({ user }) => {
<button
type="button"
className="top-nav-link md:hidden ml-auto border-0 bg-transparent pr-4"
className="top-nav-mobile-toggle md:hidden ml-auto border-0 bg-transparent pr-4"
onClick={() => {
setMenuOpen (!(menuOpen))
}}>
@@ -345,7 +344,7 @@ const TopNav: FC<Props> = ({ user }) => {
to={subItem.to}
target={subItem.to.slice (0, 2) === '//' ? '_blank' : undefined}
onClick={() => setMoreVsbl (false)}
className="top-nav-link h-full flex items-center px-3">
className="top-nav-menu-link h-full flex items-center px-3">
{subItem.name}
</PrefetchLink>
</motion.div>)))}
@@ -372,7 +371,7 @@ const TopNav: FC<Props> = ({ user }) => {
target={item.to.slice (0, 2) === '//'
? '_blank'
: undefined}
className="top-nav-link h-full flex items-center px-3">
className="top-nav-menu-link h-full flex items-center px-3">
{item.name}
</PrefetchLink>
</div>)))}
@@ -411,7 +410,7 @@ const TopNav: FC<Props> = ({ user }) => {
target={item.to.slice (0, 2) === '//'
? '_blank'
: undefined}
className="top-nav-link h-full flex items-center px-3">
className="top-nav-menu-link h-full flex items-center px-3">
{item.name}
</PrefetchLink>
</motion.div>)))}
@@ -432,7 +431,7 @@ const TopNav: FC<Props> = ({ user }) => {
<Fragment key={i}>
<PrefetchLink
to={i === openItemIdx ? item.to : '#'}
className={cn ('top-nav-link w-full min-h-[40px] flex items-center pl-8',
className={cn ('top-nav-mobile-row w-full min-h-[40px] flex items-center pl-8',
((i === openItemIdx)
&& 'top-nav-mobile-active font-bold'))}
onClick={(ev: MouseEvent<HTMLAnchorElement>) => {
@@ -462,7 +461,7 @@ const TopNav: FC<Props> = ({ user }) => {
target={subItem.to.slice (0, 2) === '//'
? '_blank'
: undefined}
className="top-nav-link w-full min-h-[36px] flex items-center pl-12">
className="top-nav-mobile-row w-full min-h-[36px] flex items-center pl-12">
{subItem.name}
</PrefetchLink>)))}
</div>)}
@@ -472,7 +471,7 @@ const TopNav: FC<Props> = ({ user }) => {
ref={(el: (HTMLAnchorElement | null)) => {
itemsRef.current[visibleMenu.length] = el
}}
className={cn ('top-nav-link w-full min-h-[40px] flex items-center pl-8',
className={cn ('top-nav-mobile-row w-full min-h-[40px] flex items-center pl-8',
((openItemIdx < 0)
&& 'top-nav-mobile-active font-bold'))}>
その他 &raquo;
@@ -500,7 +499,7 @@ const TopNav: FC<Props> = ({ user }) => {
<Fragment key={i}>
<PrefetchLink
to={i === openItemIdx ? item.to : '#'}
className={cn ('top-nav-link w-full min-h-[40px] flex items-center pl-8',
className={cn ('top-nav-mobile-row w-full min-h-[40px] flex items-center pl-8',
((i === openItemIdx)
&& 'top-nav-mobile-active font-bold'))}
onClick={(ev: MouseEvent<HTMLAnchorElement>) => {
@@ -543,7 +542,7 @@ const TopNav: FC<Props> = ({ user }) => {
target={subItem.to.slice (0, 2) === '//'
? '_blank'
: undefined}
className="top-nav-link w-full min-h-[36px] flex items-center pl-12">
className="top-nav-mobile-row w-full min-h-[36px] flex items-center pl-12">
{subItem.name}
</PrefetchLink>)))}
</motion.div>)}
@@ -554,7 +553,7 @@ const TopNav: FC<Props> = ({ user }) => {
ref={(el: (HTMLAnchorElement | null)) => {
itemsRef.current[visibleMenu.length] = el
}}
className={cn ('top-nav-link w-full min-h-[40px] flex items-center pl-8',
className={cn ('top-nav-mobile-row w-full min-h-[40px] flex items-center pl-8',
((openItemIdx < 0)
&& 'top-nav-mobile-active font-bold'))}>
その他 &raquo;
frontend/src/index.css
+25 -10
ファイルの表示
@@ -36,10 +36,11 @@
--theme-link: 221.2 83.2% 53.3%;
--top-nav-root-bg-mobile: #fef08a;
--top-nav-root-bg-desktop: #fefce8;
--top-nav-highlight-bg: #fef08a;
--top-nav-active-bg: #fef08a;
--top-nav-submenu-bg: #fef08a;
--top-nav-mobile-active-bg: #fefce8;
--top-nav-link: #db2777;
--top-nav-brand-link: #db2777;
--top-nav-menu-link: #1d4ed8;
--tag-colour-deerjikist: #9f1239;
--tag-colour-deerjikist-hover: #b62a51;
@@ -86,10 +87,11 @@
--ring: 212.7 26.8% 83.9%;
--top-nav-root-bg-mobile: #230505;
--top-nav-root-bg-desktop: #230505;
--top-nav-highlight-bg: #450a0a;
--top-nav-active-bg: #450a0a;
--top-nav-submenu-bg: #450a0a;
--top-nav-mobile-active-bg: #450a0a;
--top-nav-link: #f9a8d4;
--top-nav-brand-link: #f9a8d4;
--top-nav-menu-link: #93c5fd;
}
body
@@ -212,7 +214,6 @@ body
.top-nav-root
{
background: var(--top-nav-root-bg-mobile);
border-color: transparent;
}
@media (min-width: 768px)
@@ -223,19 +224,33 @@ body
}
}
.top-nav-link
.top-nav-brand-link,
.top-nav-mobile-toggle
{
color: var(--top-nav-link);
color: var(--top-nav-brand-link);
}
.top-nav-link:hover
.top-nav-brand-link:hover,
.top-nav-mobile-toggle:hover
{
color: color-mix(in oklab, var(--top-nav-link), white 18%);
color: color-mix(in oklab, var(--top-nav-brand-link), white 18%);
}
.top-nav-menu-link,
.top-nav-mobile-row
{
color: var(--top-nav-menu-link);
}
.top-nav-menu-link:hover,
.top-nav-mobile-row:hover
{
color: color-mix(in oklab, var(--top-nav-menu-link), white 18%);
}
.top-nav-highlight
{
background: var(--top-nav-highlight-bg);
background: var(--top-nav-active-bg);
}
.top-nav-submenu
frontend/src/lib/settings.ts
+179 -38
ファイルの表示
@@ -15,6 +15,7 @@ export type ThemeTagColours = Record<Category, string>
export type BuiltinThemeId = 'light' | 'dark'
export type UserThemeSlotNo = 1 | 2 | 3
export type UserThemeSlotSelection = `user:${ BuiltinThemeId }:${ UserThemeSlotNo }`
export type ClientThemeMode = 'system' | 'light' | 'dark'
export type ThemeSlotSelection =
| 'system'
| `builtin:${ BuiltinThemeId }`
@@ -43,13 +44,14 @@ export type ThemeTokens = {
input: string
ring: string
link: string
topNavRootBackgroundMobile: string
topNavRootBackgroundDesktop: string
topNavHighlightBackground: string
topNavSubmenuBackground: string
topNavRootBackgroundMobile: string
topNavRootBackgroundDesktop: string
topNavActiveBackground: string
topNavSubmenuBackground: string
topNavMobileActiveBackground: string
topNavLink: string
tagColours: ThemeTagColours }
topNavBrandLink: string
topNavMenuLink: string
tagColours: ThemeTagColours }
export type UserThemeSlot = {
baseTheme: BuiltinThemeId
slotNo: UserThemeSlotNo
@@ -63,6 +65,12 @@ export type ResolvedThemeSelection = {
baseTheme: BuiltinThemeId
builtin: boolean
tokens: ThemeTokens }
export type ResolvedDisplayedTheme = {
themeMode: ClientThemeMode
baseTheme: BuiltinThemeId
selection: UserThemeSlotSelection
slotNo: UserThemeSlotNo
tokens: ThemeTokens }
export type ClientTheme = {
id: ThemeId
name: string
@@ -97,6 +105,9 @@ export type ClientKeyboardSettings = {
bindings?: Partial<Record<ShortcutActionId, KeyBinding | null>> }
export type ClientAppearanceSettings = {
themeMode?: ClientThemeMode
activeLightThemeSlotNo?: UserThemeSlotNo
activeDarkThemeSlotNo?: UserThemeSlotNo
activeThemeSlot?: ThemeSlotSelection
activeThemeId?: ActiveThemeId
customThemes?: Record<string, CustomClientTheme>
@@ -210,13 +221,14 @@ export const LIGHT_THEME_TOKENS: ThemeTokens = {
input: '214.3 31.8% 91.4%',
ring: '222.2 84% 4.9%',
link: '221.2 83.2% 53.3%',
topNavRootBackgroundMobile: '#fef08a',
topNavRootBackgroundDesktop: '#fefce8',
topNavHighlightBackground: '#fef08a',
topNavSubmenuBackground: '#fef08a',
topNavRootBackgroundMobile: '#fef08a',
topNavRootBackgroundDesktop: '#fefce8',
topNavActiveBackground: '#fef08a',
topNavSubmenuBackground: '#fef08a',
topNavMobileActiveBackground: '#fefce8',
topNavLink: '#db2777',
tagColours: DEFAULT_LIGHT_THEME_TAG_COLOURS }
topNavBrandLink: '#db2777',
topNavMenuLink: '#1d4ed8',
tagColours: DEFAULT_LIGHT_THEME_TAG_COLOURS }
export const DARK_THEME_TOKENS: ThemeTokens = {
background: '222.2 84% 4.9%',
foreground: '210 40% 98%',
@@ -238,13 +250,14 @@ export const DARK_THEME_TOKENS: ThemeTokens = {
input: '217.2 32.6% 17.5%',
ring: '212.7 26.8% 83.9%',
link: '213.1 93.9% 67.8%',
topNavRootBackgroundMobile: '#230505',
topNavRootBackgroundDesktop: '#230505',
topNavHighlightBackground: '#450a0a',
topNavSubmenuBackground: '#450a0a',
topNavRootBackgroundMobile: '#230505',
topNavRootBackgroundDesktop: '#230505',
topNavActiveBackground: '#450a0a',
topNavSubmenuBackground: '#450a0a',
topNavMobileActiveBackground: '#450a0a',
topNavLink: '#f9a8d4',
tagColours: DEFAULT_DARK_THEME_TAG_COLOURS }
topNavBrandLink: '#f9a8d4',
topNavMenuLink: '#93c5fd',
tagColours: DEFAULT_DARK_THEME_TAG_COLOURS }
export const BUILTIN_THEMES: Record<BuiltinThemeId, ClientTheme> = {
light: {
id: 'light',
@@ -356,6 +369,14 @@ const validListLimit = (value: unknown): ClientListLimit | null =>
value === 20 || value === 50 || value === 100 ? value : null
const normaliseThemeMode = (value: unknown): ClientThemeMode | null =>
value === 'system' || value === 'light' || value === 'dark' ? value : null
const normaliseThemeSlotNo = (value: unknown): UserThemeSlotNo | null =>
value === 1 || value === 2 || value === 3 ? value : null
const normaliseAnimationMode = (value: unknown): ClientAnimationMode | null => {
if (value === 'normal' || value === 'reduced' || value === 'off')
return value
@@ -667,6 +688,9 @@ let cachedUserThemeSlots: UserThemeSlotMap = { }
export const hasStoredClientThemeSelection = (): boolean => {
const appearance = appearanceFromSettings ()
return (
appearance.themeMode != null
|| appearance.activeLightThemeSlotNo != null
|| appearance.activeDarkThemeSlotNo != null
appearance.activeThemeSlot != null
|| appearance.activeThemeId != null
|| appearance.customThemes != null
@@ -720,6 +744,31 @@ const legacyThemeSlotSelection = (): ThemeSlotSelection => {
}
const legacyThemeMode = (): ClientThemeMode =>
normaliseThemeMode (appearanceFromSettings ().theme)
?? (
legacyThemeSlotSelection () === 'system'
? 'system'
: (baseThemeOfSelection (legacyThemeSlotSelection ()) ?? 'system')
)
const legacyThemeSlotNoFor = (
baseTheme: BuiltinThemeId,
): UserThemeSlotNo => {
const legacySelection = legacyThemeSlotSelection ()
if (isUserThemeSlotSelection (legacySelection))
{
const [_, selectionBaseTheme, slotNo] = legacySelection.split (':')
if (selectionBaseTheme === baseTheme)
return Number (slotNo) as UserThemeSlotNo
}
return 1
}
export const getClientActiveThemeSlot = (): ThemeSlotSelection =>
normaliseThemeSlotSelection (appearanceFromSettings ().activeThemeSlot)
?? legacyThemeSlotSelection ()
@@ -739,21 +788,49 @@ export const setClientActiveThemeSlot = (
export const getClientThemeMode = (): UserSettings['theme'] => {
const selection = getClientActiveThemeSlot ()
return (
normaliseThemeMode (appearanceFromSettings ().themeMode)
?? legacyThemeMode ()
)
}
if (selection === 'system')
return 'system'
return baseThemeOfSelection (selection) ?? DEFAULT_USER_SETTINGS.theme
export const getClientActiveLightThemeSlotNo = (): UserThemeSlotNo =>
normaliseThemeSlotNo (appearanceFromSettings ().activeLightThemeSlotNo)
?? legacyThemeSlotNoFor ('light')
export const getClientActiveDarkThemeSlotNo = (): UserThemeSlotNo =>
normaliseThemeSlotNo (appearanceFromSettings ().activeDarkThemeSlotNo)
?? legacyThemeSlotNoFor ('dark')
export const setClientThemeAppearance = (
{ themeMode,
activeLightThemeSlotNo,
activeDarkThemeSlotNo }: {
themeMode: ClientThemeMode
activeLightThemeSlotNo: UserThemeSlotNo
activeDarkThemeSlotNo: UserThemeSlotNo },
): void => {
updateClientSettings (settings => ({
...settings,
appearance: {
...(settings.appearance ?? { }),
themeMode,
activeLightThemeSlotNo,
activeDarkThemeSlotNo,
},
}))
}
export const setClientThemeMode = (theme: UserSettings['theme']): void => {
setClientActiveThemeSlot (
theme === 'system'
? 'system'
: `builtin:${ theme }`,
)
setClientThemeAppearance ({
themeMode: theme,
activeLightThemeSlotNo: getClientActiveLightThemeSlotNo (),
activeDarkThemeSlotNo: getClientActiveDarkThemeSlotNo (),
})
}
@@ -893,9 +970,11 @@ const normaliseThemeTokens = (
tokens.topNavRootBackgroundDesktop ?? legacyTopNavTokens.topNavBackground,
fallback.topNavRootBackgroundDesktop,
),
topNavHighlightBackground: normaliseTopNavColourValue (
tokens.topNavHighlightBackground ?? legacyTopNavTokens.topNavActiveBackground,
fallback.topNavHighlightBackground,
topNavActiveBackground: normaliseTopNavColourValue (
tokens.topNavActiveBackground
?? legacyTopNavTokens.topNavHighlightBackground
?? legacyTopNavTokens.topNavActiveBackground,
fallback.topNavActiveBackground,
),
topNavSubmenuBackground: normaliseTopNavColourValue (
tokens.topNavSubmenuBackground,
@@ -905,9 +984,16 @@ const normaliseThemeTokens = (
tokens.topNavMobileActiveBackground ?? legacyTopNavTokens.topNavBackground,
fallback.topNavMobileActiveBackground,
),
topNavLink: normaliseTopNavColourValue (
tokens.topNavLink,
fallback.topNavLink,
topNavBrandLink: normaliseTopNavColourValue (
tokens.topNavBrandLink
?? legacyTopNavTokens.topNavLink,
fallback.topNavBrandLink,
),
topNavMenuLink: normaliseTopNavColourValue (
tokens.topNavMenuLink
?? tokens.link
?? fallback.topNavMenuLink,
fallback.topNavMenuLink,
),
tagColours: normaliseThemeTagColours (tokens.tagColours, fallback.tagColours),
}
@@ -1141,6 +1227,33 @@ export const getCachedUserThemeSlots = (): UserThemeSlotMap =>
cachedUserThemeSlots
export const resolveDisplayedTheme = (
{ themeMode,
activeLightThemeSlotNo,
activeDarkThemeSlotNo }: {
themeMode: ClientThemeMode
activeLightThemeSlotNo: UserThemeSlotNo
activeDarkThemeSlotNo: UserThemeSlotNo },
themeSlots: UserThemeSlotMap = getCachedUserThemeSlots (),
): ResolvedDisplayedTheme => {
const baseTheme = resolveThemeMode (themeMode)
const slotNo =
baseTheme === 'dark'
? activeDarkThemeSlotNo
: activeLightThemeSlotNo
const selection = getUserThemeSlotSelection (baseTheme, slotNo)
return {
themeMode,
baseTheme,
selection,
slotNo,
tokens: themeSlots[selection]?.tokens
?? getDefaultUserThemeSlot (baseTheme, slotNo).tokens,
}
}
export const normaliseThemeSlotSelectionAgainstSlots = (
selection: ThemeSlotSelection,
themeSlots: UserThemeSlotMap,
@@ -1379,8 +1492,8 @@ export const applyThemeTokens = (tokens: ThemeTokens): void => {
tokens.topNavRootBackgroundDesktop,
)
root.style.setProperty (
'--top-nav-highlight-bg',
tokens.topNavHighlightBackground,
'--top-nav-active-bg',
tokens.topNavActiveBackground,
)
root.style.setProperty (
'--top-nav-submenu-bg',
@@ -1391,8 +1504,12 @@ export const applyThemeTokens = (tokens: ThemeTokens): void => {
tokens.topNavMobileActiveBackground,
)
root.style.setProperty (
'--top-nav-link',
tokens.topNavLink,
'--top-nav-brand-link',
tokens.topNavBrandLink,
)
root.style.setProperty (
'--top-nav-menu-link',
tokens.topNavMenuLink,
)
applyThemeTagColours (tokens.tagColours)
@@ -1409,10 +1526,34 @@ export const applyThemeSelection = (
}
export const applyThemeAppearanceState = (
{ themeMode,
activeLightThemeSlotNo,
activeDarkThemeSlotNo }: {
themeMode: ClientThemeMode
activeLightThemeSlotNo: UserThemeSlotNo
activeDarkThemeSlotNo: UserThemeSlotNo },
themeSlots: UserThemeSlotMap = getCachedUserThemeSlots (),
): void => {
const theme = resolveDisplayedTheme ({
themeMode,
activeLightThemeSlotNo,
activeDarkThemeSlotNo,
}, themeSlots)
applyThemeMode (theme.baseTheme)
applyThemeTokens (theme.tokens)
}
export const applyClientAppearance = (
themeSlots: UserThemeSlotMap = getCachedUserThemeSlots (),
): void => {
applyThemeSelection (getClientActiveThemeSlot (), themeSlots)
applyThemeAppearanceState ({
themeMode: getClientThemeMode (),
activeLightThemeSlotNo: getClientActiveLightThemeSlotNo (),
activeDarkThemeSlotNo: getClientActiveDarkThemeSlotNo (),
}, themeSlots)
}
frontend/src/pages/users/SettingPage.tsx
+348 -249
ファイルの表示
@@ -20,20 +20,20 @@ import { SITE_TITLE } from '@/config'
import { apiPut } from '@/lib/api'
import {
applyClientAppearance,
applyThemeSelection,
applyThemeAppearanceState,
DEFAULT_USER_SETTINGS,
deriveUserThemeModeFromSlotSelection,
fetchUserSettings,
fetchUserThemeSlots,
getClientActiveThemeSlot,
getClientActiveDarkThemeSlotNo,
getClientActiveLightThemeSlotNo,
getClientThemeMode,
getDefaultUserThemeSlot,
hasStoredClientThemeSelection,
isUserThemeSlotSelection,
normaliseThemeSlotSelectionAgainstSlots,
getUserThemeSlotSelection,
normaliseUserThemeSlots,
resolveDisplayedTheme,
setCachedUserThemeSlots,
setClientActiveThemeSlot,
resolveThemeFromSlotSelection,
setClientThemeAppearance,
updateUserSettings,
upsertUserThemeSlot,
USER_THEME_SLOT_SELECTIONS,
@@ -47,8 +47,8 @@ import type { CSSProperties, Dispatch, FC, KeyboardEvent, SetStateAction } from
import type { Category, Tag, User } from '@/types'
import type {
BuiltinThemeId,
ClientThemeMode,
ClientTheme,
ThemeSlotSelection,
ThemeTokens,
ThemeTagColours,
UserSettings,
@@ -80,12 +80,15 @@ type AccountSectionProps = {
userBaseErrors: string[]
userFieldErrors: Partial<Record<UserFormField, string[]>> }
type ThemeModeItem = {
id: ClientThemeMode
label: string }
type ThemeSelectionItem = {
id: ThemeSlotSelection
label: string
editable: boolean
baseTheme?: BuiltinThemeId
slotNo?: UserThemeSlotNo }
id: UserThemeSlotSelection
label: string
baseTheme: BuiltinThemeId
slotNo: UserThemeSlotNo }
type ThemeTokenFieldSpec = {
key: ThemeTokenKey
@@ -96,17 +99,20 @@ type ThemeTokenGroupSpec = {
fields: ThemeTokenFieldSpec[] }
type ThemeSectionProps = {
draftActiveThemeSlot: ThemeSlotSelection
draftThemeSlots: UserThemeSlotMap
editingThemeSlot: UserThemeSlotSelection | null
draftThemeMode: ClientThemeMode
draftActiveLightThemeSlotNo: UserThemeSlotNo
draftActiveDarkThemeSlotNo: UserThemeSlotNo
editingThemeSlot: UserThemeSlotSelection
selectedTheme: ClientTheme
selectedThemeLabel: string
displayedThemeLabel: string
systemThemeLabel: string
hasUnsavedChanges: boolean
settingsBaseErrors: string[]
settingsFieldErrors: Partial<Record<SettingsFormField, string[]>>
onSelectThemeSlot: (selection: ThemeSlotSelection) => void
onEditThemeSlot: (selection: UserThemeSlotSelection) => void
onEnsureEditableTheme: () => void
onSelectThemeMode: (themeMode: ClientThemeMode) => void
onSelectLightThemeSlotNo: (slotNo: UserThemeSlotNo) => void
onSelectDarkThemeSlotNo: (slotNo: UserThemeSlotNo) => void
onSelectEditingThemeSlot: (selection: UserThemeSlotSelection) => void
onThemeTokenChange: (key: ThemeTokenKey, value: string) => void
onTagColourChange: (category: Category, colour: string) => void
onResetThemeSlot: (selection: UserThemeSlotSelection) => void
@@ -117,25 +123,34 @@ type SettingsTabDirtyState = {
dirty: boolean
discard: () => void | Promise<void> }
type ThemeDraftState = {
themeMode: ClientThemeMode
activeLightThemeSlotNo: UserThemeSlotNo
activeDarkThemeSlotNo: UserThemeSlotNo
themeSlots: UserThemeSlotMap
editingThemeSlot: UserThemeSlotSelection }
const tabs: TabSpec[] = [
{ id: 'account', label: 'アカウント' },
{ id: 'behavior', label: '動作' },
{ id: 'theme', label: 'テーマ' },
{ id: 'keyboard', label: 'キーボード' } ]
const themeModeSelections: ThemeModeItem[] = [
{ id: 'system', label: 'システム設定に従う' },
{ id: 'light', label: 'ライト' },
{ id: 'dark', label: 'ダーク' } ]
const sectionClassName =
'space-y-4 rounded-xl border border-border bg-background/80 p-4'
const themeSelections: ThemeSelectionItem[] = [
{ id: 'system', label: 'システム設定', editable: false },
{ id: 'builtin:light', label: '標準ライト', editable: false },
{ id: 'builtin:dark', label: '標準ダーク', editable: false },
{ id: 'user:light:1', label: 'ライト 1', editable: true, baseTheme: 'light', slotNo: 1 },
{ id: 'user:light:2', label: 'ライト 2', editable: true, baseTheme: 'light', slotNo: 2 },
{ id: 'user:light:3', label: 'ライト 3', editable: true, baseTheme: 'light', slotNo: 3 },
{ id: 'user:dark:1', label: 'ダーク 1', editable: true, baseTheme: 'dark', slotNo: 1 },
{ id: 'user:dark:2', label: 'ダーク 2', editable: true, baseTheme: 'dark', slotNo: 2 },
{ id: 'user:dark:3', label: 'ダーク 3', editable: true, baseTheme: 'dark', slotNo: 3 },
{ id: 'user:light:1', label: 'ライト 1', baseTheme: 'light', slotNo: 1 },
{ id: 'user:light:2', label: 'ライト 2', baseTheme: 'light', slotNo: 2 },
{ id: 'user:light:3', label: 'ライト 3', baseTheme: 'light', slotNo: 3 },
{ id: 'user:dark:1', label: 'ダーク 1', baseTheme: 'dark', slotNo: 1 },
{ id: 'user:dark:2', label: 'ダーク 2', baseTheme: 'dark', slotNo: 2 },
{ id: 'user:dark:3', label: 'ダーク 3', baseTheme: 'dark', slotNo: 3 },
]
const themeTokenGroups: ThemeTokenGroupSpec[] = [
@@ -159,12 +174,13 @@ const themeTokenGroups: ThemeTokenGroupSpec[] = [
] },
{ title: '上部ナビ',
fields: [
{ key: 'topNavRootBackgroundMobile', label: '通常背景' },
{ key: 'topNavRootBackgroundMobile', label: 'スマホ背景' },
{ key: 'topNavRootBackgroundDesktop', label: 'PC 背景' },
{ key: 'topNavHighlightBackground', label: '選択中背景' },
{ key: 'topNavActiveBackground', label: '選択中背景' },
{ key: 'topNavSubmenuBackground', label: 'サブメニュー背景' },
{ key: 'topNavMobileActiveBackground', label: 'スマホ選択中背景' },
{ key: 'topNavLink', label: 'リンク' },
{ key: 'topNavBrandLink', label: 'ロゴ色' },
{ key: 'topNavMenuLink', label: 'メニュー文字色' },
] },
]
@@ -215,8 +231,8 @@ const themePreviewStyle = (tagColours: ThemeTagColours): CSSProperties =>
[`--tag-colour-${ category }`, tagColours[category]],
[`--tag-colour-${ category }-hover`, tagColours[category]]])) as CSSProperties
const themeLabelBySelection = (selection: ThemeSlotSelection): string =>
themeSelections.find (item => item.id === selection)?.label ?? 'システム設定'
const themeLabelBySelection = (selection: UserThemeSlotSelection): string =>
themeSelections.find (item => item.id === selection)?.label ?? 'ライト 1'
const ensureCompleteThemeSlots = (
themeSlots: UserThemeSlotMap,
@@ -236,31 +252,21 @@ const ensureCompleteThemeSlots = (
)
const serialiseThemeDraft = (
activeThemeSlot: ThemeSlotSelection,
themeSlots: UserThemeSlotMap,
themeMode: ClientThemeMode,
activeLightThemeSlotNo: UserThemeSlotNo,
activeDarkThemeSlotNo: UserThemeSlotNo,
themeSlots: UserThemeSlotMap,
): string =>
JSON.stringify ({
activeThemeSlot,
themeMode,
activeLightThemeSlotNo,
activeDarkThemeSlotNo,
themeSlots: USER_THEME_SLOT_SELECTIONS.map (selection => ({
selection,
tokens: themeSlots[selection]?.tokens,
})),
})
const themeToSelection = (
theme: UserSettings['theme'],
): ThemeSlotSelection =>
theme === 'system'
? 'system'
: `builtin:${ theme }`
const themeRowBaseLabel = (
selection: ThemeSlotSelection,
): string =>
selection === 'system'
? '端末設定に従います'
: themeLabelBySelection (selection)
const isTopNavThemeTokenKey = (key: ThemeTokenKey): boolean =>
key.startsWith ('topNav')
@@ -447,32 +453,27 @@ const AccountSection: FC<AccountSectionProps> = (
</section>)
const ThemeSection: FC<ThemeSectionProps> = (
{ draftActiveThemeSlot,
draftThemeSlots,
{ draftThemeMode,
draftActiveLightThemeSlotNo,
draftActiveDarkThemeSlotNo,
editingThemeSlot,
selectedTheme,
selectedThemeLabel,
displayedThemeLabel,
systemThemeLabel,
hasUnsavedChanges,
settingsBaseErrors,
settingsFieldErrors,
onSelectThemeSlot,
onEditThemeSlot,
onEnsureEditableTheme,
onSelectThemeMode,
onSelectLightThemeSlotNo,
onSelectDarkThemeSlotNo,
onSelectEditingThemeSlot,
onThemeTokenChange,
onTagColourChange,
onResetThemeSlot,
onThemeSubmit,
onThemeDiscard },
) => {
const currentSelection =
themeSelections.find (item => item.id === draftActiveThemeSlot)
?? themeSelections[0]
const currentEditableSelection =
editingThemeSlot
?? (isUserThemeSlotSelection (draftActiveThemeSlot)
? draftActiveThemeSlot
: null)
const canEditTheme = currentEditableSelection != null
const currentEditableSelection = editingThemeSlot
return (
<section className={sectionClassName}>
@@ -480,12 +481,15 @@ const ThemeSection: FC<ThemeSectionProps> = (
<div className="space-y-1">
<h2 className="text-xl font-bold">テーマ</h2>
<p className="text-sm text-muted-foreground">
現在の表示: {selectedThemeLabel}
現在表示中: {displayedThemeLabel}
</p>
{editingThemeSlot && (
{draftThemeMode === 'system' && (
<p className="text-sm text-muted-foreground">
編輯対象: {themeLabelBySelection (editingThemeSlot)}
システム設定: {systemThemeLabel}
</p>)}
<p className="text-sm text-muted-foreground">
編輯対象: {themeLabelBySelection (currentEditableSelection)}
</p>
{hasUnsavedChanges && (
<p className="text-sm text-amber-700 dark:text-amber-300">
未保存の変更があります
@@ -514,13 +518,60 @@ const ThemeSection: FC<ThemeSectionProps> = (
<div className="space-y-3 rounded-xl border border-border/70 bg-background/70 p-4">
<div className="space-y-2">
<Label>保存する枠</Label>
<div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
<Label>表示モード</Label>
<select
className={inputClass (false)}
value={draftThemeMode}
onChange={ev =>
onSelectThemeMode (ev.target.value as ClientThemeMode)}>
{themeModeSelections.map (selection => (
<option key={selection.id} value={selection.id}>
{selection.label}
</option>))}
</select>
</div>
<div className="space-y-2">
<Label>ライト用テーマ</Label>
<select
className={inputClass (false)}
value={draftActiveLightThemeSlotNo}
onChange={ev =>
onSelectLightThemeSlotNo (Number (ev.target.value) as UserThemeSlotNo)}>
{themeSelections
.filter (selection => selection.baseTheme === 'light')
.map (selection => (
<option key={selection.id} value={selection.slotNo}>
{selection.label}
</option>))}
</select>
</div>
<div className="space-y-2">
<Label>ダーク用テーマ</Label>
<select
className={inputClass (false)}
value={draftActiveDarkThemeSlotNo}
onChange={ev =>
onSelectDarkThemeSlotNo (Number (ev.target.value) as UserThemeSlotNo)}>
{themeSelections
.filter (selection => selection.baseTheme === 'dark')
.map (selection => (
<option key={selection.id} value={selection.slotNo}>
{selection.label}
</option>))}
</select>
</div>
<div className="space-y-2">
<Label htmlFor="theme-slot-select">編輯対象</Label>
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
<select
id="theme-slot-select"
className={cn (inputClass (false), 'w-full min-w-0 sm:w-64')}
value={draftActiveThemeSlot}
value={currentEditableSelection}
onChange={ev =>
onSelectThemeSlot (ev.target.value as ThemeSlotSelection)}>
onSelectEditingThemeSlot (ev.target.value as UserThemeSlotSelection)}>
{themeSelections.map (selection => (
<option key={selection.id} value={selection.id}>
{selection.label}
@@ -529,43 +580,15 @@ const ThemeSection: FC<ThemeSectionProps> = (
<Button
type="button"
variant="outline"
onClick={() => {
if (isUserThemeSlotSelection (draftActiveThemeSlot))
{
onEditThemeSlot (draftActiveThemeSlot)
return
}
onEnsureEditableTheme ()
}}>
{canEditTheme ? 'この枠を編輯' : '編輯する枠を選ぶ'}
variant="ghost"
onClick={() => onResetThemeSlot (currentEditableSelection)}>
既定に戻す
</Button>
{currentEditableSelection && (
<Button
type="button"
variant="ghost"
onClick={() => onResetThemeSlot (currentEditableSelection)}>
既定に戻す
</Button>)}
</div>
</div>
<div className="space-y-1">
<p className="text-sm font-semibold">{currentSelection.label}</p>
<p className="text-sm text-muted-foreground">
{themeRowBaseLabel (currentSelection.id)}
</p>
{canEditTheme
? (
<p className="text-sm text-muted-foreground">
この枠への変更は保存時に反映されます。
</p>)
: (
<p className="text-sm text-muted-foreground">
標準テーマは直接編輯できません。編輯する枠を選んでください。
</p>)}
<div className="space-y-1 text-sm text-muted-foreground">
<p>変更は保存時に反映されます。</p>
</div>
<div style={themePreviewStyle (selectedTheme.tokens.tagColours)}>
@@ -593,10 +616,9 @@ const ThemeSection: FC<ThemeSectionProps> = (
<p className="text-sm font-medium">{field.label}</p>
</div>
<div className="flex flex-wrap items-center gap-3">
<input
<input
type="color"
value={themeTokenToHex (field.key, selectedTheme.tokens[field.key])}
disabled={!(canEditTheme)}
onChange={ev =>
onThemeTokenChange (field.key, hexToThemeToken (field.key, ev.target.value))}
className="h-10 w-16 cursor-pointer rounded border border-border
@@ -635,7 +657,6 @@ const ThemeSection: FC<ThemeSectionProps> = (
<input
type="color"
value={selectedTheme.tokens.tagColours[category]}
disabled={!(canEditTheme)}
onChange={ev => onTagColourChange (category, ev.target.value)}
className="h-10 w-16 cursor-pointer rounded border border-border
bg-transparent p-1 disabled:cursor-not-allowed
@@ -659,16 +680,26 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
const [name, setName] = useState ('')
const [settingsError, setSettingsError] = useState<string | null> (null)
const [, setDraftSettings] = useState<UserSettings> (DEFAULT_USER_SETTINGS)
const [savedActiveThemeSlot, setSavedActiveThemeSlot] =
useState<ThemeSlotSelection> (getClientActiveThemeSlot ())
const [draftActiveThemeSlot, setDraftActiveThemeSlot] =
useState<ThemeSlotSelection> (getClientActiveThemeSlot ())
const [savedThemeMode, setSavedThemeMode] =
useState<ClientThemeMode> (getClientThemeMode ())
const [draftThemeMode, setDraftThemeMode] =
useState<ClientThemeMode> (getClientThemeMode ())
const [savedActiveLightThemeSlotNo, setSavedActiveLightThemeSlotNo] =
useState<UserThemeSlotNo> (getClientActiveLightThemeSlotNo ())
const [draftActiveLightThemeSlotNo, setDraftActiveLightThemeSlotNo] =
useState<UserThemeSlotNo> (getClientActiveLightThemeSlotNo ())
const [savedActiveDarkThemeSlotNo, setSavedActiveDarkThemeSlotNo] =
useState<UserThemeSlotNo> (getClientActiveDarkThemeSlotNo ())
const [draftActiveDarkThemeSlotNo, setDraftActiveDarkThemeSlotNo] =
useState<UserThemeSlotNo> (getClientActiveDarkThemeSlotNo ())
const [savedThemeSlots, setSavedThemeSlots] =
useState<UserThemeSlotMap> (() => ensureCompleteThemeSlots ({ }))
const [draftThemeSlots, setDraftThemeSlots] =
useState<UserThemeSlotMap> (() => ensureCompleteThemeSlots ({ }))
const [savedEditingThemeSlot, setSavedEditingThemeSlot] =
useState<UserThemeSlotSelection> ('user:light:1')
const [editingThemeSlot, setEditingThemeSlot] =
useState<UserThemeSlotSelection | null> (null)
useState<UserThemeSlotSelection> ('user:light:1')
const [dirtyStates, setDirtyStates] =
useState<Partial<Record<SettingsTab, SettingsTabDirtyState>>> ({ })
const [userCodeVsbl, setUserCodeVsbl] = useState (false)
@@ -684,25 +715,59 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
useValidationErrors<SettingsFormField> ()
const activeTab = useMemo<SettingsTab> (() => parseTab (location.search), [location.search])
const displayedThemeSelection = useMemo (
() => resolveDisplayedTheme ({
themeMode: draftThemeMode,
activeLightThemeSlotNo: draftActiveLightThemeSlotNo,
activeDarkThemeSlotNo: draftActiveDarkThemeSlotNo,
}, draftThemeSlots),
[draftActiveDarkThemeSlotNo,
draftActiveLightThemeSlotNo,
draftThemeMode,
draftThemeSlots],
)
const selectedTheme = useMemo<ClientTheme> (
() => {
const resolvedTheme =
resolveThemeFromSlotSelection (draftActiveThemeSlot, draftThemeSlots)
const currentSelection =
themeSelections.find (selection => selection.id === editingThemeSlot)
?? themeSelections[0]
const themeSlot =
draftThemeSlots[currentSelection.id]
?? getDefaultUserThemeSlot (currentSelection.baseTheme, currentSelection.slotNo)
return {
id: resolvedTheme.baseTheme,
name: themeLabelBySelection (draftActiveThemeSlot),
builtin: resolvedTheme.builtin,
baseTheme: resolvedTheme.baseTheme,
tokens: resolvedTheme.tokens,
id: currentSelection.baseTheme,
name: themeLabelBySelection (currentSelection.id),
builtin: false,
baseTheme: currentSelection.baseTheme,
tokens: themeSlot.tokens,
}
},
[draftActiveThemeSlot, draftThemeSlots],
[draftThemeSlots, editingThemeSlot],
)
const hasUnsavedThemeChanges = useMemo (
() =>
serialiseThemeDraft (draftActiveThemeSlot, draftThemeSlots)
!== serialiseThemeDraft (savedActiveThemeSlot, savedThemeSlots),
[draftActiveThemeSlot, draftThemeSlots, savedActiveThemeSlot, savedThemeSlots],
serialiseThemeDraft (
draftThemeMode,
draftActiveLightThemeSlotNo,
draftActiveDarkThemeSlotNo,
draftThemeSlots,
)
!== serialiseThemeDraft (
savedThemeMode,
savedActiveLightThemeSlotNo,
savedActiveDarkThemeSlotNo,
savedThemeSlots,
),
[draftActiveDarkThemeSlotNo,
draftActiveLightThemeSlotNo,
draftThemeMode,
draftThemeSlots,
editingThemeSlot,
savedActiveDarkThemeSlotNo,
savedActiveLightThemeSlotNo,
savedEditingThemeSlot,
savedThemeMode,
savedThemeSlots],
)
const applyActiveTab = (tab: SettingsTab) => {
@@ -753,25 +818,63 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
[conflictActionIds.size, settingsFieldErrors.theme, userFieldErrors.name],
)
const applyDraftThemeSelection = (
activeThemeSlot: ThemeSlotSelection,
themeSlots: UserThemeSlotMap,
const applyDraftThemeState = (
{ themeMode = draftThemeMode,
activeLightThemeSlotNo = draftActiveLightThemeSlotNo,
activeDarkThemeSlotNo = draftActiveDarkThemeSlotNo,
themeSlots = draftThemeSlots,
nextEditingThemeSlot = editingThemeSlot }: {
themeMode?: ClientThemeMode
activeLightThemeSlotNo?: UserThemeSlotNo
activeDarkThemeSlotNo?: UserThemeSlotNo
themeSlots?: UserThemeSlotMap
nextEditingThemeSlot?: UserThemeSlotSelection },
) => {
setDraftActiveThemeSlot (activeThemeSlot)
setDraftThemeMode (themeMode)
setDraftActiveLightThemeSlotNo (activeLightThemeSlotNo)
setDraftActiveDarkThemeSlotNo (activeDarkThemeSlotNo)
setDraftThemeSlots (themeSlots)
setEditingThemeSlot (nextEditingThemeSlot)
setDraftSettings (current => ({
...current,
theme: deriveUserThemeModeFromSlotSelection (activeThemeSlot),
theme: themeMode,
}))
applyThemeSelection (activeThemeSlot, themeSlots)
setCachedUserThemeSlots (themeSlots)
applyThemeAppearanceState ({
themeMode,
activeLightThemeSlotNo,
activeDarkThemeSlotNo,
}, themeSlots)
}
const currentThemeDraftState = (): ThemeDraftState => ({
themeMode: draftThemeMode,
activeLightThemeSlotNo: draftActiveLightThemeSlotNo,
activeDarkThemeSlotNo: draftActiveDarkThemeSlotNo,
themeSlots: draftThemeSlots,
editingThemeSlot,
})
const savedThemeDraftState = (): ThemeDraftState => ({
themeMode: savedThemeMode,
activeLightThemeSlotNo: savedActiveLightThemeSlotNo,
activeDarkThemeSlotNo: savedActiveDarkThemeSlotNo,
themeSlots: savedThemeSlots,
editingThemeSlot: savedEditingThemeSlot,
})
const discardThemeChanges = () => {
setDraftActiveThemeSlot (savedActiveThemeSlot)
setDraftThemeMode (savedThemeMode)
setDraftActiveLightThemeSlotNo (savedActiveLightThemeSlotNo)
setDraftActiveDarkThemeSlotNo (savedActiveDarkThemeSlotNo)
setDraftThemeSlots (savedThemeSlots)
setEditingThemeSlot (null)
setEditingThemeSlot (savedEditingThemeSlot)
setCachedUserThemeSlots (savedThemeSlots)
setClientActiveThemeSlot (savedActiveThemeSlot)
setClientThemeAppearance ({
themeMode: savedThemeMode,
activeLightThemeSlotNo: savedActiveLightThemeSlotNo,
activeDarkThemeSlotNo: savedActiveDarkThemeSlotNo,
})
applyClientAppearance (savedThemeSlots)
}
@@ -800,66 +903,42 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
applyActiveTab (nextTab)
}
const requestThemeSlotSelection = async (
selection: ThemeSlotSelection,
editingSlot: UserThemeSlotSelection | null,
const requestThemeStateChange = async (
buildNextState: (baseState: ThemeDraftState) => ThemeDraftState,
description = 'このまま切り替えると、保存していない変更は失われます。',
cancelText = 'このまま編集する',
confirmText = '変更を破棄して切り替える',
): Promise<void> => {
if (
selection === draftActiveThemeSlot
&& editingSlot === editingThemeSlot
)
return
const baseState =
hasUnsavedThemeChanges
? savedThemeDraftState ()
: currentThemeDraftState ()
if (hasUnsavedThemeChanges)
{
const confirmed = await confirmDiscardChanges (
'このまま切り替えると、保存していない変更は失われます。',
'この枠に残る',
'変更を破棄して切り替える',
description,
cancelText,
confirmText,
)
if (!(confirmed))
return
discardThemeChanges ()
}
setEditingThemeSlot (editingSlot)
applyDraftThemeSelection (selection, savedThemeSlots)
}
const nextState = buildNextState (baseState)
const ensureEditableThemeSlot = async (): Promise<UserThemeSlotSelection | null> => {
if (editingThemeSlot != null)
return editingThemeSlot
if (isUserThemeSlotSelection (draftActiveThemeSlot))
{
setEditingThemeSlot (draftActiveThemeSlot)
return draftActiveThemeSlot
}
const choice = await dialogue.choice<UserThemeSlotSelection> ({
title: '保存先を選択してください',
description: '色を変更する前に、保存先のテーマ枠を選択してください。',
cancelText: '取消',
choices: themeSelections
.filter (selection => selection.editable)
.map (selection => ({
value: selection.id as UserThemeSlotSelection,
label: selection.label,
})),
applyDraftThemeState ({
themeMode: nextState.themeMode,
activeLightThemeSlotNo: nextState.activeLightThemeSlotNo,
activeDarkThemeSlotNo: nextState.activeDarkThemeSlotNo,
themeSlots: nextState.themeSlots,
nextEditingThemeSlot: nextState.editingThemeSlot,
})
if (choice == null)
return null
setEditingThemeSlot (choice)
applyDraftThemeSelection (choice, savedThemeSlots)
return choice
}
const updateDraftThemeSlot = (
selection: UserThemeSlotSelection,
updater: (tokens: ThemeTokens) => ThemeTokens,
options?: { activeThemeSlot?: ThemeSlotSelection },
) => {
const currentThemeSlot =
draftThemeSlots[selection]
@@ -872,10 +951,10 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
},
}
applyDraftThemeSelection (
options?.activeThemeSlot ?? draftActiveThemeSlot,
nextThemeSlots,
)
applyDraftThemeState ({
themeSlots: nextThemeSlots,
nextEditingThemeSlot: selection,
})
}
const handleTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
@@ -944,8 +1023,7 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
const draftThemeSlot = draftThemeSlots[selection]
const savedThemeSlot = savedThemeSlots[selection]
const requiresPersist =
selection === draftActiveThemeSlot
&& isUserThemeSlotSelection (draftActiveThemeSlot)
selection === editingThemeSlot
&& savedThemeSlot?.createdAt == null
if (
@@ -969,21 +1047,22 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
}
}
const themeMode =
deriveUserThemeModeFromSlotSelection (draftActiveThemeSlot)
const data = await updateUserSettings ({ theme: themeMode })
const data = await updateUserSettings ({ theme: draftThemeMode })
const completeThemeSlots = ensureCompleteThemeSlots (nextSavedThemeSlots)
setDraftSettings ({ ...data, theme: themeMode })
setSavedActiveThemeSlot (draftActiveThemeSlot)
setDraftSettings ({ ...data, theme: draftThemeMode })
setSavedThemeMode (draftThemeMode)
setSavedActiveLightThemeSlotNo (draftActiveLightThemeSlotNo)
setSavedActiveDarkThemeSlotNo (draftActiveDarkThemeSlotNo)
setSavedThemeSlots (completeThemeSlots)
setDraftThemeSlots (completeThemeSlots)
setEditingThemeSlot (
isUserThemeSlotSelection (draftActiveThemeSlot)
? draftActiveThemeSlot
: null,
)
setClientActiveThemeSlot (draftActiveThemeSlot)
setSavedEditingThemeSlot (editingThemeSlot)
setEditingThemeSlot (editingThemeSlot)
setClientThemeAppearance ({
themeMode: draftThemeMode,
activeLightThemeSlotNo: draftActiveLightThemeSlotNo,
activeDarkThemeSlotNo: draftActiveDarkThemeSlotNo,
})
setCachedUserThemeSlots (completeThemeSlots)
applyClientAppearance (completeThemeSlots)
toast ({ title: 'テーマ設定を保存しました．' })
@@ -1026,31 +1105,35 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
const storedThemeSlots = normaliseUserThemeSlots (themeSlots)
const completeThemeSlots = ensureCompleteThemeSlots (storedThemeSlots)
const initialSelection = (
const themeMode =
hasStoredClientThemeSelection ()
? getClientActiveThemeSlot ()
: themeToSelection (settings.theme)
)
const nextSelection = normaliseThemeSlotSelectionAgainstSlots (
initialSelection,
storedThemeSlots,
)
const themeMode = deriveUserThemeModeFromSlotSelection (nextSelection)
? getClientThemeMode ()
: settings.theme
const activeLightThemeSlotNo = getClientActiveLightThemeSlotNo ()
const activeDarkThemeSlotNo = getClientActiveDarkThemeSlotNo ()
const initialEditingThemeSlot = resolveDisplayedTheme ({
themeMode,
activeLightThemeSlotNo,
activeDarkThemeSlotNo,
}, completeThemeSlots).selection
setDraftSettings ({ ...settings, theme: themeMode })
setSavedActiveThemeSlot (nextSelection)
setDraftActiveThemeSlot (nextSelection)
setSavedThemeMode (themeMode)
setDraftThemeMode (themeMode)
setSavedActiveLightThemeSlotNo (activeLightThemeSlotNo)
setDraftActiveLightThemeSlotNo (activeLightThemeSlotNo)
setSavedActiveDarkThemeSlotNo (activeDarkThemeSlotNo)
setDraftActiveDarkThemeSlotNo (activeDarkThemeSlotNo)
setSavedThemeSlots (completeThemeSlots)
setDraftThemeSlots (completeThemeSlots)
setEditingThemeSlot (
isUserThemeSlotSelection (nextSelection)
? nextSelection
: null,
)
setSavedEditingThemeSlot (initialEditingThemeSlot)
setEditingThemeSlot (initialEditingThemeSlot)
setCachedUserThemeSlots (completeThemeSlots)
applyThemeSelection (nextSelection, completeThemeSlots)
if (nextSelection !== initialSelection)
setClientActiveThemeSlot (nextSelection)
applyThemeAppearanceState ({
themeMode,
activeLightThemeSlotNo,
activeDarkThemeSlotNo,
}, completeThemeSlots)
setSettingsError (null)
}
catch
@@ -1083,12 +1166,21 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
}, [location.pathname, location.search, settingsFieldErrors.theme])
useEffect (() => {
applyThemeSelection (draftActiveThemeSlot, draftThemeSlots)
applyThemeAppearanceState ({
themeMode: draftThemeMode,
activeLightThemeSlotNo: draftActiveLightThemeSlotNo,
activeDarkThemeSlotNo: draftActiveDarkThemeSlotNo,
}, draftThemeSlots)
return () => {
applyThemeSelection (savedActiveThemeSlot, savedThemeSlots)
setCachedUserThemeSlots (savedThemeSlots)
applyClientAppearance (savedThemeSlots)
}
}, [draftActiveThemeSlot, draftThemeSlots, savedActiveThemeSlot, savedThemeSlots])
}, [draftActiveDarkThemeSlotNo,
draftActiveLightThemeSlotNo,
draftThemeMode,
draftThemeSlots,
savedThemeSlots])
const accountSectionProps: AccountSectionProps | null =
user
@@ -1109,7 +1201,7 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
dirty: hasUnsavedThemeChanges,
discard: handleThemeDiscard,
})
}, [hasUnsavedThemeChanges, savedActiveThemeSlot, savedThemeSlots])
}, [hasUnsavedThemeChanges, savedThemeSlots])
useKeyboardShortcuts ({
'settings.account': () => {
@@ -1127,49 +1219,56 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
})
const themeSectionProps: ThemeSectionProps = {
draftActiveThemeSlot,
draftThemeSlots,
draftThemeMode,
draftActiveLightThemeSlotNo,
draftActiveDarkThemeSlotNo,
editingThemeSlot,
selectedTheme,
selectedThemeLabel: themeLabelBySelection (draftActiveThemeSlot),
displayedThemeLabel: themeLabelBySelection (displayedThemeSelection.selection),
systemThemeLabel: displayedThemeSelection.baseTheme === 'dark' ? 'ダーク' : 'ライト',
hasUnsavedChanges: hasUnsavedThemeChanges,
settingsBaseErrors,
settingsFieldErrors,
onSelectThemeSlot: selection => {
void requestThemeSlotSelection (selection, null)
onSelectThemeMode: themeMode => {
void requestThemeStateChange (baseState => ({
...baseState,
themeMode,
}))
},
onEditThemeSlot: selection => {
void requestThemeSlotSelection (selection, selection)
onSelectLightThemeSlotNo: slotNo => {
void requestThemeStateChange (baseState => ({
...baseState,
activeLightThemeSlotNo: slotNo,
editingThemeSlot: getUserThemeSlotSelection ('light', slotNo),
}))
},
onEnsureEditableTheme: () => {
void ensureEditableThemeSlot ()
onSelectDarkThemeSlotNo: slotNo => {
void requestThemeStateChange (baseState => ({
...baseState,
activeDarkThemeSlotNo: slotNo,
editingThemeSlot: getUserThemeSlotSelection ('dark', slotNo),
}))
},
onSelectEditingThemeSlot: selection => {
void requestThemeStateChange (baseState => ({
...baseState,
editingThemeSlot: selection,
}))
},
onThemeTokenChange: (key, value) => {
void (async () => {
const editableThemeSlot = await ensureEditableThemeSlot ()
if (editableThemeSlot == null)
return
updateDraftThemeSlot (editableThemeSlot, tokens => ({
...tokens,
[key]: value,
}), { activeThemeSlot: editableThemeSlot })
}) ()
updateDraftThemeSlot (editingThemeSlot, tokens => ({
...tokens,
[key]: value,
}))
},
onTagColourChange: (category, colour) => {
void (async () => {
const editableThemeSlot = await ensureEditableThemeSlot ()
if (editableThemeSlot == null)
return
updateDraftThemeSlot (editableThemeSlot, tokens => ({
...tokens,
tagColours: {
...tokens.tagColours,
[category]: colour,
},
}), { activeThemeSlot: editableThemeSlot })
}) ()
updateDraftThemeSlot (editingThemeSlot, tokens => ({
...tokens,
tagColours: {
...tokens.tagColours,
[category]: colour,
},
}))
},
onResetThemeSlot: selection => {
const baseTheme =