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

#34

ソースを参照
このコミットが含まれているのは:
みてるぞ
2026-07-04 19:03:50 +09:00
親 fdf652951a
コミット 6a57dc53bf
22個のファイルの変更，1099行の追加，114行の削除
Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む
AGENTS.md
+9 -2
ファイルの表示
@@ -106,6 +106,10 @@ npm run preview
- Explain risks directly.
- Prefer single quotes for strings unless interpolation or escaping makes
double quotes better.
- For Japanese text, follow the 1986 Cabinet Notice
《現代仮名遣い》 as the default orthography.
- For Japanese kanji spelling, do not apply
《当用漢字による書きかえ》; prefer the original spelling as the formal one.
- Ruby: never put a space before method-call parentheses.
- Ruby: `render` 系メソッド呼び出しでは、keyword 引数付きでも括弧を書かない。
- Ruby: never put a line break immediately before `)`.
@@ -255,8 +259,11 @@ const value =
`!==` over negating a comparison like `!(a === b)`.
- In TypeScript and TSX, prefer `++i` or `--i` over `i += 1` or `i -= 1` for
simple unit-step counter updates.
- For user-facing Japanese text, prefer modern kana usage and natural current
phrasing over historical spellings or awkward literal wording.
- For user-facing Japanese text, follow the 1986 Cabinet Notice
《現代仮名遣い》 and avoid historical kana spellings unless the task
explicitly requires them.
- For user-facing Japanese kanji spelling, do not normalize to
《当用漢字による書きかえ》; prefer original forms such as `編輯`.
- For user-facing Japanese ellipses, prefer `……` over ASCII `...`.
### Frontend TSX style
backend/app/controllers/user_settings_controller.rb
+56
ファイルの表示
@@ -0,0 +1,56 @@
class UserSettingsController < ApplicationController
def show
return head :unauthorized unless current_user
render json: current_setting.serializable_hash
end
def update
return head :unauthorized unless current_user
raw_attributes = request.request_parameters
field_errors = validate_raw_attributes(raw_attributes)
return render_validation_error fields: field_errors if field_errors.present?
setting = current_setting
setting.assign_attributes(raw_attributes.slice(*Setting::EDITABLE_ATTRIBUTES))
if setting.save
render json: setting.serializable_hash, status: :ok
else
render_validation_error setting
end
end
private
def current_setting
current_user.setting || current_user.create_setting!(Setting.defaults)
end
def validate_raw_attributes raw_attributes
raw_attributes.each_with_object({ }) do |(key, value), errors|
unless Setting::EDITABLE_ATTRIBUTES.include?(key)
errors[key.to_sym] = ['不明な設定です．']
next
end
next if value_matches_type?(key, value)
errors[key.to_sym] = ['値の型が不正です．']
end
end
def value_matches_type? key, value
case Setting::TYPE_BY_ATTRIBUTE.fetch(key)
when :string
value.is_a?(String)
when :integer
value.is_a?(Integer)
when :boolean
value == true || value == false
else
false
end
end
end
backend/app/models/setting.rb
+82 -2
ファイルの表示
@@ -1,7 +1,87 @@
class Setting < ApplicationRecord
THEMES = ['system', 'light', 'dark'].freeze
DISPLAY_DENSITIES = ['comfortable', 'compact'].freeze
FONT_SIZES = ['small', 'normal', 'large'].freeze
POST_LIST_LIMITS = [20, 50, 100].freeze
POST_LIST_ORDERS = [
'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',
].freeze
VIEWED_POST_DISPLAYS = ['show', 'dim', 'hide'].freeze
AUTO_FETCH_MODES = ['auto', 'manual', 'off'].freeze
WIKI_EDITOR_MODES = ['split', 'write', 'preview'].freeze
STRING_ATTRIBUTES = [
'theme',
'display_density',
'font_size',
'post_list_order',
'viewed_post_display',
'auto_fetch_title',
'auto_fetch_thumbnail',
'wiki_editor_mode',
].freeze
INTEGER_ATTRIBUTES = ['post_list_limit'].freeze
BOOLEAN_ATTRIBUTES = ['tag_autocomplete_nico'].freeze
EDITABLE_ATTRIBUTES =
(STRING_ATTRIBUTES + INTEGER_ATTRIBUTES + BOOLEAN_ATTRIBUTES).freeze
TYPE_BY_ATTRIBUTE = {
'theme' => :string,
'display_density' => :string,
'font_size' => :string,
'post_list_limit' => :integer,
'post_list_order' => :string,
'viewed_post_display' => :string,
'tag_autocomplete_nico' => :boolean,
'auto_fetch_title' => :string,
'auto_fetch_thumbnail' => :string,
'wiki_editor_mode' => :string,
}.freeze
belongs_to :user
validates :user_id, presence: true
validates :key, presence: true, length: { maximum: 255 }
validates :value, presence: true
validates :user_id, uniqueness: true
validates :theme, inclusion: { in: THEMES }
validates :display_density, inclusion: { in: DISPLAY_DENSITIES }
validates :font_size, inclusion: { in: FONT_SIZES }
validates :post_list_limit, inclusion: { in: POST_LIST_LIMITS }
validates :post_list_order, inclusion: { in: POST_LIST_ORDERS }
validates :viewed_post_display, inclusion: { in: VIEWED_POST_DISPLAYS }
validates :tag_autocomplete_nico, inclusion: { in: [true, false] }
validates :auto_fetch_title, inclusion: { in: AUTO_FETCH_MODES }
validates :auto_fetch_thumbnail, inclusion: { in: AUTO_FETCH_MODES }
validates :wiki_editor_mode, inclusion: { in: WIKI_EDITOR_MODES }
def self.defaults
{
theme: 'system',
display_density: 'comfortable',
font_size: 'normal',
post_list_limit: 50,
post_list_order: 'created_at_desc',
viewed_post_display: 'show',
tag_autocomplete_nico: true,
auto_fetch_title: 'manual',
auto_fetch_thumbnail: 'manual',
wiki_editor_mode: 'split',
}
end
def self.serializable_attributes
EDITABLE_ATTRIBUTES.map(&:to_sym)
end
def serializable_hash(options = nil)
super({ only: self.class.serializable_attributes }.merge(options || { }))
end
end
backend/app/models/user.rb
+1 -1
ファイルの表示
@@ -7,7 +7,7 @@ class User < ApplicationRecord
has_many :created_posts,
class_name: 'Post', foreign_key: :uploaded_user_id, dependent: :nullify
has_many :settings
has_one :setting, dependent: :destroy
has_many :user_ips, dependent: :destroy
has_many :ip_addresses, through: :user_ips
has_many :user_post_views, dependent: :destroy
backend/config/routes.rb
+5
ファイルの表示
@@ -89,6 +89,11 @@ Rails.application.routes.draw do
end
end
scope 'users/settings', controller: :user_settings do
get '', action: :show
patch '', action: :update
end
resources :deerjikists, only: [] do
collection do
scope ':platform/:code' do
backend/db/migrate/20260704000000_rebuild_settings_as_typed_user_settings.rb
+53
ファイルの表示
@@ -0,0 +1,53 @@
class RebuildSettingsAsTypedUserSettings < ActiveRecord::Migration[8.0]
def change
remove_foreign_key :settings, :users if foreign_key_exists?(:settings, :users)
remove_index :settings, :user_id if index_exists?(:settings, :user_id)
remove_column :settings, :key, :string if column_exists?(:settings, :key)
remove_column :settings, :value, :json if column_exists?(:settings, :value)
change_column_null :settings, :user_id, false
add_column :settings, :theme, :string, null: false, default: 'system'
add_column :settings,
:display_density,
:string,
null: false,
default: 'comfortable'
add_column :settings, :font_size, :string, null: false, default: 'normal'
add_column :settings, :post_list_limit, :integer, null: false, default: 50
add_column :settings,
:post_list_order,
:string,
null: false,
default: 'created_at_desc'
add_column :settings,
:viewed_post_display,
:string,
null: false,
default: 'show'
add_column :settings,
:tag_autocomplete_nico,
:boolean,
null: false,
default: true
add_column :settings,
:auto_fetch_title,
:string,
null: false,
default: 'manual'
add_column :settings,
:auto_fetch_thumbnail,
:string,
null: false,
default: 'manual'
add_column :settings,
:wiki_editor_mode,
:string,
null: false,
default: 'split'
add_index :settings, :user_id, unique: true
add_foreign_key :settings, :users
end
end
backend/db/schema.rb
生成ファイル
+12 -4
ファイルの表示
@@ -10,7 +10,7 @@
#
# It's strongly recommended that you check this file into your version control system.
ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
ActiveRecord::Schema[8.0].define(version: 2026_07_04_000000) do
create_table "active_storage_attachments", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
t.string "name", null: false
t.string "record_type", null: false
@@ -374,11 +374,19 @@ ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) do
create_table "settings", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
t.bigint "user_id", null: false
t.string "key", null: false
t.json "value", null: false
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
t.index ["user_id"], name: "index_settings_on_user_id"
t.string "theme", default: "system", null: false
t.string "display_density", default: "comfortable", null: false
t.string "font_size", default: "normal", null: false
t.integer "post_list_limit", default: 50, null: false
t.string "post_list_order", default: "created_at_desc", null: false
t.string "viewed_post_display", default: "show", null: false
t.boolean "tag_autocomplete_nico", default: true, null: false
t.string "auto_fetch_title", default: "manual", null: false
t.string "auto_fetch_thumbnail", default: "manual", null: false
t.string "wiki_editor_mode", default: "split", null: false
t.index ["user_id"], name: "index_settings_on_user_id", unique: true
end
create_table "tag_implications", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
frontend/src/App.tsx
+19 -16
ファイルの表示
@@ -10,6 +10,7 @@ import DevModeWatermark from '@/components/DevModeWatermark'
import RouteBlockerOverlay from '@/components/RouteBlockerOverlay'
import TopNav from '@/components/TopNav'
import DialogueProvider from '@/components/dialogues/DialogueProvider'
import { UserSettingsProvider } from '@/components/users/UserSettingsProvider'
import { Toaster } from '@/components/ui/toaster'
import { apiPost, isApiError } from '@/lib/api'
import DeerjikistDetailPage from '@/pages/deerjikists/DeerjikistDetailPage'
@@ -145,24 +146,26 @@ const App: FC = () => {
return (
<>
<RouteBlockerOverlay/>
{import.meta.env.DEV && <DevModeWatermark/>}
<UserSettingsProvider user={user}>
<RouteBlockerOverlay/>
{import.meta.env.DEV && <DevModeWatermark/>}
<BrowserRouter>
<DialogueProvider>
<LayoutGroup>
<motion.div
layout="position"
transition={{ layout: { duration: .2, ease: 'easeOut' } }}
className="relative flex flex-col h-dvh w-full overflow-y-hidden">
<TopNav user={user}/>
<RouteTransitionWrapper user={user} setUser={setUser}/>
</motion.div>
</LayoutGroup>
<BrowserRouter>
<DialogueProvider>
<LayoutGroup>
<motion.div
layout="position"
transition={{ layout: { duration: .2, ease: 'easeOut' } }}
className="relative flex flex-col h-dvh w-full overflow-y-hidden">
<TopNav user={user}/>
<RouteTransitionWrapper user={user} setUser={setUser}/>
</motion.div>
</LayoutGroup>
<Toaster/>
</DialogueProvider>
</BrowserRouter>
<Toaster/>
</DialogueProvider>
</BrowserRouter>
</UserSettingsProvider>
</>)
}
frontend/src/components/PostFormTagsArea.tsx
+5 -1
ファイルの表示
@@ -2,6 +2,7 @@
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'
@@ -39,6 +40,7 @@ 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)
@@ -68,7 +70,9 @@ const PostFormTagsArea: FC<Props> = ({ tags, setTags, errors, ...rest }) => {
setBounds ({ start, end })
const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q: token, nico: '0' } })
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)
}
frontend/src/components/PostList.tsx
+11 -2
ファイルの表示
@@ -2,6 +2,7 @@ import { motion } from 'framer-motion'
import { useRef } from 'react'
import { useLocation } from 'react-router-dom'
import { useUserSettings } from '@/components/users/UserSettingsProvider'
import PrefetchLink from '@/components/PrefetchLink'
import { cn } from '@/lib/utils'
import { useSharedTransitionStore } from '@/stores/sharedTransitionStore'
@@ -16,14 +17,19 @@ type Props = { posts: Post[]
const PostList: FC<Props> = ({ posts, onClick }) => {
const location = useLocation ()
const { settings } = useUserSettings ()
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">
{posts.map ((post, i) => {
{visiblePosts.map ((post, i) => {
const sharedId = `page-${ post.id }`
const layoutId = sharedId
@@ -42,6 +48,9 @@ const PostList: FC<Props> = ({ posts, onClick }) => {
layoutId={layoutId}
className={cn ('w-full h-full overflow-hidden rounded-xl shadow',
'transform-gpu will-change-transform',
settings.viewedPostDisplay === 'dim'
&& post.viewed
&& 'opacity-40 saturate-50',
(post.childPosts ?? []).length > 0 && 'ring-4 ring-green-500',
(post.parentPosts ?? []).length > 0 && 'ring-4 ring-yellow-500')}
whileHover={{ scale: 1.02 }}
@@ -72,4 +81,4 @@ const PostList: FC<Props> = ({ posts, onClick }) => {
</div>)
}
export default PostList
export default PostList
frontend/src/components/common/TagInput.tsx
+5 -1
ファイルの表示
@@ -1,5 +1,6 @@
import { useState } from 'react'
import { useUserSettings } from '@/components/users/UserSettingsProvider'
import TagSearchBox from '@/components/TagSearchBox'
import { apiGet } from '@/lib/api'
import { inputClass } from '@/lib/utils'
@@ -20,6 +21,7 @@ const TagInput: FC<Props> = ({ describedBy, invalid, value, setValue }) => {
const [activeIndex, setActiveIndex] = useState (-1)
const [suggestions, setSuggestions] = useState<Tag[]> ([])
const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
const { settings } = useUserSettings ()
// TODO: TagSearch からのコピペのため，共通化を考へる．
const whenChanged = async (ev: ChangeEvent<HTMLInputElement>) => {
@@ -32,7 +34,9 @@ const TagInput: FC<Props> = ({ describedBy, invalid, value, setValue }) => {
return
}
const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q } })
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)
frontend/src/components/users/UserSettingsProvider.tsx
+111
ファイルの表示
@@ -0,0 +1,111 @@
import { createContext, useContext, useEffect, useMemo, useState } from 'react'
import { DEFAULT_USER_SETTINGS, fetchUserSettings } from '@/lib/settings'
import type { Dispatch, FC, ReactNode, SetStateAction } from 'react'
import type { User } from '@/types'
import type { UserSettings } from '@/lib/settings'
type ContextValue = {
loaded: boolean
settings: UserSettings
setSettings: Dispatch<SetStateAction<UserSettings>> }
const UserSettingsContext = createContext<ContextValue | null> (null)
const applyTheme = (theme: UserSettings['theme']) => {
const root = document.documentElement
const media = window.matchMedia ('(prefers-color-scheme: dark)')
const sync = () => {
const dark = theme === 'dark' || (theme === 'system' && media.matches)
root.classList.toggle ('dark', dark)
root.style.colorScheme = dark ? 'dark' : 'light'
}
sync ()
if (theme !== 'system')
return () => { }
const onChange = () => sync ()
media.addEventListener ('change', onChange)
return () => {
media.removeEventListener ('change', onChange)
}
}
export const UserSettingsProvider: FC<{
children: ReactNode
user: User | null }> = ({ children, user }) => {
const [loaded, setLoaded] = useState (false)
const [settings, setSettings] = useState<UserSettings> (DEFAULT_USER_SETTINGS)
useEffect (() => {
let cancelled = false
if (!(user))
{
setSettings (DEFAULT_USER_SETTINGS)
setLoaded (true)
return
}
setLoaded (false)
void (async () => {
try
{
const next = await fetchUserSettings ()
if (!(cancelled))
{
setSettings (next)
setLoaded (true)
}
}
catch
{
if (!(cancelled))
{
setSettings (DEFAULT_USER_SETTINGS)
setLoaded (true)
}
}
}) ()
return () => {
cancelled = true
}
}, [user])
useEffect (() => applyTheme (settings.theme), [settings.theme])
useEffect (() => {
document.documentElement.dataset.displayDensity = settings.displayDensity
document.documentElement.dataset.fontSize = settings.fontSize
}, [settings.displayDensity, settings.fontSize])
const value = useMemo<ContextValue> (() => ({
loaded,
settings,
setSettings,
}), [loaded, settings])
return (
<UserSettingsContext.Provider value={value}>
{children}
</UserSettingsContext.Provider>)
}
export const useUserSettings = (): ContextValue => {
const value = useContext (UserSettingsContext)
if (value == null)
throw new Error ('UserSettingsProvider is missing')
return value
}
frontend/src/index.css
+23
ファイルの表示
@@ -87,6 +87,29 @@
-moz-osx-font-smoothing: grayscale;
}
:root[data-font-size='small']
{
font-size: 14px;
}
:root[data-font-size='normal']
{
font-size: 16px;
}
:root[data-font-size='large']
{
font-size: 18px;
}
:root[data-display-density='compact'] input,
:root[data-display-density='compact'] textarea,
:root[data-display-density='compact'] select,
:root[data-display-density='compact'] button
{
line-height: 1.25;
}
a
{
font-weight: 500;
frontend/src/lib/settings.ts
+258
ファイルの表示
@@ -0,0 +1,258 @@
import { apiGet, apiPatch } from '@/lib/api'
import type { FetchPostsOrder } from '@/types'
export type UserPostListOrder =
| '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'
export type UserSettings = {
theme: 'system' | 'light' | 'dark'
displayDensity: 'comfortable' | 'compact'
fontSize: 'small' | 'normal' | 'large'
postListLimit: 20 | 50 | 100
postListOrder: UserPostListOrder
viewedPostDisplay: 'show' | 'dim' | 'hide'
tagAutocompleteNico: boolean
autoFetchTitle: 'auto' | 'manual' | 'off'
autoFetchThumbnail: 'auto' | 'manual' | 'off'
wikiEditorMode: 'split' | 'write' | 'preview' }
export type TheatreLayoutMode = 'threeColumns' | 'tagsBottom' | 'commentsBottom'
export type TheatreTagFlow = 'vertical' | 'horizontal'
export type GekanatorBackgroundMotionMode = 'on' | 'calm' | 'off'
export type ClientPaneBreakpoint = 'desktop' | 'tablet'
type ClientPaneSettings = {
widthPxByBreakpoint?: Partial<Record<ClientPaneBreakpoint, number>>
collapsed?: boolean }
export type ClientSettings = {
panes?: Record<string, ClientPaneSettings>
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 DEFAULT_USER_SETTINGS: UserSettings = {
theme: 'system',
displayDensity: 'comfortable',
fontSize: 'normal',
postListLimit: 50,
postListOrder: 'created_at_desc',
viewedPostDisplay: 'show',
tagAutocompleteNico: true,
autoFetchTitle: 'manual',
autoFetchThumbnail: 'manual',
wikiEditorMode: 'split' }
export const THEME_OPTIONS = ['system', 'light', 'dark'] as const
export const DISPLAY_DENSITY_OPTIONS = ['comfortable', 'compact'] as const
export const FONT_SIZE_OPTIONS = ['small', 'normal', 'large'] as const
export const POST_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
export const VIEWED_POST_DISPLAY_OPTIONS = ['show', 'dim', 'hide'] as const
export const AUTO_FETCH_OPTIONS = ['auto', 'manual', 'off'] as const
export const WIKI_EDITOR_MODE_OPTIONS = ['split', 'write', 'preview'] as const
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'
export const fetchUserSettings = async (): Promise<UserSettings> =>
await apiGet<UserSettings> ('/users/settings')
export const updateUserSettings = async (
settings: Partial<{
theme: UserSettings['theme']
display_density: UserSettings['displayDensity']
font_size: UserSettings['fontSize']
post_list_limit: UserSettings['postListLimit']
post_list_order: UserSettings['postListOrder']
viewed_post_display: UserSettings['viewedPostDisplay']
tag_autocomplete_nico: UserSettings['tagAutocompleteNico']
auto_fetch_title: UserSettings['autoFetchTitle']
auto_fetch_thumbnail: UserSettings['autoFetchThumbnail']
wiki_editor_mode: UserSettings['wikiEditorMode']
}>,
): Promise<UserSettings> => await apiPatch<UserSettings> ('/users/settings', settings)
export const toFetchPostsOrder = (
value: UserSettings['postListOrder'],
): FetchPostsOrder =>
value.replace (/_(asc|desc)$/, ':$1') as FetchPostsOrder
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))
}
export const updateClientSettings = (
updater: (settings: ClientSettings) => ClientSettings,
): ClientSettings => {
const next = updater (loadClientSettings ())
saveClientSettings (next)
return next
}
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,
},
},
}))
}
frontend/src/pages/GekanatorPage.tsx
+7 -9
ファイルの表示
@@ -24,6 +24,10 @@ import { recoverCandidatePosts } from '@/lib/gekanatorCandidateRecovery'
import { isQuestionHardFilteredAfterAnswers,
monthForCondition } from '@/lib/gekanatorQuestionFilters'
import { gekanatorKeys } from '@/lib/queryKeys'
import {
getClientGekanatorBackgroundMotion,
setClientGekanatorBackgroundMotion,
} from '@/lib/settings'
import { cn } from '@/lib/utils'
import type { FC } from 'react'
@@ -185,7 +189,6 @@ const softenedAnswerWeight = .35
const confidenceTemperature = 6
const gameStorageKey = 'gekanator:game:v1'
const recentGamesStorageKey = 'gekanator:recent-games:v1'
const backgroundMotionStorageKey = 'gekanator:background-motion:v1'
const maxStoredRecentGames = 12
const specialOriginalMonthDayLabels: Record<string, string> = {
'1-1': '元日',
@@ -429,18 +432,13 @@ const storeRecentGameSummary = (
const loadBackgroundMotionMode = (): BackgroundMotionMode => {
const fallbackMode = 'on'
try
{
const raw = localStorage.getItem (backgroundMotionStorageKey)
if (raw === 'off' || raw === 'calm' || raw === 'on')
return raw
return fallbackMode
return getClientGekanatorBackgroundMotion ()
}
catch
{
return fallbackMode
return 'on'
}
}
@@ -3916,7 +3914,7 @@ const GekanatorPage: FC<{ user: User | null }> = ({ user }) => {
useEffect (() => {
try
{
localStorage.setItem (backgroundMotionStorageKey, backgroundMotionMode)
setClientGekanatorBackgroundMotion (backgroundMotionMode)
}
catch
{
frontend/src/pages/posts/PostListPage.tsx
+6 -2
ファイルの表示
@@ -5,6 +5,7 @@ import { useLocation } from 'react-router-dom'
import PostList from '@/components/PostList'
import PrefetchLink from '@/components/PrefetchLink'
import { useUserSettings } from '@/components/users/UserSettingsProvider'
import TagSidebar from '@/components/TagSidebar'
import WikiBody from '@/components/WikiBody'
import Pagination from '@/components/common/Pagination'
@@ -13,6 +14,7 @@ import MainArea from '@/components/layout/MainArea'
import { SITE_TITLE } from '@/config'
import { fetchPosts } from '@/lib/posts'
import { postsKeys } from '@/lib/queryKeys'
import { toFetchPostsOrder } from '@/lib/settings'
import { fetchWikiPageByTitle } from '@/lib/wiki'
import type { FC } from 'react'
@@ -22,6 +24,7 @@ import type { WikiPage } from '@/types'
const PostListPage: FC = () => {
const containerRef = useRef<HTMLDivElement | null> (null)
const { settings } = useUserSettings ()
const [wikiPage, setWikiPage] = useState<WikiPage | null> (null)
@@ -33,13 +36,14 @@ const PostListPage: FC = () => {
const tags = useMemo (() => tagsQuery.split (' ').filter (e => e !== ''), [tagsQuery])
const tagsKey = tags.join (' ')
const page = Number (query.get ('page') ?? 1)
const limit = Number (query.get ('limit') ?? 20)
const limit = Number (query.get ('limit') ?? settings.postListLimit)
const order = toFetchPostsOrder (settings.postListOrder)
const keys = {
tags: tagsKey, match, page, limit,
url: '', title: '', originalCreatedFrom: '', originalCreatedTo: '',
createdFrom: '', createdTo: '', updatedFrom: '', updatedTo: '',
order: 'original_created_at:desc' } as const
order } as const
const { data, isLoading: loading } = useQuery ({
queryKey: postsKeys.index (keys),
queryFn: () => fetchPosts (keys) })
frontend/src/pages/posts/PostNewPage.tsx
+13 -2
ファイルの表示
@@ -9,6 +9,7 @@ import Form from '@/components/common/Form'
import FormField from '@/components/common/FormField'
import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
import { useUserSettings } from '@/components/users/UserSettingsProvider'
import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
@@ -30,6 +31,7 @@ type PostFormField =
const PostNewPage: FC<Props> = ({ user }) => {
const editable = canEditContent (user)
const { settings } = useUserSettings ()
const navigate = useNavigate ()
@@ -41,12 +43,13 @@ const PostNewPage: FC<Props> = ({ user }) => {
const [parentPostIds, setParentPostIds] = useState ('')
const [tags, setTags] = useState ('')
const [duration, setDuration] = useState ('')
const [thumbnailAutoFlg, setThumbnailAutoFlg] = useState (true)
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 (true)
const [titleAutoFlg, setTitleAutoFlg] = useState (settings.autoFetchTitle === 'auto')
const [titleLoading, setTitleLoading] = useState (false)
const [url, setURL] = useState ('')
@@ -125,6 +128,14 @@ const PostNewPage: FC<Props> = ({ user }) => {
thumbnailPreviewRef.current = thumbnailPreview
}, [thumbnailPreview])
useEffect (() => {
setTitleAutoFlg (settings.autoFetchTitle === 'auto')
}, [settings.autoFetchTitle])
useEffect (() => {
setThumbnailAutoFlg (settings.autoFetchThumbnail === 'auto')
}, [settings.autoFetchThumbnail])
useEffect (() => {
if (titleAutoFlg && url)
fetchTitle ()
frontend/src/pages/posts/PostSearchPage.tsx
+19 -5
ファイルの表示
@@ -13,9 +13,11 @@ import PageTitle from '@/components/common/PageTitle'
import Pagination from '@/components/common/Pagination'
import TagInput from '@/components/common/TagInput'
import MainArea from '@/components/layout/MainArea'
import { useUserSettings } from '@/components/users/UserSettingsProvider'
import { SITE_TITLE } from '@/config'
import { fetchPosts } from '@/lib/posts'
import { postsKeys } from '@/lib/queryKeys'
import { toFetchPostsOrder } from '@/lib/settings'
import { dateString, inputClass, originalCreatedAtString } from '@/lib/utils'
import type { FC, FormEvent } from 'react'
@@ -34,14 +36,16 @@ const setIf = (qs: URLSearchParams, k: string, v: string | null) => {
const PostSearchPage: FC = () => {
const location = useLocation ()
const { settings } = useUserSettings ()
const navigate = useNavigate ()
const query = useMemo (() => new URLSearchParams (location.search),
[location.search])
const defaultOrder = toFetchPostsOrder (settings.postListOrder)
const page = Number (query.get ('page') ?? 1)
const limit = Number (query.get ('limit') ?? 20)
const limit = Number (query.get ('limit') ?? settings.postListLimit)
const qURL = query.get ('url') ?? ''
const qTitle = query.get ('title') ?? ''
@@ -53,7 +57,7 @@ const PostSearchPage: FC = () => {
const qCreatedTo = query.get ('created_to') ?? ''
const qUpdatedFrom = query.get ('updated_from') ?? ''
const qUpdatedTo = query.get ('updated_to') ?? ''
const order = (query.get ('order') || 'original_created_at:desc') as FetchPostsOrder
const order = (query.get ('order') || defaultOrder) as FetchPostsOrder
const [createdFrom, setCreatedFrom] = useState<string | null> (null)
const [createdTo, setCreatedTo] = useState<string | null> (null)
@@ -81,6 +85,10 @@ 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 (() => {
@@ -239,7 +247,7 @@ const PostSearchPage: FC = () => {
</form>
</div>
{loading ? 'Loading...' : (results.length > 0 ? (
{loading ? 'Loading...' : (visibleResults.length > 0 ? (
<div className="mt-4">
<div className="overflow-x-auto">
<table className="w-full min-w-[1200px] table-fixed border-collapse">
@@ -295,8 +303,14 @@ const PostSearchPage: FC = () => {
</tr>
</thead>
<tbody>
{results.map (row => (
<tr key={row.id} className="even:bg-gray-100 dark:even:bg-gray-700">
{visibleResults.map (row => (
<tr
key={row.id}
className={
settings.viewedPostDisplay === 'dim' && row.viewed
? 'even:bg-gray-100 opacity-40 saturate-50 dark:even:bg-gray-700'
: 'even:bg-gray-100 dark:even:bg-gray-700'
}>
<td className="p-2">
<PrefetchLink to={`/posts/${ row.id }`} title={row.title || undefined}>
<motion.div
frontend/src/pages/theatres/TheatreDetailPage.tsx
+11 -20
ファイルの表示
@@ -15,6 +15,12 @@ import { SITE_TITLE } from '@/config'
import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
import { apiDelete, apiGet, apiPatch, apiPost, apiPut, isApiError } from '@/lib/api'
import { fetchPost } from '@/lib/posts'
import {
getClientTheatreLayoutMode,
getClientTheatreTagFlow,
setClientTheatreLayoutMode,
setClientTheatreTagFlow,
} from '@/lib/settings'
import { canEditContent } from '@/lib/users'
import { cn, dateString, inputClass } from '@/lib/utils'
import { useValidationErrors } from '@/lib/useValidationErrors'
@@ -50,9 +56,6 @@ const INITIAL_THEATRE_INFO: TheatreInfo =
const INITIAL_WEIGHTS: TheatrePostSelectionWeights =
{ tagPenalties: [], lightestPosts: [], heaviestPosts: [] }
const LAYOUT_STORAGE_KEY = 'theatre-layout-mode'
const TAG_FLOW_STORAGE_KEY = 'theatre-tag-flow'
const LAYOUT_LABELS: Record<TheatreLayoutMode, string> = {
threeColumns: '3 列',
tagsBottom: '2 列 A 型',
@@ -228,32 +231,20 @@ const TheatreDetailPage: FC<Props> = ({ user }: Props) => {
const [post, setPost] = useState<Post | null> (null)
const [videoLength, setVideoLength] = useState (0)
const [weights, setWeights] = useState<TheatrePostSelectionWeights> (INITIAL_WEIGHTS)
const [layoutMode, setLayoutMode] = useState<TheatreLayoutMode> (() => {
const stored = localStorage.getItem (LAYOUT_STORAGE_KEY)
return (
((['threeColumns', 'tagsBottom', 'commentsBottom'] as TheatreLayoutMode[])
.includes (stored as TheatreLayoutMode))
? (stored as TheatreLayoutMode)
: 'threeColumns')
})
const [tagFlow, setTagFlow] = useState<TagFlow> (() => {
const stored = localStorage.getItem (TAG_FLOW_STORAGE_KEY)
return (
(['vertical', 'horizontal'] as TagFlow[]).includes (stored as TagFlow)
? (stored as TagFlow)
: 'vertical')
})
const [layoutMode, setLayoutMode] =
useState<TheatreLayoutMode> (() => getClientTheatreLayoutMode ())
const [tagFlow, setTagFlow] = useState<TagFlow> (() => getClientTheatreTagFlow ())
const { fieldErrors, clearValidationErrors, applyValidationError } =
useValidationErrors<TheatreCommentField> ()
const changeLayoutMode = (mode: TheatreLayoutMode) => {
setLayoutMode (mode)
localStorage.setItem (LAYOUT_STORAGE_KEY, mode)
setClientTheatreLayoutMode (mode)
}
const changeTagFlow = (flow: TagFlow) => {
setTagFlow (flow)
localStorage.setItem (TAG_FLOW_STORAGE_KEY, flow)
setClientTheatreTagFlow (flow)
}
const applyTheatreInfo = useCallback ((nextInfo: TheatreInfo) => {
frontend/src/pages/users/SettingPage.tsx
+345 -47
ファイルの表示
@@ -1,4 +1,4 @@
import type { FC } from 'react'
import type { Dispatch, FC, SetStateAction } from 'react'
import { useEffect, useState } from 'react'
import { Helmet } from 'react-helmet-async'
@@ -9,35 +9,115 @@ import FormField from '@/components/common/FormField'
import Label from '@/components/common/Label'
import PageTitle from '@/components/common/PageTitle'
import MainArea from '@/components/layout/MainArea'
import { useUserSettings } from '@/components/users/UserSettingsProvider'
import InheritDialogue from '@/components/users/InheritDialogue'
import UserCodeDialogue from '@/components/users/UserCodeDialogue'
import { Button } from '@/components/ui/button'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
import { apiPut } from '@/lib/api'
import {
AUTO_FETCH_OPTIONS,
DEFAULT_USER_SETTINGS,
DISPLAY_DENSITY_OPTIONS,
FONT_SIZE_OPTIONS,
POST_LIST_LIMIT_OPTIONS,
POST_LIST_ORDER_OPTIONS,
THEME_OPTIONS,
VIEWED_POST_DISPLAY_OPTIONS,
WIKI_EDITOR_MODE_OPTIONS,
updateUserSettings,
} from '@/lib/settings'
import { inputClass } from '@/lib/utils'
import { useValidationErrors } from '@/lib/useValidationErrors'
import type { User } from '@/types'
import type { UserSettings } from '@/lib/settings'
type Props = { user: User | null
setUser: React.Dispatch<React.SetStateAction<User | null>> }
setUser: Dispatch<SetStateAction<User | null>> }
type UserFormField = 'name'
type SettingsFormField =
| 'theme'
| 'displayDensity'
| 'fontSize'
| 'postListLimit'
| 'postListOrder'
| 'viewedPostDisplay'
| 'tagAutocompleteNico'
| 'autoFetchTitle'
| 'autoFetchThumbnail'
| 'wikiEditorMode'
const sectionClassName = 'space-y-4 rounded-xl border border-border bg-background/80 p-4'
const themeLabel: Record<UserSettings['theme'], string> = {
system: 'システム設定に従う',
light: '明',
dark: '暗' }
const densityLabel: Record<UserSettings['displayDensity'], string> = {
comfortable: '標準',
compact: '詰める' }
const fontSizeLabel: Record<UserSettings['fontSize'], string> = {
small: '小',
normal: '標準',
large: '大' }
const postListOrderLabel: Record<UserSettings['postListOrder'], string> = {
title_asc: 'タイトル昇順',
title_desc: 'タイトル降順',
url_asc: 'URL 昇順',
url_desc: 'URL 降順',
original_created_at_asc: 'オリジナル投稿日時 昇順',
original_created_at_desc: 'オリジナル投稿日時 降順',
created_at_asc: '投稿日 昇順',
created_at_desc: '投稿日 降順',
updated_at_asc: '更新日 昇順',
updated_at_desc: '更新日 降順' }
const viewedPostDisplayLabel: Record<UserSettings['viewedPostDisplay'], string> = {
show: '通常表示',
dim: '薄く表示',
hide: '隠す' }
const autoFetchLabel: Record<UserSettings['autoFetchTitle'], string> = {
auto: '自動',
manual: '手動',
off: '無効' }
const wikiEditorModeLabel: Record<UserSettings['wikiEditorMode'], string> = {
split: '左右表示',
write: '本文のみ',
preview: 'プレビューのみ' }
const SettingPage: FC<Props> = ({ user, setUser }) => {
const [draftSettings, setDraftSettings] = useState<UserSettings> (DEFAULT_USER_SETTINGS)
const [name, setName] = useState ('')
const [userCodeVsbl, setUserCodeVsbl] = useState (false)
const [inheritVsbl, setInheritVsbl] = useState (false)
const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
useValidationErrors<UserFormField> ()
const { loaded, settings, setSettings } = useUserSettings ()
const {
baseErrors: nameBaseErrors,
fieldErrors: nameFieldErrors,
clearValidationErrors: clearNameValidationErrors,
applyValidationError: applyNameValidationError,
} = useValidationErrors<UserFormField> ()
const {
baseErrors: settingsBaseErrors,
fieldErrors: settingsFieldErrors,
clearValidationErrors: clearSettingsValidationErrors,
applyValidationError: applySettingsValidationError,
} = useValidationErrors<SettingsFormField> ()
const handleSubmit = async () => {
const handleUserSubmit = async () => {
if (!(user))
return
clearValidationErrors ()
clearNameValidationErrors ()
const formData = new FormData
formData.append ('name', name)
@@ -47,13 +127,41 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
const data = await apiPut<User> (
`/users/${ user.id }`, formData,
{ headers: { 'Content-Type': 'multipart/form-data' } })
setUser (user => ({ ...user, ...data }))
toast ({ title: '設定を更新しました．' })
setUser (currentUser => ({ ...currentUser, ...data }))
toast ({ title: '表示名を更新しました．' })
}
catch (e)
catch (error)
{
applyValidationError (e)
toast ({ title: 'しっぱい……' })
applyNameValidationError (error)
toast ({ title: '表示名を更新できませんでした．' })
}
}
const handleSettingsSubmit = async () => {
clearSettingsValidationErrors ()
try
{
const data = await updateUserSettings ({
theme: draftSettings.theme,
display_density: draftSettings.displayDensity,
font_size: draftSettings.fontSize,
post_list_limit: draftSettings.postListLimit,
post_list_order: draftSettings.postListOrder,
viewed_post_display: draftSettings.viewedPostDisplay,
tag_autocomplete_nico: draftSettings.tagAutocompleteNico,
auto_fetch_title: draftSettings.autoFetchTitle,
auto_fetch_thumbnail: draftSettings.autoFetchThumbnail,
wiki_editor_mode: draftSettings.wikiEditorMode,
})
setDraftSettings (data)
setSettings (data)
toast ({ title: '設定を保存しました．' })
}
catch (error)
{
applySettingsValidationError (error)
toast ({ title: '設定を保存できませんでした．' })
}
}
@@ -64,6 +172,10 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
setName (user.name ?? '')
}, [user])
useEffect (() => {
setDraftSettings (settings)
}, [settings])
return (
<MainArea>
<Helmet>
@@ -74,48 +186,234 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
<Form>
<PageTitle>設定</PageTitle>
{user ? (
{user && loaded ? (
<>
<FieldError messages={baseErrors}/>
<section className={sectionClassName}>
<h2 className="text-xl font-bold">アカウント</h2>
<FieldError messages={nameBaseErrors}/>
{/* 名前 */}
<FormField label="表示名" messages={fieldErrors.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 && !(user.name)) && (
<p className="mt-1 text-sm text-red-500">
名前が未設定のアカウントは 30 日間アクセスしないと削除されます!!!!
</p>)}
</>)}
</FormField>
<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>
{/* 送信 */}
<Button onClick={handleSubmit}
className="px-4 py-2 bg-blue-600 text-white rounded disabled:bg-gray-400">
更新
</Button>
<div className="flex flex-wrap gap-2">
<Button onClick={handleUserSubmit}>表示名を更新</Button>
</div>
{/* 引継ぎ */}
<div>
<Label>引継ぎ</Label>
<Button onClick={() => setUserCodeVsbl (true)}
className="px-4 py-2 bg-gray-600 text-white rounded disabled:bg-gray-400"
<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="ml-2 px-4 py-2 bg-red-600 text-white rounded disabled:bg-gray-400"
引継ぎコードを表示
</Button>
<Button
onClick={() => setInheritVsbl (true)}
className="bg-red-600 text-white"
disabled={!(user)}>
ほかのブラウザから引継ぐ
</Button>
</div>
ほかのブラウザから引継ぐ
</Button>
</div>
</div>
</section>
<section className={sectionClassName}>
<h2 className="text-xl font-bold">表示</h2>
<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.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.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>
<section className={sectionClassName}>
<h2 className="text-xl font-bold">投稿一覧</h2>
<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>
<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.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>
<section className={sectionClassName}>
<h2 className="text-xl font-bold">編輯支援</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.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>
<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>
<section className={sectionClassName}>
<h2 className="text-xl font-bold">Wiki</h2>
<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>
<section className={sectionClassName}>
<FieldError messages={settingsBaseErrors}/>
<div className="flex flex-wrap gap-2">
<Button onClick={handleSettingsSubmit}>設定を保存</Button>
</div>
</section>
</>) : 'Loading...'}
</Form>
frontend/src/pages/wiki/WikiEditPage.tsx
+24
ファイルの表示
@@ -8,6 +8,7 @@ import { useParams, useNavigate } from 'react-router-dom'
import FieldError from '@/components/common/FieldError'
import FormField from '@/components/common/FormField'
import MainArea from '@/components/layout/MainArea'
import { useUserSettings } from '@/components/users/UserSettingsProvider'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
import { apiGet, apiPut } from '@/lib/api'
@@ -25,6 +26,27 @@ import type { User, WikiPage } from '@/types'
const mdParser = new MarkdownIt
type EditorView = {
menu: boolean
md: boolean
html: boolean }
const editorView = (
mode: 'split' | 'write' | 'preview',
): EditorView => {
switch (mode)
{
case 'write':
return { menu: true, md: true, html: false }
case 'preview':
return { menu: true, md: false, html: true }
default:
return { menu: true, md: true, html: true }
}
}
type Props = { user: User | null }
type WikiFormField = 'title' | 'body'
@@ -32,6 +54,7 @@ type WikiFormField = 'title' | 'body'
const WikiEditPage: FC<Props> = ({ user }) => {
const editable = canEditContent (user)
const { settings } = useUserSettings ()
const { id } = useParams ()
@@ -114,6 +137,7 @@ const WikiEditPage: FC<Props> = ({ user }) => {
{() => (
<MdEditor value={body}
style={{ height: '500px' }}
config={{ view: editorView (settings.wikiEditorMode) }}
renderHTML={text => mdParser.render (text)}
onChange={({ text }) => setBody (text)}/>)}
</FormField>
frontend/src/pages/wiki/WikiNewPage.tsx
+24
ファイルの表示
@@ -9,6 +9,7 @@ import { useLocation, useNavigate } from 'react-router-dom'
import FieldError from '@/components/common/FieldError'
import FormField from '@/components/common/FormField'
import MainArea from '@/components/layout/MainArea'
import { useUserSettings } from '@/components/users/UserSettingsProvider'
import { toast } from '@/components/ui/use-toast'
import { SITE_TITLE } from '@/config'
import { apiPost } from '@/lib/api'
@@ -23,6 +24,27 @@ import type { User, WikiPage } from '@/types'
const mdParser = new MarkdownIt
type EditorView = {
menu: boolean
md: boolean
html: boolean }
const editorView = (
mode: 'split' | 'write' | 'preview',
): EditorView => {
switch (mode)
{
case 'write':
return { menu: true, md: true, html: false }
case 'preview':
return { menu: true, md: false, html: true }
default:
return { menu: true, md: true, html: true }
}
}
type Props = { user: User | null }
type WikiFormField = 'title' | 'body'
@@ -30,6 +52,7 @@ type WikiFormField = 'title' | 'body'
const WikiNewPage: FC<Props> = ({ user }) => {
const editable = canEditContent (user)
const { settings } = useUserSettings ()
const location = useLocation ()
const navigate = useNavigate ()
@@ -92,6 +115,7 @@ const WikiNewPage: FC<Props> = ({ user }) => {
{() => (
<MdEditor value={body}
style={{ height: '500px' }}
config={{ view: editorView (settings.wikiEditorMode) }}
renderHTML={text => mdParser.render (text)}
onChange={({ text }) => setBody (text)}/>)}
</FormField>