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

#34

ソースを参照
このコミットが含まれているのは:
みてるぞ
2026-07-04 19:50:40 +09:00
親 6a57dc53bf
コミット 4cc2dc5441
10個のファイルの変更，542行の追加，293行の削除
Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む
backend/app/controllers/user_settings_controller.rb
+5 -1
ファイルの表示
@@ -25,7 +25,11 @@ class UserSettingsController < ApplicationController
private
def current_setting
current_user.setting || current_user.create_setting!(Setting.defaults)
Setting.find_or_create_by!(user: current_user) do |setting|
setting.assign_attributes(Setting.defaults)
end
rescue ActiveRecord::RecordNotUnique
Setting.find_by!(user: current_user)
end
def validate_raw_attributes raw_attributes
backend/app/models/setting.rb
+1 -1
ファイルの表示
@@ -15,7 +15,7 @@ class Setting < ApplicationRecord
'updated_at_asc',
'updated_at_desc',
].freeze
VIEWED_POST_DISPLAYS = ['show', 'dim', 'hide'].freeze
VIEWED_POST_DISPLAYS = ['show', 'dim'].freeze
AUTO_FETCH_MODES = ['auto', 'manual', 'off'].freeze
WIKI_EDITOR_MODES = ['split', 'write', 'preview'].freeze
frontend/src/components/PostFormTagsArea.tsx
+4 -5
ファイルの表示
@@ -2,7 +2,6 @@
import { useRef, useState } from 'react'
import { useUserSettings } from '@/components/users/UserSettingsProvider'
import TagSearchBox from '@/components/TagSearchBox'
import FormField from '@/components/common/FormField'
import TextArea from '@/components/common/TextArea'
@@ -40,7 +39,6 @@ type Props = Omit<ComponentPropsWithoutRef<'textarea'>, 'value' | 'onChange' | '
const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
const ref = useRef<HTMLTextAreaElement> (null)
const { settings } = useUserSettings ()
const [bounds, setBounds] = useState<{ start: number; end: number }> ({ start: 0, end: 0 })
const [focused, setFocused] = useState (false)
@@ -72,9 +70,10 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: {
q: token,
nico: settings.tagAutocompleteNico ? '1' : '0' } })
setSuggestions (data.filter (t => t.postCount > 0))
setSuggestionsVsbl (suggestions.length > 0)
nico: '0' } })
const nextSuggestions = data.filter (t => t.postCount > 0)
setSuggestions (nextSuggestions)
setSuggestionsVsbl (nextSuggestions.length > 0)
}
return (
frontend/src/components/PostList.tsx
+1 -5
ファイルの表示
@@ -22,14 +22,10 @@ const PostList: FC<Props> = ({ posts, onClick }) => {
const setForLocationKey = useSharedTransitionStore (s => s.setForLocationKey)
const cardRef = useRef<HTMLDivElement> (null)
const visiblePosts =
settings.viewedPostDisplay === 'hide'
? posts.filter (post => !(post.viewed))
: posts
return (
<div className="flex flex-wrap gap-6 p-4">
{visiblePosts.map ((post, i) => {
{posts.map ((post, i) => {
const sharedId = `page-${ post.id }`
const layoutId = sharedId
frontend/src/components/common/TagInput.tsx
+3 -3
ファイルの表示
@@ -37,9 +37,9 @@ const TagInput: FC<Props> = ({ describedBy, invalid, value, setValue }) => {
const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: {
q,
nico: settings.tagAutocompleteNico ? '1' : '0' } })
setSuggestions (data.filter (t => t.postCount > 0))
if (suggestions.length > 0)
setSuggestionsVsbl (true)
const nextSuggestions = data.filter (t => t.postCount > 0)
setSuggestions (nextSuggestions)
setSuggestionsVsbl (nextSuggestions.length > 0)
}
// TODO: TagSearch からのコピペのため，共通化を考へる．
frontend/src/components/users/UserSettingsProvider.tsx
+8 -1
ファイルの表示
@@ -9,6 +9,7 @@ import type { UserSettings } from '@/lib/settings'
type ContextValue = {
loaded: boolean
error: string | null
settings: UserSettings
setSettings: Dispatch<SetStateAction<UserSettings>> }
@@ -41,6 +42,7 @@ const applyTheme = (theme: UserSettings['theme']) => {
export const UserSettingsProvider: FC<{
children: ReactNode
user: User | null }> = ({ children, user }) => {
const [error, setError] = useState<string | null> (null)
const [loaded, setLoaded] = useState (false)
const [settings, setSettings] = useState<UserSettings> (DEFAULT_USER_SETTINGS)
@@ -49,12 +51,14 @@ export const UserSettingsProvider: FC<{
if (!(user))
{
setError (null)
setSettings (DEFAULT_USER_SETTINGS)
setLoaded (true)
return
}
setLoaded (false)
setError (null)
void (async () => {
try
@@ -62,6 +66,7 @@ export const UserSettingsProvider: FC<{
const next = await fetchUserSettings ()
if (!(cancelled))
{
setError (null)
setSettings (next)
setLoaded (true)
}
@@ -70,6 +75,7 @@ export const UserSettingsProvider: FC<{
{
if (!(cancelled))
{
setError ('設定を読み込めませんでした．既定値で表示しています．')
setSettings (DEFAULT_USER_SETTINGS)
setLoaded (true)
}
@@ -89,10 +95,11 @@ export const UserSettingsProvider: FC<{
}, [settings.displayDensity, settings.fontSize])
const value = useMemo<ContextValue> (() => ({
error,
loaded,
settings,
setSettings,
}), [loaded, settings])
}), [error, loaded, settings])
return (
<UserSettingsContext.Provider value={value}>
frontend/src/lib/settings.ts
+4 -2
ファイルの表示
@@ -2,6 +2,7 @@ import { apiGet, apiPatch } from '@/lib/api'
import type { FetchPostsOrder } from '@/types'
// DB-backed user settings. These are shared across browsers for the same user.
export type UserPostListOrder =
| 'title_asc'
| 'title_desc'
@@ -20,7 +21,7 @@ export type UserSettings = {
fontSize: 'small' | 'normal' | 'large'
postListLimit: 20 | 50 | 100
postListOrder: UserPostListOrder
viewedPostDisplay: 'show' | 'dim' | 'hide'
viewedPostDisplay: 'show' | 'dim'
tagAutocompleteNico: boolean
autoFetchTitle: 'auto' | 'manual' | 'off'
autoFetchThumbnail: 'auto' | 'manual' | 'off'
@@ -31,6 +32,7 @@ export type TheatreTagFlow = 'vertical' | 'horizontal'
export type GekanatorBackgroundMotionMode = 'on' | 'calm' | 'off'
export type ClientPaneBreakpoint = 'desktop' | 'tablet'
// Browser-local settings. These stay in localStorage and are never synced to DB.
type ClientPaneSettings = {
widthPxByBreakpoint?: Partial<Record<ClientPaneBreakpoint, number>>
collapsed?: boolean }
@@ -77,7 +79,7 @@ export const POST_LIST_ORDER_OPTIONS = [
'updated_at_asc',
'updated_at_desc',
] as const
export const VIEWED_POST_DISPLAY_OPTIONS = ['show', 'dim', 'hide'] as const
export const VIEWED_POST_DISPLAY_OPTIONS = ['show', 'dim'] as const
export const AUTO_FETCH_OPTIONS = ['auto', 'manual', 'off'] as const
export const WIKI_EDITOR_MODE_OPTIONS = ['split', 'write', 'preview'] as const
frontend/src/pages/posts/PostNewPage.tsx
+75 -44
ファイルの表示
@@ -43,18 +43,21 @@ const PostNewPage: FC<Props> = ({ user }) => {
const [parentPostIds, setParentPostIds] = useState ('')
const [tags, setTags] = useState ('')
const [duration, setDuration] = useState ('')
const [thumbnailAutoFlg, setThumbnailAutoFlg] =
useState (settings.autoFetchThumbnail === 'auto')
const [thumbnailFile, setThumbnailFile] = useState<File | null> (null)
const [thumbnailLoading, setThumbnailLoading] = useState (false)
const [thumbnailPreview, setThumbnailPreview] = useState<string> ('')
const [title, setTitle] = useState ('')
const [titleAutoFlg, setTitleAutoFlg] = useState (settings.autoFetchTitle === 'auto')
const [titleLoading, setTitleLoading] = useState (false)
const [url, setURL] = useState ('')
const previousURLRef = useRef ('')
const thumbnailPreviewRef = useRef ('')
const titleFetchMode = settings.autoFetchTitle
const thumbnailFetchMode = settings.autoFetchThumbnail
const titleAutoFlg = titleFetchMode === 'auto'
const thumbnailAutoFlg = thumbnailFetchMode === 'auto'
const titleFetchVisible = titleFetchMode !== 'off'
const thumbnailFetchVisible = thumbnailFetchMode !== 'off'
const videoFlg =
useMemo (() => tags.split (/\s+/).some (tag => tag.replace (/\[.*\]$/, '') === '動画'),
[tags])
@@ -103,9 +106,15 @@ const PostNewPage: FC<Props> = ({ user }) => {
const fetchTitle = useCallback (async () => {
setTitle ('')
setTitleLoading (true)
const data = await apiGet<{ title: string }> ('/preview/title', { params: { url } })
setTitle (data.title || '')
setTitleLoading (false)
try
{
const data = await apiGet<{ title: string }> ('/preview/title', { params: { url } })
setTitle (data.title || '')
}
finally
{
setTitleLoading (false)
}
}, [url])
const fetchThumbnail = useCallback (async () => {
@@ -114,28 +123,26 @@ const PostNewPage: FC<Props> = ({ user }) => {
setThumbnailLoading (true)
if (thumbnailPreviewRef.current)
URL.revokeObjectURL (thumbnailPreviewRef.current)
const data = await apiGet<Blob> ('/preview/thumbnail',
{ params: { url }, responseType: 'blob' })
const imageURL = URL.createObjectURL (data)
setThumbnailPreview (imageURL)
setThumbnailFile (new File ([data],
'thumbnail.png',
{ type: data.type || 'image/png' }))
setThumbnailLoading (false)
try
{
const data = await apiGet<Blob> ('/preview/thumbnail',
{ params: { url }, responseType: 'blob' })
const imageURL = URL.createObjectURL (data)
setThumbnailPreview (imageURL)
setThumbnailFile (new File ([data],
'thumbnail.png',
{ type: data.type || 'image/png' }))
}
finally
{
setThumbnailLoading (false)
}
}, [url])
useEffect (() => {
thumbnailPreviewRef.current = thumbnailPreview
}, [thumbnailPreview])
useEffect (() => {
setTitleAutoFlg (settings.autoFetchTitle === 'auto')
}, [settings.autoFetchTitle])
useEffect (() => {
setThumbnailAutoFlg (settings.autoFetchThumbnail === 'auto')
}, [settings.autoFetchThumbnail])
useEffect (() => {
if (titleAutoFlg && url)
fetchTitle ()
@@ -172,34 +179,58 @@ const PostNewPage: FC<Props> = ({ user }) => {
</FormField>
{/* タイトル */}
<FormField
checkBox={{
label: '自動',
checked: titleAutoFlg,
onChange: ev => setTitleAutoFlg (ev.target.checked)}}
label="タイトル"
messages={fieldErrors.title}>
<FormField label="タイトル" messages={fieldErrors.title}>
{({ describedBy, invalid }) => (
<input type="text"
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}
value={title}
placeholder={titleLoading ? 'Loading...' : ''}
onChange={ev => setTitle (ev.target.value)}
disabled={titleAutoFlg}/>)}
<div className="space-y-2">
<input type="text"
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}
value={title}
placeholder={titleLoading ? 'Loading...' : ''}
onChange={ev => setTitle (ev.target.value)}
disabled={titleAutoFlg}/>
<div className="flex flex-wrap items-center gap-2 text-sm">
<span>
{titleAutoFlg
? 'URL 入力時に自動取得します．'
: titleFetchMode === 'manual'
? '自動取得しません．必要なら手動で取得できます．'
: '取得機能は無効です．'}
</span>
{titleFetchVisible && !(titleAutoFlg) && (
<Button
type="button"
variant="outline"
onClick={() => void fetchTitle ()}
disabled={!(url) || titleLoading}>
取得
</Button>)}
</div>
</div>)}
</FormField>
{/* サムネール */}
<FormField
checkBox={{
label: '自動',
checked: thumbnailAutoFlg,
onChange: ev => setThumbnailAutoFlg (ev.target.checked)}}
label="サムネール"
messages={fieldErrors.thumbnail}>
<FormField label="サムネール" messages={fieldErrors.thumbnail}>
{({ describedBy, invalid }) => (
<>
<div className="mb-2 flex flex-wrap items-center gap-2 text-sm">
<span>
{thumbnailAutoFlg
? 'URL 入力時に自動取得します．'
: thumbnailFetchMode === 'manual'
? '自動取得しません．必要なら手動で取得できます．'
: '取得機能は無効です．'}
</span>
{thumbnailFetchVisible && !(thumbnailAutoFlg) && (
<Button
type="button"
variant="outline"
onClick={() => void fetchThumbnail ()}
disabled={!(url) || thumbnailLoading}>
取得
</Button>)}
</div>
{thumbnailAutoFlg
? (thumbnailLoading
? <p className="text-gray-500 text-sm">Loading...</p>
frontend/src/pages/posts/PostSearchPage.tsx
+2 -6
ファイルの表示
@@ -85,10 +85,6 @@ const PostSearchPage: FC = () => {
queryKey: postsKeys.index (keys),
queryFn: () => fetchPosts (keys) })
const results = data?.posts ?? []
const visibleResults =
settings.viewedPostDisplay === 'hide'
? results.filter (row => !(row.viewed))
: results
const totalPages = data ? Math.ceil (data.count / limit) : 0
useEffect (() => {
@@ -247,7 +243,7 @@ const PostSearchPage: FC = () => {
</form>
</div>
{loading ? 'Loading...' : (visibleResults.length > 0 ? (
{loading ? 'Loading...' : (results.length > 0 ? (
<div className="mt-4">
<div className="overflow-x-auto">
<table className="w-full min-w-[1200px] table-fixed border-collapse">
@@ -303,7 +299,7 @@ const PostSearchPage: FC = () => {
</tr>
</thead>
<tbody>
{visibleResults.map (row => (
{results.map (row => (
<tr
key={row.id}
className={
frontend/src/pages/users/SettingPage.tsx
+439 -225
ファイルの表示
@@ -1,7 +1,8 @@
import type { Dispatch, FC, SetStateAction } from 'react'
import type { Dispatch, FC, KeyboardEvent, SetStateAction } from 'react'
import { useEffect, useState } from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
import { Helmet } from 'react-helmet-async'
import { useLocation, useNavigate } from 'react-router-dom'
import FieldError from '@/components/common/FieldError'
import Form from '@/components/common/Form'
@@ -28,7 +29,7 @@ import {
WIKI_EDITOR_MODE_OPTIONS,
updateUserSettings,
} from '@/lib/settings'
import { inputClass } from '@/lib/utils'
import { cn, inputClass } from '@/lib/utils'
import { useValidationErrors } from '@/lib/useValidationErrors'
import type { User } from '@/types'
@@ -50,7 +51,48 @@ type SettingsFormField =
| 'autoFetchThumbnail'
| 'wikiEditorMode'
const sectionClassName = 'space-y-4 rounded-xl border border-border bg-background/80 p-4'
type SettingsTab = 'account' | 'display' | 'posts' | 'editing' | 'wiki'
type TabSpec = {
id: SettingsTab
label: string }
const sectionClassName =
'space-y-4 rounded-xl border border-border bg-background/80 p-4'
const tabs: TabSpec[] = [
{ id: 'account', label: 'アカウント' },
{ id: 'display', label: '表示' },
{ id: 'posts', label: '投稿' },
{ id: 'editing', label: '編輯支援' },
{ id: 'wiki', label: 'Wiki' },
]
const settingsTabByField: Record<SettingsFormField, SettingsTab> = {
theme: 'display',
displayDensity: 'display',
fontSize: 'display',
postListLimit: 'posts',
postListOrder: 'posts',
viewedPostDisplay: 'posts',
tagAutocompleteNico: 'editing',
autoFetchTitle: 'editing',
autoFetchThumbnail: 'editing',
wikiEditorMode: 'wiki',
}
const settingsFieldOrder: SettingsFormField[] = [
'theme',
'displayDensity',
'fontSize',
'postListLimit',
'postListOrder',
'viewedPostDisplay',
'tagAutocompleteNico',
'autoFetchTitle',
'autoFetchThumbnail',
'wikiEditorMode',
]
const themeLabel: Record<UserSettings['theme'], string> = {
system: 'システム設定に従う',
@@ -80,8 +122,7 @@ const postListOrderLabel: Record<UserSettings['postListOrder'], string> = {
const viewedPostDisplayLabel: Record<UserSettings['viewedPostDisplay'], string> = {
show: '通常表示',
dim: '薄く表示',
hide: '隠す' }
dim: '薄く表示' }
const autoFetchLabel: Record<UserSettings['autoFetchTitle'], string> = {
auto: '自動',
@@ -94,12 +135,27 @@ const wikiEditorModeLabel: Record<UserSettings['wikiEditorMode'], string> = {
preview: 'プレビューのみ' }
const parseTab = (search: string): SettingsTab => {
const tab = new URLSearchParams (search).get ('tab')
return tabs.some (candidate => candidate.id === tab)
? tab as SettingsTab
: 'account'
}
const tabButtonId = (tab: SettingsTab): string => `settings-tab-${ tab }`
const tabPanelId = (tab: SettingsTab): string => `settings-panel-${ tab }`
const SettingPage: FC<Props> = ({ user, setUser }) => {
const location = useLocation ()
const navigate = useNavigate ()
const [draftSettings, setDraftSettings] = useState<UserSettings> (DEFAULT_USER_SETTINGS)
const [name, setName] = useState ('')
const [userCodeVsbl, setUserCodeVsbl] = useState (false)
const [inheritVsbl, setInheritVsbl] = useState (false)
const { loaded, settings, setSettings } = useUserSettings ()
const { error, loaded, settings, setSettings } = useUserSettings ()
const {
baseErrors: nameBaseErrors,
fieldErrors: nameFieldErrors,
@@ -113,6 +169,66 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
applyValidationError: applySettingsValidationError,
} = useValidationErrors<SettingsFormField> ()
const activeTab = useMemo<SettingsTab> (() => parseTab (location.search), [location.search])
const setActiveTab = useCallback ((tab: SettingsTab) => {
const params = new URLSearchParams (location.search)
params.set ('tab', tab)
navigate (
`${ location.pathname }${ params.toString () ? `?${ params.toString () }` : '' }`,
{ replace: true },
)
}, [location.pathname, location.search, navigate])
const settingsTabErrors = useMemo<Record<SettingsTab, boolean>> (() => ({
account: Boolean (nameFieldErrors.name?.length),
display: (
Boolean (settingsFieldErrors.theme?.length)
|| Boolean (settingsFieldErrors.displayDensity?.length)
|| Boolean (settingsFieldErrors.fontSize?.length)
),
posts: (
Boolean (settingsFieldErrors.postListLimit?.length)
|| Boolean (settingsFieldErrors.postListOrder?.length)
|| Boolean (settingsFieldErrors.viewedPostDisplay?.length)
),
editing: (
Boolean (settingsFieldErrors.tagAutocompleteNico?.length)
|| Boolean (settingsFieldErrors.autoFetchTitle?.length)
|| Boolean (settingsFieldErrors.autoFetchThumbnail?.length)
),
wiki: Boolean (settingsFieldErrors.wikiEditorMode?.length),
}), [nameFieldErrors.name, settingsFieldErrors])
const handleTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
const currentIndex = tabs.findIndex (tab => tab.id === activeTab)
switch (event.key)
{
case 'ArrowRight':
case 'ArrowDown':
event.preventDefault ()
setActiveTab (tabs[(currentIndex + 1) % tabs.length].id)
break
case 'ArrowLeft':
case 'ArrowUp':
event.preventDefault ()
setActiveTab (tabs[(currentIndex - 1 + tabs.length) % tabs.length].id)
break
case 'Home':
event.preventDefault ()
setActiveTab (tabs[0].id)
break
case 'End':
event.preventDefault ()
setActiveTab (tabs[tabs.length - 1].id)
break
}
}
const handleUserSubmit = async () => {
if (!(user))
return
@@ -130,9 +246,9 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
setUser (currentUser => ({ ...currentUser, ...data }))
toast ({ title: '表示名を更新しました．' })
}
catch (error)
catch (submitError)
{
applyNameValidationError (error)
applyNameValidationError (submitError)
toast ({ title: '表示名を更新できませんでした．' })
}
}
@@ -158,9 +274,9 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
setSettings (data)
toast ({ title: '設定を保存しました．' })
}
catch (error)
catch (submitError)
{
applySettingsValidationError (error)
applySettingsValidationError (submitError)
toast ({ title: '設定を保存できませんでした．' })
}
}
@@ -176,6 +292,19 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
setDraftSettings (settings)
}, [settings])
useEffect (() => {
if (nameFieldErrors.name?.length)
setActiveTab ('account')
}, [nameFieldErrors.name, setActiveTab])
useEffect (() => {
const fieldWithError = settingsFieldOrder.find (
field => (settingsFieldErrors[field]?.length ?? 0) > 0,
)
if (fieldWithError)
setActiveTab (settingsTabByField[fieldWithError])
}, [setActiveTab, settingsFieldErrors])
return (
<MainArea>
<Helmet>
@@ -185,246 +314,331 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
<Form>
<PageTitle>設定</PageTitle>
<FieldError messages={error ? [error] : []}/>
{user && loaded ? (
<>
<section className={sectionClassName}>
<h2 className="text-xl font-bold">アカウント</h2>
<FieldError messages={nameBaseErrors}/>
<div
role="tablist"
aria-label="設定区分"
className="mb-4 flex flex-wrap gap-2">
{tabs.map (tab => (
<button
key={tab.id}
id={tabButtonId (tab.id)}
type="button"
role="tab"
aria-selected={activeTab === tab.id}
aria-controls={tabPanelId (tab.id)}
tabIndex={activeTab === tab.id ? 0 : -1}
className={cn (
'rounded-full border px-4 py-2 text-sm font-medium',
activeTab === tab.id
? ['border-slate-900 bg-slate-900 text-white',
'dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900']
: ['border-slate-300 bg-white text-slate-700',
'dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100'],
)}
onClick={() => setActiveTab (tab.id)}
onKeyDown={handleTabKeyDown}>
{tab.label}
{settingsTabErrors[tab.id] ? ' ⚠' : ''}
</button>))}
</div>
<FormField label="表示名" messages={nameFieldErrors.name}>
{({ describedBy, invalid }) => (
<>
<input type="text"
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}
value={name}
placeholder="名もなきニジラー"
onChange={ev => setName (ev.target.value)}/>
{!(user.name) && (
<p className="mt-1 text-sm text-red-500">
名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
</p>)}
</>)}
</FormField>
<section
id={tabPanelId (activeTab)}
role="tabpanel"
aria-labelledby={tabButtonId (activeTab)}
className={sectionClassName}>
{activeTab === 'account' && (
<>
<h2 className="text-xl font-bold">アカウント</h2>
<FieldError messages={nameBaseErrors}/>
<div className="flex flex-wrap gap-2">
<Button onClick={handleUserSubmit}>表示名を更新</Button>
</div>
<FormField label="表示名" messages={nameFieldErrors.name}>
{({ describedBy, invalid }) => (
<>
<input
type="text"
aria-describedby={describedBy}
aria-invalid={invalid}
className={inputClass (invalid)}
value={name}
placeholder="名もなきニジラー"
onChange={ev => setName (ev.target.value)}/>
{!(user.name) && (
<p className="mt-1 text-sm text-red-500">
名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
</p>)}
</>)}
</FormField>
<div className="space-y-2">
<Label>引継ぎ</Label>
<div className="flex flex-wrap gap-2">
<Button
onClick={() => setUserCodeVsbl (true)}
className="bg-gray-600 text-white"
disabled={!(user)}>
引継ぎコードを表示
</Button>
<Button
onClick={() => setInheritVsbl (true)}
className="bg-red-600 text-white"
disabled={!(user)}>
ほかのブラウザから引継ぐ
</Button>
</div>
</div>
</section>
<div className="flex flex-wrap gap-2">
<Button type="button" onClick={handleUserSubmit}>
表示名を更新
</Button>
</div>
<section className={sectionClassName}>
<h2 className="text-xl font-bold">表示</h2>
<div className="space-y-2">
<Label>引継ぎ</Label>
<div className="flex flex-wrap gap-2">
<Button
type="button"
onClick={() => setUserCodeVsbl (true)}
className="bg-gray-600 text-white"
disabled={!(user)}>
引継ぎコードを表示
</Button>
<Button
type="button"
onClick={() => setInheritVsbl (true)}
className="bg-red-600 text-white"
disabled={!(user)}>
ほかのブラウザから引継ぐ
</Button>
</div>
</div>
</>)}
<FormField label="テーマ" messages={settingsFieldErrors.theme}>
{() => (
<select
className={inputClass (Boolean (settingsFieldErrors.theme?.length))}
value={draftSettings.theme}
onChange={ev => setDraftSettings (current => ({
...current,
theme: ev.target.value as UserSettings['theme'],
}))}>
{THEME_OPTIONS.map (value => (
<option key={value} value={value}>
{themeLabel[value]}
</option>))}
</select>)}
</FormField>
{activeTab === 'display' && (
<>
<h2 className="text-xl font-bold">表示</h2>
<FieldError messages={settingsBaseErrors}/>
<FormField label="表示密度" messages={settingsFieldErrors.displayDensity}>
{() => (
<select
className={inputClass (Boolean (settingsFieldErrors.displayDensity?.length))}
value={draftSettings.displayDensity}
onChange={ev => setDraftSettings (current => ({
...current,
displayDensity: ev.target.value as UserSettings['displayDensity'],
}))}>
{DISPLAY_DENSITY_OPTIONS.map (value => (
<option key={value} value={value}>
{densityLabel[value]}
</option>))}
</select>)}
</FormField>
<FormField label="テーマ" messages={settingsFieldErrors.theme}>
{() => (
<select
className={inputClass (Boolean (settingsFieldErrors.theme?.length))}
value={draftSettings.theme}
onChange={ev => setDraftSettings (current => ({
...current,
theme: ev.target.value as UserSettings['theme'],
}))}>
{THEME_OPTIONS.map (value => (
<option key={value} value={value}>
{themeLabel[value]}
</option>))}
</select>)}
</FormField>
<FormField label="文字サイズ" messages={settingsFieldErrors.fontSize}>
{() => (
<select
className={inputClass (Boolean (settingsFieldErrors.fontSize?.length))}
value={draftSettings.fontSize}
onChange={ev => setDraftSettings (current => ({
...current,
fontSize: ev.target.value as UserSettings['fontSize'],
}))}>
{FONT_SIZE_OPTIONS.map (value => (
<option key={value} value={value}>
{fontSizeLabel[value]}
</option>))}
</select>)}
</FormField>
</section>
<FormField label="表示密度" messages={settingsFieldErrors.displayDensity}>
{() => (
<select
className={inputClass (
Boolean (settingsFieldErrors.displayDensity?.length),
)}
value={draftSettings.displayDensity}
onChange={ev => setDraftSettings (current => ({
...current,
displayDensity:
ev.target.value as UserSettings['displayDensity'],
}))}>
{DISPLAY_DENSITY_OPTIONS.map (value => (
<option key={value} value={value}>
{densityLabel[value]}
</option>))}
</select>)}
</FormField>
<section className={sectionClassName}>
<h2 className="text-xl font-bold">投稿一覧</h2>
<FormField label="文字サイズ" messages={settingsFieldErrors.fontSize}>
{() => (
<select
className={inputClass (
Boolean (settingsFieldErrors.fontSize?.length),
)}
value={draftSettings.fontSize}
onChange={ev => setDraftSettings (current => ({
...current,
fontSize: ev.target.value as UserSettings['fontSize'],
}))}>
{FONT_SIZE_OPTIONS.map (value => (
<option key={value} value={value}>
{fontSizeLabel[value]}
</option>))}
</select>)}
</FormField>
<FormField label="既定の件数" messages={settingsFieldErrors.postListLimit}>
{() => (
<select
className={inputClass (Boolean (settingsFieldErrors.postListLimit?.length))}
value={draftSettings.postListLimit}
onChange={ev => setDraftSettings (current => ({
...current,
postListLimit: Number (ev.target.value) as UserSettings['postListLimit'],
}))}>
{POST_LIST_LIMIT_OPTIONS.map (value => (
<option key={value} value={value}>
{value} 件
</option>))}
</select>)}
</FormField>
<Button type="button" onClick={handleSettingsSubmit}>
設定を保存
</Button>
</>)}
<FormField label="既定の並び順" messages={settingsFieldErrors.postListOrder}>
{() => (
<select
className={inputClass (Boolean (settingsFieldErrors.postListOrder?.length))}
value={draftSettings.postListOrder}
onChange={ev => setDraftSettings (current => ({
...current,
postListOrder: ev.target.value as UserSettings['postListOrder'],
}))}>
{POST_LIST_ORDER_OPTIONS.map (value => (
<option key={value} value={value}>
{postListOrderLabel[value]}
</option>))}
</select>)}
</FormField>
{activeTab === 'posts' && (
<>
<h2 className="text-xl font-bold">投稿</h2>
<FieldError messages={settingsBaseErrors}/>
<FormField label="既読投稿の表示" messages={settingsFieldErrors.viewedPostDisplay}>
{() => (
<select
className={inputClass (Boolean (settingsFieldErrors.viewedPostDisplay?.length))}
value={draftSettings.viewedPostDisplay}
onChange={ev => setDraftSettings (current => ({
...current,
viewedPostDisplay:
ev.target.value as UserSettings['viewedPostDisplay'],
}))}>
{VIEWED_POST_DISPLAY_OPTIONS.map (value => (
<option key={value} value={value}>
{viewedPostDisplayLabel[value]}
</option>))}
</select>)}
</FormField>
</section>
<FormField label="既定の件数" messages={settingsFieldErrors.postListLimit}>
{() => (
<select
className={inputClass (
Boolean (settingsFieldErrors.postListLimit?.length),
)}
value={draftSettings.postListLimit}
onChange={ev => setDraftSettings (current => ({
...current,
postListLimit:
Number (ev.target.value) as UserSettings['postListLimit'],
}))}>
{POST_LIST_LIMIT_OPTIONS.map (value => (
<option key={value} value={value}>
{value} 件
</option>))}
</select>)}
</FormField>
<section className={sectionClassName}>
<h2 className="text-xl font-bold">編輯支援</h2>
<FormField label="既定の並び順" messages={settingsFieldErrors.postListOrder}>
{() => (
<select
className={inputClass (
Boolean (settingsFieldErrors.postListOrder?.length),
)}
value={draftSettings.postListOrder}
onChange={ev => setDraftSettings (current => ({
...current,
postListOrder:
ev.target.value as UserSettings['postListOrder'],
}))}>
{POST_LIST_ORDER_OPTIONS.map (value => (
<option key={value} value={value}>
{postListOrderLabel[value]}
</option>))}
</select>)}
</FormField>
<FormField label="ニコニコタグを補完に含める" messages={settingsFieldErrors.tagAutocompleteNico}>
{() => (
<label className="flex items-center gap-2">
<input
type="checkbox"
checked={draftSettings.tagAutocompleteNico}
onChange={ev => setDraftSettings (current => ({
...current,
tagAutocompleteNico: ev.target.checked,
}))}/>
<span>含める</span>
</label>)}
</FormField>
<FormField label="既読投稿の表示" messages={settingsFieldErrors.viewedPostDisplay}>
{() => (
<select
className={inputClass (
Boolean (settingsFieldErrors.viewedPostDisplay?.length),
)}
value={draftSettings.viewedPostDisplay}
onChange={ev => setDraftSettings (current => ({
...current,
viewedPostDisplay:
ev.target.value as UserSettings['viewedPostDisplay'],
}))}>
{VIEWED_POST_DISPLAY_OPTIONS.map (value => (
<option key={value} value={value}>
{viewedPostDisplayLabel[value]}
</option>))}
</select>)}
</FormField>
<FormField label="タイトル自動取得" messages={settingsFieldErrors.autoFetchTitle}>
{() => (
<select
className={inputClass (Boolean (settingsFieldErrors.autoFetchTitle?.length))}
value={draftSettings.autoFetchTitle}
onChange={ev => setDraftSettings (current => ({
...current,
autoFetchTitle: ev.target.value as UserSettings['autoFetchTitle'],
}))}>
{AUTO_FETCH_OPTIONS.map (value => (
<option key={value} value={value}>
{autoFetchLabel[value]}
</option>))}
</select>)}
</FormField>
<Button type="button" onClick={handleSettingsSubmit}>
設定を保存
</Button>
</>)}
<FormField label="サムネール自動取得" messages={settingsFieldErrors.autoFetchThumbnail}>
{() => (
<select
className={inputClass (Boolean (settingsFieldErrors.autoFetchThumbnail?.length))}
value={draftSettings.autoFetchThumbnail}
onChange={ev => setDraftSettings (current => ({
...current,
autoFetchThumbnail:
ev.target.value as UserSettings['autoFetchThumbnail'],
}))}>
{AUTO_FETCH_OPTIONS.map (value => (
<option key={value} value={value}>
{autoFetchLabel[value]}
</option>))}
</select>)}
</FormField>
</section>
{activeTab === 'editing' && (
<>
<h2 className="text-xl font-bold">編輯支援</h2>
<FieldError messages={settingsBaseErrors}/>
<section className={sectionClassName}>
<h2 className="text-xl font-bold">Wiki</h2>
<FormField
label="ニコニコタグを補完に含める"
messages={settingsFieldErrors.tagAutocompleteNico}>
{() => (
<label className="flex items-center gap-2">
<input
type="checkbox"
checked={draftSettings.tagAutocompleteNico}
onChange={ev => setDraftSettings (current => ({
...current,
tagAutocompleteNico: ev.target.checked,
}))}/>
<span>含める</span>
</label>)}
</FormField>
<FormField label="エディタ表示" messages={settingsFieldErrors.wikiEditorMode}>
{() => (
<select
className={inputClass (Boolean (settingsFieldErrors.wikiEditorMode?.length))}
value={draftSettings.wikiEditorMode}
onChange={ev => setDraftSettings (current => ({
...current,
wikiEditorMode: ev.target.value as UserSettings['wikiEditorMode'],
}))}>
{WIKI_EDITOR_MODE_OPTIONS.map (value => (
<option key={value} value={value}>
{wikiEditorModeLabel[value]}
</option>))}
</select>)}
</FormField>
</section>
<FormField label="タイトル自動取得" messages={settingsFieldErrors.autoFetchTitle}>
{() => (
<select
className={inputClass (
Boolean (settingsFieldErrors.autoFetchTitle?.length),
)}
value={draftSettings.autoFetchTitle}
onChange={ev => setDraftSettings (current => ({
...current,
autoFetchTitle:
ev.target.value as UserSettings['autoFetchTitle'],
}))}>
{AUTO_FETCH_OPTIONS.map (value => (
<option key={value} value={value}>
{autoFetchLabel[value]}
</option>))}
</select>)}
</FormField>
<section className={sectionClassName}>
<FieldError messages={settingsBaseErrors}/>
<div className="flex flex-wrap gap-2">
<Button onClick={handleSettingsSubmit}>設定を保存</Button>
</div>
<FormField
label="サムネール自動取得"
messages={settingsFieldErrors.autoFetchThumbnail}>
{() => (
<select
className={inputClass (
Boolean (settingsFieldErrors.autoFetchThumbnail?.length),
)}
value={draftSettings.autoFetchThumbnail}
onChange={ev => setDraftSettings (current => ({
...current,
autoFetchThumbnail:
ev.target.value as UserSettings['autoFetchThumbnail'],
}))}>
{AUTO_FETCH_OPTIONS.map (value => (
<option key={value} value={value}>
{autoFetchLabel[value]}
</option>))}
</select>)}
</FormField>
<Button type="button" onClick={handleSettingsSubmit}>
設定を保存
</Button>
</>)}
{activeTab === 'wiki' && (
<>
<h2 className="text-xl font-bold">Wiki</h2>
<FieldError messages={settingsBaseErrors}/>
<FormField label="エディタ表示" messages={settingsFieldErrors.wikiEditorMode}>
{() => (
<select
className={inputClass (
Boolean (settingsFieldErrors.wikiEditorMode?.length),
)}
value={draftSettings.wikiEditorMode}
onChange={ev => setDraftSettings (current => ({
...current,
wikiEditorMode:
ev.target.value as UserSettings['wikiEditorMode'],
}))}>
{WIKI_EDITOR_MODE_OPTIONS.map (value => (
<option key={value} value={value}>
{wikiEditorModeLabel[value]}
</option>))}
</select>)}
</FormField>
<Button type="button" onClick={handleSettingsSubmit}>
設定を保存
</Button>
</>)}
</section>
</>) : 'Loading...'}
</Form>
<UserCodeDialogue visible={userCodeVsbl}
onVisibleChange={setUserCodeVsbl}
user={user}
setUser={setUser}/>
<UserCodeDialogue
visible={userCodeVsbl}
onVisibleChange={setUserCodeVsbl}
user={user}
setUser={setUser}/>
<InheritDialogue visible={inheritVsbl}
onVisibleChange={setInheritVsbl}
setUser={setUser}/>
<InheritDialogue
visible={inheritVsbl}
onVisibleChange={setInheritVsbl}
setUser={setUser}/>
</MainArea>)
}