コミットを比較
1 コミット
| 作成者 | SHA1 | 日付 | |
|---|---|---|---|
 みてるぞ
|
37c91054a9 |
@@ -106,10 +106,6 @@ 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 `)`.
|
||||
@@ -204,7 +200,7 @@ const value =
|
||||
## Backend rules
|
||||
|
||||
- Inspect existing routes, controllers, models, services, and specs before
|
||||
editing backend behaviour.
|
||||
editing backend behavior.
|
||||
- Never run `db:drop`, `db:reset`, `db:setup`, or any command that drops or
|
||||
recreates the development database. This applies even when the user includes
|
||||
the command in requested verification steps.
|
||||
@@ -215,7 +211,7 @@ const value =
|
||||
- Repeated destructive instructions are not enough confirmation because they
|
||||
may be auto-generated. Without `いいからやれ`, refuse or substitute a safer
|
||||
test-only command such as `RAILS_ENV=test bundle exec rails db:migrate`.
|
||||
- For API behaviour changes, add or update request specs under
|
||||
- For API behavior changes, add or update request specs under
|
||||
`backend/spec/requests` only when the user explicitly asks for tests.
|
||||
- Prefer RSpec for new backend tests; existing minitest files under
|
||||
`backend/test` do not make minitest the default for new coverage.
|
||||
@@ -223,8 +219,8 @@ const value =
|
||||
- Preserve the `X-Transfer-Code` user identification flow unless the task
|
||||
explicitly changes authentication.
|
||||
- Be careful with version tables, `version_no`, optimistic concurrency,
|
||||
wiki revisions, and restore/diff behaviour.
|
||||
- Be careful with tag names, tag normalisation, implications, similarities, and discard behaviour.
|
||||
wiki revisions, and restore/diff behavior.
|
||||
- Be careful with tag names, tag normalization, implications, similarities, and discard behavior.
|
||||
- Be sensitive to N+1 queries; avoid introducing them and proactively fix
|
||||
existing N+1 issues in the code path being edited.
|
||||
- Keep migration files and `backend/db/schema.rb` consistent when changing schema.
|
||||
@@ -245,9 +241,9 @@ const value =
|
||||
- Internal links must use `PrefetchLink`.
|
||||
- External links must use `<a>` with `target="_blank"`.
|
||||
- When adding or changing Tailwind `bg-*` classes in TSX, pair them with an
|
||||
explicit readable `text-*` colour and dark-mode counterparts such as
|
||||
explicit readable `text-*` color and dark-mode counterparts such as
|
||||
`dark:bg-*`, `dark:text-*`, and `dark:border-*` where a border is present.
|
||||
- Do not rely on inherited text colour for light backgrounds. This is especially
|
||||
- Do not rely on inherited text color for light backgrounds. This is especially
|
||||
important for chips, cards, buttons, and panels that may inherit white text in
|
||||
dark mode.
|
||||
- Mobile UI must be checked as a first-class layout. Avoid wide fixed content,
|
||||
@@ -259,52 +255,15 @@ 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, 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 text, prefer modern kana usage and natural current
|
||||
phrasing over historical spellings or awkward literal wording.
|
||||
- For user-facing Japanese ellipses, prefer `……` over ASCII `...`.
|
||||
|
||||
### Frontend TypeScript and TSX style
|
||||
### Frontend TSX style
|
||||
|
||||
- The delimiter-placement and line-breaking rules in this section apply to
|
||||
both plain TypeScript `.ts` and TSX `.tsx`, unless a bullet explicitly says
|
||||
it is JSX- or React-specific.
|
||||
- Preserve the local TypeScript and TSX formatting style.
|
||||
- Preserve the local TSX formatting style.
|
||||
- Do not normalize TSX to common Prettier-style React formatting unless
|
||||
explicitly asked.
|
||||
- Treat TypeScript and TSX formatting rules as hard constraints, not
|
||||
preferences. Before finishing a TypeScript or TSX edit, inspect the edited
|
||||
hunks for closing `)`, `]`, and `}` placement and fix violations instead of
|
||||
relying on formatter defaults.
|
||||
- After every TypeScript or TSX edit, perform a style-only self-review of the
|
||||
edited hunks before running verification or reporting completion. The task is
|
||||
not complete while any edited TypeScript or TSX hunk violates these local
|
||||
formatting rules.
|
||||
- The TypeScript/TSX self-review must classify every edited leading or trailing
|
||||
`)`, `]`, and `}` by syntax role before deciding whether it is valid. Do not
|
||||
apply a rule by glyph alone. A closing `)` for a function parameter list is
|
||||
different from a closing `)` for a function call. A closing `}` for a block
|
||||
is different from a closing `}` for an object, type literal, import list, or
|
||||
destructuring pattern.
|
||||
- The TSX-specific self-review must confirm there are no common Prettier-style
|
||||
React component declarations with a multi-line destructured parameter.
|
||||
- The TypeScript/TSX self-review must confirm multi-line function declaration
|
||||
parameter `)` placement follows the detailed parameter-list rules below.
|
||||
- The TypeScript/TSX self-review must confirm call-expression `)` is never at
|
||||
the beginning of a line.
|
||||
- The TypeScript/TSX self-review must confirm
|
||||
object/type/import/destructuring `}` is not at the beginning of a line.
|
||||
- The TypeScript/TSX self-review must confirm multi-line
|
||||
function/lambda/callback/block `}` is on its own line and never at the end
|
||||
of the previous line.
|
||||
- The TypeScript/TSX self-review must confirm array `]` is not at the
|
||||
beginning of a line.
|
||||
- The TSX-specific self-review must confirm JSX closing markers and closing
|
||||
parentheses keep the surrounding compact style.
|
||||
- The TypeScript/TSX self-review must confirm leading indentation follows
|
||||
4-space logical indentation with tabs only as leading 8-space compression.
|
||||
- Prefer `const` arrow functions for TypeScript/TSX component and helper declarations.
|
||||
- Put two blank lines before and after top-level `const` function
|
||||
declarations, unless imports, exports, or file boundaries make that awkward.
|
||||
@@ -313,37 +272,16 @@ const value =
|
||||
character.
|
||||
- A leading tab is exactly equivalent to 8 leading spaces.
|
||||
- In TypeScript and TSX function declarations, including `const` arrow
|
||||
function declarations, classify the parameter list before placing the closing
|
||||
`)`.
|
||||
- If the parameter list itself is given its own multi-line block after the
|
||||
function's opening `(`, put the closing parameter `)` at the beginning of its
|
||||
own line before the return type or `=>`.
|
||||
- If the only line break is inside a parameter's inline type, object type, or
|
||||
destructuring shape, and the parameter list itself is not split as a separate
|
||||
block, keep the closing parameter `)` on the same line as that parameter's
|
||||
final `}`. In this case, moving `)` to a new line is wrong.
|
||||
- Do not write React component declarations in the common Prettier form
|
||||
`const Component = ({ ... }) => (` when the destructured parameter spans
|
||||
multiple lines. Use the project form with the opening `(` after `=`, the
|
||||
destructured object as the argument, and the closing parameter `)` on its own
|
||||
line before `=>`.
|
||||
function declarations, when the parameter list spans multiple lines, always
|
||||
put the closing parenthesis at the beginning of its own line before the return
|
||||
type or `=>`.
|
||||
- In TypeScript and TSX, never place a closing parenthesis at the beginning of
|
||||
a line except for a multi-line function declaration parameter list.
|
||||
- Never place a closing square bracket at the beginning of a line.
|
||||
- For object literals, type literals, import/export named bindings, destructuring
|
||||
patterns, and other associative-array-style braces, do not place the closing
|
||||
brace at the beginning of a line. Keep `}` on the same line as the final
|
||||
property, binding, or specifier unless that would violate the line limit.
|
||||
Function, lambda, callback, and block closing braces are exempt and should
|
||||
stay on their own line when that fits the local style. When a function,
|
||||
lambda, callback, or block body spans multiple lines, do not put its closing
|
||||
`}` at the end of the previous line.
|
||||
- For arrays and tuple-like lists, do not place the closing `]` at the
|
||||
beginning of a line. Keep `]` on the same line as the final element unless
|
||||
that would violate the line limit.
|
||||
- For function and method calls, do not place the closing `)` at the beginning
|
||||
of a line. The only TypeScript/TSX exception is the closing parameter `)` of a
|
||||
multi-line function declaration.
|
||||
- For object literals and other associative-array-style braces, do not place
|
||||
the closing brace at the beginning of a line. Function, lambda, callback, and
|
||||
block closing braces are exempt and should stay on their own line when that
|
||||
fits the local style.
|
||||
- When writing braces on a single line in TypeScript or TSX JavaScript
|
||||
context, put exactly one space inside the braces, as in `{ value }` or
|
||||
`{ key: value }`.
|
||||
@@ -362,585 +300,6 @@ const value =
|
||||
- Do not use a leading semicolon for expression statements such as
|
||||
`;([...]).forEach(...)`; rewrite the expression to avoid ASI hazards
|
||||
explicitly, for example with `void`.
|
||||
- Do not insert `void` mechanically before ordinary event-handler or callback
|
||||
calls merely because the callee returns a `Promise`. If the surrounding code
|
||||
already uses a plain expression statement such as
|
||||
`onClick={() => requestActiveTab ('theme')}`, preserve that style unless a
|
||||
local rule or type requirement truly forces `void`. Adding unnecessary
|
||||
`void` is a medium-severity style violation.
|
||||
- When fixing formatting, never change operator binding, evaluation order,
|
||||
tuple/comma behaviour, or any other expression structure. A formatting pass
|
||||
that changes how `!==`, `??`, `?:`, `&&`, `||`, or `,` binds is a capital
|
||||
offence.
|
||||
- In TypeScript and TSX, do not mechanically verticalise short call tails,
|
||||
short object literals, or short callback bodies that already fit the local
|
||||
line-length and delimiter rules. Expanding compact local code without a
|
||||
readability need is a minor style violation.
|
||||
- In TypeScript and TSX, treat short object literals, short returned objects,
|
||||
short typed object shapes, and short function-call object arguments as
|
||||
compact associative syntax by default. If they fit locally, keep the opening
|
||||
`{` on the same line as the first property and keep the closing `}` on the
|
||||
same line as the final property. Do not explode them into vertical
|
||||
Prettier-style blocks without a concrete readability or line-length reason.
|
||||
- In TypeScript and TSX, when a compact associative form is broken across two
|
||||
lines, keep the opening `{` with the first property and the closing `}` with
|
||||
the final property. A shape like `{\n key: value,\n}` is wrong even when
|
||||
line length would permit it.
|
||||
- In TypeScript and TSX, when a short call such as `apiGet<...> (...)`,
|
||||
`apiPatch<...> (...)`, `setState (...)`, `updateClientSettings (...)`, or
|
||||
`window.dispatchEvent (...)` already fits within the local style, do not
|
||||
add extra vertical layers around the object argument or callback body.
|
||||
- In TypeScript and TSX, after editing a file, inspect the file tail and
|
||||
remove meaningless blank lines before `export default` or the end of file.
|
||||
A stray empty line before `export default` is a minor style offence.
|
||||
- Use correct British English spelling for new identifiers, filenames,
|
||||
component names, helper names, comments, and developer-facing prose unless
|
||||
editing an already established American-English API that must keep its
|
||||
existing spelling for compatibility.
|
||||
- Prefer British English spellings such as `behaviour`, `colour`, `realise`,
|
||||
`theatre`, `centre`, `favourite`, `optimise`, and `catalogue`.
|
||||
- Avoid American or Canadian spellings such as `behavior`, `color`, `realize`,
|
||||
`theater`, `center`, `favorite`, `optimize`, and `catalog`.
|
||||
- Even when an external library or API uses the wrong spelling, prefer to
|
||||
correct it at the local boundary and use proper British English names in this
|
||||
codebase. For example, prefer `import { color: colour } from '@external-lib'`
|
||||
over spreading `color` through local code.
|
||||
- Apply the same boundary correction to object destructuring, wrapper helpers,
|
||||
adapter layers, and local variable names when doing so does not break the
|
||||
external contract.
|
||||
- For this repository, prefer names such as `BehaviourSettingsSection.tsx`, not
|
||||
`BehaviorSettingsSection.tsx`.
|
||||
|
||||
### Additional style offences and penalties
|
||||
|
||||
Use this section for recurrent failure modes that are easy to miss when
|
||||
applying the delimiter rules mechanically.
|
||||
|
||||
#### Unnecessary `void` before ordinary callbacks
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
onClick={() => void requestActiveTab ('theme')}
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
onClick={() => requestActiveTab ('theme')}
|
||||
```
|
||||
|
||||
Penalty: medium-severity offence. The code still works, but it pollutes the
|
||||
local style and usually signals that the edit was made mechanically rather than
|
||||
by reading the surrounding code.
|
||||
|
||||
#### Formatting that changes expression structure
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const hasUnsavedChanges =
|
||||
serialiseThemeDraft (draftThemeSlots)
|
||||
!== (serialiseThemeDraft (savedThemeSlots),
|
||||
draftActiveThemeMode !== savedThemeMode)
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const hasUnsavedChanges =
|
||||
serialiseThemeDraft (draftThemeSlots)
|
||||
!== serialiseThemeDraft (savedThemeSlots)
|
||||
|| draftThemeMode !== savedThemeMode
|
||||
```
|
||||
|
||||
Penalty: capital offence. Formatting must never corrupt the meaning of an
|
||||
expression.
|
||||
|
||||
#### Mechanical vertical expansion of compact local code
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const nextState = {
|
||||
open,
|
||||
activeTab }
|
||||
|
||||
setDirtyStates (
|
||||
current => ({
|
||||
current,
|
||||
key: value }),
|
||||
)
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const nextState = { open, activeTab }
|
||||
|
||||
setDirtyStates (
|
||||
current => ({
|
||||
current,
|
||||
key: value }))
|
||||
```
|
||||
|
||||
Penalty: minor offence when semantics stay intact. It is not necessarily
|
||||
broken, but it ignores the repository's compact associative style.
|
||||
|
||||
#### Prettier-style exploded object literals that should stay compact
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const next = {
|
||||
enabled: keyboard?.enabled !== false,
|
||||
bindings: normaliseKeyboardBindings (keyboard?.bindings),
|
||||
}
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const next = {
|
||||
enabled: keyboard?.enabled !== false,
|
||||
bindings: normaliseKeyboardBindings (keyboard?.bindings) }
|
||||
```
|
||||
|
||||
Also good when short enough:
|
||||
|
||||
```ts
|
||||
const next = { enabled: keyboard?.enabled !== false,
|
||||
bindings: normaliseKeyboardBindings (keyboard?.bindings) }
|
||||
```
|
||||
|
||||
Rule: for compact associative syntax, keep `{` with the first property and `}`
|
||||
with the final property unless line length truly forces a different shape.
|
||||
Do not mechanically apply the common Prettier block form.
|
||||
Penalty: medium-severity offence. The code still runs, but it violates a core
|
||||
repository formatting habit that must be preserved consistently.
|
||||
|
||||
#### Exploded object arguments inside short calls
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
updateClientSettings (settings => ({
|
||||
...settings,
|
||||
keyboard: next,
|
||||
}))
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
updateClientSettings (settings => ({
|
||||
...settings,
|
||||
keyboard: next }))
|
||||
```
|
||||
|
||||
Rule: a call-expression closing `)` must not drift onto its own line, and a
|
||||
short object argument should not be exploded more than necessary. Keep the
|
||||
callback's returned object compact when it fits.
|
||||
Penalty: medium-severity offence. This usually means the edit was formatted
|
||||
mechanically instead of by reading the local style.
|
||||
|
||||
#### Stray blank line before `export default`
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const Component: FC = () => {
|
||||
return <div/>
|
||||
}
|
||||
|
||||
|
||||
export default Component
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const Component: FC = () => {
|
||||
return <div/>
|
||||
}
|
||||
|
||||
export default Component
|
||||
```
|
||||
|
||||
Rule: do not leave an extra empty line between the last top-level declaration
|
||||
and `export default` unless some surrounding file structure genuinely requires
|
||||
visual separation.
|
||||
Penalty: minor offence. It is small, but it is easy to avoid and should not
|
||||
recur.
|
||||
|
||||
### Frontend delimiter decision table
|
||||
|
||||
Use this table before accepting any edited TypeScript or TSX hunk. The table is
|
||||
more authoritative than formatter habit.
|
||||
|
||||
#### Import and export named bindings
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
} from '@/components/ui'
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
import { Button,
|
||||
Card } from '@/components/ui'
|
||||
```
|
||||
|
||||
Also acceptable when short:
|
||||
|
||||
```ts
|
||||
import { Button, Card } from '@/components/ui'
|
||||
```
|
||||
|
||||
Rule: named-binding `}` is associative-array-style syntax. It must not be alone
|
||||
at the beginning of a line. Prefer keeping `{` with the first binding and `}`
|
||||
with the final binding when this fits the line limit.
|
||||
Penalty: capital offence. This is one of the core associative-brace rules.
|
||||
|
||||
#### Type literals
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
type Props = {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
}
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
type Props = {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void }
|
||||
```
|
||||
|
||||
Rule: type-literal `}` is not a block close. It must stay on the same line as
|
||||
the final property unless that would break the hard line limit.
|
||||
Penalty: capital offence. Mistaking a type-literal `}` for a block `}` is one
|
||||
of the recurring death-class errors.
|
||||
|
||||
#### Object literals
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const value = {
|
||||
open,
|
||||
activeScope,
|
||||
}
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const value = {
|
||||
open,
|
||||
activeScope }
|
||||
```
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const value = useMemo (() => ({
|
||||
open,
|
||||
activeScope,
|
||||
}), [open, activeScope])
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const value = useMemo (() => ({
|
||||
open,
|
||||
activeScope }), [open, activeScope])
|
||||
```
|
||||
|
||||
Rule: object-literal `}` is associative-array-style syntax. It must not be on a
|
||||
line by itself. Keep it with the final property, and keep call `)` off the
|
||||
beginning of a line.
|
||||
Penalty: capital offence. Wrong object-literal `}` placement and wrong call
|
||||
`)` placement are both death-class violations here.
|
||||
|
||||
#### Destructuring parameters
|
||||
|
||||
Bad:
|
||||
|
||||
```tsx
|
||||
const Component: FC<Props> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
}) => {
|
||||
return null
|
||||
}
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```tsx
|
||||
const Component: FC<Props> = (
|
||||
{ open,
|
||||
onOpenChange },
|
||||
) => {
|
||||
return null
|
||||
}
|
||||
```
|
||||
|
||||
Rule: when a React component or helper takes a destructured object parameter
|
||||
that spans multiple lines, do not use the Prettier-style `= ({ ... }) =>`
|
||||
shape. Put the function parameter list on its own lines. The destructuring `}`
|
||||
stays with the final binding. The parameter-list `)` is then allowed and
|
||||
required at the beginning of its own line.
|
||||
Penalty: capital offence. This pattern is a primary source of repeated TSX
|
||||
style regressions.
|
||||
|
||||
#### Inline typed destructuring parameter
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const RouteTransitionWrapper = ({ user, setUser }: {
|
||||
user: User | null
|
||||
setUser: Dispatch<SetStateAction<User | null>> }) => {
|
||||
return null
|
||||
}
|
||||
```
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const RouteTransitionWrapper = ({ user, setUser }: {
|
||||
user: User | null
|
||||
setUser: Dispatch<SetStateAction<User | null>>
|
||||
}) => {
|
||||
return null
|
||||
}
|
||||
```
|
||||
|
||||
Rule: this is not a separately split parameter-list block. The line break is
|
||||
inside the inline type. Keep the type-literal `}` and parameter-list `)` on the
|
||||
same line as the final type property.
|
||||
Penalty: capital offence. Misclassifying this case means the delimiter review
|
||||
has failed at the syntax-role level.
|
||||
|
||||
#### Multi-line normal parameter list
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const updateDraft = <Key extends keyof Settings,> (
|
||||
key: Key,
|
||||
value: Settings[Key]) => {
|
||||
return null
|
||||
}
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const updateDraft = <Key extends keyof Settings,> (
|
||||
key: Key,
|
||||
value: Settings[Key],
|
||||
) => {
|
||||
return null
|
||||
}
|
||||
```
|
||||
|
||||
Rule: when the parameter list itself is split across multiple parameter lines,
|
||||
the closing parameter `)` goes at the beginning of its own line before `=>` or
|
||||
the return type.
|
||||
Penalty: capital offence. This is the main allowed exception for a leading `)`,
|
||||
so getting it wrong destroys the whole rule set.
|
||||
|
||||
#### Function and callback blocks
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const handleSave = () => { save ()
|
||||
}
|
||||
```
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const handleSave = () => {
|
||||
save () }
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const handleSave = () => {
|
||||
save ()
|
||||
}
|
||||
```
|
||||
|
||||
Rule: block `}` closes executable code, not associative data. Multi-line
|
||||
function, lambda, callback, `if`, `for`, `switch`, and similar block braces
|
||||
belong on their own line.
|
||||
Penalty: capital offence. Confusing block `}` with associative `}` is a
|
||||
death-class delimiter error.
|
||||
|
||||
#### Function and method calls
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const value = compute (
|
||||
first,
|
||||
second
|
||||
)
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const value = compute (
|
||||
first,
|
||||
second)
|
||||
```
|
||||
|
||||
Rule: call-expression `)` must not be at the beginning of a line. The exception
|
||||
for leading `)` applies only to function declaration parameter lists, never to
|
||||
calls.
|
||||
Penalty: capital offence. A leading call `)` is one of the clearest death-class
|
||||
violations in this codebase.
|
||||
|
||||
#### JSX closing markers
|
||||
|
||||
Bad:
|
||||
|
||||
```tsx
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
)
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```tsx
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSave}>
|
||||
保存
|
||||
</Button>)
|
||||
```
|
||||
|
||||
Bad:
|
||||
|
||||
```tsx
|
||||
<Input
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```tsx
|
||||
<Input
|
||||
value={value}
|
||||
onChange={handleChange}/>
|
||||
```
|
||||
|
||||
Rule: keep `>` or `/>` with the final prop, and keep JSX closing parentheses in
|
||||
the local compact form such as `</div>)`.
|
||||
Penalty: medium-severity offence. It is usually not semantically broken, but it
|
||||
is a conspicuous TSX-style failure.
|
||||
|
||||
#### Arrays and tuples
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const items = [
|
||||
first,
|
||||
second,
|
||||
]
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const items = [
|
||||
first,
|
||||
second]
|
||||
```
|
||||
|
||||
Good when short:
|
||||
|
||||
```ts
|
||||
const items = [first, second]
|
||||
```
|
||||
|
||||
Rule: array and tuple `]` must not be at the beginning of a line. Keep it with
|
||||
the final element unless that would break the hard line limit.
|
||||
Penalty: capital offence. A leading `]` is forbidden by the same class of hard
|
||||
delimiter rule as leading associative `}` and leading call `)`.
|
||||
|
||||
#### Single-line braces
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const next = { ...current, enabled: true }
|
||||
const tag = { id, name }
|
||||
```
|
||||
|
||||
Bad:
|
||||
|
||||
```tsx
|
||||
<Component prop={ value }/>
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```tsx
|
||||
<Component prop={value}/>
|
||||
```
|
||||
|
||||
Rule: JavaScript object braces on one line get one inner space. JSX expression
|
||||
braces do not get inner spaces.
|
||||
Penalty: minor offence. This is not normally semantic breakage, but it still
|
||||
counts as a style miss.
|
||||
|
||||
#### Final TypeScript/TSX self-review checklist
|
||||
|
||||
Before reporting completion after a TypeScript or TSX edit, check the edited
|
||||
hunks line by line. Unless a step explicitly mentions JSX, it applies equally
|
||||
to `.ts` and `.tsx`:
|
||||
|
||||
1. No import/export/type/object/destructuring `}` appears alone at the beginning
|
||||
of a line.
|
||||
2. No call-expression `)` appears at the beginning of a line.
|
||||
3. Any leading `)` is definitely closing a function declaration parameter list,
|
||||
not a call.
|
||||
4. Any parameter-list `)` at the end of a line is valid because the parameter
|
||||
list itself was not split, only an inline type or destructuring shape was.
|
||||
5. No array or tuple `]` appears at the beginning of a line.
|
||||
6. Multi-line executable block `}` is on its own line.
|
||||
7. JSX `>` and `/>` stay with the final prop unless nearby code proves
|
||||
otherwise.
|
||||
8. JSX closing parentheses keep the compact local style.
|
||||
9. Leading indentation is 4-space logical indentation with tabs used only as
|
||||
leading 8-space compression.
|
||||
10. No line has trailing whitespace.
|
||||
|
||||
Preferred:
|
||||
|
||||
@@ -976,7 +335,7 @@ function PostFormTagsArea ({ tags, setTags }: Props) {
|
||||
- Do not scan or summarize dependency/generated/runtime directories such as
|
||||
`node_modules`, `dist`, `tmp`, `log`, and `storage` unless explicitly needed.
|
||||
- Before touching wiki, tag, versioning, BAN, IP BAN, or authentication
|
||||
behaviour, inspect the related request specs and service objects.
|
||||
behavior, inspect the related request specs and service objects.
|
||||
- If frontend code changes, run only non-test verification commands that
|
||||
apply, such as `npm run build` and `npm run lint`. Run `npm run test:run`
|
||||
only when the user explicitly asks for tests.
|
||||
@@ -993,4 +352,4 @@ A task is complete only when:
|
||||
explained,
|
||||
- unrelated files are not changed,
|
||||
- migrations and schema are consistent when schema changes are made,
|
||||
- user-facing behaviour is documented when needed.
|
||||
- user-facing behavior is documented when needed.
|
||||
|
||||
@@ -89,13 +89,15 @@ class MaterialsController < ApplicationController
|
||||
|
||||
begin
|
||||
Material.transaction do
|
||||
tag = resolve_material_tag!(tag_name_raw)
|
||||
tag_name = TagName.find_undiscard_or_create_by!(name: tag_name_raw)
|
||||
tag = tag_name.tag
|
||||
tag = Tag.create!(tag_name:, category: :material) unless tag
|
||||
|
||||
material = Material.new(tag:, url:,
|
||||
created_by_user: current_user,
|
||||
updated_by_user: current_user)
|
||||
material.file.attach(uploaded_blob) if uploaded_blob
|
||||
material.save!
|
||||
TagVersioning.record_tag_snapshot!(tag, created_by_user: current_user)
|
||||
upsert_export_paths!(material)
|
||||
MaterialVersionRecorder.record!(material:, event_type: :create,
|
||||
created_by_user: current_user)
|
||||
@@ -137,7 +139,10 @@ class MaterialsController < ApplicationController
|
||||
begin
|
||||
Material.transaction do
|
||||
MaterialVersionRecorder.ensure_snapshot!(material, created_by_user: current_user)
|
||||
tag = resolve_material_tag!(tag_name_raw)
|
||||
tag_name = TagName.find_undiscard_or_create_by!(name: tag_name_raw)
|
||||
tag = tag_name.tag
|
||||
tag = Tag.create!(tag_name:, category: :material) unless tag
|
||||
|
||||
material.assign_attributes(tag:, url:, updated_by_user: current_user)
|
||||
if uploaded_blob
|
||||
material.file.attach(uploaded_blob)
|
||||
@@ -145,7 +150,6 @@ class MaterialsController < ApplicationController
|
||||
material.file.detach
|
||||
end
|
||||
material.save!
|
||||
TagVersioning.record_tag_snapshot!(tag, created_by_user: current_user)
|
||||
upsert_export_paths!(material)
|
||||
MaterialVersionRecorder.record!(material:, event_type: :update,
|
||||
created_by_user: current_user)
|
||||
@@ -236,12 +240,6 @@ class MaterialsController < ApplicationController
|
||||
nil
|
||||
end
|
||||
|
||||
def resolve_material_tag! tag_name_raw
|
||||
tag_name = TagName.find_undiscard_or_create_by!(name: tag_name_raw)
|
||||
tag = tag_name.tag
|
||||
tag || Tag.create!(tag_name:, category: :material)
|
||||
end
|
||||
|
||||
def material_index_needs_tag_name? filters
|
||||
filters[:q].present? || filters[:sort] == 'tag_name'
|
||||
end
|
||||
|
||||
@@ -1,176 +0,0 @@
|
||||
class PostImportsController < ApplicationController
|
||||
before_action :require_member!
|
||||
|
||||
def parse
|
||||
source =
|
||||
if params[:format] == 'google_sheets'
|
||||
PostImportGoogleSheetsFetcher.fetch!(params[:source], rate_key: current_user.id)
|
||||
else
|
||||
params[:source]
|
||||
end
|
||||
format = params[:format] == 'google_sheets' ? 'csv' : params[:format]
|
||||
parsed = PostImportSourceParser.new(source:, format:,
|
||||
has_header: params[:has_header], json_path: params[:json_path]).parse
|
||||
render json: parsed
|
||||
rescue ArgumentError => e
|
||||
render_bad_request(e.message)
|
||||
end
|
||||
|
||||
def preview
|
||||
parsed = parsed_params
|
||||
url_column = params[:url_column].presence || (parsed[:columns].length == 1 ? 0 : nil)
|
||||
return render_bad_request('URL 列を選択してください．') if url_column.nil?
|
||||
|
||||
rows = PostImportPreviewer.new(parsed:, url_column:, mappings: mappings_params,
|
||||
existing: params[:existing]).preview
|
||||
render json: parsed.slice(:columns).merge(rows:)
|
||||
rescue ArgumentError => e
|
||||
render_bad_request(e.message)
|
||||
end
|
||||
|
||||
def validate
|
||||
rows = validate_rows_params
|
||||
changed_row = Integer(params[:changed_row], exception: false)
|
||||
result = PostImportPreviewer.new(parsed: { columns: [], rows: [] }, url_column: 0,
|
||||
mappings: {}, existing: params[:existing]).preview_rows(
|
||||
rows:, fetch_metadata: changed_row,
|
||||
metadata_cache: { })
|
||||
render json: { rows: result }
|
||||
rescue ArgumentError => e
|
||||
render_bad_request(e.message)
|
||||
end
|
||||
|
||||
def create
|
||||
result = PostImportRunner.new(actor: current_user, rows: create_rows_params,
|
||||
existing: params[:existing]).run
|
||||
render json: result, status: result[:created].positive? ? :created : :ok
|
||||
rescue ArgumentError => e
|
||||
render_bad_request(e.message)
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def require_member!
|
||||
return head :unauthorized unless current_user
|
||||
return if current_user.gte_member?
|
||||
|
||||
head :forbidden
|
||||
end
|
||||
|
||||
def parsed_params
|
||||
value = params.require(:parsed).to_unsafe_h.deep_transform_keys { _1.to_s.underscore }
|
||||
columns = Array(value['columns'])
|
||||
rows = Array(value['rows'])
|
||||
raise ArgumentError, '解析結果の形式が不正です．' unless columns.all?(Hash) && rows.all?(Hash)
|
||||
raise ArgumentError, '取込件数が多すぎます．' if rows.length > PostImportSourceParser::MAX_ROWS
|
||||
raise ArgumentError, '列数が多すぎます．' if columns.length > 50
|
||||
unless rows.all? { |row| Array(row['values']).length <= columns.length &&
|
||||
Array(row['values']).all? { _1.is_a?(String) && _1.bytesize <= PostImportSourceParser::MAX_CELL_BYTES } }
|
||||
raise ArgumentError, '解析結果のセルが不正です．'
|
||||
end
|
||||
raise ArgumentError, '解析結果が大きすぎます．' if rows.sum { Array(_1['values']).sum(&:bytesize) } > PostImportSourceParser::MAX_BYTES
|
||||
|
||||
parsed_rows = rows.map do |row|
|
||||
source_row = Integer(row['source_row'], exception: false)
|
||||
raise ArgumentError, '元行番号が不正です．' if source_row.nil? || source_row <= 0
|
||||
|
||||
{ source_row:, values: Array(row['values']) }
|
||||
end
|
||||
raise ArgumentError, '元行番号が重複しています．' if parsed_rows.map { _1[:source_row] }.uniq.length != parsed_rows.length
|
||||
|
||||
{ columns: columns.map { |column| column.slice('key', 'label') }, rows: parsed_rows }
|
||||
end
|
||||
|
||||
def mappings_params
|
||||
mappings = params[:mappings]
|
||||
return { } if mappings.blank?
|
||||
raise ArgumentError, '列割当ての形式が不正です．' unless mappings.is_a?(ActionController::Parameters)
|
||||
|
||||
raw = mappings.to_unsafe_h
|
||||
unknown_fields = raw.keys - PostImportPreviewer::FIELDS
|
||||
raise ArgumentError, '列割当て先が不正です．' if unknown_fields.present?
|
||||
|
||||
permitted = mappings.permit(*PostImportPreviewer::FIELDS.map { |field|
|
||||
{ field => [:kind, :value, { columns: [] }] }
|
||||
}).to_h
|
||||
|
||||
raw.each_with_object({ }) do |(field, value), result|
|
||||
raise ArgumentError, '列割当ての形式が不正です．' unless value.is_a?(Hash)
|
||||
raise ArgumentError, '列割当ての項目が不正です．' unless (value.keys - ['kind', 'value', 'columns']).empty?
|
||||
|
||||
value = permitted.fetch(field)
|
||||
kind = value['kind'].presence || 'columns'
|
||||
raise ArgumentError, '列割当ての種別が不正です．' unless kind.in?(['columns', 'fixed'])
|
||||
columns = value['columns']
|
||||
unless columns.nil? || (columns.is_a?(Array) && columns.all? { |index| Integer(index, exception: false)&.>= 0 })
|
||||
raise ArgumentError, '列番号が不正です．'
|
||||
end
|
||||
raise ArgumentError, '固定値が不正です．' if kind == 'fixed' && !value['value'].is_a?(String)
|
||||
|
||||
result[field] = { 'kind' => kind, 'value' => value['value'].to_s,
|
||||
'columns' => Array(columns).map { Integer(_1) } }
|
||||
end
|
||||
end
|
||||
|
||||
def validate_rows_params
|
||||
rows = Array(params[:rows])
|
||||
raise ArgumentError, '取込件数が多すぎます．' if rows.length > PostImportSourceParser::MAX_ROWS
|
||||
|
||||
normalised_rows = rows.map do |row|
|
||||
value = ActionController::Parameters.new(row).permit(:source_row, :sourceRow, :url, :metadata_url, :metadataUrl,
|
||||
attributes: {}, provenance: {}, tag_sources: {},
|
||||
fetch_warnings: [], validation_warnings: [])
|
||||
normalised = value.to_h.deep_transform_keys { _1.to_s.underscore }
|
||||
attributes = normalised.fetch('attributes', { })
|
||||
provenance = normalised.fetch('provenance', { })
|
||||
allowed = PostImportPreviewer::FIELDS
|
||||
unless attributes.is_a?(Hash) && provenance.is_a?(Hash) &&
|
||||
(attributes.keys - allowed).empty? &&
|
||||
(provenance.keys - (allowed + ['url'])).empty?
|
||||
raise ArgumentError, '行の形式が不正です．'
|
||||
end
|
||||
unless provenance.values.all? { _1.in?(['automatic', 'mapped', 'fixed', 'manual']) }
|
||||
raise ArgumentError, '値の由来が不正です．'
|
||||
end
|
||||
raise ArgumentError, 'セルが大きすぎます．' if [normalised['url'], *attributes.values].any? { _1.to_s.bytesize > PostImportSourceParser::MAX_CELL_BYTES }
|
||||
if normalised['tag_sources'].present? &&
|
||||
(!normalised['tag_sources'].is_a?(Hash) ||
|
||||
(normalised['tag_sources'].keys - ['automatic', 'mapped', 'fixed', 'manual']).present?)
|
||||
raise ArgumentError, 'タグ由来の形式が不正です．'
|
||||
end
|
||||
if normalised['tag_sources'].present? &&
|
||||
(!normalised['tag_sources'].values.all?(String) ||
|
||||
normalised['tag_sources'].values.any? { _1.bytesize > PostImportSourceParser::MAX_CELL_BYTES } ||
|
||||
normalised['tag_sources'].values.sum(&:bytesize) > PostImportSourceParser::MAX_CELL_BYTES)
|
||||
raise ArgumentError, 'タグ由来が大きすぎます．'
|
||||
end
|
||||
|
||||
source_row = Integer(normalised['source_row'], exception: false)
|
||||
raise ArgumentError, '元行番号が不正です．' if source_row.nil? || source_row <= 0
|
||||
|
||||
normalised['source_row'] = source_row
|
||||
normalised.symbolize_keys
|
||||
end
|
||||
source_rows = normalised_rows.map { _1[:source_row] }
|
||||
if source_rows.uniq.length != source_rows.length
|
||||
raise ArgumentError, '元行番号が不正です．'
|
||||
end
|
||||
|
||||
normalised_rows
|
||||
end
|
||||
|
||||
def create_rows_params
|
||||
rows = params[:rows]
|
||||
raise ArgumentError, '取込行の形式が不正です．' unless rows.is_a?(Array)
|
||||
|
||||
rows.map do |row|
|
||||
unless row.is_a?(Hash) || row.is_a?(ActionController::Parameters)
|
||||
raise ArgumentError, '取込行の形式が不正です．'
|
||||
end
|
||||
|
||||
parameters = row.is_a?(ActionController::Parameters) ? row : ActionController::Parameters.new(row)
|
||||
parameters.permit(:source_row, :sourceRow, :url, :metadata_url, :metadataUrl,
|
||||
attributes: {}, provenance: {}, tag_sources: {}, tagSources: {}).to_h
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -25,7 +25,6 @@ class PostVersionsController < ApplicationController
|
||||
SQL
|
||||
.select('post_versions.*', 'prev.title AS prev_title', 'prev.url AS prev_url',
|
||||
'prev.thumbnail_base AS prev_thumbnail_base', 'prev.tags AS prev_tags',
|
||||
'prev.video_ms AS prev_video_ms',
|
||||
'prev.original_created_from AS prev_original_created_from',
|
||||
'prev.original_created_before AS prev_original_created_before')
|
||||
q = q.where('post_versions.post_id = ?', post_id) if post_id
|
||||
@@ -75,10 +74,6 @@ class PostVersionsController < ApplicationController
|
||||
current: row.thumbnail_base,
|
||||
prev: row.attributes['prev_thumbnail_base']
|
||||
},
|
||||
video_ms: {
|
||||
current: row.video_ms,
|
||||
prev: row.attributes['prev_video_ms']
|
||||
},
|
||||
tags: build_version_tags(cur_tags, prev_tags),
|
||||
original_created_from: {
|
||||
current: row.original_created_from&.iso8601,
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
class PostsController < ApplicationController
|
||||
Event = Struct.new(:post, :tag, :user, :change_type, :timestamp, keyword_init: true)
|
||||
|
||||
class VideoMsParseError < ArgumentError
|
||||
;
|
||||
end
|
||||
|
||||
def index
|
||||
url = params[:url].presence
|
||||
title = params[:title].presence
|
||||
@@ -49,9 +45,7 @@ class PostsController < ApplicationController
|
||||
.joins("LEFT JOIN (#{ pt_max_sql }) pt_max ON pt_max.post_id = posts.id")
|
||||
.reselect('posts.*', Arel.sql("#{ updated_at_all_sql } AS updated_at_all"))
|
||||
.preload(:uploaded_user, :parents, :children,
|
||||
active_post_tags: [:sections,
|
||||
{ tag: [:deerjikists, :materials,
|
||||
{ tag_name: :wiki_page }] }])
|
||||
tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
|
||||
.with_attached_thumbnail
|
||||
|
||||
q = q.where('posts.url LIKE ?', "%#{ url }%") if url
|
||||
@@ -103,9 +97,7 @@ class PostsController < ApplicationController
|
||||
|
||||
def random
|
||||
post = filtered_posts.preload(:uploaded_user, :parents, :children,
|
||||
active_post_tags: [:sections,
|
||||
{ tag: [:deerjikists, :materials,
|
||||
{ tag_name: :wiki_page }] }])
|
||||
tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
|
||||
.with_attached_thumbnail
|
||||
.order('RAND()')
|
||||
.first
|
||||
@@ -118,9 +110,7 @@ class PostsController < ApplicationController
|
||||
post =
|
||||
Post
|
||||
.includes(:uploaded_user, :parents, :children,
|
||||
active_post_tags: [:sections,
|
||||
{ tag: [:deerjikists, :materials,
|
||||
{ tag_name: :wiki_page }] }])
|
||||
tags: [:deerjikists, :materials, { tag_name: :wiki_page }])
|
||||
.with_attached_thumbnail
|
||||
.find_by(id: params[:id])
|
||||
return head :not_found unless post
|
||||
@@ -135,20 +125,40 @@ class PostsController < ApplicationController
|
||||
child_posts:,
|
||||
sibling_posts:,
|
||||
related:)
|
||||
.merge(tags: build_tag_tree_for(post))
|
||||
.merge(tags: build_tag_tree_for(post.tags))
|
||||
end
|
||||
|
||||
def create
|
||||
return head :unauthorized unless current_user
|
||||
return head :forbidden unless current_user.gte_member?
|
||||
|
||||
post = PostCreator.new(actor: current_user,
|
||||
attributes: { title: params[:title], url: params[:url],
|
||||
thumbnail: params[:thumbnail], tags: params[:tags],
|
||||
original_created_from: params[:original_created_from],
|
||||
original_created_before: params[:original_created_before],
|
||||
parent_post_ids: parse_parent_post_ids,
|
||||
video_ms: params[:video_ms], duration: params[:duration] }).create!
|
||||
# TODO: サイトに応じて thumbnail_base 設定
|
||||
title = params[:title].presence
|
||||
url = params[:url]
|
||||
thumbnail = params[:thumbnail]
|
||||
tag_names = params[:tags].to_s.split
|
||||
original_created_from = params[:original_created_from]
|
||||
original_created_before = params[:original_created_before]
|
||||
parent_post_ids = parse_parent_post_ids
|
||||
resized_thumbnail = thumbnail.present? ? Post.resized_thumbnail_attachment(thumbnail) : nil
|
||||
|
||||
post = Post.new(title:, url:, thumbnail_base: nil, uploaded_user: current_user,
|
||||
original_created_from:, original_created_before:)
|
||||
post.thumbnail.attach(resized_thumbnail) if resized_thumbnail
|
||||
|
||||
ApplicationRecord.transaction do
|
||||
post.save!
|
||||
|
||||
tags = Tag.normalise_tags!(tag_names, deny_deprecated: true)
|
||||
TagVersioning.record_tag_snapshots!(tags, created_by_user: current_user)
|
||||
|
||||
tags = Tag.expand_parent_tags(tags).reject(&:deprecated?)
|
||||
sync_post_tags!(post, tags)
|
||||
|
||||
sync_parent_posts!(post, parent_post_ids)
|
||||
|
||||
PostVersionRecorder.record!(post:, event_type: :create, created_by_user: current_user)
|
||||
end
|
||||
|
||||
post.reload
|
||||
render json: PostRepr.base(post), status: :created
|
||||
@@ -156,10 +166,6 @@ class PostsController < ApplicationController
|
||||
render_validation_error fields: { tags: 'ニコニコ・タグは直接指定できません．' }
|
||||
rescue Tag::DeprecatedTagNormalisationError
|
||||
render_unprocessable_entity '廃止済みタグは付与できません．', field: :tags
|
||||
rescue Tag::SectionLiteralParseError
|
||||
render_validation_error fields: { tags: ['タグ区間の記法が不正です．'] }
|
||||
rescue PostCreator::VideoMsParseError
|
||||
render_validation_error fields: { video_ms: ['動画時間の記法が不正です．'] }
|
||||
rescue MiniMagick::Error
|
||||
render_validation_error fields: { thumbnail: ['サムネイル画像の変換に失敗しました．'] }
|
||||
rescue ArgumentError => e
|
||||
@@ -218,8 +224,6 @@ class PostsController < ApplicationController
|
||||
original_created_from:,
|
||||
original_created_before:,
|
||||
tag_names:,
|
||||
video_ms_param: params[:video_ms],
|
||||
duration_param: params[:duration],
|
||||
parent_post_ids:)
|
||||
|
||||
snapshot_to_apply =
|
||||
@@ -250,16 +254,12 @@ class PostsController < ApplicationController
|
||||
|
||||
post.reload
|
||||
json = PostRepr.base(post, current_user)
|
||||
json['tags'] = build_tag_tree_for(post)
|
||||
json['tags'] = build_tag_tree_for(post.tags)
|
||||
render json:, status: :ok
|
||||
rescue Tag::NicoTagNormalisationError
|
||||
render_validation_error fields: { tags: ['ニコニコ・タグは直接指定できません．'] }
|
||||
rescue Tag::DeprecatedTagNormalisationError
|
||||
render_unprocessable_entity '廃止済みタグは付与できません．', field: :tags
|
||||
rescue Tag::SectionLiteralParseError
|
||||
render_validation_error fields: { tags: ['タグ区間の記法が不正です．'] }
|
||||
rescue VideoMsParseError
|
||||
render_validation_error fields: { video_ms: ['動画時間の記法が不正です．'] }
|
||||
rescue ArgumentError => e
|
||||
render_validation_error fields: { parent_post_ids: [e.message] }
|
||||
rescue ActiveRecord::RecordInvalid => e
|
||||
@@ -358,7 +358,7 @@ class PostsController < ApplicationController
|
||||
def tagged_post_ids_for(name) =
|
||||
Post.joins(tags: :tag_name).where(tag_names: { name: }).select(:id)
|
||||
|
||||
def sync_post_tags! post, desired_tags, sections
|
||||
def sync_post_tags! post, desired_tags
|
||||
desired_tags.each do |t|
|
||||
t.save! if t.new_record?
|
||||
end
|
||||
@@ -377,21 +377,13 @@ class PostsController < ApplicationController
|
||||
end
|
||||
end
|
||||
|
||||
PostTagSection.where(post_id: post.id).destroy_all
|
||||
sections.each do |tag_id, ranges|
|
||||
ranges.each do |begin_ms, end_ms|
|
||||
PostTagSection.create!(post_id: post.id, tag_id:, begin_ms:, end_ms:)
|
||||
end
|
||||
end
|
||||
|
||||
PostTag.where(post_id: post.id, tag_id: to_remove.to_a).kept.find_each do |pt|
|
||||
pt.discard_by!(current_user)
|
||||
end
|
||||
end
|
||||
|
||||
def build_tag_tree_for post
|
||||
post_tags = post.active_post_tags.reject { |post_tag| post_tag.tag.deprecated? }
|
||||
tags = post_tags.map(&:tag)
|
||||
def build_tag_tree_for tags
|
||||
tags = tags.reject(&:deprecated?).to_a
|
||||
tag_ids = tags.map(&:id)
|
||||
|
||||
implications = TagImplication.where(parent_tag_id: tag_ids, tag_id: tag_ids)
|
||||
@@ -406,9 +398,6 @@ class PostsController < ApplicationController
|
||||
root_ids = tag_ids - child_ids
|
||||
|
||||
tags_by_id = tags.index_by(&:id)
|
||||
sections_by_tag_id = post_tags.to_h { |post_tag|
|
||||
[post_tag.tag_id, post_tag.sections.as_json(only: [:begin_ms, :end_ms])]
|
||||
}
|
||||
|
||||
memo = { }
|
||||
|
||||
@@ -416,10 +405,8 @@ class PostsController < ApplicationController
|
||||
tag = tags_by_id[tag_id]
|
||||
return nil unless tag
|
||||
|
||||
sections = sections_by_tag_id.fetch(tag_id, [])
|
||||
|
||||
if path.include?(tag_id)
|
||||
return TagRepr.inline(tag).merge(children: [], sections:)
|
||||
return TagRepr.inline(tag).merge(children: [])
|
||||
end
|
||||
|
||||
if memo.key?(tag_id)
|
||||
@@ -431,7 +418,7 @@ class PostsController < ApplicationController
|
||||
|
||||
children = child_ids.filter_map { |cid| build_node.(cid, new_path) }
|
||||
|
||||
memo[tag_id] = TagRepr.inline(tag).merge(children:, sections:)
|
||||
memo[tag_id] = TagRepr.inline(tag).merge(children:)
|
||||
end
|
||||
|
||||
root_ids.filter_map { |id| build_node.call(id, []) }
|
||||
@@ -500,7 +487,6 @@ class PostsController < ApplicationController
|
||||
|
||||
def post_snapshot_from_version version
|
||||
{ title: version.title,
|
||||
video_ms: version.respond_to?(:video_ms) ? version.video_ms : nil,
|
||||
original_created_from: snapshot_time(version.original_created_from),
|
||||
original_created_before: snapshot_time(version.original_created_before),
|
||||
tag_names: editable_tag_names_from_version(version),
|
||||
@@ -513,7 +499,6 @@ class PostsController < ApplicationController
|
||||
|
||||
def post_snapshot_from_record post
|
||||
{ title: post.title,
|
||||
video_ms: post.video_ms,
|
||||
original_created_from: snapshot_time(post.original_created_from),
|
||||
original_created_before: snapshot_time(post.original_created_before),
|
||||
tag_names: editable_tag_names_from_post(post),
|
||||
@@ -521,41 +506,16 @@ class PostsController < ApplicationController
|
||||
end
|
||||
|
||||
def editable_tag_names_from_post post
|
||||
post
|
||||
.post_tags
|
||||
.kept
|
||||
.joins(tag: :tag_name)
|
||||
.merge(Tag.not_nico)
|
||||
.merge(Tag.where(deprecated_at: nil))
|
||||
.includes(:sections, tag: :tag_name)
|
||||
.order('tag_names.name')
|
||||
.map do |post_tag|
|
||||
name = post_tag.tag.tag_name.name
|
||||
sections = post_tag.sections.sort_by(&:begin_ms)
|
||||
|
||||
next name if sections.empty?
|
||||
|
||||
"#{ name }#{ sections.map { Post.section_literal(_1) }.join }"
|
||||
end
|
||||
post.tags.not_nico.where(deprecated_at: nil)
|
||||
.joins(:tag_name).order('tag_names.name').pluck('tag_names.name')
|
||||
end
|
||||
|
||||
def post_incoming_snapshot title:, original_created_from:, original_created_before:,
|
||||
tag_names:, video_ms_param:, duration_param:, parent_post_ids:
|
||||
Tag.normalise_tags!(tag_names, with_tagme: false, deny_deprecated: true,
|
||||
with_sections: true) =>
|
||||
{ tags:, sections: }
|
||||
|
||||
tags = Tag.expand_parent_tags(tags).reject(&:deprecated?)
|
||||
video_ms = normalise_video_ms(tags, video_ms_param:, duration_param:)
|
||||
validate_video_sections!(video_ms, sections)
|
||||
|
||||
tag_names:, parent_post_ids:
|
||||
{ title:,
|
||||
video_ms:,
|
||||
original_created_from: snapshot_time(original_created_from),
|
||||
original_created_before: snapshot_time(original_created_before),
|
||||
tag_names: tags.uniq(&:id).map { |tag|
|
||||
"#{ tag.name }#{ sections[tag.id].to_a.map { section_literal(_1) }.join }"
|
||||
}.sort,
|
||||
tag_names: incoming_tag_names_for_snapshot(tag_names),
|
||||
parent_post_ids: parent_post_ids.sort }
|
||||
end
|
||||
|
||||
@@ -578,8 +538,11 @@ class PostsController < ApplicationController
|
||||
value.to_s
|
||||
end
|
||||
|
||||
def section_literal section
|
||||
"[#{ Post.ms_to_time(section[0]) }-#{ section[1] ? Post.ms_to_time(section[1]) : '' }]"
|
||||
def incoming_tag_names_for_snapshot raw_tag_names
|
||||
tags = Tag.normalise_tags!(raw_tag_names, with_tagme: false,
|
||||
deny_deprecated: true)
|
||||
|
||||
Tag.expand_parent_tags(tags).reject(&:deprecated?).map(&:name).uniq.sort
|
||||
end
|
||||
|
||||
def post_conflict_json post:, base_version_no:, base_snapshot:,
|
||||
@@ -600,8 +563,6 @@ class PostsController < ApplicationController
|
||||
def post_snapshot_changes base_snapshot, current_snapshot, incoming_snapshot
|
||||
[scalar_snapshot_change(:title, 'タイトル',
|
||||
base_snapshot, current_snapshot, incoming_snapshot),
|
||||
scalar_snapshot_change(:video_ms, '動画時間',
|
||||
base_snapshot, current_snapshot, incoming_snapshot),
|
||||
scalar_snapshot_change(:original_created_from, 'オリジナルの作成日時（以降）',
|
||||
base_snapshot, current_snapshot, incoming_snapshot),
|
||||
scalar_snapshot_change(:original_created_before, 'オリジナルの作成日時（より前）',
|
||||
@@ -665,14 +626,11 @@ class PostsController < ApplicationController
|
||||
PostVersionRecorder.ensure_snapshot!(post, created_by_user: current_user)
|
||||
|
||||
post.update!(title: snapshot[:title],
|
||||
video_ms: snapshot[:video_ms],
|
||||
original_created_from: snapshot[:original_created_from],
|
||||
original_created_before: snapshot[:original_created_before])
|
||||
|
||||
Tag.normalise_tags!(snapshot[:tag_names], with_tagme: false,
|
||||
deny_deprecated: true,
|
||||
with_sections: true) =>
|
||||
{ tags: editable_tags, sections: }
|
||||
editable_tags = Tag.normalise_tags!(snapshot[:tag_names], with_tagme: false,
|
||||
deny_deprecated: true)
|
||||
TagVersioning.record_tag_snapshots!(editable_tags, created_by_user: current_user)
|
||||
|
||||
readonly_tags = post.tags.nico.to_a
|
||||
@@ -680,17 +638,14 @@ class PostsController < ApplicationController
|
||||
tags = readonly_tags + editable_tags
|
||||
tags = Tag.expand_parent_tags(tags).reject(&:deprecated?)
|
||||
|
||||
post.video_ms = tags.any? { _1.id == Tag.video.id } ? snapshot[:video_ms] : nil
|
||||
validate_video_sections!(post.video_ms, sections)
|
||||
post.save!
|
||||
sync_post_tags!(post, tags, sections)
|
||||
sync_post_tags!(post, tags)
|
||||
sync_parent_posts!(post, snapshot[:parent_post_ids])
|
||||
|
||||
PostVersionRecorder.record!(post:, event_type: :update, created_by_user: current_user)
|
||||
end
|
||||
|
||||
def merge_post_snapshots base_snapshot, current_snapshot, incoming_snapshot
|
||||
[:title, :video_ms, :original_created_from, :original_created_before].map {
|
||||
[:title, :original_created_from, :original_created_before].map {
|
||||
[_1, merge_scalar_snapshot_value(base_snapshot[_1],
|
||||
current_snapshot[_1],
|
||||
incoming_snapshot[_1])]
|
||||
@@ -734,44 +689,4 @@ class PostsController < ApplicationController
|
||||
render_validation_error record
|
||||
end
|
||||
end
|
||||
|
||||
def normalise_video_ms tags, video_ms_param: params[:video_ms], duration_param: params[:duration]
|
||||
return nil unless tags.any? { _1.id == Tag.video.id }
|
||||
|
||||
if video_ms_param.present?
|
||||
video_ms = Integer(video_ms_param, exception: false)
|
||||
raise VideoMsParseError unless video_ms&.positive?
|
||||
|
||||
return video_ms
|
||||
end
|
||||
|
||||
return nil if duration_param.blank?
|
||||
|
||||
video_ms = Tag.time_to_ms!(duration_param.to_s, tag_name: '動画時間')
|
||||
raise VideoMsParseError unless video_ms.positive?
|
||||
|
||||
video_ms
|
||||
rescue Tag::SectionLiteralParseError
|
||||
raise VideoMsParseError
|
||||
end
|
||||
|
||||
def validate_video_sections! video_ms, sections
|
||||
return unless video_ms
|
||||
|
||||
sections.each_value do |ranges|
|
||||
ranges.each do |begin_ms, end_ms|
|
||||
if begin_ms >= video_ms
|
||||
post = Post.new
|
||||
post.errors.add :video_ms, 'タグ区間の開始が動画時間以上です．'
|
||||
raise ActiveRecord::RecordInvalid, post
|
||||
end
|
||||
|
||||
if end_ms && end_ms > video_ms
|
||||
post = Post.new
|
||||
post.errors.add :video_ms, 'タグ区間の終端が動画時間を超えてゐます．'
|
||||
raise ActiveRecord::RecordInvalid, post
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@@ -1,57 +1,50 @@
|
||||
class PreviewController < ApplicationController
|
||||
before_action :require_member!
|
||||
|
||||
def title
|
||||
return render_bad_request('URL は必須です．') if params[:url].blank?
|
||||
# TODO: # 既知サイトなら決まったフォーマットで title 取得するやぅに．
|
||||
return head :unauthorized unless current_user
|
||||
|
||||
render json: { title: Preview::ThumbnailFetcher.title(params[:url]) }
|
||||
rescue Preview::UrlSafety::UnsafeUrl => e
|
||||
url = params[:url]
|
||||
return render_bad_request('URL は必須です．') unless url.present?
|
||||
|
||||
unless url.start_with?(/http(s)?:\/\//)
|
||||
url = 'http://' + url
|
||||
end
|
||||
|
||||
html = URI.open(url, open_timeout: 5, read_timeout: 5).read
|
||||
doc = Nokogiri::HTML.parse(html)
|
||||
title = doc.at('title')&.text&.strip
|
||||
|
||||
render json: { title: title }
|
||||
rescue => e
|
||||
render_bad_request(e.message)
|
||||
rescue Preview::HttpFetcher::FetchTimeout => e
|
||||
render_preview_error(e.message, :gateway_timeout)
|
||||
rescue Preview::HttpFetcher::ResponseTooLarge => e
|
||||
render_preview_error(e.message, :payload_too_large)
|
||||
rescue Preview::HttpFetcher::FetchFailed => e
|
||||
render_preview_error(e.message, :bad_gateway)
|
||||
end
|
||||
|
||||
def thumbnail
|
||||
return render_bad_request('URL は必須です．') if params[:url].blank?
|
||||
# TODO: 既知ドメインであれば指定のアドレスからサムネールを取得するやぅにする．
|
||||
|
||||
image = MiniMagick::Image.read(Preview::ThumbnailFetcher.fetch(params[:url]))
|
||||
image.auto_orient
|
||||
image.resize '180x180>'
|
||||
image.format 'png'
|
||||
width, height = image.dimensions
|
||||
raise Preview::ThumbnailFetcher::GenerationFailed, 'サムネール画像の変換に失敗しました．' if width > 180 || height > 180
|
||||
|
||||
send_data image.to_blob, type: 'image/png', disposition: 'inline'
|
||||
rescue Preview::UrlSafety::UnsafeUrl => e
|
||||
render_bad_request(e.message)
|
||||
rescue Preview::HttpFetcher::FetchTimeout => e
|
||||
render_preview_error(e.message, :gateway_timeout)
|
||||
rescue Preview::HttpFetcher::ResponseTooLarge => e
|
||||
render_preview_error(e.message, :payload_too_large)
|
||||
rescue Preview::HttpFetcher::FetchFailed => e
|
||||
render_preview_error(e.message, :bad_gateway)
|
||||
rescue Preview::ThumbnailFetcher::GenerationFailed, MiniMagick::Error => e
|
||||
render_unprocessable_entity(e.message)
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def require_member!
|
||||
return head :unauthorized unless current_user
|
||||
return if current_user.gte_member?
|
||||
|
||||
head :forbidden
|
||||
end
|
||||
url = params[:url]
|
||||
return render_bad_request('URL は必須です．') if url.blank?
|
||||
|
||||
def render_preview_error(message, status)
|
||||
render json: { type: status.to_s,
|
||||
message:,
|
||||
errors: { },
|
||||
base_errors: [message] },
|
||||
status:
|
||||
unless url.start_with?(/http(s)?:\/\//)
|
||||
url = 'http://' + url
|
||||
end
|
||||
|
||||
path = Rails.root.join('tmp', "thumb_#{ SecureRandom.hex }.png")
|
||||
system("node #{ Rails.root }/lib/screenshot.js #{ Shellwords.escape(url) } #{ path }")
|
||||
|
||||
if File.exist?(path)
|
||||
image = MiniMagick::Image.open(path)
|
||||
image.resize '180x180'
|
||||
File.delete(path) rescue nil
|
||||
send_file image.path, type: 'image/png', disposition: 'inline'
|
||||
else
|
||||
render json: { type: 'internal_server_error',
|
||||
message: 'サムネールを生成できませんでした．',
|
||||
errors: { },
|
||||
base_errors: ['サムネールを生成できませんでした．'] },
|
||||
status: :internal_server_error
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@@ -245,7 +245,10 @@ class TagsController < ApplicationController
|
||||
return render_unprocessable_entity('カテゴリは必須です．', field: :category) if category.blank?
|
||||
return render_unprocessable_entity '廃止状態は必須です．', field: :deprecated unless params.key?(:deprecated)
|
||||
|
||||
return unless validate_tag_rename(tag, name)
|
||||
if (name != tag.name &&
|
||||
tag.in?([Tag.tagme, Tag.bot, Tag.no_deerjikist, Tag.video, Tag.niconico]))
|
||||
return render_unprocessable_entity 'システム・タグの名称は変更できません．', field: :name
|
||||
end
|
||||
|
||||
alias_names = params[:aliases].to_s.split.uniq
|
||||
parent_names = params[:parent_tags].to_s.split.uniq
|
||||
@@ -271,7 +274,7 @@ class TagsController < ApplicationController
|
||||
else
|
||||
tag.update!(category:, deprecated_at: deprecated ? Time.current : nil)
|
||||
end
|
||||
rename_tag_name!(tag, name) if name_changed
|
||||
tag.tag_name.update!(name:)
|
||||
|
||||
alias_names << old_name if name_changed
|
||||
alias_names.delete(name)
|
||||
@@ -307,8 +310,6 @@ class TagsController < ApplicationController
|
||||
return render_unprocessable_entity 'ニコタグは廃止できません．', field: :deprecated
|
||||
end
|
||||
|
||||
return unless validate_tag_rename(tag, name)
|
||||
|
||||
if tag.nico? || (category.present? && category == 'nico')
|
||||
return render_unprocessable_entity 'ニコタグは変更できません．', field: :category
|
||||
end
|
||||
@@ -320,7 +321,7 @@ class TagsController < ApplicationController
|
||||
name_changed = name.present? && name != old_name
|
||||
wiki_page = tag.tag_name.wiki_page if name_changed
|
||||
|
||||
rename_tag_name!(tag, name) if name_changed
|
||||
tag.tag_name.update!(name:) if name.present?
|
||||
tag.update!(category:) if category.present?
|
||||
if deprecated_given && tag.deprecated? != deprecated
|
||||
tag.update!(deprecated_at: deprecated ? Time.current : nil)
|
||||
@@ -534,67 +535,6 @@ class TagsController < ApplicationController
|
||||
created_by_user:)
|
||||
end
|
||||
|
||||
def validate_tag_rename tag, name
|
||||
return true if name.blank? || name == tag.name
|
||||
|
||||
if tag.in?([Tag.tagme, Tag.bot, Tag.no_deerjikist, Tag.video, Tag.niconico])
|
||||
render_unprocessable_entity 'システム・タグの名称は変更できません．', field: :name
|
||||
return false
|
||||
end
|
||||
|
||||
target_tag_name = TagName.with_discarded.find_by(name:)
|
||||
return true if target_tag_name.nil?
|
||||
return true if target_tag_name.canonical_id?
|
||||
|
||||
render_unprocessable_entity 'その名前は既に使はれてゐます．', field: :name
|
||||
false
|
||||
end
|
||||
|
||||
def rename_tag_name! tag, name
|
||||
return if name == tag.name
|
||||
|
||||
current_tag_name = tag.tag_name
|
||||
target_tag_name = TagName.with_discarded.find_by(name:)
|
||||
|
||||
if target_tag_name.nil?
|
||||
current_tag_name.update!(name:)
|
||||
return
|
||||
end
|
||||
|
||||
promote_tag_alias!(
|
||||
tag,
|
||||
current_tag_name:,
|
||||
promoted_tag_name: target_tag_name)
|
||||
end
|
||||
|
||||
def promote_tag_alias! tag, current_tag_name:, promoted_tag_name:
|
||||
old_owner_tag = promoted_tag_name.canonical&.tag
|
||||
|
||||
if old_owner_tag && old_owner_tag != tag
|
||||
TagVersioning.ensure_snapshot!(old_owner_tag, created_by_user: current_user)
|
||||
end
|
||||
|
||||
promoted_tag_name.undiscard! if promoted_tag_name.discarded?
|
||||
promoted_tag_name.update!(canonical: nil)
|
||||
|
||||
TagName.with_discarded
|
||||
.where(canonical_id: current_tag_name.id)
|
||||
.where.not(id: promoted_tag_name.id)
|
||||
.find_each do |alias_tag_name|
|
||||
alias_tag_name.update!(canonical: promoted_tag_name)
|
||||
end
|
||||
|
||||
current_tag_name.wiki_page&.update!(tag_name: promoted_tag_name)
|
||||
tag.update!(tag_name: promoted_tag_name)
|
||||
current_tag_name.association(:wiki_page).reset
|
||||
current_tag_name.association(:tag).reset
|
||||
current_tag_name.reload.update!(canonical: promoted_tag_name)
|
||||
|
||||
return unless old_owner_tag && old_owner_tag != tag
|
||||
|
||||
record_tag_version!(old_owner_tag.reload, event_type: :update, created_by_user: current_user)
|
||||
end
|
||||
|
||||
def update_aliases! tag, alias_names
|
||||
alias_names = alias_names.uniq
|
||||
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
class UserSettingsController < ApplicationController
|
||||
wrap_parameters false
|
||||
|
||||
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 = editable_raw_attributes
|
||||
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)
|
||||
|
||||
if setting.save
|
||||
render json: setting.serializable_hash, status: :ok
|
||||
else
|
||||
render_validation_error setting
|
||||
end
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def current_setting
|
||||
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 editable_raw_attributes
|
||||
request.request_parameters.slice(*Setting::EDITABLE_ATTRIBUTES)
|
||||
end
|
||||
|
||||
def validate_raw_attributes raw_attributes
|
||||
raw_attributes.each_with_object({ }) do |(key, value), errors|
|
||||
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
|
||||
@@ -1,38 +0,0 @@
|
||||
class UserThemeSlotsController < ApplicationController
|
||||
wrap_parameters false
|
||||
|
||||
def index
|
||||
return head :unauthorized unless current_user
|
||||
|
||||
render json: current_user
|
||||
.theme_slots
|
||||
.order(:base_theme, :slot_no)
|
||||
.map { |slot| slot.serializable_hash }
|
||||
end
|
||||
|
||||
def update
|
||||
return head :unauthorized unless current_user
|
||||
|
||||
base_theme = params[:base_theme].to_s
|
||||
slot_no = params[:slot_no].to_i
|
||||
tokens = params[:tokens]
|
||||
|
||||
unless UserThemeSlot::BASE_THEMES.include?(base_theme)
|
||||
return render_validation_error fields: { base_theme: ['値が不正です．'] }
|
||||
end
|
||||
unless UserThemeSlot::SLOT_NOS.include?(slot_no)
|
||||
return render_validation_error fields: { slot_no: ['値が不正です．'] }
|
||||
end
|
||||
unless tokens.is_a?(ActionController::Parameters) || tokens.is_a?(Hash)
|
||||
return render_validation_error fields: { tokens: ['JSON object で指定してください．'] }
|
||||
end
|
||||
|
||||
slot = UserThemeSlot.find_or_initialize_by(user: current_user,
|
||||
base_theme:,
|
||||
slot_no:)
|
||||
slot.tokens = tokens.is_a?(ActionController::Parameters) ? tokens.to_unsafe_h : tokens
|
||||
slot.save!
|
||||
|
||||
render json: slot.serializable_hash, status: :ok
|
||||
end
|
||||
end
|
||||
+11
-38
@@ -60,7 +60,6 @@ class Post < ApplicationRecord
|
||||
before_validation :normalise_url
|
||||
|
||||
validates :url, presence: true, uniqueness: true
|
||||
validates :video_ms, numericality: { only_integer: true, greater_than: 0 }, allow_nil: true
|
||||
|
||||
validate :validate_original_created_range
|
||||
validate :url_must_be_http_url
|
||||
@@ -84,42 +83,7 @@ class Post < ApplicationRecord
|
||||
super(options).merge(thumbnail: nil)
|
||||
end
|
||||
|
||||
def snapshot_tag_names
|
||||
post_tags
|
||||
.kept
|
||||
.joins(tag: :tag_name)
|
||||
.includes(:sections, tag: :tag_name)
|
||||
.order('tag_names.name')
|
||||
.map do |post_tag|
|
||||
name = post_tag.tag.tag_name.name
|
||||
sections = post_tag.sections.sort_by(&:begin_ms)
|
||||
|
||||
next name if sections.empty?
|
||||
|
||||
"#{ name }#{ sections.map { Post.section_literal(_1) }.join }"
|
||||
end
|
||||
end
|
||||
|
||||
def self.section_literal section
|
||||
"[#{ Post.ms_to_time(section.begin_ms) }-#{ section.end_ms ? Post.ms_to_time(section.end_ms) : '' }]"
|
||||
end
|
||||
|
||||
def self.ms_to_time ms
|
||||
total_s = ms / 1_000
|
||||
s = total_s % 60
|
||||
min = (total_s / 60) % 60
|
||||
h = total_s / 3_600
|
||||
remainder_ms = ms % 1_000
|
||||
|
||||
base =
|
||||
if h.positive?
|
||||
'%d:%02d:%02d' % [h, min, s]
|
||||
else
|
||||
'%d:%02d' % [min, s]
|
||||
end
|
||||
|
||||
remainder_ms.positive? ? "#{ base }.#{ remainder_ms.to_s.rjust(3, '0') }" : base
|
||||
end
|
||||
def snapshot_tag_names = tags.joins(:tag_name).order('tag_names.name').pluck('tag_names.name')
|
||||
|
||||
def snapshot_parent_post_ids = parents.order(:id).pluck(:id)
|
||||
|
||||
@@ -173,6 +137,15 @@ class Post < ApplicationRecord
|
||||
def normalise_url
|
||||
return if url.blank?
|
||||
|
||||
self.url = PostUrlNormaliser.normalise(url) || url.strip
|
||||
self.url = url.strip
|
||||
|
||||
u = URI.parse(url)
|
||||
return unless u in URI::HTTP
|
||||
|
||||
u.host = u.host.downcase if u.host
|
||||
u.path = u.path.sub(/\/\Z/, '') if u.path.present?
|
||||
self.url = u.to_s
|
||||
rescue URI::InvalidURIError
|
||||
;
|
||||
end
|
||||
end
|
||||
|
||||
@@ -10,12 +10,6 @@ class PostTag < ApplicationRecord
|
||||
belongs_to :created_user, class_name: 'User', optional: true
|
||||
belongs_to :deleted_user, class_name: 'User', optional: true
|
||||
|
||||
has_many :sections, -> { order(:begin_ms) }, class_name: 'PostTagSection',
|
||||
foreign_key: [:post_id, :tag_id],
|
||||
primary_key: [:post_id, :tag_id],
|
||||
dependent: :delete_all,
|
||||
inverse_of: :post_tag
|
||||
|
||||
validates :post_id, presence: true
|
||||
validates :tag_id, presence: true
|
||||
validates :post_id, uniqueness: {
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
class PostTagSection < ApplicationRecord
|
||||
self.primary_key = :post_id, :tag_id, :begin_ms
|
||||
|
||||
belongs_to :post
|
||||
belongs_to :tag
|
||||
|
||||
belongs_to :post_tag, -> { kept }, foreign_key: [:post_id, :tag_id],
|
||||
primary_key: [:post_id, :tag_id],
|
||||
inverse_of: :sections,
|
||||
optional: true
|
||||
|
||||
validates :post_id, presence: true
|
||||
validates :tag_id, presence: true
|
||||
|
||||
validates :begin_ms, presence: true,
|
||||
numericality: { only_integer: true, greater_than_or_equal_to: 0 }
|
||||
|
||||
validates :end_ms, numericality: { only_integer: true, greater_than: :begin_ms },
|
||||
allow_nil: true
|
||||
end
|
||||
@@ -5,7 +5,6 @@ class PostVersion < ApplicationRecord
|
||||
belongs_to :parent, class_name: 'Post', optional: true
|
||||
|
||||
validates :url, presence: true
|
||||
validates :video_ms, numericality: { only_integer: true, greater_than: 0 }, allow_nil: true
|
||||
|
||||
validate :validate_original_created_range
|
||||
|
||||
|
||||
@@ -1,52 +1,7 @@
|
||||
class Setting < ApplicationRecord
|
||||
THEMES = ['system', 'light', 'dark'].freeze
|
||||
|
||||
# These remain in the typed settings schema to preserve existing backend
|
||||
# work. The common `/users/settings` page currently surfaces only `theme`.
|
||||
AUTO_FETCH_MODES = ['auto', 'manual', 'off'].freeze
|
||||
WIKI_EDITOR_MODES = ['split', 'write', 'preview'].freeze
|
||||
|
||||
STRING_ATTRIBUTES = [
|
||||
'theme',
|
||||
'auto_fetch_title',
|
||||
'auto_fetch_thumbnail',
|
||||
'wiki_editor_mode',
|
||||
].freeze
|
||||
INTEGER_ATTRIBUTES = [].freeze
|
||||
BOOLEAN_ATTRIBUTES = [].freeze
|
||||
EDITABLE_ATTRIBUTES =
|
||||
(STRING_ATTRIBUTES + INTEGER_ATTRIBUTES + BOOLEAN_ATTRIBUTES).freeze
|
||||
TYPE_BY_ATTRIBUTE = {
|
||||
'theme' => :string,
|
||||
'auto_fetch_title' => :string,
|
||||
'auto_fetch_thumbnail' => :string,
|
||||
'wiki_editor_mode' => :string,
|
||||
}.freeze
|
||||
|
||||
belongs_to :user
|
||||
|
||||
validates :user_id, presence: true
|
||||
validates :user_id, uniqueness: true
|
||||
|
||||
validates :theme, inclusion: { in: THEMES }
|
||||
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',
|
||||
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
|
||||
validates :key, presence: true, length: { maximum: 255 }
|
||||
validates :value, presence: true
|
||||
end
|
||||
|
||||
+3
-112
@@ -17,16 +17,6 @@ class Tag < ApplicationRecord
|
||||
end
|
||||
end
|
||||
|
||||
class SectionLiteralParseError < ArgumentError
|
||||
attr_reader :tag_name, :literal
|
||||
|
||||
def initialize tag_name, literal
|
||||
@tag_name = tag_name
|
||||
@literal = literal
|
||||
super("invalid section literal for tag #{ tag_name }: #{ literal }")
|
||||
end
|
||||
end
|
||||
|
||||
has_many :post_tags, inverse_of: :tag
|
||||
has_many :active_post_tags, -> { kept }, class_name: 'PostTag', inverse_of: :tag
|
||||
has_many :post_tags_with_discarded, -> { with_discarded }, class_name: 'PostTag'
|
||||
@@ -115,60 +105,26 @@ class Tag < ApplicationRecord
|
||||
def self.normalise_tags! tag_names, with_tagme: true,
|
||||
with_no_deerjikist: true,
|
||||
deny_nico: true,
|
||||
deny_deprecated: false,
|
||||
with_sections: false
|
||||
deny_deprecated: false
|
||||
if deny_nico && tag_names.any? { |n| n.downcase.start_with?('nico:') }
|
||||
raise NicoTagNormalisationError
|
||||
end
|
||||
|
||||
sections = { }
|
||||
tags = tag_names.map do |name|
|
||||
raw_name = name
|
||||
pf, cat = CATEGORY_PREFIXES.find { |p, _| name.downcase.start_with?(p) } || ['', nil]
|
||||
|
||||
name = name.sub(/\A#{ pf }/i, '')
|
||||
|
||||
sections_by_tag = []
|
||||
while (match = name.match(/\A(\S*?)\[([^\[\]\s]*)-([^\[\]\s]*)\](\S*)\z/))
|
||||
name = "#{ match[1] }#{ match[4] }"
|
||||
next if match[2].empty? && match[3].empty?
|
||||
|
||||
sections_by_tag << normalise_section_range!(
|
||||
begin_raw: match[2],
|
||||
end_raw: match[3],
|
||||
tag_name: name)
|
||||
end
|
||||
|
||||
if name.include?('[') || name.include?(']')
|
||||
raise SectionLiteralParseError.new(raw_name, raw_name)
|
||||
end
|
||||
|
||||
name = TagName.canonicalise(name).first
|
||||
|
||||
name = TagName.canonicalise(name.sub(/\A#{ pf }/i, '')).first
|
||||
find_or_create_by_tag_name!(name, category: (cat || :general)).tap do |tag|
|
||||
if deny_deprecated && tag.deprecated?
|
||||
raise DeprecatedTagNormalisationError, [tag.name]
|
||||
end
|
||||
|
||||
tag.update!(category: cat) if cat && tag.category != cat
|
||||
next if sections_by_tag.empty?
|
||||
|
||||
sections[tag.id] ||= []
|
||||
sections[tag.id].concat(sections_by_tag)
|
||||
sections[tag.id] = merge_section_ranges(sections[tag.id])
|
||||
sections.delete(tag.id) if sections[tag.id] == [[0, nil]]
|
||||
end
|
||||
end
|
||||
|
||||
tags << Tag.tagme if with_tagme && tags.size < 10 && tags.none?(Tag.tagme)
|
||||
tags << Tag.no_deerjikist if with_no_deerjikist && tags.all? { |t| !(t.deerjikist?) }
|
||||
tags.uniq!(&:id)
|
||||
|
||||
if with_sections
|
||||
{ tags:, sections: }
|
||||
else
|
||||
tags
|
||||
end
|
||||
tags.uniq(&:id)
|
||||
end
|
||||
|
||||
def self.expand_parent_tags tags
|
||||
@@ -194,45 +150,6 @@ class Tag < ApplicationRecord
|
||||
(result + tags).uniq { |t| t.id }
|
||||
end
|
||||
|
||||
def self.normalise_section_range! begin_raw:, end_raw:, tag_name:
|
||||
begin_ms = begin_raw.empty? ? 0 : time_to_ms!(begin_raw, tag_name:)
|
||||
end_ms = end_raw.empty? ? nil : time_to_ms!(end_raw, tag_name:)
|
||||
|
||||
if end_ms
|
||||
begin_ms, end_ms = end_ms, begin_ms if begin_ms > end_ms
|
||||
end_ms = begin_ms + 1 if begin_ms == end_ms
|
||||
end
|
||||
|
||||
[begin_ms, end_ms]
|
||||
end
|
||||
|
||||
def self.merge_section_ranges ranges
|
||||
sorted_ranges = ranges.sort_by { |begin_ms, end_ms| [begin_ms, end_ms || Float::INFINITY] }
|
||||
merged = []
|
||||
|
||||
sorted_ranges.each do |begin_ms, end_ms|
|
||||
if merged.empty?
|
||||
merged << [begin_ms, end_ms]
|
||||
next
|
||||
end
|
||||
|
||||
last_begin_ms, last_end_ms = merged[-1]
|
||||
if last_end_ms.nil? || begin_ms <= last_end_ms
|
||||
merged[-1] = [last_begin_ms, merge_section_end(last_end_ms, end_ms)]
|
||||
else
|
||||
merged << [begin_ms, end_ms]
|
||||
end
|
||||
end
|
||||
|
||||
merged
|
||||
end
|
||||
|
||||
def self.merge_section_end left_end_ms, right_end_ms
|
||||
return nil if left_end_ms.nil? || right_end_ms.nil?
|
||||
|
||||
[left_end_ms, right_end_ms].max
|
||||
end
|
||||
|
||||
def self.find_or_create_by_tag_name! name, category:
|
||||
tn = TagName.find_undiscard_or_create_by!(name: name.to_s.strip)
|
||||
tn = tn.canonical if tn.canonical_id?
|
||||
@@ -329,32 +246,6 @@ class Tag < ApplicationRecord
|
||||
end
|
||||
end
|
||||
|
||||
def self.time_to_ms! str, tag_name:
|
||||
match =
|
||||
case str
|
||||
when /\A(?<seconds>\d+)(?:\.(?<ms>\d{1,3}))?\z/
|
||||
{ hours: nil, minutes: nil, seconds: Regexp.last_match[:seconds],
|
||||
ms: Regexp.last_match[:ms] }
|
||||
when /\A(?<minutes>\d+):(?<seconds>[0-5]?\d)(?:\.(?<ms>\d{1,3}))?\z/
|
||||
{ hours: nil, minutes: Regexp.last_match[:minutes],
|
||||
seconds: Regexp.last_match[:seconds],
|
||||
ms: Regexp.last_match[:ms] }
|
||||
when /\A(?<hours>\d+):(?<minutes>[0-5]?\d):(?<seconds>[0-5]?\d)(?:\.(?<ms>\d{1,3}))?\z/
|
||||
{ hours: Regexp.last_match[:hours],
|
||||
minutes: Regexp.last_match[:minutes],
|
||||
seconds: Regexp.last_match[:seconds],
|
||||
ms: Regexp.last_match[:ms] }
|
||||
end
|
||||
|
||||
raise SectionLiteralParseError.new(tag_name, str) unless match
|
||||
|
||||
total_s = match[:seconds].to_i
|
||||
total_s += match[:minutes].to_i * 60 if match[:minutes]
|
||||
total_s += match[:hours].to_i * 3_600 if match[:hours]
|
||||
|
||||
total_s * 1_000 + match[:ms].to_s.ljust(3, '0')[0, 3].to_i
|
||||
end
|
||||
|
||||
def nico_tags_cannot_be_deprecated
|
||||
if nico? && deprecated_at.present?
|
||||
errors.add :deprecated_at, 'ニコタグは廃止できません．'
|
||||
|
||||
@@ -6,7 +6,6 @@ class TagImplication < ApplicationRecord
|
||||
validates :parent_tag_id, presence: true
|
||||
|
||||
validate :parent_tag_mustnt_be_itself
|
||||
validate :parent_tag_mustnt_create_cycle
|
||||
|
||||
private
|
||||
|
||||
@@ -15,27 +14,4 @@ class TagImplication < ApplicationRecord
|
||||
errors.add :parent_tag_id, '親タグは子タグと同一であってはなりません．'
|
||||
end
|
||||
end
|
||||
|
||||
def parent_tag_mustnt_create_cycle
|
||||
return if tag_id.blank? || parent_tag_id.blank?
|
||||
return if errors[:parent_tag_id].present?
|
||||
|
||||
seen = { }
|
||||
stack = [parent_tag_id]
|
||||
|
||||
until stack.empty?
|
||||
current_id = stack.pop
|
||||
next if seen[current_id]
|
||||
|
||||
seen[current_id] = true
|
||||
|
||||
if current_id == tag_id
|
||||
errors.add :parent_tag_id, '親タグに子孫タグを指定すると循環します．'
|
||||
errors.add :base, 'タグの親子関係が循環します．'
|
||||
return
|
||||
end
|
||||
|
||||
stack.concat(TagImplication.where(tag_id: current_id).pluck(:parent_tag_id))
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@@ -7,8 +7,7 @@ class User < ApplicationRecord
|
||||
|
||||
has_many :created_posts,
|
||||
class_name: 'Post', foreign_key: :uploaded_user_id, dependent: :nullify
|
||||
has_one :setting, dependent: :destroy
|
||||
has_many :theme_slots, class_name: 'UserThemeSlot', dependent: :destroy
|
||||
has_many :settings
|
||||
has_many :user_ips, dependent: :destroy
|
||||
has_many :ip_addresses, through: :user_ips
|
||||
has_many :user_post_views, dependent: :destroy
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
class UserThemeSlot < ApplicationRecord
|
||||
BASE_THEMES = ['light', 'dark'].freeze
|
||||
SLOT_NOS = [1, 2, 3].freeze
|
||||
|
||||
belongs_to :user
|
||||
|
||||
validates :user_id, presence: true
|
||||
validates :base_theme, presence: true, inclusion: { in: BASE_THEMES }
|
||||
validates :slot_no, presence: true, inclusion: { in: SLOT_NOS }
|
||||
validates :tokens, presence: true
|
||||
validates :user_id, uniqueness: { scope: [:base_theme, :slot_no] }
|
||||
|
||||
validate :tokens_must_be_object
|
||||
|
||||
def serializable_hash(options = nil)
|
||||
hash = { only: [:base_theme, :slot_no, :tokens, :created_at, :updated_at] }
|
||||
super(hash.merge(options || {}))
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def tokens_must_be_object
|
||||
return if tokens.is_a?(Hash)
|
||||
|
||||
errors.add(:tokens, 'は JSON object で指定してください．')
|
||||
end
|
||||
end
|
||||
@@ -8,7 +8,6 @@ module PostRepr
|
||||
:url,
|
||||
:title,
|
||||
:thumbnail_base,
|
||||
:video_ms,
|
||||
:original_created_from,
|
||||
:original_created_before,
|
||||
:created_at,
|
||||
@@ -19,7 +18,7 @@ module PostRepr
|
||||
|
||||
def base post, current_user = nil
|
||||
json = common(post)
|
||||
json['tags'] = tag_json(post)
|
||||
json['tags'] = tag_json(post.tags)
|
||||
json['uploaded_user'] = post.uploaded_user && UserRepr.base(post.uploaded_user)
|
||||
json['viewed'] = current_user ? current_user.viewed?(post) : false
|
||||
json
|
||||
@@ -53,16 +52,8 @@ module PostRepr
|
||||
.merge('thumbnail' => thumbnail_url(post))
|
||||
end
|
||||
|
||||
def tag_json post
|
||||
post
|
||||
.active_post_tags
|
||||
.reject { _1.tag.deprecated? }
|
||||
.sort_by { _1.tag.name }
|
||||
.map { |post_tag|
|
||||
TagRepr.inline(post_tag.tag).merge(
|
||||
'children' => [],
|
||||
'sections' => post_tag.sections.as_json(only: [:begin_ms, :end_ms]))
|
||||
}
|
||||
def tag_json tags
|
||||
tags.reject(&:deprecated?).map { |tag| TagRepr.inline(tag) }
|
||||
end
|
||||
|
||||
def thumbnail_url post
|
||||
|
||||
@@ -1,112 +0,0 @@
|
||||
class PostCreator
|
||||
class VideoMsParseError < ArgumentError; end
|
||||
|
||||
def initialize actor:, attributes:
|
||||
@actor = actor
|
||||
@attributes = attributes.symbolize_keys
|
||||
end
|
||||
|
||||
def create!
|
||||
post = Post.new(title: @attributes[:title].presence,
|
||||
url: @attributes[:url],
|
||||
thumbnail_base: @attributes[:thumbnail_base].presence,
|
||||
uploaded_user: @actor,
|
||||
original_created_from: @attributes[:original_created_from].presence,
|
||||
original_created_before: @attributes[:original_created_before].presence)
|
||||
thumbnail = @attributes[:thumbnail]
|
||||
post.thumbnail.attach(Post.resized_thumbnail_attachment(thumbnail)) if thumbnail.present?
|
||||
|
||||
ApplicationRecord.transaction do
|
||||
post.save!
|
||||
Tag.normalise_tags!(tag_names, deny_deprecated: true, with_sections: true) =>
|
||||
{ tags:, sections: }
|
||||
TagVersioning.record_tag_snapshots!(tags, created_by_user: @actor)
|
||||
tags = Tag.expand_parent_tags(tags).reject(&:deprecated?)
|
||||
post.video_ms = normalise_video_ms(tags)
|
||||
validate_video_sections!(post.video_ms, sections)
|
||||
post.save!
|
||||
sync_post_tags!(post, tags, sections)
|
||||
sync_parent_posts!(post, parent_post_ids)
|
||||
PostVersionRecorder.record!(post:, event_type: :create, created_by_user: @actor)
|
||||
end
|
||||
post
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def tag_names = @attributes[:tags].to_s.split
|
||||
|
||||
def parent_post_ids
|
||||
Array(@attributes[:parent_post_ids]).flat_map { _1.to_s.split }.map { |token|
|
||||
id = Integer(token, exception: false)
|
||||
raise ArgumentError, "親投稿 Id. が不正です: #{ token }" if id.nil? || id <= 0
|
||||
|
||||
id
|
||||
}.uniq
|
||||
end
|
||||
|
||||
def normalise_video_ms tags
|
||||
return nil unless tags.any? { _1.id == Tag.video.id }
|
||||
|
||||
video_ms = @attributes[:video_ms]
|
||||
if video_ms.present?
|
||||
value = Integer(video_ms, exception: false)
|
||||
raise VideoMsParseError unless value&.positive?
|
||||
|
||||
return value
|
||||
end
|
||||
duration = @attributes[:duration]
|
||||
return nil if duration.blank?
|
||||
|
||||
return duration.to_i if duration.is_a?(Numeric) && duration.to_i.positive?
|
||||
|
||||
value = Tag.time_to_ms!(duration.to_s, tag_name: '動画時間')
|
||||
raise VideoMsParseError unless value.positive?
|
||||
|
||||
value
|
||||
rescue Tag::SectionLiteralParseError
|
||||
raise VideoMsParseError
|
||||
end
|
||||
|
||||
def validate_video_sections! video_ms, sections
|
||||
return unless video_ms
|
||||
|
||||
sections.each_value do |ranges|
|
||||
ranges.each do |begin_ms, end_ms|
|
||||
next if begin_ms < video_ms && (!end_ms || end_ms <= video_ms)
|
||||
|
||||
post = Post.new
|
||||
post.errors.add :video_ms, 'タグ区間が動画時間の範囲外です．'
|
||||
raise ActiveRecord::RecordInvalid, post
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
def sync_post_tags! post, desired_tags, sections
|
||||
desired_ids = desired_tags.map(&:id).to_set
|
||||
current_ids = post.tags.pluck(:id).to_set
|
||||
Tag.where(id: desired_ids - current_ids).find_each do |tag|
|
||||
PostTag.create_or_find_by!(post:, tag:, created_user: @actor)
|
||||
end
|
||||
PostTagSection.where(post_id: post.id).destroy_all
|
||||
sections.each do |tag_id, ranges|
|
||||
ranges.each { |begin_ms, end_ms| PostTagSection.create!(post_id: post.id, tag_id:, begin_ms:, end_ms:) }
|
||||
end
|
||||
PostTag.where(post_id: post.id, tag_id: (current_ids - desired_ids).to_a).kept.find_each do |post_tag|
|
||||
post_tag.discard_by!(@actor)
|
||||
end
|
||||
end
|
||||
|
||||
def sync_parent_posts! post, ids
|
||||
if ids.include?(post.id)
|
||||
post.errors.add :parent_post_ids, '自分自身を親投稿にはできません．'
|
||||
raise ActiveRecord::RecordInvalid, post
|
||||
end
|
||||
missing = ids - Post.where(id: ids).pluck(:id)
|
||||
if missing.present?
|
||||
post.errors.add :parent_post_ids, "存在しない親投稿 Id. があります: #{ missing.join(' ') }"
|
||||
raise ActiveRecord::RecordInvalid, post
|
||||
end
|
||||
ids.each { |parent_post_id| PostImplication.create_or_find_by!(post:, parent_post_id:) }
|
||||
end
|
||||
end
|
||||
@@ -1,61 +0,0 @@
|
||||
class PostImportGoogleSheetsFetcher
|
||||
HOST = 'docs.google.com'.freeze
|
||||
PUBLICATION_ID = /\A[A-Za-z0-9_-]+\z/
|
||||
GID = /\A\d+\z/
|
||||
RATE_LIMIT = 10
|
||||
RATE_WINDOW = 1.minute
|
||||
|
||||
def self.fetch! raw_url, rate_key:
|
||||
new(raw_url, rate_key:).fetch!
|
||||
end
|
||||
|
||||
def initialize raw_url, rate_key:
|
||||
@raw_url = raw_url.to_s
|
||||
@rate_key = rate_key.to_s
|
||||
end
|
||||
|
||||
def fetch!
|
||||
publication_id, gid = parse!
|
||||
throttle!
|
||||
csv_url = "https://#{ HOST }/spreadsheets/d/e/#{ publication_id }/pub?gid=#{ gid }&single=true&output=csv"
|
||||
response = Preview::HttpFetcher.fetch(csv_url,
|
||||
max_bytes: PostImportSourceParser::MAX_BYTES,
|
||||
allowed_hosts: [HOST])
|
||||
raise ArgumentError, 'スプレッドシートを CSV として取得できませんでした．' unless csv?(response)
|
||||
|
||||
response.body
|
||||
rescue Preview::UrlSafety::UnsafeUrl, Preview::HttpFetcher::FetchFailed,
|
||||
Preview::HttpFetcher::ResponseTooLarge => e
|
||||
Rails.logger.info("post_import_google_sheets_fetch_failure #{ { error: e.class.name, message: e.message }.to_json }")
|
||||
raise ArgumentError, 'スプレッドシートを取得できませんでした．ウェブ公開 URL を確認するか、ファイル保存又はコピー貼付けを使用してください．'
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def parse!
|
||||
uri = URI.parse(@raw_url)
|
||||
unless uri.scheme == 'https' && uri.host&.downcase == HOST && uri.query.blank?
|
||||
raise ArgumentError, '公開 Google スプレッドシート URL を指定してください．'
|
||||
end
|
||||
match = uri.path.match(%r{\A/spreadsheets/d/e/([^/]+)/pubhtml\z})
|
||||
gid = URI.decode_www_form(uri.fragment.to_s).to_h['gid']
|
||||
unless match && PUBLICATION_ID.match?(match[1]) && GID.match?(gid.to_s)
|
||||
raise ArgumentError, '公開 Google スプレッドシート URL の publication_id 又は gid が不正です．'
|
||||
end
|
||||
|
||||
[match[1], gid]
|
||||
rescue URI::InvalidURIError
|
||||
raise ArgumentError, '公開 Google スプレッドシート URL が不正です．'
|
||||
end
|
||||
|
||||
def throttle!
|
||||
key = "post-import-google-sheets:#{ @rate_key }"
|
||||
count = Rails.cache.increment(key, 1, expires_in: RATE_WINDOW, initial: 0)
|
||||
raise ArgumentError, 'スプレッドシート取得の回数が多すぎます．しばらくしてから再試行してください．' if count > RATE_LIMIT
|
||||
end
|
||||
|
||||
def csv? response
|
||||
type = response.content_type.to_s.downcase
|
||||
type.include?('text/csv') || type.include?('application/csv')
|
||||
end
|
||||
end
|
||||
@@ -1,196 +0,0 @@
|
||||
class PostImportPreviewer
|
||||
FIELDS = %w[title thumbnail_base original_created_from original_created_before duration tags parent_post_ids].freeze
|
||||
|
||||
def initialize parsed:, url_column:, mappings: { }, existing: 'skip'
|
||||
@parsed = parsed
|
||||
@url_column = url_column.to_i
|
||||
@mappings = mappings.stringify_keys
|
||||
@existing = existing == 'error' ? 'error' : 'skip'
|
||||
end
|
||||
|
||||
def preview
|
||||
preview_rows(rows: @parsed[:rows])
|
||||
end
|
||||
|
||||
def preview_rows rows:, fetch_metadata: true, metadata_cache: { }
|
||||
urls = { }
|
||||
rows.map do |row|
|
||||
row = row.symbolize_keys
|
||||
values = row[:values] || []
|
||||
attributes = row[:attributes]&.stringify_keys || FIELDS.to_h { |field| [field, mapped_value(field, values)] }
|
||||
provenance = row[:provenance]&.stringify_keys || mapped_provenance(attributes)
|
||||
tag_sources = row[:tag_sources]&.stringify_keys || initial_tag_sources(attributes, provenance)
|
||||
tag_sources['manual'] = attributes['tags'].to_s if provenance['tags'] == 'manual'
|
||||
url = row[:url].presence || values[@url_column].to_s.strip
|
||||
url_for_metadata = normalised_url(url) || url
|
||||
existing_post = normalised_url(url).present? && Post.exists?(url: normalised_url(url))
|
||||
if existing_post && @existing == 'skip'
|
||||
next { source_row: row[:source_row], url: normalised_url(url) || url, attributes:,
|
||||
provenance:, tag_sources:, metadata_url: url_for_metadata,
|
||||
fetch_warnings: [], validation_warnings: ['既存投稿のためスキップします．'],
|
||||
warnings: ['既存投稿のためスキップします．'], validation_errors: { },
|
||||
status: 'warning', existing: true }
|
||||
end
|
||||
url_changed = row[:metadata_url].present? && row[:metadata_url] != url_for_metadata
|
||||
clear_automatic_values!(attributes, provenance, tag_sources) if url_changed
|
||||
provenance['url'] ||= row[:url].present? ? 'manual' : 'mapped'
|
||||
attributes['url'] = url
|
||||
fetch_warnings = Array(row[:fetch_warnings]).dup
|
||||
should_fetch =
|
||||
case fetch_metadata
|
||||
when true then true
|
||||
when Integer then fetch_metadata == row[:source_row].to_i
|
||||
when false, nil then false
|
||||
else raise ArgumentError, 'メタデータ取得対象が不正です．'
|
||||
end
|
||||
metadata, fetch_warnings = metadata_for(url_for_metadata, should_fetch, metadata_cache, fetch_warnings)
|
||||
metadata.each do |field, value|
|
||||
if field == 'tags' && provenance[field] != 'manual'
|
||||
tag_sources['automatic'] = value.to_s
|
||||
attributes[field] = merged_tags(tag_sources)
|
||||
next
|
||||
end
|
||||
next unless provenance[field] == 'automatic' || attributes[field].blank?
|
||||
|
||||
attributes[field] = value
|
||||
provenance[field] = 'automatic'
|
||||
end
|
||||
normal_url = normalised_url(url)
|
||||
errors = { }
|
||||
errors[:url] = ['URL が不正です．'] if normal_url.blank?
|
||||
validation_warnings = []
|
||||
errors[:url] = ['URL が重複しています．'] if normal_url.present? && urls.key?(normal_url)
|
||||
urls[normal_url] = true if normal_url.present?
|
||||
if normal_url.present? && existing_post
|
||||
@existing == 'error' ? errors[:url] = ['既存投稿です．'] : validation_warnings << '既存投稿のためスキップします．'
|
||||
end
|
||||
validate_basic_data(attributes, errors)
|
||||
validate_preview_tags(merged_tags(tag_sources, provenance['tags']), errors, validation_warnings)
|
||||
validate_parents(attributes['parent_post_ids'], errors)
|
||||
attributes.delete('url')
|
||||
attributes['tags'] = merged_tags(tag_sources, provenance['tags'])
|
||||
{ source_row: row[:source_row], url: normal_url || url, attributes:, provenance:, tag_sources:,
|
||||
metadata_url: url_for_metadata,
|
||||
fetch_warnings:, validation_warnings:, warnings: fetch_warnings + validation_warnings,
|
||||
validation_errors: errors,
|
||||
status: errors.present? ? 'error' : ((fetch_warnings + validation_warnings).present? ? 'warning' : 'ready'),
|
||||
existing: normal_url.present? && Post.exists?(url: normal_url) }
|
||||
end
|
||||
end
|
||||
|
||||
def metadata_for url, fetch_metadata, cache, previous_warnings
|
||||
return [{ }, previous_warnings] unless fetch_metadata
|
||||
|
||||
cache[url] ||= fetch_metadata(url)
|
||||
end
|
||||
|
||||
def normalised_url value
|
||||
PostUrlNormaliser.normalise(value)
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def mapped_value field, values
|
||||
mapping = @mappings[field]
|
||||
return '' if mapping.blank?
|
||||
return mapping['value'].to_s if mapping['kind'] == 'fixed'
|
||||
|
||||
Array(mapping['columns']).filter_map { |index| values[index.to_i].to_s.presence }.join(field == 'tags' ? ' ' : '')
|
||||
end
|
||||
|
||||
def mapped_provenance attributes
|
||||
attributes.to_h.to_h { |field, value|
|
||||
mapping = @mappings[field.to_s]
|
||||
origin =
|
||||
if value.present? && mapping&.[]('kind') == 'fixed'
|
||||
'fixed'
|
||||
elsif value.present?
|
||||
'mapped'
|
||||
else
|
||||
'automatic'
|
||||
end
|
||||
[field.to_s, origin]
|
||||
}
|
||||
end
|
||||
|
||||
def initial_tag_sources attributes, provenance
|
||||
origin = provenance['tags'] == 'fixed' ? 'fixed' : 'mapped'
|
||||
{ 'automatic' => '', 'mapped' => origin == 'mapped' ? attributes['tags'].to_s : '',
|
||||
'fixed' => origin == 'fixed' ? attributes['tags'].to_s : '', 'manual' => '' }
|
||||
end
|
||||
|
||||
def merged_tags sources, origin = nil
|
||||
return sources['manual'].to_s if origin == 'manual'
|
||||
|
||||
%w[automatic mapped fixed manual].flat_map { sources[_1].to_s.split }.uniq.join(' ')
|
||||
end
|
||||
|
||||
def clear_automatic_values! attributes, provenance, tag_sources
|
||||
%w[title thumbnail_base original_created_from original_created_before duration].each do |field|
|
||||
attributes[field] = '' if provenance[field] == 'automatic'
|
||||
end
|
||||
tag_sources['automatic'] = ''
|
||||
end
|
||||
|
||||
def fetch_metadata url
|
||||
return [{ }, ['URL が空です．']] if url.blank?
|
||||
|
||||
data = PostMetadataFetcher.fetch(url).stringify_keys
|
||||
warnings = []
|
||||
warnings << 'タイトルを取得できませんでした．' if data['title'].blank?
|
||||
warnings << 'サムネールを取得できませんでした．' if data['thumbnail_base'].blank?
|
||||
[data.compact, warnings]
|
||||
rescue Preview::UrlSafety::UnsafeUrl, Preview::HttpFetcher::FetchFailed, Preview::HttpFetcher::ResponseTooLarge => e
|
||||
Rails.logger.info("post_import_metadata_fetch_failure #{ { error: e.class.name, message: e.message }.to_json }")
|
||||
[{ }, ['メタデータを取得できませんでした．']]
|
||||
end
|
||||
|
||||
def validate_preview_tags raw, errors, warnings
|
||||
names = raw.to_s.split
|
||||
return if names.empty?
|
||||
if names.any? { _1.downcase.start_with?('nico:') }
|
||||
errors[:tags] = ['ニコニコ・タグは直接指定できません．']
|
||||
return
|
||||
end
|
||||
parsed = names.map { |name| TagName.canonicalise(name.sub(/\[.*\]\z/, '')).first }
|
||||
existing = Tag.joins(:tag_name).where(tag_names: { name: parsed }).includes(:tag_name).to_a
|
||||
deprecated = existing.select(&:deprecated?).map(&:name)
|
||||
errors[:tags] = ["廃止済みタグがあります: #{ deprecated.join(' ') }"] if deprecated.present?
|
||||
known = existing.reject(&:deprecated?).map(&:name)
|
||||
new_tags = parsed.uniq - known
|
||||
warnings << "新規タグを作成します: #{ new_tags.join(' ') }" if new_tags.present?
|
||||
rescue Tag::SectionLiteralParseError
|
||||
errors[:tags] = ['タグ区間の記法が不正です．']
|
||||
end
|
||||
|
||||
def validate_basic_data attributes, errors
|
||||
post = Post.new(title: attributes['title'].presence,
|
||||
url: attributes['url'],
|
||||
thumbnail_base: attributes['thumbnail_base'].presence,
|
||||
original_created_from: attributes['original_created_from'].presence,
|
||||
original_created_before: attributes['original_created_before'].presence,
|
||||
video_ms: parse_duration(attributes['duration'], errors))
|
||||
post.valid?
|
||||
post.errors.each do |error|
|
||||
next if error.attribute == :url && error.type == :taken
|
||||
|
||||
(errors[error.attribute] ||= []) << error.message
|
||||
end
|
||||
end
|
||||
|
||||
def parse_duration value, errors
|
||||
return nil if value.blank?
|
||||
|
||||
value.is_a?(Numeric) ? value.to_i : Tag.time_to_ms!(value.to_s, tag_name: '動画時間')
|
||||
rescue Tag::SectionLiteralParseError
|
||||
errors[:video_ms] = ['動画時間の記法が不正です．']
|
||||
nil
|
||||
end
|
||||
|
||||
def validate_parents raw, errors
|
||||
ids = raw.to_s.split.map { Integer(_1, exception: false) }
|
||||
return if ids.compact.empty? && raw.to_s.blank?
|
||||
errors[:parent_post_ids] = ['親投稿 Id. が不正です．'] and return if ids.any? { _1.nil? || _1 <= 0 }
|
||||
errors[:parent_post_ids] = ['存在しない親投稿 Id. があります．'] if Post.where(id: ids).count != ids.uniq.length
|
||||
end
|
||||
end
|
||||
@@ -1,100 +0,0 @@
|
||||
class PostImportRunner
|
||||
MAX_ROWS = PostImportSourceParser::MAX_ROWS
|
||||
ATTRIBUTE_KEYS = %w[title thumbnail_base original_created_from original_created_before duration tags parent_post_ids video_ms].freeze
|
||||
def initialize actor:, rows:, existing: 'skip'
|
||||
@actor = actor
|
||||
@rows = rows
|
||||
@existing = existing == 'error' ? 'error' : 'skip'
|
||||
end
|
||||
|
||||
def run
|
||||
raise ArgumentError, "取込件数は #{ MAX_ROWS } 件までです．" if @rows.length > MAX_ROWS
|
||||
raise ArgumentError, '取込データが大きすぎます．' if @rows.sum { |row| row.to_json.bytesize } > PostImportSourceParser::MAX_BYTES
|
||||
|
||||
normalised_rows = @rows.map { |row| normalise_row(row) }
|
||||
source_rows = normalised_rows.map { _1['source_row'] }
|
||||
raise ArgumentError, '元行番号が重複しています．' if source_rows.uniq.length != source_rows.length
|
||||
|
||||
results = normalised_rows.map { |row| run_row(row) }
|
||||
{ created: results.count { _1[:status] == 'created' }, skipped: results.count { _1[:status] == 'skipped' },
|
||||
failed: results.count { _1[:status] == 'failed' }, rows: results }
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def run_row row
|
||||
validate_row_structure!(row)
|
||||
attributes = row.fetch('attributes', { }).to_h.transform_keys { _1.to_s.underscore }
|
||||
raise ArgumentError, '取込項目が不正です．' unless (attributes.keys - ATTRIBUTE_KEYS).empty?
|
||||
raise ArgumentError, '取込項目が大きすぎます．' if attributes.values.any? { _1.to_s.bytesize > PostImportSourceParser::MAX_CELL_BYTES }
|
||||
raise ArgumentError, 'URL が長すぎます．' if row['url'].to_s.bytesize > PostImportSourceParser::MAX_CELL_BYTES
|
||||
validate_tag_sources!(row['tag_sources'])
|
||||
preview = PostImportPreviewer.new(parsed: { columns: [], rows: [] }, url_column: 0,
|
||||
mappings: {}, existing: @existing).preview_rows(
|
||||
rows: [{ source_row: row['source_row'], url: row['url'],
|
||||
attributes:, provenance: row['provenance'],
|
||||
tag_sources: row['tag_sources'] }],
|
||||
fetch_metadata: false).first
|
||||
if preview[:validation_errors].present?
|
||||
return { source_row: row['source_row'], status: 'failed',
|
||||
errors: preview[:validation_errors] }
|
||||
end
|
||||
return row.slice('source_row').merge(status: 'skipped') if @existing == 'skip' && preview[:existing]
|
||||
attributes['tags'] = preview[:attributes]['tags']
|
||||
attributes['url'] = row['url']
|
||||
post = PostCreator.new(actor: @actor, attributes:).create!
|
||||
{ source_row: row['source_row'], status: 'created', post: PostRepr.base(post) }
|
||||
rescue ActiveRecord::RecordInvalid => e
|
||||
{ source_row: row['source_row'], status: 'failed', errors: e.record.errors.to_hash }
|
||||
rescue Tag::NicoTagNormalisationError
|
||||
{ source_row: row['source_row'], status: 'failed', errors: { tags: ['ニコニコ・タグは直接指定できません．'] } }
|
||||
rescue Tag::DeprecatedTagNormalisationError
|
||||
{ source_row: row['source_row'], status: 'failed', errors: { tags: ['廃止済みタグは付与できません．'] } }
|
||||
rescue ArgumentError, PostCreator::VideoMsParseError
|
||||
{ source_row: row['source_row'], status: 'failed', errors: { base: ['入力値が不正です．'] } }
|
||||
rescue StandardError => e
|
||||
Rails.logger.error("post_import_runner_failure #{ { error: e.class.name, message: e.message }.to_json }")
|
||||
{ source_row: row['source_row'], status: 'failed', errors: { base: ['登録中にエラーが発生しました．'] } }
|
||||
end
|
||||
|
||||
def validate_tag_sources! sources
|
||||
return if sources.blank?
|
||||
|
||||
sources = sources.to_h
|
||||
raise ArgumentError unless (sources.keys - %w[automatic mapped fixed manual]).empty?
|
||||
raise ArgumentError unless sources.values.all?(String)
|
||||
raise ArgumentError if sources.values.any? { _1.bytesize > PostImportSourceParser::MAX_CELL_BYTES }
|
||||
raise ArgumentError if sources.values.sum(&:bytesize) > PostImportSourceParser::MAX_CELL_BYTES
|
||||
end
|
||||
|
||||
def validate_row_structure! row
|
||||
raise ArgumentError unless row['source_row'].is_a?(Integer) && row['source_row'].positive?
|
||||
raise ArgumentError unless row['url'].is_a?(String)
|
||||
raise ArgumentError unless row['attributes'].is_a?(Hash)
|
||||
raise ArgumentError unless row['attributes'].values.all? { _1.is_a?(String) || _1.is_a?(Numeric) || _1 == true || _1 == false || _1.nil? }
|
||||
provenance = row['provenance']
|
||||
raise ArgumentError unless provenance.is_a?(Hash)
|
||||
allowed = ATTRIBUTE_KEYS + ['url']
|
||||
raise ArgumentError unless (provenance.keys - allowed).empty?
|
||||
raise ArgumentError unless provenance.values.all? { _1.in?(['automatic', 'mapped', 'fixed', 'manual']) }
|
||||
metadata_url = row['metadata_url']
|
||||
raise ArgumentError unless metadata_url.nil? || metadata_url.is_a?(String)
|
||||
raise ArgumentError if metadata_url.to_s.bytesize > PostImportSourceParser::MAX_CELL_BYTES
|
||||
raise ArgumentError if row.to_json.bytesize > PostImportSourceParser::MAX_BYTES
|
||||
tag_sources = row['tag_sources']
|
||||
raise ArgumentError unless tag_sources.nil? || tag_sources.is_a?(Hash)
|
||||
end
|
||||
|
||||
def normalise_row row
|
||||
unless row.is_a?(Hash)
|
||||
raise ArgumentError, '取込行の形式が不正です．'
|
||||
end
|
||||
|
||||
normalised = row.deep_transform_keys { _1.to_s.underscore }
|
||||
source_row = Integer(normalised['source_row'], exception: false)
|
||||
raise ArgumentError, '元行番号が不正です．' if source_row.nil? || source_row <= 0
|
||||
|
||||
normalised['source_row'] = source_row
|
||||
normalised
|
||||
end
|
||||
end
|
||||
@@ -1,100 +0,0 @@
|
||||
require 'csv'
|
||||
|
||||
class PostImportSourceParser
|
||||
MAX_ROWS = 100
|
||||
MAX_BYTES = 1.megabyte
|
||||
MAX_CELL_BYTES = 20.kilobytes
|
||||
MAX_COLUMNS = 50
|
||||
|
||||
def initialize source:, format:, has_header: false, json_path: nil
|
||||
@source = source.to_s
|
||||
@format = format.to_s
|
||||
@has_header = ActiveModel::Type::Boolean.new.cast(has_header)
|
||||
@json_path = json_path.to_s
|
||||
end
|
||||
|
||||
def parse
|
||||
raise ArgumentError, '入力が大きすぎます．' if @source.bytesize > MAX_BYTES
|
||||
|
||||
@format == 'json' ? parse_json : parse_delimited
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def parse_delimited
|
||||
separator = @format == 'csv' ? ',' : "\t"
|
||||
table = CSV.parse(@source, col_sep: separator).map { |row| row.map { _1.to_s.strip } }
|
||||
raise ArgumentError, '入力が空です．' if table.empty?
|
||||
|
||||
headers = @has_header ? table.shift : nil
|
||||
ensure_limits!(table)
|
||||
width = table.map(&:length).max.to_i
|
||||
raise ArgumentError, "列数は #{ MAX_COLUMNS } 列までです．" if width > MAX_COLUMNS
|
||||
{ columns: (0...width).map { |index| { key: index.to_s,
|
||||
label: "#{ column_name(index) }：#{ headers&.[](index).presence || '列' }" } },
|
||||
rows: table.each_with_index.map { |values, index| { source_row: index + (@has_header ? 2 : 1), values: } } }
|
||||
rescue CSV::MalformedCSVError => e
|
||||
raise ArgumentError, "CSV・TSV の形式が不正です: #{ e.message }"
|
||||
end
|
||||
|
||||
def parse_json
|
||||
value = JSON.parse(@source, max_nesting: 20)
|
||||
@json_path.split('.').reject(&:blank?).each do |part|
|
||||
value =
|
||||
case value
|
||||
when Array
|
||||
index = Integer(part, exception: false)
|
||||
raise ArgumentError if index.nil? || index.negative? || index >= value.length
|
||||
|
||||
value[index]
|
||||
when Hash
|
||||
raise ArgumentError unless value.key?(part) || value.key?(part.to_sym)
|
||||
|
||||
value.key?(part) ? value[part] : value[part.to_sym]
|
||||
else
|
||||
raise ArgumentError
|
||||
end
|
||||
end
|
||||
raise ArgumentError, 'JSON の投稿候補は配列にしてください．' unless value.is_a?(Array)
|
||||
|
||||
ensure_limits!(value)
|
||||
unless value.all?(Hash)
|
||||
invalid = value.each_with_index.filter_map { |item, index| index + 1 unless item.is_a?(Hash) }
|
||||
raise ArgumentError, "JSON の投稿候補は object の配列にしてください: 行 #{ invalid.join(', ') }"
|
||||
end
|
||||
keys = value.flat_map(&:keys).map(&:to_s).uniq
|
||||
raise ArgumentError, "列数は #{ MAX_COLUMNS } 列までです．" if keys.length > MAX_COLUMNS
|
||||
{ columns: keys.each_with_index.map { |key, index| { key:, label: "#{ column_name(index) }：#{ key }" } },
|
||||
rows: value.each_with_index.map { |item, index| { source_row: index + 1,
|
||||
values: keys.map { |key|
|
||||
value = item.key?(key) ? item[key] : item[key.to_sym]
|
||||
json_cell(value)
|
||||
} } } }
|
||||
rescue JSON::ParserError, KeyError, ArgumentError => e
|
||||
raise ArgumentError, "JSON の形式が不正です: #{ e.message }"
|
||||
end
|
||||
|
||||
def ensure_limits! rows
|
||||
raise ArgumentError, "取込件数は #{ MAX_ROWS } 件までです．" if rows.length > MAX_ROWS
|
||||
raise ArgumentError, 'セルが大きすぎます．' if rows.flatten.any? { _1.to_s.bytesize > MAX_CELL_BYTES }
|
||||
end
|
||||
|
||||
def json_cell value
|
||||
case value
|
||||
when nil then ''
|
||||
when String, Numeric, TrueClass, FalseClass then value.to_s
|
||||
when Array, Hash then JSON.generate(value)
|
||||
else raise ArgumentError, 'JSON のセル値が不正です．'
|
||||
end
|
||||
end
|
||||
|
||||
def column_name index
|
||||
name = +''
|
||||
loop do
|
||||
name.prepend((65 + (index % 26)).chr)
|
||||
index = (index / 26) - 1
|
||||
break if index < 0
|
||||
end
|
||||
name
|
||||
end
|
||||
end
|
||||
@@ -1,49 +0,0 @@
|
||||
class PostMetadataFetcher
|
||||
def self.fetch raw_url
|
||||
uri, = Preview::UrlSafety.validate(raw_url)
|
||||
response = Preview::HttpFetcher.fetch(uri.to_s, max_bytes: Preview::ThumbnailFetcher::HTML_MAX_BYTES)
|
||||
metadata = Preview::HtmlMetadataExtractor.extract(response)
|
||||
document = Nokogiri::HTML.parse(response.body)
|
||||
content = -> name { document.at_css("meta[property='#{ name }'], meta[name='#{ name }']")&.[]('content')&.strip.presence }
|
||||
duration = content.call('og:video:duration') || content.call('video:duration')
|
||||
published = content.call('article:published_time') || content.call('date')
|
||||
created_range = original_created_range(published)
|
||||
platform_tags = platform_tags(uri)
|
||||
{ title: metadata[:title],
|
||||
thumbnail_base: Preview::KnownSiteExtractor.thumbnail_url(uri) || metadata[:image_url],
|
||||
original_created_from: created_range&.first&.iso8601,
|
||||
original_created_before: created_range&.last&.iso8601,
|
||||
duration: duration&.to_f&.then { _1.positive? ? (_1 * 1_000).round : nil },
|
||||
tags: platform_tags.join(' ') }
|
||||
end
|
||||
|
||||
def self.platform_tags uri
|
||||
return ['動画', 'YouTube'] if Preview::KnownSiteExtractor.youtube_video_id(uri)
|
||||
return ['動画', 'ニコニコ'] if Preview::KnownSiteExtractor.niconico_video_id(uri)
|
||||
|
||||
[]
|
||||
end
|
||||
|
||||
def self.original_created_range value
|
||||
return nil if value.blank?
|
||||
|
||||
raw = value.to_s.strip
|
||||
from = Time.zone.parse(raw)
|
||||
zone = '(?:Z|[+-]\d{2}:?\d{2})?'
|
||||
before = case raw
|
||||
when /\A\d{4}\z/ then from + 1.year
|
||||
when /\A\d{4}-\d{2}\z/ then from + 1.month
|
||||
when /\A\d{4}-\d{2}-\d{2}\z/ then from + 1.day
|
||||
when /\A\d{4}-\d{2}-\d{2}T\d{2}#{ zone }\z/ then from + 1.hour
|
||||
when /\A\d{4}-\d{2}-\d{2}T\d{2}:\d{2}#{ zone }\z/ then from + 1.minute
|
||||
when /\A\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}#{ zone }\z/ then from + 1.second
|
||||
when /\A\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.(\d+)#{ zone }\z/
|
||||
from + (10**(-Regexp.last_match(1).length))
|
||||
else return nil
|
||||
end
|
||||
[from, before]
|
||||
rescue ArgumentError, TypeError
|
||||
nil
|
||||
end
|
||||
private_class_method :platform_tags, :original_created_range
|
||||
end
|
||||
@@ -1,13 +0,0 @@
|
||||
class PostUrlNormaliser
|
||||
def self.normalise raw_url
|
||||
value = raw_url.to_s.strip
|
||||
uri = URI.parse(value)
|
||||
return nil unless uri.is_a?(URI::HTTP) && uri.host.present?
|
||||
|
||||
uri.host = uri.host.downcase
|
||||
uri.path = uri.path.sub(/\/\z/, '') if uri.path.present?
|
||||
uri.to_s
|
||||
rescue URI::InvalidURIError
|
||||
nil
|
||||
end
|
||||
end
|
||||
@@ -23,7 +23,6 @@ class PostVersionRecorder < VersionRecorder
|
||||
{ title: @record.title,
|
||||
url: @record.url,
|
||||
thumbnail_base: @record.thumbnail_base,
|
||||
video_ms: @record.video_ms,
|
||||
tags: @record.snapshot_tag_names.join(' '),
|
||||
parent_post_ids: @record.snapshot_parent_post_ids.join(' '),
|
||||
original_created_from: @record.original_created_from,
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
module Preview
|
||||
class HtmlMetadataExtractor
|
||||
IMAGE_SELECTORS = [
|
||||
'meta[property="og:image"]',
|
||||
'meta[name="twitter:image"]',
|
||||
'meta[name="thumbnail"]'
|
||||
].freeze
|
||||
|
||||
def self.extract(response)
|
||||
document = Nokogiri::HTML.parse(response.body)
|
||||
image_url = IMAGE_SELECTORS.filter_map {
|
||||
document.at_css(_1)&.[]('content')&.strip.presence
|
||||
}.first
|
||||
|
||||
{ title: document.at_css('title')&.text&.strip,
|
||||
image_url: image_url ? URI.join(response.url, image_url).to_s : nil }
|
||||
rescue URI::InvalidURIError
|
||||
{ title: document.at_css('title')&.text&.strip, image_url: nil }
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,126 +0,0 @@
|
||||
require 'net/http'
|
||||
require 'json'
|
||||
|
||||
module Preview
|
||||
class HttpFetcher
|
||||
class FetchFailed < StandardError; end
|
||||
class FetchTimeout < FetchFailed; end
|
||||
class ResponseTooLarge < FetchFailed; end
|
||||
|
||||
MAX_REDIRECTS = 5
|
||||
DEFAULT_MAX_BYTES = 5.megabytes
|
||||
|
||||
Response = Data.define(:body, :content_type, :url)
|
||||
|
||||
def self.fetch(raw_url, max_bytes: DEFAULT_MAX_BYTES, redirects: MAX_REDIRECTS,
|
||||
allowed_hosts: nil)
|
||||
uri, addresses = UrlSafety.validate(raw_url)
|
||||
if allowed_hosts && !allowed_hosts.include?(uri.host.downcase)
|
||||
raise FetchFailed, '許可されてゐない redirect 先です．'
|
||||
end
|
||||
response = request(uri, addresses.first, max_bytes)
|
||||
|
||||
if response.is_a?(Net::HTTPRedirection)
|
||||
location = response['location']
|
||||
if redirects.zero?
|
||||
log_failure(:redirect_limit,
|
||||
url: uri.to_s,
|
||||
redirects:,
|
||||
location:,
|
||||
content_type: response['content-type'],
|
||||
content_length: response['content-length'])
|
||||
raise FetchFailed, 'redirect が多すぎます．'
|
||||
end
|
||||
|
||||
if location.blank?
|
||||
log_failure(:blank_redirect_location,
|
||||
url: uri.to_s,
|
||||
redirects:,
|
||||
content_type: response['content-type'],
|
||||
content_length: response['content-length'])
|
||||
raise FetchFailed, 'redirect 先が不正です．'
|
||||
end
|
||||
|
||||
redirect_url =
|
||||
begin
|
||||
URI.join(uri, location).to_s
|
||||
rescue URI::InvalidURIError => e
|
||||
log_failure(:invalid_redirect_location,
|
||||
url: uri.to_s,
|
||||
redirects:,
|
||||
location:,
|
||||
error: e.class.name,
|
||||
message: e.message)
|
||||
raise FetchFailed, 'redirect 先が不正です．'
|
||||
end
|
||||
|
||||
return fetch(redirect_url, max_bytes:, redirects: redirects - 1, allowed_hosts:)
|
||||
end
|
||||
|
||||
unless response.is_a?(Net::HTTPSuccess)
|
||||
log_failure(:http_status,
|
||||
url: uri.to_s,
|
||||
code: response.code,
|
||||
content_type: response['content-type'],
|
||||
content_length: response['content-length'])
|
||||
raise FetchFailed, "外部サーバーが HTTP #{ response.code } を返しました．"
|
||||
end
|
||||
|
||||
Response.new(response.body, response['content-type'].to_s, uri.to_s)
|
||||
rescue Net::OpenTimeout, Net::ReadTimeout, Timeout::Error => e
|
||||
log_failure(:timeout, url: uri&.to_s || raw_url, error: e.class.name, message: e.message)
|
||||
raise FetchTimeout, e.message
|
||||
rescue SocketError, SystemCallError, OpenSSL::SSL::SSLError, EOFError => e
|
||||
log_failure(:network_error, url: uri&.to_s || raw_url, error: e.class.name, message: e.message)
|
||||
raise FetchFailed, e.message
|
||||
end
|
||||
|
||||
def self.request(uri, ip_address, max_bytes)
|
||||
http = Net::HTTP.new(uri.host, uri.port)
|
||||
http.ipaddr = ip_address
|
||||
http.use_ssl = uri.scheme == 'https'
|
||||
http.open_timeout = 5
|
||||
http.read_timeout = 8
|
||||
http.write_timeout = 5
|
||||
|
||||
request = Net::HTTP::Get.new(uri)
|
||||
request['User-Agent'] = 'BTRC-Hub thumbnail preview'
|
||||
request['Accept'] = 'text/html,image/*;q=0.9,*/*;q=0.1'
|
||||
|
||||
http.request(request) do |response|
|
||||
length = response['content-length'].to_i
|
||||
if length > max_bytes
|
||||
log_failure(:response_too_large,
|
||||
url: uri.to_s,
|
||||
content_type: response['content-type'],
|
||||
content_length: response['content-length'],
|
||||
max_bytes:)
|
||||
raise ResponseTooLarge, '外部データが大きすぎます．'
|
||||
end
|
||||
|
||||
body = +''
|
||||
response.read_body do |chunk|
|
||||
body << chunk
|
||||
next unless body.bytesize > max_bytes
|
||||
|
||||
log_failure(:response_too_large,
|
||||
url: uri.to_s,
|
||||
content_type: response['content-type'],
|
||||
content_length: response['content-length'],
|
||||
bytes_read: body.bytesize,
|
||||
max_bytes:)
|
||||
raise ResponseTooLarge, '外部データが大きすぎます．'
|
||||
end
|
||||
response.instance_variable_set(:@body, body)
|
||||
response.instance_variable_set(:@read, true)
|
||||
return response
|
||||
end
|
||||
end
|
||||
|
||||
def self.log_failure(reason, **payload)
|
||||
Rails.logger.warn("preview_http_fetcher_failure #{ { reason:, **payload }.to_json }")
|
||||
end
|
||||
|
||||
private_class_method :request, :log_failure
|
||||
end
|
||||
end
|
||||
@@ -1,34 +0,0 @@
|
||||
module Preview
|
||||
class KnownSiteExtractor
|
||||
def self.thumbnail_url(uri)
|
||||
youtube_thumbnail(uri)
|
||||
end
|
||||
|
||||
def self.youtube_video_id(uri)
|
||||
case uri.host&.downcase
|
||||
when 'youtu.be'
|
||||
uri.path.split('/').reject(&:blank?).first
|
||||
when 'www.youtube.com', 'youtube.com', 'm.youtube.com'
|
||||
uri.path == '/watch' ? URI.decode_www_form(uri.query.to_s).to_h['v'] : nil
|
||||
end&.then { _1 if _1.match?(/\A[A-Za-z0-9_-]{6,20}\z/) }
|
||||
end
|
||||
|
||||
def self.niconico_video_id(uri)
|
||||
case uri.host&.downcase
|
||||
when 'www.nicovideo.jp', 'nicovideo.jp'
|
||||
uri.path[%r{\A/watch/(sm\d+)\z}, 1]
|
||||
when 'nico.ms'
|
||||
uri.path[%r{\A/(sm\d+)\z}, 1]
|
||||
end
|
||||
end
|
||||
|
||||
def self.youtube_thumbnail(uri)
|
||||
id = youtube_video_id(uri)
|
||||
return unless id
|
||||
|
||||
"https://i.ytimg.com/vi/#{ id }/hqdefault.jpg"
|
||||
end
|
||||
|
||||
private_class_method :youtube_thumbnail
|
||||
end
|
||||
end
|
||||
@@ -1,95 +0,0 @@
|
||||
module Preview
|
||||
class ThumbnailFetcher
|
||||
class GenerationFailed < StandardError; end
|
||||
ALLOWED_IMAGE_CONTENT_TYPES = [
|
||||
'image/jpeg', 'image/png', 'image/gif', 'image/webp'
|
||||
].freeze
|
||||
HTML_MAX_BYTES = 1.megabyte
|
||||
NICONICO_XML_MAX_BYTES = 256.kilobytes
|
||||
|
||||
def self.fetch(raw_url)
|
||||
uri, = UrlSafety.validate(raw_url)
|
||||
|
||||
known_url = KnownSiteExtractor.thumbnail_url(uri)
|
||||
image = fetch_image_or_nil(known_url) if known_url
|
||||
return image if image
|
||||
|
||||
niconico_url = niconico_thumbnail_url(uri)
|
||||
image = fetch_image_or_nil(niconico_url) if niconico_url
|
||||
return image if image
|
||||
|
||||
page = HttpFetcher.fetch(uri.to_s, max_bytes: HTML_MAX_BYTES)
|
||||
metadata = HtmlMetadataExtractor.extract(page)
|
||||
raise GenerationFailed, 'サムネール画像が見つかりませんでした．' if metadata[:image_url].blank?
|
||||
|
||||
fetch_image!(metadata[:image_url])
|
||||
end
|
||||
|
||||
def self.title(raw_url)
|
||||
uri, = UrlSafety.validate(raw_url)
|
||||
HtmlMetadataExtractor.extract(
|
||||
HttpFetcher.fetch(uri.to_s, max_bytes: HTML_MAX_BYTES))[:title]
|
||||
end
|
||||
|
||||
def self.fetch_image_or_nil(url)
|
||||
return nil if url.blank?
|
||||
|
||||
response = HttpFetcher.fetch(url)
|
||||
return nil unless allowed_image_content_type?(response.content_type)
|
||||
|
||||
response.body
|
||||
rescue HttpFetcher::FetchTimeout
|
||||
raise
|
||||
rescue HttpFetcher::FetchFailed
|
||||
nil
|
||||
end
|
||||
|
||||
def self.fetch_image!(url)
|
||||
response = HttpFetcher.fetch(url)
|
||||
unless allowed_image_content_type?(response.content_type)
|
||||
raise GenerationFailed, 'サムネール画像が見つかりませんでした．'
|
||||
end
|
||||
|
||||
response.body
|
||||
rescue HttpFetcher::FetchTimeout
|
||||
raise
|
||||
rescue HttpFetcher::ResponseTooLarge
|
||||
raise
|
||||
rescue HttpFetcher::FetchFailed
|
||||
raise GenerationFailed, 'サムネール画像を取得できませんでした．'
|
||||
end
|
||||
|
||||
def self.niconico_thumbnail_url(uri)
|
||||
video_id = KnownSiteExtractor.niconico_video_id(uri)
|
||||
return nil if video_id.blank?
|
||||
|
||||
response = HttpFetcher.fetch("https://ext.nicovideo.jp/api/getthumbinfo/#{ video_id }",
|
||||
max_bytes: NICONICO_XML_MAX_BYTES)
|
||||
xml = Nokogiri::XML(response.body)
|
||||
return nil unless xml.at_xpath('/nicovideo_thumb_response/@status')&.value == 'ok'
|
||||
|
||||
xml.at_xpath('//thumbnail_url')&.text&.strip.presence
|
||||
rescue HttpFetcher::FetchFailed, HttpFetcher::FetchTimeout => e
|
||||
Rails.logger.info("preview_niconico_getthumbinfo_fallback #{ { url: uri.to_s,
|
||||
video_id:,
|
||||
error: e.class.name,
|
||||
message: e.message }.to_json }")
|
||||
nil
|
||||
rescue Nokogiri::XML::SyntaxError => e
|
||||
Rails.logger.info("preview_niconico_getthumbinfo_fallback #{ { url: uri.to_s,
|
||||
video_id:,
|
||||
error: e.class.name,
|
||||
message: e.message }.to_json }")
|
||||
nil
|
||||
end
|
||||
|
||||
def self.allowed_image_content_type?(content_type)
|
||||
mime_type = content_type.to_s.split(';', 2).first.downcase.strip
|
||||
ALLOWED_IMAGE_CONTENT_TYPES.include?(mime_type)
|
||||
end
|
||||
|
||||
private_class_method :fetch_image_or_nil, :fetch_image!,
|
||||
:niconico_thumbnail_url,
|
||||
:allowed_image_content_type?
|
||||
end
|
||||
end
|
||||
@@ -1,55 +0,0 @@
|
||||
require 'resolv'
|
||||
require 'ipaddr'
|
||||
require 'uri'
|
||||
|
||||
module Preview
|
||||
class UrlSafety
|
||||
class UnsafeUrl < StandardError; end
|
||||
|
||||
FORBIDDEN_NETWORKS = [
|
||||
'0.0.0.0/8', '10.0.0.0/8', '100.64.0.0/10', '127.0.0.0/8',
|
||||
'169.254.0.0/16', '172.16.0.0/12', '192.0.0.0/24',
|
||||
'192.0.2.0/24', '192.168.0.0/16', '198.18.0.0/15',
|
||||
'198.51.100.0/24', '203.0.113.0/24', '224.0.0.0/4',
|
||||
'240.0.0.0/4', '::/128', '::1/128', 'fc00::/7', 'fe80::/10',
|
||||
'ff00::/8', '2001:db8::/32', '::ffff:0:0/96'
|
||||
].map { IPAddr.new(_1) }.freeze
|
||||
|
||||
def self.validate(raw_url)
|
||||
value = raw_url.to_s.strip
|
||||
if value.match?(/\A[a-z][a-z0-9+\-.]*:/i)
|
||||
unless value.match?(/\Ahttps?:\/\//i)
|
||||
raise UnsafeUrl, 'http または https の URL を指定してください．'
|
||||
end
|
||||
else
|
||||
value = "http://#{ value }"
|
||||
end
|
||||
uri = URI.parse(value)
|
||||
|
||||
unless ['http', 'https'].include?(uri.scheme&.downcase) && uri.host.present?
|
||||
raise UnsafeUrl, 'http または https の URL を指定してください．'
|
||||
end
|
||||
raise UnsafeUrl, 'userinfo つき URL は使用できません．' if uri.userinfo.present?
|
||||
|
||||
addresses = Resolv.getaddresses(uri.host)
|
||||
raise UnsafeUrl, 'URL のホストを解決できません．' if addresses.empty?
|
||||
|
||||
parsed_addresses = addresses.map { IPAddr.new(_1) }
|
||||
if parsed_addresses.any? { |address| forbidden?(address) }
|
||||
raise UnsafeUrl, '安全でない接続先は使用できません．'
|
||||
end
|
||||
|
||||
[uri, parsed_addresses.map(&:to_s)]
|
||||
rescue Resolv::ResolvError
|
||||
raise UnsafeUrl, 'URL のホストを解決できません．'
|
||||
rescue URI::InvalidURIError, IPAddr::InvalidAddressError
|
||||
raise UnsafeUrl, 'URL が不正です．'
|
||||
end
|
||||
|
||||
def self.forbidden?(address)
|
||||
FORBIDDEN_NETWORKS.any? { _1.include?(address) }
|
||||
end
|
||||
|
||||
private_class_method :forbidden?
|
||||
end
|
||||
end
|
||||
@@ -33,13 +33,6 @@ Rails.application.routes.draw do
|
||||
get :thumbnail
|
||||
end
|
||||
|
||||
scope 'posts/import', controller: :post_imports do
|
||||
post :parse
|
||||
post :preview
|
||||
post :validate
|
||||
post '', action: :create
|
||||
end
|
||||
|
||||
resources :wiki_pages, path: 'wiki', only: [:index, :show, :create, :update] do
|
||||
collection do
|
||||
get :search
|
||||
@@ -88,11 +81,6 @@ Rails.application.routes.draw do
|
||||
end
|
||||
end
|
||||
|
||||
get 'users/settings', to: 'user_settings#show'
|
||||
patch 'users/settings', to: 'user_settings#update'
|
||||
get 'users/theme_slots', to: 'user_theme_slots#index'
|
||||
put 'users/theme_slots/:base_theme/:slot_no', to: 'user_theme_slots#update'
|
||||
|
||||
resources :users, only: [:create, :update] do
|
||||
collection do
|
||||
post :verify
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
class AddVideoMsToPosts < ActiveRecord::Migration[8.0]
|
||||
def change
|
||||
add_column :posts, :video_ms, :integer
|
||||
add_index :posts, [:video_ms, :id], name: 'idx_posts_video_ms_id'
|
||||
|
||||
add_check_constraint :posts, 'video_ms IS NULL OR video_ms > 0',
|
||||
name: 'chk_posts_video_ms_positive'
|
||||
end
|
||||
end
|
||||
@@ -1,19 +0,0 @@
|
||||
class CreatePostTagSections < ActiveRecord::Migration[8.0]
|
||||
def change
|
||||
create_table :post_tag_sections, primary_key: [:post_id, :tag_id, :begin_ms] do |t|
|
||||
t.references :post, null: false, foreign_key: true, index: false
|
||||
t.references :tag, null: false, foreign_key: true, index: false
|
||||
t.integer :begin_ms, null: false
|
||||
t.integer :end_ms, null: true
|
||||
t.timestamps
|
||||
|
||||
t.index [:post_id, :begin_ms], name: 'idx_post_tag_sections_post_id_begin_ms'
|
||||
|
||||
t.check_constraint 'begin_ms >= 0',
|
||||
name: 'chk_post_tag_sections_begin_ms_natural'
|
||||
|
||||
t.check_constraint 'end_ms IS NULL OR begin_ms < end_ms',
|
||||
name: 'chk_post_tag_sections_end_ms_after_begin_ms'
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,9 +0,0 @@
|
||||
class AddVideoMsToPostVersions < ActiveRecord::Migration[8.0]
|
||||
def change
|
||||
add_column :post_versions, :video_ms, :integer
|
||||
add_index :post_versions, [:video_ms, :post_id], name: 'idx_post_versions_video_ms_post_id'
|
||||
|
||||
add_check_constraint :post_versions, 'video_ms IS NULL OR video_ms > 0',
|
||||
name: 'chk_post_versions_video_ms_positive'
|
||||
end
|
||||
end
|
||||
@@ -1,31 +0,0 @@
|
||||
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,
|
||||
: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
|
||||
@@ -1,22 +0,0 @@
|
||||
class CreateUserThemeSlots < ActiveRecord::Migration[8.0]
|
||||
def change
|
||||
create_table :user_theme_slots do |t|
|
||||
t.references :user, null: false, foreign_key: true
|
||||
t.string :base_theme, null: false
|
||||
t.integer :slot_no, null: false
|
||||
t.json :tokens, null: false
|
||||
t.timestamps
|
||||
end
|
||||
|
||||
add_index :user_theme_slots,
|
||||
[:user_id, :base_theme, :slot_no],
|
||||
unique: true,
|
||||
name: 'index_user_theme_slots_on_user_theme_and_slot'
|
||||
add_check_constraint :user_theme_slots,
|
||||
"base_theme IN ('light', 'dark')",
|
||||
name: 'user_theme_slots_base_theme_valid'
|
||||
add_check_constraint :user_theme_slots,
|
||||
'slot_no BETWEEN 1 AND 3',
|
||||
name: 'user_theme_slots_slot_no_valid'
|
||||
end
|
||||
end
|
||||
生成ファイル
+19
-56
@@ -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_07_05_000000) do
|
||||
ActiveRecord::Schema[8.0].define(version: 2026_06_26_010000) 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
|
||||
@@ -298,19 +298,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
|
||||
t.index ["target_post_id"], name: "index_post_similarities_on_target_post_id"
|
||||
end
|
||||
|
||||
create_table "post_tag_sections", primary_key: ["post_id", "tag_id", "begin_ms"], charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
|
||||
t.bigint "post_id", null: false
|
||||
t.bigint "tag_id", null: false
|
||||
t.integer "begin_ms", null: false
|
||||
t.integer "end_ms"
|
||||
t.datetime "created_at", null: false
|
||||
t.datetime "updated_at", null: false
|
||||
t.index ["post_id", "begin_ms"], name: "idx_post_tag_sections_post_id_begin_ms"
|
||||
t.index ["tag_id"], name: "fk_rails_8be3847903"
|
||||
t.check_constraint "(`end_ms` is null) or (`begin_ms` < `end_ms`)", name: "chk_post_tag_sections_end_ms_after_begin_ms"
|
||||
t.check_constraint "`begin_ms` >= 0", name: "chk_post_tag_sections_begin_ms_natural"
|
||||
end
|
||||
|
||||
create_table "post_tags", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
|
||||
t.bigint "post_id", null: false
|
||||
t.bigint "tag_id", null: false
|
||||
@@ -344,12 +331,9 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
|
||||
t.datetime "original_created_before"
|
||||
t.datetime "created_at", null: false
|
||||
t.bigint "created_by_user_id"
|
||||
t.integer "video_ms"
|
||||
t.index ["created_by_user_id"], name: "index_post_versions_on_created_by_user_id"
|
||||
t.index ["post_id", "version_no"], name: "index_post_versions_on_post_id_and_version_no", unique: true
|
||||
t.index ["post_id"], name: "index_post_versions_on_post_id"
|
||||
t.index ["video_ms", "post_id"], name: "idx_post_versions_video_ms_post_id"
|
||||
t.check_constraint "(`video_ms` is null) or (`video_ms` > 0)", name: "chk_post_versions_video_ms_positive"
|
||||
t.check_constraint "`event_type` in (_utf8mb4'create',_utf8mb4'update',_utf8mb4'discard',_utf8mb4'restore')", name: "post_versions_event_type_valid"
|
||||
t.check_constraint "`version_no` > 0", name: "post_versions_version_no_positive"
|
||||
end
|
||||
@@ -364,36 +348,18 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
|
||||
t.datetime "original_created_before"
|
||||
t.datetime "updated_at", null: false
|
||||
t.integer "version_no", null: false
|
||||
t.integer "video_ms"
|
||||
t.index ["uploaded_user_id"], name: "index_posts_on_uploaded_user_id"
|
||||
t.index ["url"], name: "index_posts_on_url", unique: true
|
||||
t.index ["video_ms", "id"], name: "idx_posts_video_ms_id"
|
||||
t.check_constraint "(`video_ms` is null) or (`video_ms` > 0)", name: "chk_posts_video_ms_positive"
|
||||
t.check_constraint "`version_no` > 0", name: "chk_posts_version_no_positive"
|
||||
end
|
||||
|
||||
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.string "theme", default: "system", 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 "wiki_assets", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
|
||||
t.bigint "wiki_page_id", null: false
|
||||
t.integer "no", null: false
|
||||
t.string "alt_text"
|
||||
t.binary "sha256", limit: 32, null: false
|
||||
t.bigint "created_by_user_id", null: false
|
||||
t.datetime "created_at", null: false
|
||||
t.datetime "updated_at", null: false
|
||||
t.index ["created_by_user_id"], name: "index_wiki_assets_on_created_by_user_id"
|
||||
t.index ["wiki_page_id", "no"], name: "index_wiki_assets_on_wiki_page_id_and_no", unique: true
|
||||
t.index ["wiki_page_id", "sha256"], name: "index_wiki_assets_on_wiki_page_id_and_sha256", unique: true
|
||||
t.index ["user_id"], name: "index_settings_on_user_id"
|
||||
end
|
||||
|
||||
create_table "tag_implications", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
|
||||
@@ -441,9 +407,9 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
|
||||
t.string "event_type", null: false
|
||||
t.string "name", null: false
|
||||
t.string "category", null: false
|
||||
t.datetime "deprecated_at"
|
||||
t.text "aliases", null: false
|
||||
t.text "parent_tag_ids", null: false
|
||||
t.datetime "deprecated_at"
|
||||
t.datetime "created_at", null: false
|
||||
t.bigint "created_by_user_id"
|
||||
t.index ["created_at"], name: "index_tag_versions_on_created_at"
|
||||
@@ -456,10 +422,10 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
|
||||
create_table "tags", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
|
||||
t.bigint "tag_name_id", null: false
|
||||
t.string "category", default: "general", null: false
|
||||
t.datetime "deprecated_at"
|
||||
t.datetime "created_at", null: false
|
||||
t.datetime "updated_at", null: false
|
||||
t.integer "post_count", default: 0, null: false
|
||||
t.datetime "deprecated_at"
|
||||
t.datetime "discarded_at"
|
||||
t.integer "version_no", null: false
|
||||
t.index ["deprecated_at"], name: "index_tags_on_deprecated_at"
|
||||
@@ -581,19 +547,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
|
||||
t.index ["post_id"], name: "index_user_post_views_on_post_id"
|
||||
end
|
||||
|
||||
create_table "user_theme_slots", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
|
||||
t.bigint "user_id", null: false
|
||||
t.string "base_theme", null: false
|
||||
t.integer "slot_no", null: false
|
||||
t.json "tokens", null: false
|
||||
t.datetime "created_at", null: false
|
||||
t.datetime "updated_at", null: false
|
||||
t.index ["user_id", "base_theme", "slot_no"], name: "index_user_theme_slots_on_user_theme_and_slot", unique: true
|
||||
t.index ["user_id"], name: "index_user_theme_slots_on_user_id"
|
||||
t.check_constraint "`base_theme` in (_utf8mb4'light',_utf8mb4'dark')", name: "user_theme_slots_base_theme_valid"
|
||||
t.check_constraint "`slot_no` between 1 and 3", name: "user_theme_slots_slot_no_valid"
|
||||
end
|
||||
|
||||
create_table "users", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
|
||||
t.string "name"
|
||||
t.string "inheritance_code", limit: 64, null: false
|
||||
@@ -604,6 +557,19 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
|
||||
t.index ["banned_at"], name: "index_users_on_banned_at"
|
||||
end
|
||||
|
||||
create_table "wiki_assets", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
|
||||
t.bigint "wiki_page_id", null: false
|
||||
t.integer "no", null: false
|
||||
t.string "alt_text"
|
||||
t.binary "sha256", limit: 32, null: false
|
||||
t.bigint "created_by_user_id", null: false
|
||||
t.datetime "created_at", null: false
|
||||
t.datetime "updated_at", null: false
|
||||
t.index ["created_by_user_id"], name: "index_wiki_assets_on_created_by_user_id"
|
||||
t.index ["wiki_page_id", "no"], name: "index_wiki_assets_on_wiki_page_id_and_no", unique: true
|
||||
t.index ["wiki_page_id", "sha256"], name: "index_wiki_assets_on_wiki_page_id_and_sha256", unique: true
|
||||
end
|
||||
|
||||
create_table "wiki_lines", charset: "utf8mb4", collation: "utf8mb4_0900_ai_ci", force: :cascade do |t|
|
||||
t.string "sha256", limit: 64, null: false
|
||||
t.text "body", null: false
|
||||
@@ -712,8 +678,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
|
||||
add_foreign_key "post_implications", "posts", column: "parent_post_id"
|
||||
add_foreign_key "post_similarities", "posts"
|
||||
add_foreign_key "post_similarities", "posts", column: "target_post_id"
|
||||
add_foreign_key "post_tag_sections", "posts"
|
||||
add_foreign_key "post_tag_sections", "tags"
|
||||
add_foreign_key "post_tags", "posts"
|
||||
add_foreign_key "post_tags", "tags"
|
||||
add_foreign_key "post_tags", "users", column: "created_user_id"
|
||||
@@ -753,7 +717,6 @@ ActiveRecord::Schema[8.0].define(version: 2026_07_05_000000) do
|
||||
add_foreign_key "user_ips", "users"
|
||||
add_foreign_key "user_post_views", "posts"
|
||||
add_foreign_key "user_post_views", "users"
|
||||
add_foreign_key "user_theme_slots", "users"
|
||||
add_foreign_key "wiki_assets", "users", column: "created_by_user_id"
|
||||
add_foreign_key "wiki_assets", "wiki_pages"
|
||||
add_foreign_key "wiki_pages", "tag_names"
|
||||
|
||||
+1102
ファイル差分が大きすぎるため省略します
差分を読込み
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "lib",
|
||||
"version": "1.0.0",
|
||||
"main": "screenshot.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"puppeteer": "^24.10.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
const puppeteer = require ('puppeteer')
|
||||
const fs = require ('fs')
|
||||
|
||||
|
||||
void (async () => {
|
||||
const url = process.argv[2]
|
||||
const output = process.argv[3]
|
||||
|
||||
const browser = await puppeteer.launch ({
|
||||
args: ['--no-sandbox', '--disable-setuid-sandbox'] })
|
||||
|
||||
const page = await browser.newPage ()
|
||||
await page.setViewport ({ width: 960, height: 960 })
|
||||
await page.goto (url, { waitUntil: 'networkidle2', timeout: 15000 })
|
||||
|
||||
await page.screenshot ({ path: output })
|
||||
await browser.close ()
|
||||
}) ()
|
||||
@@ -1,8 +0,0 @@
|
||||
FactoryBot.define do
|
||||
factory :post_tag_section do
|
||||
association :post
|
||||
association :tag
|
||||
begin_ms { 1_000 }
|
||||
end_ms { 2_000 }
|
||||
end
|
||||
end
|
||||
@@ -1,6 +0,0 @@
|
||||
FactoryBot.define do
|
||||
factory :post_tag do
|
||||
association :post
|
||||
association :tag
|
||||
end
|
||||
end
|
||||
@@ -1,8 +0,0 @@
|
||||
FactoryBot.define do
|
||||
factory :post do
|
||||
sequence(:url) { |n| "https://example.com/factory-post-#{ n }" }
|
||||
title { 'factory post' }
|
||||
thumbnail_base { nil }
|
||||
uploaded_user { nil }
|
||||
end
|
||||
end
|
||||
@@ -1,41 +0,0 @@
|
||||
RSpec.describe PostTag, type: :model do
|
||||
describe '#sections' do
|
||||
it 'loads sections by post_id and tag_id' do
|
||||
post_tag = create(:post_tag)
|
||||
section = create(:post_tag_section,
|
||||
post: post_tag.post,
|
||||
tag: post_tag.tag,
|
||||
begin_ms: 1000,
|
||||
end_ms: 2000)
|
||||
|
||||
expect(post_tag.sections).to contain_exactly(section)
|
||||
end
|
||||
|
||||
it 'does not load sections for another tag on the same post' do
|
||||
post = create(:post)
|
||||
tag = create(:tag)
|
||||
other_tag = create(:tag)
|
||||
|
||||
post_tag = create(:post_tag, post:, tag:)
|
||||
create(:post_tag_section,
|
||||
post:,
|
||||
tag: other_tag,
|
||||
begin_ms: 1000,
|
||||
end_ms: 2000)
|
||||
|
||||
expect(post_tag.sections).to be_empty
|
||||
end
|
||||
|
||||
it 'allows open-ended sections' do
|
||||
post_tag = create(:post_tag)
|
||||
section = create(:post_tag_section,
|
||||
post: post_tag.post,
|
||||
tag: post_tag.tag,
|
||||
begin_ms: 1000,
|
||||
end_ms: nil)
|
||||
|
||||
expect(section).to be_valid
|
||||
expect(post_tag.sections).to contain_exactly(section)
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,34 +0,0 @@
|
||||
require 'rails_helper'
|
||||
|
||||
RSpec.describe Setting, type: :model do
|
||||
it 'accepts the default typed user settings' do
|
||||
setting = described_class.new({ user: create(:user) }.merge(described_class.defaults))
|
||||
|
||||
expect(setting).to be_valid
|
||||
end
|
||||
|
||||
it 'requires one settings row per user' do
|
||||
user = create(:user)
|
||||
described_class.create!({ user: }.merge(described_class.defaults))
|
||||
|
||||
duplicate = described_class.new({ user: }.merge(described_class.defaults))
|
||||
|
||||
expect(duplicate).not_to be_valid
|
||||
expect(duplicate.errors[:user_id]).to be_present
|
||||
end
|
||||
|
||||
it 'validates enum-like settings columns' do
|
||||
setting = described_class.new(
|
||||
{ user: create(:user),
|
||||
theme: 'neon',
|
||||
auto_fetch_title: 'sometimes',
|
||||
auto_fetch_thumbnail: 'sometimes',
|
||||
wiki_editor_mode: 'sideways' })
|
||||
|
||||
expect(setting).not_to be_valid
|
||||
expect(setting.errors[:theme]).to be_present
|
||||
expect(setting.errors[:auto_fetch_title]).to be_present
|
||||
expect(setting.errors[:auto_fetch_thumbnail]).to be_present
|
||||
expect(setting.errors[:wiki_editor_mode]).to be_present
|
||||
end
|
||||
end
|
||||
@@ -1,36 +0,0 @@
|
||||
require 'rails_helper'
|
||||
|
||||
RSpec.describe TagImplication, type: :model do
|
||||
it 'rejects a parent tag that would create a cycle' do
|
||||
child = create(:tag, name: 'tag_implication_cycle_child')
|
||||
parent = create(:tag, name: 'tag_implication_cycle_parent')
|
||||
|
||||
described_class.create!(tag: child, parent_tag: parent)
|
||||
|
||||
implication = described_class.new(tag: parent, parent_tag: child)
|
||||
|
||||
expect(implication).not_to be_valid
|
||||
expect(implication.errors[:parent_tag_id]).to include(
|
||||
'親タグに子孫タグを指定すると循環します．'
|
||||
)
|
||||
expect(implication.errors[:base]).to be_present
|
||||
end
|
||||
|
||||
it 'terminates even when existing data already contains a cycle' do
|
||||
child = create(:tag, name: 'tag_implication_existing_cycle_child')
|
||||
parent = create(:tag, name: 'tag_implication_existing_cycle_parent')
|
||||
ancestor = create(:tag, name: 'tag_implication_existing_cycle_ancestor')
|
||||
|
||||
described_class.create!(tag: parent, parent_tag: ancestor)
|
||||
described_class.insert_all!(
|
||||
[
|
||||
{ tag_id: ancestor.id, parent_tag_id: parent.id,
|
||||
created_at: Time.current, updated_at: Time.current }
|
||||
]
|
||||
)
|
||||
|
||||
implication = described_class.new(tag: child, parent_tag: parent)
|
||||
|
||||
expect(implication).to be_valid
|
||||
end
|
||||
end
|
||||
@@ -19,95 +19,6 @@ RSpec.describe Tag, type: :model do
|
||||
expect(error.tag_names).to eq([deprecated_tag.name])
|
||||
}
|
||||
end
|
||||
|
||||
it 'rejects invalid section literals instead of treating them as zero' do
|
||||
expect {
|
||||
described_class.normalise_tags!(
|
||||
['normalise_invalid_section[1:aa-2:00]'],
|
||||
with_sections: true
|
||||
)
|
||||
}.to raise_error(Tag::SectionLiteralParseError)
|
||||
end
|
||||
|
||||
it 'parses open-ended section literals' do
|
||||
result = described_class.normalise_tags!(
|
||||
['伊地知ニジカ[1:00-]'],
|
||||
with_sections: true
|
||||
)
|
||||
|
||||
tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
|
||||
expect(result.fetch(:sections).fetch(tag.id)).to eq([[60_000, nil]])
|
||||
end
|
||||
|
||||
it 'parses omitted begin as zero' do
|
||||
result = described_class.normalise_tags!(
|
||||
['伊地知ニジカ[-1:00]'],
|
||||
with_sections: true
|
||||
)
|
||||
|
||||
tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
|
||||
expect(result.fetch(:sections).fetch(tag.id)).to eq([[0, 60_000]])
|
||||
end
|
||||
|
||||
it 'treats fully open section literals as plain tags' do
|
||||
result = described_class.normalise_tags!(
|
||||
['伊地知ニジカ[-]'],
|
||||
with_sections: true
|
||||
)
|
||||
|
||||
tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
|
||||
expect(result.fetch(:sections)[tag.id]).to be_nil
|
||||
end
|
||||
|
||||
it 'treats [0:00-] as a plain tag' do
|
||||
result = described_class.normalise_tags!(
|
||||
['伊地知ニジカ[0:00-]'],
|
||||
with_sections: true
|
||||
)
|
||||
|
||||
tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
|
||||
expect(result.fetch(:sections)[tag.id]).to be_nil
|
||||
end
|
||||
|
||||
it 'expands zero-width sections to one millisecond' do
|
||||
result = described_class.normalise_tags!(
|
||||
['伊地知ニジカ[1:00-1:00]'],
|
||||
with_sections: true
|
||||
)
|
||||
|
||||
tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
|
||||
expect(result.fetch(:sections).fetch(tag.id)).to eq([[60_000, 60_001]])
|
||||
end
|
||||
|
||||
it 'swaps reversed section boundaries' do
|
||||
result = described_class.normalise_tags!(
|
||||
['伊地知ニジカ[2:00-1:00]'],
|
||||
with_sections: true
|
||||
)
|
||||
|
||||
tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
|
||||
expect(result.fetch(:sections).fetch(tag.id)).to eq([[60_000, 120_000]])
|
||||
end
|
||||
|
||||
it 'merges open-ended sections over later bounded sections' do
|
||||
result = described_class.normalise_tags!(
|
||||
['伊地知ニジカ[1:00-][2:00-3:00]'],
|
||||
with_sections: true
|
||||
)
|
||||
|
||||
tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
|
||||
expect(result.fetch(:sections).fetch(tag.id)).to eq([[60_000, nil]])
|
||||
end
|
||||
|
||||
it 'merges adjacent bounded and open-ended sections' do
|
||||
result = described_class.normalise_tags!(
|
||||
['伊地知ニジカ[1:00-3:00][3:00-]'],
|
||||
with_sections: true
|
||||
)
|
||||
|
||||
tag = result.fetch(:tags).find { _1.name == '伊地知ニジカ' }
|
||||
expect(result.fetch(:sections).fetch(tag.id)).to eq([[60_000, nil]])
|
||||
end
|
||||
end
|
||||
|
||||
describe '.expand_parent_tags' do
|
||||
@@ -143,17 +54,7 @@ RSpec.describe Tag, type: :model do
|
||||
first = create(:tag, name: 'expand_cycle_first')
|
||||
second = create(:tag, name: 'expand_cycle_second')
|
||||
TagImplication.create!(tag: first, parent_tag: second)
|
||||
now = Time.current
|
||||
TagImplication.insert_all!(
|
||||
[
|
||||
{
|
||||
tag_id: second.id,
|
||||
parent_tag_id: first.id,
|
||||
created_at: now,
|
||||
updated_at: now
|
||||
}
|
||||
]
|
||||
)
|
||||
TagImplication.create!(tag: second, parent_tag: first)
|
||||
|
||||
expect(described_class.expand_parent_tags([first])).to contain_exactly(first, second)
|
||||
end
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
require 'rails_helper'
|
||||
|
||||
RSpec.describe UserThemeSlot, type: :model do
|
||||
it 'accepts a theme slot for one user, base theme, and slot number' do
|
||||
slot = described_class.new(user: create(:user),
|
||||
base_theme: 'light',
|
||||
slot_no: 1,
|
||||
tokens: { 'background' => '0 0% 100%' })
|
||||
|
||||
expect(slot).to be_valid
|
||||
end
|
||||
|
||||
it 'requires unique slot numbers per user and base theme' do
|
||||
user = create(:user)
|
||||
described_class.create!(user:,
|
||||
base_theme: 'dark',
|
||||
slot_no: 2,
|
||||
tokens: { 'background' => '222.2 84% 4.9%' })
|
||||
|
||||
duplicate = described_class.new(user:,
|
||||
base_theme: 'dark',
|
||||
slot_no: 2,
|
||||
tokens: { 'background' => '0 0% 100%' })
|
||||
|
||||
expect(duplicate).not_to be_valid
|
||||
expect(duplicate.errors[:user_id]).to be_present
|
||||
end
|
||||
|
||||
it 'validates base theme, slot number, and token object shape' do
|
||||
slot = described_class.new(user: create(:user),
|
||||
base_theme: 'system',
|
||||
slot_no: 4,
|
||||
tokens: 'not-object')
|
||||
|
||||
expect(slot).not_to be_valid
|
||||
expect(slot.errors[:base_theme]).to be_present
|
||||
expect(slot.errors[:slot_no]).to be_present
|
||||
expect(slot.errors[:tokens]).to be_present
|
||||
end
|
||||
end
|
||||
@@ -287,25 +287,6 @@ RSpec.describe 'Materials API', type: :request do
|
||||
expect(json.dig('export_paths', 'legacy_drive')).to eq('伊地知ニジカ/created.png')
|
||||
end
|
||||
|
||||
it 'creates a create tag_version for a newly created material tag' do
|
||||
expect do
|
||||
post '/materials', params: {
|
||||
tag: 'material_create_versioned_tag',
|
||||
file: dummy_upload(filename: 'created.png')
|
||||
}
|
||||
end.to change(TagVersion, :count).by(1)
|
||||
|
||||
expect(response).to have_http_status(:created)
|
||||
|
||||
tag = Tag.joins(:tag_name).find_by!(tag_names: { name: 'material_create_versioned_tag' })
|
||||
version = tag.tag_versions.order(:version_no).last
|
||||
|
||||
expect(version.event_type).to eq('create')
|
||||
expect(version.name).to eq('material_create_versioned_tag')
|
||||
expect(version.category).to eq('material')
|
||||
expect(version.created_by_user).to eq(member_user)
|
||||
end
|
||||
|
||||
it 'snapshots attached file metadata and sha256' do
|
||||
post '/materials', params: {
|
||||
tag: 'material_create_file_version',
|
||||
@@ -485,73 +466,6 @@ RSpec.describe 'Materials API', type: :request do
|
||||
expect(json.dig('tag', 'name')).to eq('material_update_new')
|
||||
end
|
||||
|
||||
it 'creates a create tag_version when update creates a new tag' do
|
||||
expect do
|
||||
put "/materials/#{ material.id }", params: {
|
||||
tag: 'material_update_versioned_tag',
|
||||
file: dummy_upload(filename: 'updated.png')
|
||||
}
|
||||
end.to change(Tag, :count).by(1)
|
||||
.and change(TagName, :count).by(1)
|
||||
.and change(TagVersion, :count).by(1)
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
|
||||
tag = Tag.joins(:tag_name).find_by!(tag_names: { name: 'material_update_versioned_tag' })
|
||||
version = tag.tag_versions.order(:version_no).last
|
||||
|
||||
expect(version.event_type).to eq('create')
|
||||
expect(version.name).to eq('material_update_versioned_tag')
|
||||
expect(version.category).to eq('material')
|
||||
expect(version.created_by_user).to eq(member_user)
|
||||
end
|
||||
|
||||
it 'backfills a create tag_version for an existing material tag without history' do
|
||||
existing_tag =
|
||||
Tag.create!(tag_name: TagName.create!(name: 'material_update_existing_no_history'),
|
||||
category: :material)
|
||||
|
||||
expect(existing_tag.tag_versions).to be_empty
|
||||
|
||||
expect do
|
||||
put "/materials/#{ material.id }", params: {
|
||||
tag: 'material_update_existing_no_history',
|
||||
file: dummy_upload(filename: 'updated.png')
|
||||
}
|
||||
end.to change(TagVersion, :count).by(1)
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
|
||||
version = existing_tag.reload.tag_versions.order(:version_no).last
|
||||
expect(version.event_type).to eq('create')
|
||||
expect(version.name).to eq('material_update_existing_no_history')
|
||||
expect(version.category).to eq('material')
|
||||
expect(version.created_by_user).to eq(member_user)
|
||||
end
|
||||
|
||||
it 'backfills a create tag_version for an existing character tag without history' do
|
||||
existing_tag =
|
||||
Tag.create!(tag_name: TagName.create!(name: 'material_update_character_no_history'),
|
||||
category: :character)
|
||||
|
||||
expect(existing_tag.tag_versions).to be_empty
|
||||
|
||||
expect do
|
||||
put "/materials/#{ material.id }", params: {
|
||||
tag: 'material_update_character_no_history',
|
||||
file: dummy_upload(filename: 'updated.png')
|
||||
}
|
||||
end.to change(TagVersion, :count).by(1)
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
|
||||
version = existing_tag.reload.tag_versions.order(:version_no).last
|
||||
expect(version.event_type).to eq('create')
|
||||
expect(version.name).to eq('material_update_character_no_history')
|
||||
expect(version.category).to eq('character')
|
||||
expect(version.created_by_user).to eq(member_user)
|
||||
end
|
||||
|
||||
it 'detaches the existing file without purging blob when url replaces file' do
|
||||
old_blob_id = material.file.blob.id
|
||||
|
||||
@@ -580,7 +494,6 @@ RSpec.describe 'Materials API', type: :request do
|
||||
it 'does not increase version for the same snapshot update' do
|
||||
MaterialVersionRecorder.record!(material:, event_type: :create,
|
||||
created_by_user: member_user)
|
||||
TagVersioning.ensure_snapshot!(tag, created_by_user: member_user)
|
||||
|
||||
expect do
|
||||
put "/materials/#{ material.id }", params: {
|
||||
@@ -588,8 +501,6 @@ RSpec.describe 'Materials API', type: :request do
|
||||
}
|
||||
end.not_to change(MaterialVersion, :count)
|
||||
|
||||
expect(tag.reload.tag_versions.count).to eq(1)
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
expect(material.reload.version_no).to eq(1)
|
||||
end
|
||||
|
||||
@@ -54,7 +54,6 @@ RSpec.describe 'Posts API', type: :request do
|
||||
title: post.title,
|
||||
url: post.url,
|
||||
thumbnail_base: post.thumbnail_base,
|
||||
video_ms: post.video_ms,
|
||||
tags: post.snapshot_tag_names.join(' '),
|
||||
parent_post_ids: post.snapshot_parent_post_ids.join(' '),
|
||||
original_created_from: post.original_created_from,
|
||||
@@ -146,22 +145,6 @@ RSpec.describe 'Posts API', type: :request do
|
||||
expect(all_tag_names).to include("spec_tag")
|
||||
end
|
||||
|
||||
it 'keeps children and sections keys in non-detail tag responses' do
|
||||
PostTagSection.create!(post: hit_post, tag:, begin_ms: 1_000, end_ms: nil)
|
||||
|
||||
get '/posts'
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
|
||||
hit_json = json.fetch('posts').find { |post| post['id'] == hit_post.id }
|
||||
tag_json = hit_json.fetch('tags').find { |item| item['name'] == 'spec_tag' }
|
||||
|
||||
expect(tag_json.fetch('children')).to eq([])
|
||||
expect(tag_json.fetch('sections')).to eq([
|
||||
{ 'begin_ms' => 1_000, 'end_ms' => nil }
|
||||
])
|
||||
end
|
||||
|
||||
context "when q is provided" do
|
||||
it "filters posts by q (hit case)" do
|
||||
get "/posts", params: { tags: "spec_tag" }
|
||||
@@ -862,198 +845,6 @@ RSpec.describe 'Posts API', type: :request do
|
||||
expect(saved_names).not_to include('deprecated_parent', 'deprecated_grandparent')
|
||||
end
|
||||
|
||||
it 'returns validation error for an invalid section literal' do
|
||||
sign_in_as(member)
|
||||
|
||||
post '/posts', params: post_write_params(
|
||||
title: 'invalid section literal',
|
||||
url: 'https://example.com/invalid-section-literal',
|
||||
tags: 'spec_tag[1:aa-2:00]',
|
||||
thumbnail: dummy_upload
|
||||
)
|
||||
|
||||
expect(response).to have_http_status(:unprocessable_entity)
|
||||
expect(json).to include(
|
||||
'type' => 'validation_error',
|
||||
'message' => '入力内容を確認してください．'
|
||||
)
|
||||
expect(json.fetch('errors')).to include(
|
||||
'tags' => ['タグ区間の記法が不正です．']
|
||||
)
|
||||
end
|
||||
|
||||
it 'creates a video post with duration' do
|
||||
sign_in_as(member)
|
||||
|
||||
post '/posts', params: post_write_params(
|
||||
title: 'video post',
|
||||
url: 'https://example.com/video-post',
|
||||
tags: '動画 spec_tag',
|
||||
duration: '3:00.500',
|
||||
thumbnail: dummy_upload
|
||||
)
|
||||
|
||||
expect(response).to have_http_status(:created)
|
||||
expect(Post.find(json.fetch('id')).video_ms).to eq(180_500)
|
||||
expect(json.fetch('video_ms')).to eq(180_500)
|
||||
end
|
||||
|
||||
it 'creates a video post with number input duration seconds' do
|
||||
sign_in_as(member)
|
||||
|
||||
post '/posts', params: post_write_params(
|
||||
title: 'video post seconds',
|
||||
url: 'https://example.com/video-post-seconds',
|
||||
tags: '動画 spec_tag',
|
||||
duration: '180.5',
|
||||
thumbnail: dummy_upload
|
||||
)
|
||||
|
||||
expect(response).to have_http_status(:created)
|
||||
expect(Post.find(json.fetch('id')).video_ms).to eq(180_500)
|
||||
expect(json.fetch('video_ms')).to eq(180_500)
|
||||
end
|
||||
|
||||
it 'clears video_ms when the saved tags do not include 動画' do
|
||||
sign_in_as(member)
|
||||
|
||||
post '/posts', params: post_write_params(
|
||||
title: 'non video post',
|
||||
url: 'https://example.com/non-video-post',
|
||||
tags: 'spec_tag',
|
||||
duration: '3:00',
|
||||
thumbnail: dummy_upload
|
||||
)
|
||||
|
||||
expect(response).to have_http_status(:created)
|
||||
expect(Post.find(json.fetch('id')).video_ms).to be_nil
|
||||
end
|
||||
|
||||
it 'returns validation error when a bounded section exceeds duration' do
|
||||
sign_in_as(member)
|
||||
|
||||
post '/posts', params: post_write_params(
|
||||
title: 'too long section',
|
||||
url: 'https://example.com/too-long-section',
|
||||
tags: '動画 伊地知ニジカ[2:50-3:10]',
|
||||
duration: '3:00',
|
||||
thumbnail: dummy_upload
|
||||
)
|
||||
|
||||
expect(response).to have_http_status(:unprocessable_entity)
|
||||
expect(json.fetch('errors')).to include(
|
||||
'video_ms' => ['タグ区間の終端が動画時間を超えてゐます．']
|
||||
)
|
||||
end
|
||||
|
||||
it 'saves open-ended sections with end_ms NULL' do
|
||||
sign_in_as(member)
|
||||
|
||||
post '/posts', params: post_write_params(
|
||||
title: 'open ended section literal',
|
||||
url: 'https://example.com/open-ended-section-literal',
|
||||
tags: '動画 伊地知ニジカ[1:00-]',
|
||||
duration: '3:00',
|
||||
thumbnail: dummy_upload
|
||||
)
|
||||
|
||||
expect(response).to have_http_status(:created)
|
||||
|
||||
created_post = Post.find(json.fetch('id'))
|
||||
tag = Tag.joins(:tag_name).find_by!(tag_names: { name: '伊地知ニジカ' })
|
||||
section = PostTagSection.find_by!(post: created_post, tag:)
|
||||
|
||||
expect(section.begin_ms).to eq(60_000)
|
||||
expect(section.end_ms).to be_nil
|
||||
end
|
||||
|
||||
it 'does not save sections for [-]' do
|
||||
sign_in_as(member)
|
||||
|
||||
post '/posts', params: post_write_params(
|
||||
title: 'fully open section literal',
|
||||
url: 'https://example.com/fully-open-section-literal',
|
||||
tags: '伊地知ニジカ[-]',
|
||||
thumbnail: dummy_upload
|
||||
)
|
||||
|
||||
expect(response).to have_http_status(:created)
|
||||
|
||||
created_post = Post.find(json.fetch('id'))
|
||||
tag = Tag.joins(:tag_name).find_by!(tag_names: { name: '伊地知ニジカ' })
|
||||
expect(PostTagSection.find_by(post: created_post, tag:)).to be_nil
|
||||
end
|
||||
|
||||
it 'does not save sections for [0:00-]' do
|
||||
sign_in_as(member)
|
||||
|
||||
post '/posts', params: post_write_params(
|
||||
title: 'zero open ended section literal',
|
||||
url: 'https://example.com/zero-open-ended-section-literal',
|
||||
tags: '伊地知ニジカ[0:00-]',
|
||||
thumbnail: dummy_upload
|
||||
)
|
||||
|
||||
expect(response).to have_http_status(:created)
|
||||
|
||||
created_post = Post.find(json.fetch('id'))
|
||||
tag = Tag.joins(:tag_name).find_by!(tag_names: { name: '伊地知ニジカ' })
|
||||
expect(PostTagSection.find_by(post: created_post, tag:)).to be_nil
|
||||
end
|
||||
|
||||
it 'returns end_ms null for open-ended sections in show response' do
|
||||
sign_in_as(member)
|
||||
|
||||
post '/posts', params: post_write_params(
|
||||
title: 'show open ended section literal',
|
||||
url: 'https://example.com/show-open-ended-section-literal',
|
||||
tags: '動画 伊地知ニジカ[1:00-]',
|
||||
duration: '3:00',
|
||||
thumbnail: dummy_upload
|
||||
)
|
||||
|
||||
expect(response).to have_http_status(:created)
|
||||
|
||||
get "/posts/#{ json.fetch('id') }"
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
tag_json = json.fetch('tags').find { |item| item['name'] == '伊地知ニジカ' }
|
||||
expect(tag_json.fetch('sections')).to eq([
|
||||
{ 'begin_ms' => 60_000, 'end_ms' => nil }
|
||||
])
|
||||
end
|
||||
|
||||
it 'allows open-ended sections when begin is within duration' do
|
||||
sign_in_as(member)
|
||||
|
||||
post '/posts', params: post_write_params(
|
||||
title: 'valid open ended section literal',
|
||||
url: 'https://example.com/valid-open-ended-section-literal',
|
||||
tags: '動画 伊地知ニジカ[1:00-]',
|
||||
duration: '3:00',
|
||||
thumbnail: dummy_upload
|
||||
)
|
||||
|
||||
expect(response).to have_http_status(:created)
|
||||
end
|
||||
|
||||
it 'rejects open-ended sections when begin equals duration' do
|
||||
sign_in_as(member)
|
||||
|
||||
post '/posts', params: post_write_params(
|
||||
title: 'invalid open ended section literal',
|
||||
url: 'https://example.com/invalid-open-ended-section-literal',
|
||||
tags: '動画 伊地知ニジカ[3:00-]',
|
||||
duration: '3:00',
|
||||
thumbnail: dummy_upload
|
||||
)
|
||||
|
||||
expect(response).to have_http_status(:unprocessable_entity)
|
||||
expect(json.fetch('errors')).to include(
|
||||
'video_ms' => ['タグ区間の開始が動画時間以上です．']
|
||||
)
|
||||
end
|
||||
|
||||
context "when nico tag already exists in tags" do
|
||||
before do
|
||||
Tag.find_undiscard_or_create_by!(
|
||||
|
||||
@@ -1,46 +1,28 @@
|
||||
require 'rails_helper'
|
||||
require "rails_helper"
|
||||
|
||||
|
||||
RSpec.describe 'Preview', type: :request do
|
||||
describe 'GET /preview/title' do
|
||||
it '401 unless logged in' do
|
||||
RSpec.describe "Preview", type: :request do
|
||||
describe "GET /preview/title" do
|
||||
it "401 unless logged in" do
|
||||
sign_out
|
||||
get '/preview/title', params: { url: 'example.com' }
|
||||
get "/preview/title", params: { url: "example.com" }
|
||||
expect(response).to have_http_status(:unauthorized)
|
||||
end
|
||||
|
||||
it '403 when logged in as guest' do
|
||||
sign_in_as(create(:user, :guest))
|
||||
get '/preview/title', params: { url: 'example.com' }
|
||||
expect(response).to have_http_status(:forbidden)
|
||||
end
|
||||
|
||||
it '400 when url blank' do
|
||||
sign_in_as(create(:user, :member))
|
||||
get '/preview/title', params: { url: '' }
|
||||
it "400 when url blank" do
|
||||
sign_in_as(create(:user))
|
||||
get "/preview/title", params: { url: "" }
|
||||
expect(response).to have_http_status(:bad_request)
|
||||
end
|
||||
|
||||
it 'returns parsed title' do
|
||||
sign_in_as(create(:user, :member))
|
||||
allow(Preview::ThumbnailFetcher)
|
||||
.to receive(:title)
|
||||
.with('example.com')
|
||||
.and_return('Hello')
|
||||
it "returns parsed title (stubbing URI.open)" do
|
||||
sign_in_as(create(:user))
|
||||
fake_html = "<html><head><title> Hello </title></head></html>"
|
||||
allow(URI).to receive(:open).and_return(StringIO.new(fake_html))
|
||||
|
||||
get '/preview/title', params: { url: 'example.com' }
|
||||
get "/preview/title", params: { url: "example.com" }
|
||||
expect(response).to have_http_status(:ok)
|
||||
expect(json['title']).to eq('Hello')
|
||||
end
|
||||
|
||||
it '413 when fetched response is too large' do
|
||||
sign_in_as(create(:user, :member))
|
||||
allow(Preview::ThumbnailFetcher)
|
||||
.to receive(:title)
|
||||
.and_raise(Preview::HttpFetcher::ResponseTooLarge, '外部データが大きすぎます．')
|
||||
|
||||
get '/preview/title', params: { url: 'example.com' }
|
||||
expect(response).to have_http_status(:payload_too_large)
|
||||
expect(json["title"]).to eq("Hello")
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@@ -56,17 +56,6 @@ RSpec.describe "TagChildren", type: :request do
|
||||
|
||||
expect(response).to have_http_status(:no_content)
|
||||
end
|
||||
|
||||
it 'returns 422 and does not create relation when the new link makes a cycle' do
|
||||
TagImplication.create!(tag: parent, parent_tag: child)
|
||||
|
||||
expect {
|
||||
do_request
|
||||
}.not_to change(TagImplication, :count)
|
||||
|
||||
expect(response).to have_http_status(:unprocessable_entity)
|
||||
expect(TagImplication.where(tag: child, parent_tag: parent)).not_to exist
|
||||
end
|
||||
end
|
||||
|
||||
context "when Tag.find raises (invalid ids)" do
|
||||
|
||||
@@ -581,58 +581,6 @@ RSpec.describe 'Tags API', type: :request do
|
||||
expect(response).to have_http_status(:ok)
|
||||
expect(wiki_page.reload.wiki_versions.count).to eq(before_wiki_version_count)
|
||||
end
|
||||
|
||||
it 'full update で旧名 alias が残った tag を PATCH で旧名へ戻せる' do
|
||||
put "/tags/#{ tag.id }", params: {
|
||||
name: 'patch_roundtrip_target',
|
||||
category: 'general',
|
||||
aliases: 'unko',
|
||||
parent_tags: '',
|
||||
deprecated: '0',
|
||||
}
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
expect(TagName.find_by!(name: 'spec_tag').canonical).to eq(tag.reload.tag_name)
|
||||
|
||||
patch "/tags/#{ tag.id }", params: { name: 'spec_tag' }
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
|
||||
tag.reload
|
||||
|
||||
expect(tag.name).to eq('spec_tag')
|
||||
expect(tag.tag_name.canonical_id).to be_nil
|
||||
expect(TagName.find_by!(name: 'patch_roundtrip_target').canonical).to eq(tag.tag_name)
|
||||
end
|
||||
|
||||
it '別 tag の正規名には変更できない' do
|
||||
wiki_page =
|
||||
Wiki::Commit.create_content!(
|
||||
tag_name: tag.tag_name,
|
||||
body: 'patch collision wiki',
|
||||
created_by_user: member_user,
|
||||
message: 'init')
|
||||
|
||||
patch "/tags/#{ tag.id }", params: { name: 'unknown' }
|
||||
|
||||
expect(response).to have_http_status(:unprocessable_entity)
|
||||
expect(json.fetch('errors')).to include(
|
||||
'name' => ['その名前は既に使はれてゐます．']
|
||||
)
|
||||
|
||||
expect(tag.reload.name).to eq('spec_tag')
|
||||
expect(tag.tag_name.aliases.map(&:name)).to contain_exactly('unko')
|
||||
expect(wiki_page.reload.tag_name).to eq(tag.tag_name)
|
||||
end
|
||||
|
||||
it 'system tag の name は変更できない' do
|
||||
system_tag = Tag.bot
|
||||
|
||||
patch "/tags/#{ system_tag.id }", params: { name: 'patch_system_tag_renamed' }
|
||||
|
||||
expect(response).to have_http_status(:unprocessable_entity)
|
||||
expect(system_tag.reload.name).to eq('bot操作')
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@@ -797,17 +745,7 @@ RSpec.describe 'Tags API', type: :request do
|
||||
)
|
||||
TagImplication.create!(tag: first, parent_tag: root_material)
|
||||
TagImplication.create!(tag: second, parent_tag: first)
|
||||
now = Time.current
|
||||
TagImplication.insert_all!(
|
||||
[
|
||||
{
|
||||
tag_id: first.id,
|
||||
parent_tag_id: second.id,
|
||||
created_at: now,
|
||||
updated_at: now
|
||||
}
|
||||
]
|
||||
)
|
||||
TagImplication.create!(tag: first, parent_tag: second)
|
||||
|
||||
get '/tags/with-depth', params: { parent: root_material.id }
|
||||
|
||||
@@ -1091,42 +1029,6 @@ RSpec.describe 'Tags API', type: :request do
|
||||
expect(versions.second.created_by_user_id).to eq(member_user.id)
|
||||
end
|
||||
|
||||
it '同じ tag の旧 alias へ戻しても rename できる' do
|
||||
put "/tags/#{ tag.id }", params: {
|
||||
name: 'put_roundtrip_b',
|
||||
category: 'general',
|
||||
aliases: 'unko',
|
||||
parent_tags: '',
|
||||
deprecated: '0',
|
||||
}
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
|
||||
put "/tags/#{ tag.id }", params: {
|
||||
name: 'spec_tag',
|
||||
category: 'general',
|
||||
aliases: 'unko',
|
||||
parent_tags: '',
|
||||
deprecated: '0',
|
||||
}
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
|
||||
tag.reload
|
||||
|
||||
expect(tag.name).to eq('spec_tag')
|
||||
expect(TagName.find_by!(name: 'put_roundtrip_b').canonical).to eq(tag.tag_name)
|
||||
expect(tag.tag_name.aliases.map(&:name)).to contain_exactly('put_roundtrip_b', 'unko')
|
||||
expect(tag.tag_name.aliases.map(&:name)).not_to include('spec_tag')
|
||||
expect(alias_tn.reload.canonical).to eq(tag.tag_name)
|
||||
|
||||
version = tag.tag_versions.order(:version_no).last
|
||||
|
||||
expect(version.event_type).to eq('update')
|
||||
expect(version.name).to eq('spec_tag')
|
||||
expect(version.aliases.split).to contain_exactly('put_roundtrip_b', 'unko')
|
||||
end
|
||||
|
||||
it 'parent tag の snapshot も作成する' do
|
||||
old_parent = Tag.create!(
|
||||
tag_name: TagName.create!(name: 'put_snapshot_old_parent'),
|
||||
@@ -1251,48 +1153,6 @@ RSpec.describe 'Tags API', type: :request do
|
||||
)
|
||||
end
|
||||
|
||||
it 'wiki を持つ tag を旧 alias へ戻しても wiki を新 canonical へ移す' do
|
||||
wiki_page =
|
||||
Wiki::Commit.create_content!(
|
||||
tag_name: tag.tag_name,
|
||||
body: 'wiki body before',
|
||||
created_by_user: member_user,
|
||||
message: 'init')
|
||||
|
||||
expect {
|
||||
put "/tags/#{ tag.id }", params: {
|
||||
name: 'put_wiki_roundtrip_b',
|
||||
category: 'general',
|
||||
aliases: 'unko',
|
||||
parent_tags: '',
|
||||
deprecated: '0',
|
||||
}
|
||||
|
||||
put "/tags/#{ tag.id }", params: {
|
||||
name: 'spec_tag',
|
||||
category: 'general',
|
||||
aliases: 'unko',
|
||||
parent_tags: '',
|
||||
deprecated: '0',
|
||||
}
|
||||
}
|
||||
.to change(TagVersion, :count).by(3)
|
||||
.and change(WikiVersion, :count).by(2)
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
|
||||
tag.reload
|
||||
|
||||
expect(wiki_page.reload.tag_name).to eq(tag.tag_name)
|
||||
expect(TagName.find_by!(name: 'put_wiki_roundtrip_b').wiki_page).to be_nil
|
||||
expect(TagName.find_by!(name: 'put_wiki_roundtrip_b').canonical).to eq(tag.tag_name)
|
||||
|
||||
versions = wiki_page.wiki_versions.order(:version_no).last(2)
|
||||
|
||||
expect(versions.map(&:event_type)).to eq(['update', 'update'])
|
||||
expect(versions.map(&:title)).to eq(['put_wiki_roundtrip_b', 'spec_tag'])
|
||||
end
|
||||
|
||||
it '別名を他 tag から奪った場合、奪はれた側の tag version も作成する' do
|
||||
old_owner = Tag.create!(
|
||||
tag_name: TagName.create!(name: 'put_alias_old_owner'),
|
||||
@@ -1331,49 +1191,9 @@ RSpec.describe 'Tags API', type: :request do
|
||||
expect(old_owner_versions.second.aliases.split).not_to include('put_stolen_alias')
|
||||
end
|
||||
|
||||
it '別 tag の alias 名を rename で奪へる' do
|
||||
old_owner = Tag.create!(
|
||||
tag_name: TagName.create!(name: 'put_alias_collision_owner'),
|
||||
category: :general
|
||||
)
|
||||
stolen_alias = TagName.create!(
|
||||
name: 'put_alias_collision_name',
|
||||
canonical: old_owner.tag_name
|
||||
)
|
||||
wiki_page =
|
||||
Wiki::Commit.create_content!(
|
||||
tag_name: tag.tag_name,
|
||||
body: 'put collision wiki',
|
||||
created_by_user: member_user,
|
||||
message: 'init')
|
||||
|
||||
put "/tags/#{ tag.id }", params: {
|
||||
name: 'put_alias_collision_name',
|
||||
category: 'general',
|
||||
aliases: 'unko',
|
||||
parent_tags: '',
|
||||
deprecated: '0',
|
||||
}
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
|
||||
tag.reload
|
||||
old_owner.reload
|
||||
stolen_alias.reload
|
||||
|
||||
expect(tag.name).to eq('put_alias_collision_name')
|
||||
expect(stolen_alias.canonical_id).to be_nil
|
||||
expect(TagName.find_by!(name: 'spec_tag').canonical).to eq(tag.tag_name)
|
||||
expect(old_owner.tag_name.aliases.map(&:name)).not_to include('put_alias_collision_name')
|
||||
|
||||
old_owner_versions = old_owner.tag_versions.order(:version_no)
|
||||
|
||||
expect(old_owner_versions.last.event_type).to eq('update')
|
||||
expect(old_owner_versions.last.aliases.split).not_to include('put_alias_collision_name')
|
||||
expect(wiki_page.reload.tag_name).to eq(tag.tag_name)
|
||||
end
|
||||
|
||||
it 'parent_tags に指定すると循環する tag は 422 にする' do
|
||||
pending '#332 で対応予定'
|
||||
|
||||
child = Tag.create!(
|
||||
tag_name: TagName.create!(name: 'put_cycle_child'),
|
||||
category: :general
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
require 'rails_helper'
|
||||
|
||||
RSpec.describe 'user settings', type: :request do
|
||||
describe 'GET /users/settings' do
|
||||
it 'requires a current user' do
|
||||
sign_out
|
||||
|
||||
get '/users/settings'
|
||||
|
||||
expect(response).to have_http_status(:unauthorized)
|
||||
end
|
||||
|
||||
it 'returns defaults and creates a missing settings row' do
|
||||
user = create(:user)
|
||||
sign_in_as(user)
|
||||
|
||||
expect {
|
||||
get '/users/settings'
|
||||
}.to change(Setting, :count).by(1)
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
expect(json).to eq(
|
||||
'theme' => 'system',
|
||||
'auto_fetch_title' => 'manual',
|
||||
'auto_fetch_thumbnail' => 'manual',
|
||||
'wiki_editor_mode' => 'split')
|
||||
expect(user.reload.setting).to be_present
|
||||
end
|
||||
end
|
||||
|
||||
describe 'PATCH /users/settings' do
|
||||
it 'requires a current user' do
|
||||
sign_out
|
||||
|
||||
patch '/users/settings', params: { theme: 'dark' }, as: :json
|
||||
|
||||
expect(response).to have_http_status(:unauthorized)
|
||||
end
|
||||
|
||||
it 'updates multiple typed settings at once' do
|
||||
user = create(:user)
|
||||
sign_in_as(user)
|
||||
|
||||
patch '/users/settings',
|
||||
params: {
|
||||
theme: 'dark',
|
||||
auto_fetch_title: 'auto',
|
||||
auto_fetch_thumbnail: 'off',
|
||||
wiki_editor_mode: 'preview' },
|
||||
as: :json
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
expect(json).to include(
|
||||
'theme' => 'dark',
|
||||
'auto_fetch_title' => 'auto',
|
||||
'auto_fetch_thumbnail' => 'off',
|
||||
'wiki_editor_mode' => 'preview')
|
||||
expect(user.reload.setting).to have_attributes(
|
||||
theme: 'dark',
|
||||
auto_fetch_title: 'auto',
|
||||
auto_fetch_thumbnail: 'off',
|
||||
wiki_editor_mode: 'preview')
|
||||
end
|
||||
|
||||
it 'does not treat Rails parameter wrapping as an editable setting' do
|
||||
user = create(:user)
|
||||
sign_in_as(user)
|
||||
|
||||
patch '/users/settings',
|
||||
params: { theme: 'light', user_setting: { theme: 'dark' } },
|
||||
as: :json
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
expect(user.reload.setting.theme).to eq('light')
|
||||
end
|
||||
|
||||
it 'returns validation_error for type mismatches' do
|
||||
sign_in_as(create(:user))
|
||||
|
||||
patch '/users/settings', params: { theme: 1 }, as: :json
|
||||
|
||||
expect(response).to have_http_status(:unprocessable_entity)
|
||||
expect(json).to include('type' => 'validation_error')
|
||||
expect(json.fetch('errors')).to include(
|
||||
'theme' => ['値の型が不正です．'])
|
||||
end
|
||||
|
||||
it 'returns validation_error for invalid enum values' do
|
||||
sign_in_as(create(:user))
|
||||
|
||||
patch '/users/settings', params: { theme: 'neon' }, as: :json
|
||||
|
||||
expect(response).to have_http_status(:unprocessable_entity)
|
||||
expect(json).to include('type' => 'validation_error')
|
||||
expect(json.fetch('errors').fetch('theme')).to be_present
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,104 +0,0 @@
|
||||
require 'rails_helper'
|
||||
|
||||
RSpec.describe 'user theme slots', type: :request do
|
||||
describe 'GET /users/theme_slots' do
|
||||
it 'requires a current user' do
|
||||
sign_out
|
||||
|
||||
get '/users/theme_slots'
|
||||
|
||||
expect(response).to have_http_status(:unauthorized)
|
||||
end
|
||||
|
||||
it 'returns only the current user slots in stable order' do
|
||||
user = create(:user)
|
||||
other_user = create(:user)
|
||||
sign_in_as(user)
|
||||
UserThemeSlot.create!(user:, base_theme: 'light', slot_no: 2, tokens: { 'a' => 1 })
|
||||
UserThemeSlot.create!(user:, base_theme: 'dark', slot_no: 1, tokens: { 'b' => 2 })
|
||||
UserThemeSlot.create!(user: other_user,
|
||||
base_theme: 'dark',
|
||||
slot_no: 3,
|
||||
tokens: { 'c' => 3 })
|
||||
|
||||
get '/users/theme_slots'
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
expect(json.map { |slot| [slot.fetch('base_theme'), slot.fetch('slot_no')] }).to eq(
|
||||
[['dark', 1], ['light', 2]])
|
||||
expect(json.map { |slot| slot.fetch('tokens') }).to eq(
|
||||
[{ 'b' => 2 }, { 'a' => 1 }])
|
||||
end
|
||||
end
|
||||
|
||||
describe 'PUT /users/theme_slots/:base_theme/:slot_no' do
|
||||
it 'requires a current user' do
|
||||
sign_out
|
||||
|
||||
put '/users/theme_slots/light/1',
|
||||
params: { tokens: { background: '0 0% 100%' } },
|
||||
as: :json
|
||||
|
||||
expect(response).to have_http_status(:unauthorized)
|
||||
end
|
||||
|
||||
it 'creates a theme slot' do
|
||||
user = create(:user)
|
||||
sign_in_as(user)
|
||||
|
||||
expect {
|
||||
put '/users/theme_slots/light/1',
|
||||
params: { tokens: { background: '0 0% 100%', tagColours: { nico: '#ffffff' } } },
|
||||
as: :json
|
||||
}.to change(UserThemeSlot, :count).by(1)
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
expect(json).to include('base_theme' => 'light', 'slot_no' => 1)
|
||||
expect(json.fetch('tokens')).to include(
|
||||
'background' => '0 0% 100%',
|
||||
'tagColours' => { 'nico' => '#ffffff' })
|
||||
expect(user.theme_slots.find_by!(base_theme: 'light', slot_no: 1).tokens).to include(
|
||||
'background' => '0 0% 100%')
|
||||
end
|
||||
|
||||
it 'updates an existing theme slot instead of creating a duplicate' do
|
||||
user = create(:user)
|
||||
sign_in_as(user)
|
||||
UserThemeSlot.create!(user:, base_theme: 'dark', slot_no: 2, tokens: { 'old' => true })
|
||||
|
||||
expect {
|
||||
put '/users/theme_slots/dark/2',
|
||||
params: { tokens: { background: '222.2 84% 4.9%' } },
|
||||
as: :json
|
||||
}.not_to change(UserThemeSlot, :count)
|
||||
|
||||
expect(response).to have_http_status(:ok)
|
||||
expect(user.theme_slots.find_by!(base_theme: 'dark', slot_no: 2).tokens).to eq(
|
||||
'background' => '222.2 84% 4.9%')
|
||||
end
|
||||
|
||||
it 'rejects invalid path parameters and token shapes' do
|
||||
sign_in_as(create(:user))
|
||||
|
||||
put '/users/theme_slots/system/4',
|
||||
params: { tokens: 'not-object' },
|
||||
as: :json
|
||||
|
||||
expect(response).to have_http_status(:unprocessable_entity)
|
||||
expect(json.fetch('errors')).to include(
|
||||
'base_theme' => ['値が不正です．'])
|
||||
end
|
||||
|
||||
it 'rejects non-object tokens for valid slots' do
|
||||
sign_in_as(create(:user))
|
||||
|
||||
put '/users/theme_slots/light/1',
|
||||
params: { tokens: 'not-object' },
|
||||
as: :json
|
||||
|
||||
expect(response).to have_http_status(:unprocessable_entity)
|
||||
expect(json.fetch('errors')).to include(
|
||||
'tokens' => ['JSON object で指定してください．'])
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,23 +0,0 @@
|
||||
require 'rails_helper'
|
||||
|
||||
RSpec.describe Preview::HttpFetcher do
|
||||
describe '.fetch' do
|
||||
it 'raises FetchFailed when redirect location is invalid' do
|
||||
redirect = Net::HTTPFound.new('1.1', '302', 'Found')
|
||||
redirect['location'] = 'http://[invalid'
|
||||
|
||||
allow(Preview::UrlSafety).to receive(:validate)
|
||||
.with('https://example.com/page')
|
||||
.and_return([URI.parse('https://example.com/page'), ['203.0.113.10']])
|
||||
allow(described_class).to receive(:request)
|
||||
.and_return(redirect)
|
||||
allow(Rails.logger).to receive(:warn)
|
||||
|
||||
expect {
|
||||
described_class.fetch('https://example.com/page')
|
||||
}.to raise_error(Preview::HttpFetcher::FetchFailed)
|
||||
expect(Rails.logger).to have_received(:warn)
|
||||
.with(/invalid_redirect_location/)
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,51 +0,0 @@
|
||||
require 'rails_helper'
|
||||
|
||||
RSpec.describe Preview::ThumbnailFetcher do
|
||||
describe '.fetch' do
|
||||
it 'rejects svg thumbnails' do
|
||||
page = Preview::HttpFetcher::Response.new(
|
||||
'<meta property="og:image" content="https://example.com/thumb.svg">',
|
||||
'text/html',
|
||||
'https://example.com/page')
|
||||
svg = Preview::HttpFetcher::Response.new(
|
||||
'<svg></svg>',
|
||||
'image/svg+xml',
|
||||
'https://example.com/thumb.svg')
|
||||
|
||||
allow(Preview::UrlSafety).to receive(:validate)
|
||||
.and_return([URI.parse('https://example.com/page'), ['203.0.113.10']])
|
||||
allow(Preview::HttpFetcher).to receive(:fetch)
|
||||
.with('https://example.com/page', max_bytes: described_class::HTML_MAX_BYTES)
|
||||
.and_return(page)
|
||||
allow(Preview::HttpFetcher).to receive(:fetch)
|
||||
.with('https://example.com/thumb.svg')
|
||||
.and_return(svg)
|
||||
|
||||
expect {
|
||||
described_class.fetch('https://example.com/page')
|
||||
}.to raise_error(Preview::ThumbnailFetcher::GenerationFailed)
|
||||
end
|
||||
|
||||
it 'accepts allowed image content type with parameters' do
|
||||
page = Preview::HttpFetcher::Response.new(
|
||||
'<meta property="og:image" content="https://example.com/thumb.jpg">',
|
||||
'text/html',
|
||||
'https://example.com/page')
|
||||
image = Preview::HttpFetcher::Response.new(
|
||||
'jpeg-bytes',
|
||||
'image/jpeg; charset=binary',
|
||||
'https://example.com/thumb.jpg')
|
||||
|
||||
allow(Preview::UrlSafety).to receive(:validate)
|
||||
.and_return([URI.parse('https://example.com/page'), ['203.0.113.10']])
|
||||
allow(Preview::HttpFetcher).to receive(:fetch)
|
||||
.with('https://example.com/page', max_bytes: described_class::HTML_MAX_BYTES)
|
||||
.and_return(page)
|
||||
allow(Preview::HttpFetcher).to receive(:fetch)
|
||||
.with('https://example.com/thumb.jpg')
|
||||
.and_return(image)
|
||||
|
||||
expect(described_class.fetch('https://example.com/page')).to eq('jpeg-bytes')
|
||||
end
|
||||
end
|
||||
end
|
||||
@@ -1,15 +0,0 @@
|
||||
require 'rails_helper'
|
||||
|
||||
RSpec.describe Preview::UrlSafety do
|
||||
describe '.validate' do
|
||||
it 'raises UnsafeUrl when DNS resolution fails' do
|
||||
allow(Resolv).to receive(:getaddresses)
|
||||
.with('missing.example')
|
||||
.and_raise(Resolv::ResolvError)
|
||||
|
||||
expect {
|
||||
described_class.validate('https://missing.example')
|
||||
}.to raise_error(Preview::UrlSafety::UnsafeUrl)
|
||||
end
|
||||
end
|
||||
end
|
||||
+2
-434
@@ -118,455 +118,23 @@ pass or the remaining failure is clearly blocked.
|
||||
short Japanese labels that fit the control.
|
||||
- Preserve existing Japanese tone and orthography in nearby UI text, including
|
||||
old-kana wording where the file already uses it.
|
||||
- When adding dynamic tag colour classes, update `tailwind.config.js` safelist
|
||||
- When adding dynamic tag color classes, update `tailwind.config.js` safelist
|
||||
if the class cannot be statically detected.
|
||||
- Do not introduce new UI libraries or production dependencies without approval.
|
||||
|
||||
## TypeScript and TSX formatting
|
||||
## TSX formatting
|
||||
|
||||
- The delimiter-placement and line-breaking rules in this section apply to
|
||||
both plain TypeScript `.ts` and TSX `.tsx`, unless a bullet explicitly says
|
||||
it is JSX- or React-specific.
|
||||
- Preserve compact TSX expression shapes such as inline ternary branches and
|
||||
closing `</div>)` forms when nearby code uses them.
|
||||
- Treat TypeScript and TSX formatting rules as hard constraints, not
|
||||
preferences. Before finishing a TypeScript or TSX edit, inspect the edited
|
||||
hunks for closing `)`, `]`, and `}` placement and fix violations instead of
|
||||
relying on formatter defaults.
|
||||
- After every TypeScript or TSX edit, perform a style-only self-review of the
|
||||
edited hunks before running verification or reporting completion. The task is
|
||||
not complete while any edited TypeScript or TSX hunk violates these local
|
||||
formatting rules.
|
||||
- The TypeScript/TSX self-review must classify every edited leading or trailing
|
||||
`)`, `]`, and `}` by syntax role before deciding whether it is valid. Do not
|
||||
apply a rule by glyph alone. A closing `)` for a function parameter list is
|
||||
different from a closing `)` for a function call. A closing `}` for a block
|
||||
is different from a closing `}` for an object, type literal, import list, or
|
||||
destructuring pattern.
|
||||
- The TSX-specific self-review must confirm there are no common Prettier-style
|
||||
React component declarations with a multi-line destructured parameter.
|
||||
- The TypeScript/TSX self-review must confirm multi-line function declaration
|
||||
parameter `)` placement follows the detailed parameter-list rules below.
|
||||
- The TypeScript/TSX self-review must confirm call-expression `)` is never at
|
||||
the beginning of a line.
|
||||
- The TypeScript/TSX self-review must confirm
|
||||
object/type/import/destructuring `}` is not at the beginning of a line.
|
||||
- The TypeScript/TSX self-review must confirm multi-line
|
||||
function/lambda/callback/block `}` is on its own line and never at the end
|
||||
of the previous line.
|
||||
- The TypeScript/TSX self-review must confirm array `]` is not at the
|
||||
beginning of a line.
|
||||
- The TSX-specific self-review must confirm JSX closing markers and closing
|
||||
parentheses keep the surrounding compact style.
|
||||
- The TypeScript/TSX self-review must confirm leading indentation follows
|
||||
4-space logical indentation with tabs only as leading 8-space compression.
|
||||
- For long Tailwind `className` strings, wrap across lines only when needed.
|
||||
- Keep continuation indentation aligned with the 4-space logical indentation
|
||||
rule, using tabs only as leading 8-space compression.
|
||||
- In TypeScript and TSX function declarations, including `const` arrow
|
||||
function declarations, classify the parameter list before placing the closing
|
||||
`)`.
|
||||
- If the parameter list itself is given its own multi-line block after the
|
||||
function's opening `(`, put the closing parameter `)` at the beginning of its
|
||||
own line before the return type or `=>`.
|
||||
- If the only line break is inside a parameter's inline type, object type, or
|
||||
destructuring shape, and the parameter list itself is not split as a separate
|
||||
block, keep the closing parameter `)` on the same line as that parameter's
|
||||
final `}`. In this case, moving `)` to a new line is wrong.
|
||||
- Do not write React component declarations in the common Prettier form
|
||||
`const Component = ({ ... }) => (` when the destructured parameter spans
|
||||
multiple lines. Use the project form with the opening `(` after `=`, the
|
||||
destructured object as the argument, and the closing parameter `)` on its own
|
||||
line before `=>`.
|
||||
- In TypeScript and TSX, never place a closing parenthesis at the beginning of
|
||||
a line except for a multi-line function declaration parameter list.
|
||||
- Never place a closing square bracket at the beginning of a line.
|
||||
- For object literals, type literals, import/export named bindings, destructuring
|
||||
patterns, and other associative-array-style braces, do not place the closing
|
||||
brace at the beginning of a line. Keep `}` on the same line as the final
|
||||
property, binding, or specifier unless that would violate the line limit.
|
||||
Function, lambda, callback, and block closing braces are exempt and should
|
||||
stay on their own line when that fits the local style. When a function,
|
||||
lambda, callback, or block body spans multiple lines, do not put its closing
|
||||
`}` at the end of the previous line.
|
||||
- For arrays and tuple-like lists, do not place the closing `]` at the
|
||||
beginning of a line. Keep `]` on the same line as the final element unless
|
||||
that would violate the line limit.
|
||||
- For function and method calls, do not place the closing `)` at the beginning
|
||||
of a line. The only TypeScript/TSX exception is the closing parameter `)` of a
|
||||
multi-line function declaration.
|
||||
- Do not add braces around `if`, `else`, or `for` bodies when the body is a
|
||||
single physical line.
|
||||
- Always add braces around `if`, `else`, or `for` bodies when the body spans
|
||||
two or more physical lines, even if it is one statement.
|
||||
- Use correct British English spelling for new identifiers, filenames,
|
||||
component names, helper names, comments, and developer-facing prose unless
|
||||
editing an already established American-English API that must keep its
|
||||
existing spelling for compatibility.
|
||||
- Prefer British English spellings such as `behaviour`, `colour`, `realise`,
|
||||
`theatre`, `centre`, `favourite`, `optimise`, and `catalogue`.
|
||||
- Avoid American or Canadian spellings such as `behavior`, `color`, `realize`,
|
||||
`theater`, `center`, `favorite`, `optimize`, and `catalog`.
|
||||
- Even when an external library or API uses the wrong spelling, prefer to
|
||||
correct it at the local boundary and use proper British English names in this
|
||||
frontend codebase. For example, prefer
|
||||
`import { color: colour } from '@external-lib'` over spreading `color`
|
||||
through local code.
|
||||
- Apply the same boundary correction to object destructuring, wrapper helpers,
|
||||
adapter layers, and local variable names when doing so does not break the
|
||||
external contract.
|
||||
- In this frontend, prefer names such as `BehaviourSettingsSection.tsx`, not
|
||||
`BehaviorSettingsSection.tsx`.
|
||||
- Avoid reformatting unrelated JSX.
|
||||
|
||||
### Delimiter decision table
|
||||
|
||||
Use this table before accepting any edited TypeScript or TSX hunk. The table is
|
||||
more authoritative than formatter habit. Unless a subsection explicitly
|
||||
mentions JSX, it applies equally to `.ts` and `.tsx`.
|
||||
|
||||
#### Import and export named bindings
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
} from '@/components/ui'
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
import { Button,
|
||||
Card } from '@/components/ui'
|
||||
```
|
||||
|
||||
Also acceptable when short:
|
||||
|
||||
```ts
|
||||
import { Button, Card } from '@/components/ui'
|
||||
```
|
||||
|
||||
Rule: named-binding `}` is associative-array-style syntax. It must not be alone
|
||||
at the beginning of a line. Prefer keeping `{` with the first binding and `}`
|
||||
with the final binding when this fits the line limit.
|
||||
|
||||
#### Type literals
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
type Props = {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
}
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
type Props = {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void }
|
||||
```
|
||||
|
||||
Rule: type-literal `}` is not a block close. It must stay on the same line as
|
||||
the final property unless that would break the hard line limit.
|
||||
|
||||
#### Object literals
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const value = {
|
||||
open,
|
||||
activeScope,
|
||||
}
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const value = {
|
||||
open,
|
||||
activeScope }
|
||||
```
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const value = useMemo (() => ({
|
||||
open,
|
||||
activeScope,
|
||||
}), [open, activeScope])
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const value = useMemo (() => ({
|
||||
open,
|
||||
activeScope }), [open, activeScope])
|
||||
```
|
||||
|
||||
Rule: object-literal `}` is associative-array-style syntax. It must not be on a
|
||||
line by itself. Keep it with the final property, and keep call `)` off the
|
||||
beginning of a line.
|
||||
|
||||
#### Destructuring parameters
|
||||
|
||||
Bad:
|
||||
|
||||
```tsx
|
||||
const Component: FC<Props> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
}) => {
|
||||
return null
|
||||
}
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```tsx
|
||||
const Component: FC<Props> = (
|
||||
{ open,
|
||||
onOpenChange },
|
||||
) => {
|
||||
return null
|
||||
}
|
||||
```
|
||||
|
||||
Rule: when a React component or helper takes a destructured object parameter
|
||||
that spans multiple lines, do not use the Prettier-style `= ({ ... }) =>`
|
||||
shape. Put the function parameter list on its own lines. The destructuring `}`
|
||||
stays with the final binding. The parameter-list `)` is then allowed and
|
||||
required at the beginning of its own line.
|
||||
|
||||
#### Inline typed destructuring parameter
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const RouteTransitionWrapper = ({ user, setUser }: {
|
||||
user: User | null
|
||||
setUser: Dispatch<SetStateAction<User | null>> }) => {
|
||||
return null
|
||||
}
|
||||
```
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const RouteTransitionWrapper = ({ user, setUser }: {
|
||||
user: User | null
|
||||
setUser: Dispatch<SetStateAction<User | null>>
|
||||
}) => {
|
||||
return null
|
||||
}
|
||||
```
|
||||
|
||||
Rule: this is not a separately split parameter-list block. The line break is
|
||||
inside the inline type. Keep the type-literal `}` and parameter-list `)` on the
|
||||
same line as the final type property.
|
||||
|
||||
#### Multi-line normal parameter list
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const updateDraft = <Key extends keyof Settings,> (
|
||||
key: Key,
|
||||
value: Settings[Key]) => {
|
||||
return null
|
||||
}
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const updateDraft = <Key extends keyof Settings,> (
|
||||
key: Key,
|
||||
value: Settings[Key],
|
||||
) => {
|
||||
return null
|
||||
}
|
||||
```
|
||||
|
||||
Rule: when the parameter list itself is split across multiple parameter lines,
|
||||
the closing parameter `)` goes at the beginning of its own line before `=>` or
|
||||
the return type.
|
||||
|
||||
#### Function and callback blocks
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const handleSave = () => { save ()
|
||||
}
|
||||
```
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const handleSave = () => {
|
||||
save () }
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const handleSave = () => {
|
||||
save ()
|
||||
}
|
||||
```
|
||||
|
||||
Rule: block `}` closes executable code, not associative data. Multi-line
|
||||
function, lambda, callback, `if`, `for`, `switch`, and similar block braces
|
||||
belong on their own line.
|
||||
|
||||
#### Function and method calls
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const value = compute (
|
||||
first,
|
||||
second
|
||||
)
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const value = compute (
|
||||
first,
|
||||
second)
|
||||
```
|
||||
|
||||
Rule: call-expression `)` must not be at the beginning of a line. The exception
|
||||
for leading `)` applies only to function declaration parameter lists, never to
|
||||
calls.
|
||||
|
||||
#### JSX closing markers
|
||||
|
||||
Bad:
|
||||
|
||||
```tsx
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
>
|
||||
保存
|
||||
</Button>
|
||||
)
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```tsx
|
||||
<Button
|
||||
type="button"
|
||||
onClick={handleSave}>
|
||||
保存
|
||||
</Button>)
|
||||
```
|
||||
|
||||
Bad:
|
||||
|
||||
```tsx
|
||||
<Input
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```tsx
|
||||
<Input
|
||||
value={value}
|
||||
onChange={handleChange}/>
|
||||
```
|
||||
|
||||
Rule: keep `>` or `/>` with the final prop, and keep JSX closing parentheses in
|
||||
the local compact form such as `</div>)`.
|
||||
|
||||
#### Arrays and tuples
|
||||
|
||||
Bad:
|
||||
|
||||
```ts
|
||||
const items = [
|
||||
first,
|
||||
second,
|
||||
]
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const items = [
|
||||
first,
|
||||
second]
|
||||
```
|
||||
|
||||
Good when short:
|
||||
|
||||
```ts
|
||||
const items = [first, second]
|
||||
```
|
||||
|
||||
Rule: array and tuple `]` must not be at the beginning of a line. Keep it with
|
||||
the final element unless that would break the hard line limit.
|
||||
|
||||
#### Single-line braces
|
||||
|
||||
Good:
|
||||
|
||||
```ts
|
||||
const next = { ...current, enabled: true }
|
||||
const tag = { id, name }
|
||||
```
|
||||
|
||||
Bad:
|
||||
|
||||
```tsx
|
||||
<Component prop={ value }/>
|
||||
```
|
||||
|
||||
Good:
|
||||
|
||||
```tsx
|
||||
<Component prop={value}/>
|
||||
```
|
||||
|
||||
Rule: JavaScript object braces on one line get one inner space. JSX expression
|
||||
braces do not get inner spaces.
|
||||
|
||||
#### Final TSX self-review checklist
|
||||
|
||||
Before reporting completion after a TypeScript or TSX edit, check the edited
|
||||
hunks line by line:
|
||||
|
||||
1. No import/export/type/object/destructuring `}` appears alone at the beginning
|
||||
of a line.
|
||||
2. No call-expression `)` appears at the beginning of a line.
|
||||
3. Any leading `)` is definitely closing a function declaration parameter list,
|
||||
not a call.
|
||||
4. Any parameter-list `)` at the end of a line is valid because the parameter
|
||||
list itself was not split, only an inline type or destructuring shape was.
|
||||
5. No array or tuple `]` appears at the beginning of a line.
|
||||
6. Multi-line executable block `}` is on its own line.
|
||||
7. JSX `>` and `/>` stay with the final prop unless nearby code proves
|
||||
otherwise.
|
||||
8. JSX closing parentheses keep the compact local style.
|
||||
9. Leading indentation is 4-space logical indentation with tabs used only as
|
||||
leading 8-space compression.
|
||||
10. No line has trailing whitespace.
|
||||
|
||||
## Lint and build constraints
|
||||
|
||||
- ESLint uses `@eslint/js`, `typescript-eslint`, `eslint-plugin-react-hooks`,
|
||||
|
||||
+13
-143
@@ -1,31 +1,16 @@
|
||||
import { AnimatePresence, LayoutGroup, MotionConfig, motion } from 'framer-motion'
|
||||
import { Fragment, useEffect, useMemo, useState } from 'react'
|
||||
import { AnimatePresence, LayoutGroup, motion } from 'framer-motion'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { BrowserRouter,
|
||||
Navigate,
|
||||
Route,
|
||||
Routes,
|
||||
useLocation } from 'react-router-dom'
|
||||
|
||||
import DevModeWatermark from '@/components/DevModeWatermark'
|
||||
import RouteBlockerOverlay from '@/components/RouteBlockerOverlay'
|
||||
import TopNav from '@/components/TopNav'
|
||||
import DialogueProvider from '@/components/dialogues/DialogueProvider'
|
||||
import { Toaster } from '@/components/ui/toaster'
|
||||
import { apiPost, isApiError } from '@/lib/api'
|
||||
import { applyClientAnimationMode,
|
||||
applyClientAppearance,
|
||||
type ClientAnimationMode,
|
||||
fetchUserThemeSlots,
|
||||
fetchUserSettings,
|
||||
getClientThemeMode,
|
||||
hasStoredClientThemeSelection,
|
||||
normaliseUserThemeSlots,
|
||||
setCachedUserThemeSlots,
|
||||
seedClientThemeMode } from '@/lib/settings'
|
||||
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
|
||||
import { UnsavedChangesGuardProvider } from '@/lib/useUnsavedChangesGuard'
|
||||
|
||||
import { KeyboardShortcutsProvider } from '@/lib/useKeyboardShortcuts'
|
||||
import DeerjikistDetailPage from '@/pages/deerjikists/DeerjikistDetailPage'
|
||||
import MaterialBasePage from '@/pages/materials/MaterialBasePage'
|
||||
import MaterialDetailPage from '@/pages/materials/MaterialDetailPage'
|
||||
@@ -43,7 +28,6 @@ import PostDetailPage from '@/pages/posts/PostDetailPage'
|
||||
import PostHistoryPage from '@/pages/posts/PostHistoryPage'
|
||||
import PostListPage from '@/pages/posts/PostListPage'
|
||||
import PostNewPage from '@/pages/posts/PostNewPage'
|
||||
import PostImportPage from '@/pages/posts/PostImportPage'
|
||||
import PostSearchPage from '@/pages/posts/PostSearchPage'
|
||||
import ServiceUnavailable from '@/pages/ServiceUnavailable'
|
||||
import SettingPage from '@/pages/users/SettingPage'
|
||||
@@ -63,59 +47,17 @@ import type { Dispatch, FC, SetStateAction } from 'react'
|
||||
import type { User } from '@/types'
|
||||
|
||||
|
||||
const RouteTransitionWrapper = ({ animationMode, user, setUser }: {
|
||||
animationMode: ClientAnimationMode
|
||||
const RouteTransitionWrapper = ({ user, setUser }: {
|
||||
user: User | null
|
||||
setUser: Dispatch<SetStateAction<User | null>> }) => {
|
||||
const location = useLocation ()
|
||||
|
||||
if (animationMode === 'off')
|
||||
{
|
||||
return (
|
||||
<Routes location={location}>
|
||||
<Route path="/" element={<Navigate to="/posts" replace/>}/>
|
||||
<Route path="/posts" element={<PostListPage/>}/>
|
||||
<Route path="/posts/new" element={<PostNewPage user={user}/>}/>
|
||||
<Route path="/posts/import" element={<PostImportPage user={user}/>}/>
|
||||
<Route path="/posts/search" element={<PostSearchPage/>}/>
|
||||
<Route path="/posts/:id" element={<PostDetailRoute user={user}/>}/>
|
||||
<Route path="/posts/changes" element={<PostHistoryPage/>}/>
|
||||
<Route path="/tags" element={<TagListPage/>}/>
|
||||
<Route path="/tags/:id" element={<TagDetailPage/>}/>
|
||||
<Route path="/tags/:id/deerjikists" element={<DeerjikistDetailPage/>}/>
|
||||
<Route path="/tags/nico" element={<NicoTagListPage user={user}/>}/>
|
||||
<Route path="/nico/tags" element={<NicoTagListPage user={user}/>}/>
|
||||
<Route path="/tags/changes" element={<TagHistoryPage/>}/>
|
||||
<Route path="/theatres/:id" element={<TheatreDetailPage user={user}/>}/>
|
||||
<Route path="/materials" element={<MaterialBasePage/>}>
|
||||
<Route index element={<MaterialListPage/>}/>
|
||||
<Route path="changes" element={<MaterialHistoryPage/>}/>
|
||||
<Route path="new" element={<MaterialNewPage/>}/>
|
||||
<Route path="suppressions" element={<MaterialSyncSuppressionsPage/>}/>
|
||||
<Route path=":id" element ={<MaterialDetailPage/>}/>
|
||||
</Route>
|
||||
<Route path="/wiki" element={<WikiSearchPage/>}/>
|
||||
<Route path="/wiki/:title" element={<WikiDetailPage/>}/>
|
||||
<Route path="/wiki/new" element={<WikiNewPage user={user}/>}/>
|
||||
<Route path="/wiki/:id/edit" element={<WikiEditPage user={user}/>}/>
|
||||
<Route path="/wiki/:id/diff" element={<WikiDiffPage/>}/>
|
||||
<Route path="/wiki/changes" element={<WikiHistoryPage/>}/>
|
||||
<Route path="/users/settings" element={<SettingPage user={user} setUser={setUser}/>}/>
|
||||
<Route path="/settings" element={<Navigate to="/users/settings" replace/>}/>
|
||||
<Route path="/tos" element={<TOSPage/>}/>
|
||||
<Route path="/gekanator" element={<GekanatorPage user={user}/>}/>
|
||||
<Route path="/more" element={<MorePage/>}/>
|
||||
<Route path="*" element={<NotFound/>}/>
|
||||
</Routes>)
|
||||
}
|
||||
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
<Routes location={location}>
|
||||
<Route path="/" element={<Navigate to="/posts" replace/>}/>
|
||||
<Route path="/posts" element={<PostListPage/>}/>
|
||||
<Route path="/posts/new" element={<PostNewPage user={user}/>}/>
|
||||
<Route path="/posts/import" element={<PostImportPage user={user}/>}/>
|
||||
<Route path="/posts/search" element={<PostSearchPage/>}/>
|
||||
<Route path="/posts/:id" element={<PostDetailRoute user={user}/>}/>
|
||||
<Route path="/posts/changes" element={<PostHistoryPage/>}/>
|
||||
@@ -160,37 +102,6 @@ const PostDetailRoute = ({ user }: { user: User | null }) => {
|
||||
const App: FC = () => {
|
||||
const [user, setUser] = useState<User | null> (null)
|
||||
const [status, setStatus] = useState (200)
|
||||
const behaviourSettings = useClientBehaviourSettings ()
|
||||
const animationMode = behaviourSettings.animation ?? 'normal'
|
||||
const LayoutWrapper = animationMode === 'off' ? Fragment : LayoutGroup
|
||||
|
||||
const appLayoutTransition = useMemo (
|
||||
() => (
|
||||
animationMode === 'off'
|
||||
? { duration: 0 }
|
||||
: animationMode === 'reduced'
|
||||
? { duration: .08, ease: 'linear' as const }
|
||||
: { duration: .2, ease: 'easeOut' as const }
|
||||
),
|
||||
[animationMode],
|
||||
)
|
||||
|
||||
useEffect (() => {
|
||||
applyClientAppearance ()
|
||||
|
||||
const mediaQuery = window.matchMedia ('(prefers-color-scheme: dark)')
|
||||
const handleThemeChange = () => {
|
||||
if (getClientThemeMode () === 'system')
|
||||
applyClientAppearance ()
|
||||
}
|
||||
|
||||
mediaQuery.addEventListener ('change', handleThemeChange)
|
||||
return () => mediaQuery.removeEventListener ('change', handleThemeChange)
|
||||
}, [])
|
||||
|
||||
useEffect (() => {
|
||||
applyClientAnimationMode (animationMode)
|
||||
}, [animationMode])
|
||||
|
||||
useEffect (() => {
|
||||
const createUser = async () => {
|
||||
@@ -225,30 +136,6 @@ const App: FC = () => {
|
||||
createUser ()
|
||||
}, [])
|
||||
|
||||
useEffect (() => {
|
||||
if (!(user))
|
||||
return
|
||||
|
||||
void (async () => {
|
||||
try
|
||||
{
|
||||
const [settings, themeSlots] = await Promise.all ([
|
||||
fetchUserSettings (),
|
||||
fetchUserThemeSlots (),
|
||||
])
|
||||
const storedThemeSlots = normaliseUserThemeSlots (themeSlots)
|
||||
setCachedUserThemeSlots (storedThemeSlots)
|
||||
if (!(hasStoredClientThemeSelection ()))
|
||||
seedClientThemeMode (settings.theme)
|
||||
applyClientAppearance ()
|
||||
}
|
||||
catch
|
||||
{
|
||||
return
|
||||
}
|
||||
}) ()
|
||||
}, [user])
|
||||
|
||||
switch (status)
|
||||
{
|
||||
case 503:
|
||||
@@ -258,37 +145,20 @@ const App: FC = () => {
|
||||
return (
|
||||
<>
|
||||
<RouteBlockerOverlay/>
|
||||
{import.meta.env.DEV && <DevModeWatermark/>}
|
||||
|
||||
<BrowserRouter>
|
||||
<DialogueProvider>
|
||||
<UnsavedChangesGuardProvider>
|
||||
<KeyboardShortcutsProvider>
|
||||
<MotionConfig
|
||||
reducedMotion={
|
||||
animationMode === 'normal'
|
||||
? 'never'
|
||||
: animationMode === 'reduced'
|
||||
? 'user'
|
||||
: 'always'
|
||||
}>
|
||||
<LayoutWrapper>
|
||||
<motion.div
|
||||
layout={animationMode === 'off' ? false : 'position'}
|
||||
transition={{ layout: appLayoutTransition }}
|
||||
className="relative flex flex-col h-dvh w-full overflow-y-hidden">
|
||||
<TopNav user={user}/>
|
||||
<RouteTransitionWrapper
|
||||
animationMode={animationMode}
|
||||
user={user}
|
||||
setUser={setUser}/>
|
||||
</motion.div>
|
||||
</LayoutWrapper>
|
||||
</MotionConfig>
|
||||
<LayoutGroup>
|
||||
<motion.div
|
||||
layout="position"
|
||||
transition={{ layout: { duration: .2, ease: 'easeOut' } }}
|
||||
className="flex flex-col h-dvh w-full overflow-y-hidden">
|
||||
<TopNav user={user}/>
|
||||
<RouteTransitionWrapper user={user} setUser={setUser}/>
|
||||
</motion.div>
|
||||
</LayoutGroup>
|
||||
|
||||
<Toaster/>
|
||||
</KeyboardShortcutsProvider>
|
||||
</UnsavedChangesGuardProvider>
|
||||
<Toaster/>
|
||||
</DialogueProvider>
|
||||
</BrowserRouter>
|
||||
</>)
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
import nikumaru from '@/assets/fonts/nikumaru.otf'
|
||||
|
||||
import type { FC } from 'react'
|
||||
|
||||
|
||||
const ROW_COUNT = 8
|
||||
const COLUMN_COUNT = 12
|
||||
|
||||
|
||||
const DevModeWatermark: FC = () => {
|
||||
return (
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none select-none fixed inset-0 overflow-hidden z-0">
|
||||
<style>{`
|
||||
@font-face {
|
||||
font-family: 'Nikumaru';
|
||||
src: url(${nikumaru}) format('opentype');
|
||||
}
|
||||
`}</style>
|
||||
<div className="absolute -inset-32 flex flex-col justify-center gap-12 py-48">
|
||||
{Array.from ({ length: ROW_COUNT }, (_, rowIndex) => (
|
||||
<div
|
||||
key={rowIndex}
|
||||
className={
|
||||
'flex min-h-32 items-center gap-12 '
|
||||
+ (rowIndex % 2 === 0 ? 'translate-x-0' : 'translate-x-32')
|
||||
}>
|
||||
{Array.from ({ length: COLUMN_COUNT }, (_, columnIndex) => (
|
||||
<span
|
||||
key={columnIndex}
|
||||
className={
|
||||
'whitespace-nowrap text-3xl font-bold '
|
||||
+ 'tracking-[0.3em] text-neutral-950/5 '
|
||||
+ 'dark:text-white/10'
|
||||
}
|
||||
style={{ fontFamily: 'Nikumaru' }}>
|
||||
開発モード
|
||||
</span>))}
|
||||
</div>))}
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
|
||||
|
||||
export default DevModeWatermark
|
||||
@@ -1,75 +0,0 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
|
||||
import DraggableDroppableTagRow from '@/components/DraggableDroppableTagRow'
|
||||
import { buildTag } from '@/test/factories'
|
||||
import { renderWithProviders } from '@/test/render'
|
||||
|
||||
const dndKit = vi.hoisted (() => ({
|
||||
useDraggable: vi.fn (),
|
||||
useDroppable: vi.fn (),
|
||||
}))
|
||||
|
||||
vi.mock ('@dnd-kit/core', () => dndKit)
|
||||
|
||||
const tag = buildTag ({ id: 7, name: 'ドラッグ元', postCount: 3 })
|
||||
|
||||
const renderRow = (activeDndId?: string) => {
|
||||
renderWithProviders (
|
||||
<DraggableDroppableTagRow
|
||||
activeDndId={activeDndId}
|
||||
tag={tag}
|
||||
nestLevel={2}
|
||||
pathKey="cat-general-7"
|
||||
suppressClickRef={{ current: false }}/>,
|
||||
)
|
||||
}
|
||||
|
||||
const tagBody = (): HTMLElement => {
|
||||
const link = document.querySelector<HTMLElement> ('a[title="ドラッグ元"]')
|
||||
|
||||
if (link == null)
|
||||
throw new Error ('tag link not found')
|
||||
|
||||
const body = link.closest ('div')
|
||||
|
||||
if (body == null)
|
||||
throw new Error ('tag body not found')
|
||||
|
||||
return body
|
||||
}
|
||||
|
||||
describe ('DraggableDroppableTagRow', () => {
|
||||
beforeEach (() => {
|
||||
vi.clearAllMocks ()
|
||||
dndKit.useDraggable.mockReturnValue ({
|
||||
attributes: { 'aria-describedby': 'drag-source' },
|
||||
listeners: { onPointerDown: vi.fn () },
|
||||
setNodeRef: vi.fn (),
|
||||
transform: null })
|
||||
dndKit.useDroppable.mockReturnValue ({
|
||||
isOver: false,
|
||||
setNodeRef: vi.fn () })
|
||||
})
|
||||
|
||||
it ('passes dndId through draggable data for active-row tracking', () => {
|
||||
renderRow ()
|
||||
|
||||
expect (dndKit.useDraggable).toHaveBeenCalledWith (
|
||||
expect.objectContaining ({
|
||||
id: 'tag-node:cat-general-7',
|
||||
data: expect.objectContaining ({
|
||||
dndId: 'tag-node:cat-general-7',
|
||||
nestLevel: 2,
|
||||
tagId: 7 }) }))
|
||||
})
|
||||
|
||||
it ('hides only the active drag source from the explicit active dnd id', () => {
|
||||
renderRow ('tag-node:cat-general-7')
|
||||
expect (tagBody ()).toHaveStyle ({ visibility: 'hidden' })
|
||||
})
|
||||
|
||||
it ('keeps inactive tag rows visible while another tag is dragged', () => {
|
||||
renderRow ('tag-node:other')
|
||||
expect (tagBody ()).toHaveStyle ({ visibility: 'visible' })
|
||||
})
|
||||
})
|
||||
@@ -4,8 +4,6 @@ import { motion } from 'framer-motion'
|
||||
import { useRef } from 'react'
|
||||
|
||||
import TagLink from '@/components/TagLink'
|
||||
import { clientAnimationTransition } from '@/lib/clientAnimation'
|
||||
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import type { CSSProperties, FC, MutableRefObject } from 'react'
|
||||
@@ -13,7 +11,6 @@ import type { CSSProperties, FC, MutableRefObject } from 'react'
|
||||
import type { Tag } from '@/types'
|
||||
|
||||
type Props = {
|
||||
activeDndId?: string
|
||||
tag: Tag
|
||||
nestLevel: number
|
||||
pathKey: string
|
||||
@@ -22,21 +19,7 @@ type Props = {
|
||||
sp?: boolean }
|
||||
|
||||
|
||||
const DraggableDroppableTagRow: FC<Props> = ({
|
||||
activeDndId,
|
||||
tag,
|
||||
nestLevel,
|
||||
pathKey,
|
||||
parentTagId,
|
||||
suppressClickRef,
|
||||
sp,
|
||||
}) => {
|
||||
const behaviourSettings = useClientBehaviourSettings ()
|
||||
const animationMode = behaviourSettings.animation ?? 'normal'
|
||||
const layoutTransition = clientAnimationTransition (
|
||||
animationMode,
|
||||
{ normal: { duration: .2, ease: 'easeOut' as const } },
|
||||
)
|
||||
const DraggableDroppableTagRow: FC<Props> = ({ tag, nestLevel, pathKey, parentTagId, suppressClickRef, sp }) => {
|
||||
const dndId = `tag-node:${ pathKey }`
|
||||
|
||||
const downPosRef = useRef<{ x: number; y: number } | null> (null)
|
||||
@@ -62,23 +45,18 @@ const DraggableDroppableTagRow: FC<Props> = ({
|
||||
const { attributes,
|
||||
listeners,
|
||||
setNodeRef: setDragRef,
|
||||
transform } = useDraggable ({ id: dndId,
|
||||
data: { kind: 'tag',
|
||||
dndId,
|
||||
tagId: tag.id,
|
||||
parentTagId,
|
||||
nestLevel } })
|
||||
transform,
|
||||
isDragging: dragging } = useDraggable ({ id: dndId,
|
||||
data: { kind: 'tag',
|
||||
tagId: tag.id,
|
||||
parentTagId } })
|
||||
|
||||
const { setNodeRef: setDropRef, isOver: over } = useDroppable ({
|
||||
id: dndId,
|
||||
data: { kind: 'tag', tagId: tag.id } })
|
||||
|
||||
const activeDragging = activeDndId === dndId
|
||||
const style: CSSProperties = { transform: CSS.Translate.toString (transform),
|
||||
visibility: activeDragging ? 'hidden' : 'visible' }
|
||||
const innerClassName = cn (
|
||||
'inline-flex min-w-0 max-w-full items-baseline overflow-hidden',
|
||||
sp && 'touch-pan-y')
|
||||
visibility: dragging ? 'hidden' : 'visible' }
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -91,16 +69,12 @@ const DraggableDroppableTagRow: FC<Props> = ({
|
||||
return
|
||||
const dx = e.clientX - p.x
|
||||
const dy = e.clientY - p.y
|
||||
|
||||
if (dx * dx + dy * dy >= 9)
|
||||
armEatNextClick ()
|
||||
}}
|
||||
onPointerUpCapture={() => {
|
||||
downPosRef.current = null
|
||||
}}
|
||||
onPointerCancelCapture={() => {
|
||||
downPosRef.current = null
|
||||
}}
|
||||
onClickCapture={e => {
|
||||
if (suppressClickRef.current)
|
||||
{
|
||||
@@ -108,36 +82,20 @@ const DraggableDroppableTagRow: FC<Props> = ({
|
||||
e.stopPropagation ()
|
||||
}
|
||||
}}
|
||||
ref={setDropRef}
|
||||
className={cn (
|
||||
'min-w-0 max-w-full overflow-hidden rounded select-none',
|
||||
sp && 'touch-pan-y',
|
||||
over && 'ring-2 ring-offset-2')}
|
||||
>
|
||||
{activeDragging
|
||||
? (
|
||||
<div
|
||||
ref={setDragRef}
|
||||
style={style}
|
||||
className={innerClassName}
|
||||
{...attributes}
|
||||
{...listeners}>
|
||||
<TagLink tag={tag} nestLevel={nestLevel}/>
|
||||
</div>)
|
||||
: (
|
||||
<motion.div
|
||||
ref={setDragRef}
|
||||
style={style}
|
||||
className={innerClassName}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
transition={{ layout: layoutTransition }}
|
||||
layoutId={animationMode === 'off'
|
||||
? undefined
|
||||
: `tag-${ sp ? 'sp-' : '' }${ tag.id }`}>
|
||||
<TagLink tag={tag} nestLevel={nestLevel}/>
|
||||
</motion.div>)}
|
||||
ref={node => {
|
||||
setDragRef (node)
|
||||
setDropRef (node)
|
||||
}}
|
||||
style={style}
|
||||
className={cn ('rounded select-none', over && 'ring-2 ring-offset-2')}
|
||||
{...attributes}
|
||||
{...listeners}>
|
||||
<motion.div
|
||||
transition={{ layout: { duration: .2, ease: 'easeOut' } }}
|
||||
layoutId={`tag-${ sp ? 'sp-' : '' }${ tag.id }`}>
|
||||
<TagLink tag={tag} nestLevel={nestLevel}/>
|
||||
</motion.div>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default DraggableDroppableTagRow
|
||||
export default DraggableDroppableTagRow
|
||||
@@ -318,20 +318,12 @@ const MobileMaterialTreeNode: FC<{ depth?: number
|
||||
<TagLink
|
||||
tag={sidebarTagToTag (tag)}
|
||||
title={tag.name}
|
||||
truncateOnMobile
|
||||
withCount={false}
|
||||
withWiki={false}
|
||||
to={materialPath (tag.id, materialFilter)}
|
||||
className="block overflow-hidden text-ellipsis whitespace-nowrap
|
||||
[max-inline-size:var(--tag-link-inline-size)]
|
||||
[max-height:var(--tag-link-inline-size)]
|
||||
[&_.tag-marquee]:block
|
||||
[&_.tag-marquee]:h-full
|
||||
[&_.tag-marquee]:overflow-hidden
|
||||
[&_.tag-marquee__static]:h-full
|
||||
[&_.tag-marquee__static]:overflow-hidden
|
||||
[&_.tag-marquee__static]:text-ellipsis
|
||||
[&_.tag-marquee__static]:[text-overflow:ellipsis]"/>
|
||||
[max-height:var(--tag-link-inline-size)]"/>
|
||||
</div>
|
||||
{tag.hasChildren && (
|
||||
<button
|
||||
@@ -488,23 +480,25 @@ const MaterialSidebar: FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SidebarComponent sidebarKey="materials" className="hidden md:block">
|
||||
<div className="space-y-4">
|
||||
<MaterialFilterButtons
|
||||
materialFilter={materialFilter}
|
||||
onChange={handleFilterChange}/>
|
||||
{isLoading && (
|
||||
<p className="text-sm text-neutral-500 dark:text-stone-400">読込中……</p>)}
|
||||
{isError && (
|
||||
<p className="text-sm text-red-600 dark:text-red-300">
|
||||
タグ一覧の取得に失敗しました．
|
||||
</p>)}
|
||||
{(!isLoading && !isError) && (
|
||||
<ul>
|
||||
{renderDesktopTree (visibleRootTags)}
|
||||
</ul>)}
|
||||
</div>
|
||||
</SidebarComponent>
|
||||
<div className="hidden md:block">
|
||||
<SidebarComponent>
|
||||
<div className="space-y-4">
|
||||
<MaterialFilterButtons
|
||||
materialFilter={materialFilter}
|
||||
onChange={handleFilterChange}/>
|
||||
{isLoading && (
|
||||
<p className="text-sm text-neutral-500 dark:text-stone-400">読込中……</p>)}
|
||||
{isError && (
|
||||
<p className="text-sm text-red-600 dark:text-red-300">
|
||||
タグ一覧の取得に失敗しました．
|
||||
</p>)}
|
||||
{(!isLoading && !isError) && (
|
||||
<ul>
|
||||
{renderDesktopTree (visibleRootTags)}
|
||||
</ul>)}
|
||||
</div>
|
||||
</SidebarComponent>
|
||||
</div>
|
||||
</>)
|
||||
}
|
||||
|
||||
|
||||
@@ -66,27 +66,4 @@ describe ('PostEditForm', () => {
|
||||
expect (onSave).toHaveBeenCalledWith (expect.objectContaining ({ versionNo: 5 }))
|
||||
expect (toastApi.toast).toHaveBeenCalledWith ({ description: '更新しました．' })
|
||||
})
|
||||
|
||||
it ('preserves duration while the video tag is temporarily removed', () => {
|
||||
const post = buildPost ({
|
||||
videoMs: 180_500,
|
||||
tags: [
|
||||
buildTag ({ id: 1, name: '動画', category: 'general' }),
|
||||
buildTag ({ id: 2, name: 'general-tag', category: 'general' }),
|
||||
],
|
||||
})
|
||||
|
||||
render (<PostEditForm post={post} onSave={vi.fn ()}/>)
|
||||
|
||||
expect (screen.getByRole ('spinbutton')).toHaveValue (180.5)
|
||||
|
||||
const tags = screen.getAllByRole ('textbox')[2]
|
||||
fireEvent.change (tags, { target: { value: 'general-tag' } })
|
||||
expect (screen.queryByRole ('spinbutton')).not.toBeInTheDocument ()
|
||||
|
||||
fireEvent.change (tags, {
|
||||
target: { value: '動画 general-tag' },
|
||||
})
|
||||
expect (screen.getByRole ('spinbutton')).toHaveValue (180.5)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import PostFormTagsArea from '@/components/PostFormTagsArea'
|
||||
import PostOriginalCreatedTimeField from '@/components/PostOriginalCreatedTimeField'
|
||||
@@ -9,35 +9,29 @@ import { Button } from '@/components/ui/button'
|
||||
import { toast } from '@/components/ui/use-toast'
|
||||
import { isApiError } from '@/lib/api'
|
||||
import { updatePost } from '@/lib/posts'
|
||||
import { inputClass, msToTime } from '@/lib/utils'
|
||||
import { inputClass } from '@/lib/utils'
|
||||
import { useValidationErrors } from '@/lib/useValidationErrors'
|
||||
|
||||
import type { FC, FormEvent } from 'react'
|
||||
|
||||
import type { Post, TagWithSections } from '@/types'
|
||||
import type { Post, Tag } from '@/types'
|
||||
|
||||
type PostFormField =
|
||||
'parentPostIds' | 'tags' | 'videoMs' | 'originalCreatedAt'
|
||||
|
||||
const videoMsToDurationValue = (videoMs: number | null): string =>
|
||||
videoMs == null ? '' : String (videoMs / 1_000)
|
||||
'parentPostIds' | 'tags' | 'originalCreatedAt'
|
||||
|
||||
|
||||
const tagsToStr = (tags: TagWithSections[]): string => {
|
||||
const result: Omit<TagWithSections, 'children'>[] = []
|
||||
const tagsToStr = (tags: Tag[]): string => {
|
||||
const result: Tag[] = []
|
||||
|
||||
const walk = (tag: TagWithSections) => {
|
||||
const walk = (tag: Tag) => {
|
||||
const { children, ...rest } = tag
|
||||
result.push (rest)
|
||||
children.forEach (walk)
|
||||
children?.forEach (walk)
|
||||
}
|
||||
|
||||
tags.filter (t => t.category !== 'nico').forEach (walk)
|
||||
|
||||
return [...(new Set (result.map (t =>
|
||||
`${ t.name }${ t.sections
|
||||
.map (s => `[${ msToTime (s.beginMs) }-${ s.endMs == null ? '' : msToTime (s.endMs) }]`)
|
||||
.join ('') }`)))].join (' ')
|
||||
return [...(new Set (result.map (t => t.name)))].join (' ')
|
||||
}
|
||||
|
||||
|
||||
@@ -47,7 +41,6 @@ type Props = { post: Post
|
||||
|
||||
const PostEditForm: FC<Props> = ({ post, onSave }) => {
|
||||
const [disabled, setDisabled] = useState (false)
|
||||
const [duration, setDuration] = useState<string> (videoMsToDurationValue (post.videoMs))
|
||||
const { baseErrors, fieldErrors, clearValidationErrors, applyValidationError } =
|
||||
useValidationErrors<PostFormField> ()
|
||||
const [originalCreatedBefore, setOriginalCreatedBefore] =
|
||||
@@ -59,10 +52,6 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
|
||||
const [tags, setTags] = useState<string> ('')
|
||||
const [title, setTitle] = useState (post.title)
|
||||
|
||||
const videoFlg =
|
||||
useMemo (() => tags.split (/\s+/).some (tag => tag.replace (/\[.*\]$/, '') === '動画'),
|
||||
[tags])
|
||||
|
||||
const dialogue = useDialogue ()
|
||||
|
||||
const update = async (...args: Parameters<typeof updatePost>) => {
|
||||
@@ -74,7 +63,6 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
|
||||
onSave ({ ...post,
|
||||
versionNo: data.versionNo,
|
||||
title: data.title,
|
||||
videoMs: data.videoMs,
|
||||
tags: data.tags,
|
||||
parentPosts: data.parentPosts,
|
||||
childPosts: data.childPosts,
|
||||
@@ -114,7 +102,6 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
|
||||
{
|
||||
// TODO: 差分 UI
|
||||
await update ({ id: post.id, title, tags, parentPostIds,
|
||||
duration: videoFlg ? duration : null,
|
||||
originalCreatedFrom, originalCreatedBefore },
|
||||
{ baseVersionNo: post.versionNo, merge: true })
|
||||
return
|
||||
@@ -123,7 +110,6 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
|
||||
if (action === 'overwrite')
|
||||
{
|
||||
await update ({ id: post.id, title, tags, parentPostIds,
|
||||
duration: videoFlg ? duration : null,
|
||||
originalCreatedFrom, originalCreatedBefore },
|
||||
{ baseVersionNo: post.versionNo, force: true })
|
||||
return
|
||||
@@ -138,7 +124,6 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
|
||||
try
|
||||
{
|
||||
await update ({ id: post.id, title, tags, parentPostIds,
|
||||
duration: videoFlg ? duration : null,
|
||||
originalCreatedFrom, originalCreatedBefore },
|
||||
{ baseVersionNo: post.versionNo })
|
||||
}
|
||||
@@ -149,8 +134,7 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
|
||||
}
|
||||
|
||||
useEffect (() => {
|
||||
setTags (tagsToStr (post.tags))
|
||||
setDuration (videoMsToDurationValue (post.videoMs))
|
||||
setTags(tagsToStr (post.tags))
|
||||
}, [post])
|
||||
|
||||
return (
|
||||
@@ -165,7 +149,7 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
|
||||
disabled={disabled}
|
||||
className={inputClass (invalid)}
|
||||
value={title ?? ''}
|
||||
onChange={e => setTitle (e.target.value)}/>)}
|
||||
onChange={ev => setTitle (ev.target.value)}/>)}
|
||||
</FormField>
|
||||
|
||||
{/* 親投稿 */}
|
||||
@@ -197,20 +181,6 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
|
||||
setOriginalCreatedBefore={setOriginalCreatedBefore}
|
||||
errors={fieldErrors.originalCreatedAt}/>
|
||||
|
||||
{/* 動画時間 */}
|
||||
{videoFlg && (
|
||||
<FormField label="動画時間" messages={fieldErrors.videoMs}>
|
||||
{({ invalid }) => (
|
||||
<input
|
||||
type="number"
|
||||
min="0.001"
|
||||
step="0.001"
|
||||
disabled={disabled}
|
||||
className={inputClass (invalid)}
|
||||
value={duration}
|
||||
onChange={e => setDuration (e.target.value)}/>)}
|
||||
</FormField>)}
|
||||
|
||||
{/* 送信 */}
|
||||
<Button type="submit" disabled={disabled}>
|
||||
更新
|
||||
@@ -218,5 +188,4 @@ const PostEditForm: FC<Props> = ({ post, onSave }) => {
|
||||
</form>)
|
||||
}
|
||||
|
||||
|
||||
export default PostEditForm
|
||||
|
||||
@@ -4,8 +4,6 @@ import YoutubeEmbed from 'react-youtube'
|
||||
import NicoViewer from '@/components/NicoViewer'
|
||||
import TwitterEmbed from '@/components/TwitterEmbed'
|
||||
import { useDialogue } from '@/components/dialogues/DialogueProvider'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
|
||||
|
||||
import type { FC, RefObject } from 'react'
|
||||
|
||||
@@ -26,19 +24,16 @@ type Props = {
|
||||
onError?: (data: unknown) => void }
|
||||
|
||||
|
||||
const PostEmbed: FC<Props> = (
|
||||
{ ref,
|
||||
post,
|
||||
onLoadComplete,
|
||||
onMetadataChange,
|
||||
onVideoReady,
|
||||
onPlaybackChange,
|
||||
onError },
|
||||
) => {
|
||||
const PostEmbed: FC<Props> = ({
|
||||
ref,
|
||||
post,
|
||||
onLoadComplete,
|
||||
onMetadataChange,
|
||||
onVideoReady,
|
||||
onPlaybackChange,
|
||||
onError,
|
||||
}) => {
|
||||
const dialogue = useDialogue ()
|
||||
const behaviourSettings = useClientBehaviourSettings ()
|
||||
const embedAutoLoadMode = behaviourSettings.embedAutoLoad ?? 'auto'
|
||||
const [manualLoadRequested, setManualLoadRequested] = useState (false)
|
||||
const [framed, setFramed] = useState (false)
|
||||
const [youtubePlayer, setYoutubePlayer] = useState<YouTubePlayer | null> (null)
|
||||
const niconicoVideoReadyRef = useRef (false)
|
||||
@@ -110,10 +105,6 @@ const PostEmbed: FC<Props> = (
|
||||
niconicoVideoReadyRef.current = false
|
||||
}, [post.url])
|
||||
|
||||
useEffect (() => {
|
||||
setManualLoadRequested (false)
|
||||
}, [embedAutoLoadMode, post.url])
|
||||
|
||||
useEffect (() => {
|
||||
if (!(youtubePlayer) || !(onPlaybackChange))
|
||||
return
|
||||
@@ -126,28 +117,6 @@ const PostEmbed: FC<Props> = (
|
||||
}, [onPlaybackChange, reportYoutubePlayback, youtubePlayer])
|
||||
|
||||
const url = new URL (post.url)
|
||||
const shouldLoadEmbed =
|
||||
embedAutoLoadMode === 'auto'
|
||||
|| (
|
||||
embedAutoLoadMode === 'manual'
|
||||
&& manualLoadRequested
|
||||
)
|
||||
|
||||
const externalLink = (
|
||||
<a href={post.url} target="_blank" rel="noreferrer">
|
||||
外部ページを開く
|
||||
</a>)
|
||||
|
||||
const manualLoadControl = (
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setManualLoadRequested (true)}>
|
||||
埋め込みを読込
|
||||
</Button>
|
||||
{externalLink}
|
||||
</div>)
|
||||
|
||||
switch (url.hostname.split ('.').slice (-2).join ('.'))
|
||||
{
|
||||
@@ -159,11 +128,6 @@ const PostEmbed: FC<Props> = (
|
||||
|
||||
const [videoId] = mVideoId
|
||||
|
||||
if (embedAutoLoadMode === 'off')
|
||||
return externalLink
|
||||
if (shouldLoadEmbed === false)
|
||||
return manualLoadControl
|
||||
|
||||
return (
|
||||
<NicoViewer
|
||||
ref={ref}
|
||||
@@ -186,11 +150,6 @@ const PostEmbed: FC<Props> = (
|
||||
const [userId] = mUserId
|
||||
const [statusId] = mStatusId
|
||||
|
||||
if (embedAutoLoadMode === 'off')
|
||||
return externalLink
|
||||
if (shouldLoadEmbed === false)
|
||||
return manualLoadControl
|
||||
|
||||
return <TwitterEmbed userId={userId} statusId={statusId}/>
|
||||
}
|
||||
|
||||
@@ -200,11 +159,6 @@ const PostEmbed: FC<Props> = (
|
||||
if (!(videoId))
|
||||
break
|
||||
|
||||
if (embedAutoLoadMode === 'off')
|
||||
return externalLink
|
||||
if (shouldLoadEmbed === false)
|
||||
return manualLoadControl
|
||||
|
||||
return (
|
||||
<YoutubeEmbed videoId={videoId} opts={{ playerVars: {
|
||||
playsinline: 1,
|
||||
@@ -230,11 +184,6 @@ const PostEmbed: FC<Props> = (
|
||||
height={360}/>)
|
||||
: (
|
||||
<div>
|
||||
{embedAutoLoadMode === 'off'
|
||||
? externalLink
|
||||
: embedAutoLoadMode === 'manual' && shouldLoadEmbed === false
|
||||
? manualLoadControl
|
||||
: (
|
||||
<a href="#" onClick={async e => {
|
||||
e.preventDefault ()
|
||||
|
||||
@@ -248,7 +197,7 @@ const PostEmbed: FC<Props> = (
|
||||
confirmText: '表示' }))
|
||||
}}>
|
||||
外部ページを表示
|
||||
</a>)}
|
||||
</a>
|
||||
</div>)}
|
||||
</>)
|
||||
}
|
||||
|
||||
@@ -68,12 +68,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 nextSuggestions = data.filter (t => t.postCount > 0)
|
||||
setSuggestions (nextSuggestions)
|
||||
setSuggestionsVsbl (nextSuggestions.length > 0)
|
||||
const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q: token, nico: '0' } })
|
||||
setSuggestions (data.filter (t => t.postCount > 0))
|
||||
setSuggestionsVsbl (suggestions.length > 0)
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -3,7 +3,6 @@ import { useRef } from 'react'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
|
||||
import PrefetchLink from '@/components/PrefetchLink'
|
||||
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useSharedTransitionStore } from '@/stores/sharedTransitionStore'
|
||||
|
||||
@@ -17,15 +16,6 @@ type Props = { posts: Post[]
|
||||
|
||||
const PostList: FC<Props> = ({ posts, onClick }) => {
|
||||
const location = useLocation ()
|
||||
const behaviourSettings = useClientBehaviourSettings ()
|
||||
const thumbnailMode = behaviourSettings.thumbnailMode ?? 'normal'
|
||||
const animationMode = behaviourSettings.animation ?? 'normal'
|
||||
const cardLayoutTransition =
|
||||
animationMode === 'off'
|
||||
? { duration: 0 }
|
||||
: animationMode === 'reduced'
|
||||
? { duration: .08, ease: 'linear' as const }
|
||||
: { duration: .2, ease: 'easeOut' as const }
|
||||
|
||||
const setForLocationKey = useSharedTransitionStore (s => s.setForLocationKey)
|
||||
|
||||
@@ -49,8 +39,7 @@ const PostList: FC<Props> = ({ posts, onClick }) => {
|
||||
}}>
|
||||
<motion.div
|
||||
ref={cardRef}
|
||||
layout={animationMode === 'off' ? false : true}
|
||||
layoutId={animationMode === 'off' ? undefined : layoutId}
|
||||
layoutId={layoutId}
|
||||
className={cn ('w-full h-full overflow-hidden rounded-xl shadow',
|
||||
'transform-gpu will-change-transform',
|
||||
(post.childPosts ?? []).length > 0 && 'ring-4 ring-green-500',
|
||||
@@ -65,36 +54,22 @@ const PostList: FC<Props> = ({ posts, onClick }) => {
|
||||
}}
|
||||
onLayoutAnimationComplete={() => {
|
||||
if (!(cardRef.current))
|
||||
return
|
||||
return
|
||||
|
||||
cardRef.current.style.zIndex = ''
|
||||
cardRef.current.style.position = ''
|
||||
}}
|
||||
transition={{ layout: cardLayoutTransition }}>
|
||||
{thumbnailMode === 'off'
|
||||
? (
|
||||
<div className="flex h-full w-full items-center justify-center
|
||||
bg-muted text-center text-xs text-muted-foreground">
|
||||
サムネイルなし
|
||||
</div>)
|
||||
: (
|
||||
<img
|
||||
src={post.thumbnail || post.thumbnailBase || undefined}
|
||||
alt={post.title || post.url}
|
||||
title={post.title || post.url || undefined}
|
||||
loading={
|
||||
thumbnailMode === 'light'
|
||||
? 'lazy'
|
||||
: i < 12
|
||||
? 'eager'
|
||||
: 'lazy'
|
||||
}
|
||||
decoding="async"
|
||||
className="object-cover w-full h-full"/>)}
|
||||
transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
|
||||
<img src={post.thumbnail || post.thumbnailBase || undefined}
|
||||
alt={post.title || post.url}
|
||||
title={post.title || post.url || undefined}
|
||||
loading={i < 12 ? 'eager' : 'lazy'}
|
||||
decoding="async"
|
||||
className="object-cover w-full h-full"/>
|
||||
</motion.div>
|
||||
</PrefetchLink>)
|
||||
})}
|
||||
</div>)
|
||||
}
|
||||
|
||||
export default PostList
|
||||
export default PostList
|
||||
@@ -5,8 +5,6 @@ import { createPath, useNavigate } from 'react-router-dom'
|
||||
|
||||
import { useOverlayStore } from '@/components/RouteBlockerOverlay'
|
||||
import { prefetchForURL } from '@/lib/prefetchers'
|
||||
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
|
||||
import { useUnsavedChangesGuard } from '@/lib/useUnsavedChangesGuard'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import type { AnchorHTMLAttributes, MouseEvent, TouchEvent } from 'react'
|
||||
@@ -35,20 +33,10 @@ export default forwardRef<HTMLAnchorElement, Props> (({
|
||||
|
||||
const navigate = useNavigate ()
|
||||
const qc = useQueryClient ()
|
||||
const behaviourSettings = useClientBehaviourSettings ()
|
||||
const { confirmDiscardNavigation } = useUnsavedChangesGuard ()
|
||||
const linkPreloadMode = behaviourSettings.linkPreload ?? 'intent'
|
||||
const path = useMemo (
|
||||
() => typeof to === 'string' ? to : createPath (to),
|
||||
[to],
|
||||
)
|
||||
const url = useMemo (() => {
|
||||
return (new URL (path, window.location.origin)).toString ()
|
||||
}, [path])
|
||||
const nextPathname = useMemo (
|
||||
() => (new URL (path, window.location.origin)).pathname,
|
||||
[path],
|
||||
)
|
||||
const path = (typeof to === 'string') ? to : createPath (to)
|
||||
return (new URL (path, location.origin)).toString ()
|
||||
}, [to])
|
||||
const setOverlay = useOverlayStore (s => s.setActive)
|
||||
|
||||
const doPrefetch = async () => {
|
||||
@@ -66,15 +54,11 @@ export default forwardRef<HTMLAnchorElement, Props> (({
|
||||
|
||||
const handleMouseEnter = async (ev: MouseEvent<HTMLAnchorElement>) => {
|
||||
onMouseEnter?.(ev)
|
||||
if (ev.defaultPrevented || linkPreloadMode !== 'intent')
|
||||
return
|
||||
await doPrefetch ()
|
||||
}
|
||||
|
||||
const handleTouchStart = async (ev: TouchEvent<HTMLAnchorElement>) => {
|
||||
onTouchStart?.(ev)
|
||||
if (ev.defaultPrevented || linkPreloadMode !== 'intent')
|
||||
return
|
||||
await doPrefetch ()
|
||||
}
|
||||
|
||||
@@ -93,13 +77,6 @@ export default forwardRef<HTMLAnchorElement, Props> (({
|
||||
|
||||
ev.preventDefault ()
|
||||
|
||||
if (nextPathname !== window.location.pathname)
|
||||
{
|
||||
const confirmed = await confirmDiscardNavigation ()
|
||||
if (!(confirmed))
|
||||
return
|
||||
}
|
||||
|
||||
flushSync (() => {
|
||||
setOverlay (true)
|
||||
})
|
||||
@@ -122,7 +99,7 @@ export default forwardRef<HTMLAnchorElement, Props> (({
|
||||
|
||||
return (
|
||||
<a ref={ref}
|
||||
href={path}
|
||||
href={typeof to === 'string' ? to : createPath (to)}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onTouchStart={handleTouchStart}
|
||||
onClick={handleClick}
|
||||
|
||||
@@ -1,254 +0,0 @@
|
||||
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
|
||||
import type { FC } from 'react'
|
||||
|
||||
type Props = {
|
||||
text: string
|
||||
className?: string
|
||||
truncateOnMobile?: boolean
|
||||
title?: string }
|
||||
|
||||
const DESKTOP_MARQUEE_MEDIA =
|
||||
'(min-width: 768px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)'
|
||||
const MARQUEE_START_DELAY_MS = 1600
|
||||
const MARQUEE_END_HOLD_MS = 2400
|
||||
const MARQUEE_SCROLL_PX_PER_SECOND = 43
|
||||
const MIN_MARQUEE_OVERFLOW_PX = 1
|
||||
|
||||
|
||||
const ResponsiveMarqueeText: FC<Props> = (
|
||||
{ text, className, truncateOnMobile = false, title },
|
||||
) => {
|
||||
const behaviourSettings = useClientBehaviourSettings ()
|
||||
const animationMode = behaviourSettings.animation ?? 'normal'
|
||||
const outerRef = useRef<HTMLSpanElement | null> (null)
|
||||
const staticRef = useRef<HTMLSpanElement | null> (null)
|
||||
const animatedRef = useRef<HTMLSpanElement | null> (null)
|
||||
const animationRef = useRef<Animation | null> (null)
|
||||
const timeoutRef = useRef<number | null> (null)
|
||||
const rafRef = useRef<number | null> (null)
|
||||
const [overflowPx, setOverflowPx] = useState (0)
|
||||
const [desktopMarqueeEnabled, setDesktopMarqueeEnabled] = useState (false)
|
||||
const [active, setActive] = useState (false)
|
||||
const [marqueeVisible, setMarqueeVisible] = useState (false)
|
||||
|
||||
useEffect (() => {
|
||||
const outer = outerRef.current
|
||||
const inner = staticRef.current
|
||||
|
||||
if (!(outer) || !(inner))
|
||||
return
|
||||
|
||||
const measure = () => {
|
||||
const nextOverflow = Math.max (0, Math.ceil (inner.scrollWidth - outer.clientWidth))
|
||||
setOverflowPx (prev => Math.abs (prev - nextOverflow) <= 1 ? prev : nextOverflow)
|
||||
}
|
||||
|
||||
measure ()
|
||||
|
||||
const resizeObserver =
|
||||
typeof ResizeObserver === 'undefined'
|
||||
? null
|
||||
: new ResizeObserver (() => {
|
||||
measure ()
|
||||
})
|
||||
|
||||
resizeObserver?.observe (outer)
|
||||
resizeObserver?.observe (inner)
|
||||
addEventListener ('resize', measure)
|
||||
|
||||
return () => {
|
||||
resizeObserver?.disconnect ()
|
||||
removeEventListener ('resize', measure)
|
||||
}
|
||||
}, [text])
|
||||
|
||||
useEffect (() => {
|
||||
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
|
||||
return
|
||||
|
||||
const media = window.matchMedia (DESKTOP_MARQUEE_MEDIA)
|
||||
const update = () => {
|
||||
setDesktopMarqueeEnabled (media.matches)
|
||||
}
|
||||
|
||||
update ()
|
||||
media.addEventListener ('change', update)
|
||||
|
||||
return () => {
|
||||
media.removeEventListener ('change', update)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect (() => {
|
||||
const clearScheduled = () => {
|
||||
if (timeoutRef.current != null)
|
||||
{
|
||||
clearTimeout (timeoutRef.current)
|
||||
timeoutRef.current = null
|
||||
}
|
||||
if (rafRef.current != null)
|
||||
{
|
||||
cancelAnimationFrame (rafRef.current)
|
||||
rafRef.current = null
|
||||
}
|
||||
animationRef.current?.cancel ()
|
||||
animationRef.current = null
|
||||
}
|
||||
|
||||
const animated = animatedRef.current
|
||||
const canMarquee = (
|
||||
active
|
||||
&& animationMode !== 'off'
|
||||
&& desktopMarqueeEnabled
|
||||
&& overflowPx >= MIN_MARQUEE_OVERFLOW_PX
|
||||
&& animated != null)
|
||||
|
||||
const resetAnimated = () => {
|
||||
const node = animatedRef.current
|
||||
|
||||
animationRef.current?.cancel ()
|
||||
animationRef.current = null
|
||||
node?.getAnimations?.().forEach (animation => {
|
||||
animation.cancel ()
|
||||
})
|
||||
|
||||
if (!(node))
|
||||
return
|
||||
|
||||
node.style.transition = 'none'
|
||||
node.style.transform = 'translateX(0)'
|
||||
}
|
||||
|
||||
if (!canMarquee)
|
||||
{
|
||||
clearScheduled ()
|
||||
resetAnimated ()
|
||||
setMarqueeVisible (false)
|
||||
return
|
||||
}
|
||||
|
||||
let cancelled = false
|
||||
|
||||
const sleep = (ms: number) =>
|
||||
new Promise<void> (resolve => {
|
||||
timeoutRef.current = window.setTimeout (() => {
|
||||
timeoutRef.current = null
|
||||
resolve ()
|
||||
}, ms)
|
||||
})
|
||||
|
||||
const runLoop = async () => {
|
||||
while (!cancelled)
|
||||
{
|
||||
resetAnimated ()
|
||||
setMarqueeVisible (true)
|
||||
|
||||
await sleep (MARQUEE_START_DELAY_MS)
|
||||
if (cancelled || !(animatedRef.current))
|
||||
break
|
||||
|
||||
const moveDurationMs =
|
||||
overflowPx / MARQUEE_SCROLL_PX_PER_SECOND * 1000
|
||||
const node = animatedRef.current
|
||||
|
||||
if (typeof node.animate === 'function')
|
||||
{
|
||||
const animation = node.animate (
|
||||
[
|
||||
{ transform: 'translateX(0)' },
|
||||
{ transform: `translateX(-${ overflowPx }px)` },
|
||||
],
|
||||
{ duration: moveDurationMs, easing: 'linear', fill: 'forwards' })
|
||||
animationRef.current = animation
|
||||
try
|
||||
{
|
||||
await animation.finished
|
||||
}
|
||||
catch
|
||||
{
|
||||
break
|
||||
}
|
||||
|
||||
node.style.transform = `translateX(-${ overflowPx }px)`
|
||||
animation.cancel ()
|
||||
if (animationRef.current === animation)
|
||||
animationRef.current = null
|
||||
}
|
||||
else
|
||||
{
|
||||
node.style.transition = `transform ${ moveDurationMs }ms linear`
|
||||
await new Promise<void> (resolve => {
|
||||
rafRef.current = requestAnimationFrame (() => {
|
||||
rafRef.current = null
|
||||
node.style.transform = `translateX(-${ overflowPx }px)`
|
||||
resolve ()
|
||||
})
|
||||
})
|
||||
await sleep (moveDurationMs)
|
||||
node.style.transition = 'none'
|
||||
node.style.transform = `translateX(-${ overflowPx }px)`
|
||||
}
|
||||
|
||||
if (cancelled)
|
||||
break
|
||||
|
||||
await sleep (MARQUEE_END_HOLD_MS)
|
||||
if (cancelled)
|
||||
break
|
||||
|
||||
resetAnimated ()
|
||||
}
|
||||
}
|
||||
|
||||
void runLoop ()
|
||||
|
||||
return () => {
|
||||
cancelled = true
|
||||
clearScheduled ()
|
||||
resetAnimated ()
|
||||
setMarqueeVisible (false)
|
||||
}
|
||||
}, [active, animationMode, desktopMarqueeEnabled, overflowPx, text])
|
||||
|
||||
return (
|
||||
<span
|
||||
ref={outerRef}
|
||||
title={title ?? text}
|
||||
onMouseEnter={() => setActive (true)}
|
||||
onMouseLeave={() => setActive (false)}
|
||||
onFocus={() => setActive (true)}
|
||||
onBlur={() => setActive (false)}
|
||||
className={cn (
|
||||
'tag-marquee inline-block max-w-full min-w-0 align-bottom',
|
||||
(truncateOnMobile
|
||||
? 'overflow-hidden text-ellipsis whitespace-nowrap'
|
||||
: 'whitespace-normal [overflow-wrap:anywhere]'),
|
||||
'md:overflow-hidden md:whitespace-nowrap',
|
||||
className)}>
|
||||
<span
|
||||
ref={staticRef}
|
||||
className={cn (
|
||||
'tag-marquee__static block max-w-full',
|
||||
(truncateOnMobile
|
||||
? 'overflow-hidden text-ellipsis whitespace-nowrap'
|
||||
: 'whitespace-normal [overflow-wrap:anywhere]'),
|
||||
'md:overflow-hidden md:text-ellipsis md:whitespace-nowrap',
|
||||
marqueeVisible && 'md:opacity-0')}>
|
||||
{text}
|
||||
</span>
|
||||
{overflowPx >= MIN_MARQUEE_OVERFLOW_PX && (
|
||||
<span
|
||||
ref={animatedRef}
|
||||
aria-hidden="true"
|
||||
className={cn (
|
||||
'tag-marquee__animated hidden md:block',
|
||||
marqueeVisible ? 'md:opacity-100' : 'md:opacity-0')}>
|
||||
{text}
|
||||
</span>)}
|
||||
</span>)
|
||||
}
|
||||
|
||||
export default ResponsiveMarqueeText
|
||||
@@ -1,13 +1,11 @@
|
||||
import { DndContext,
|
||||
DragOverlay,
|
||||
MeasuringStrategy,
|
||||
MouseSensor,
|
||||
TouchSensor,
|
||||
pointerWithin,
|
||||
useDroppable,
|
||||
useSensor,
|
||||
useSensors } from '@dnd-kit/core'
|
||||
import { restrictToWindowEdges, snapCenterToCursor } from '@dnd-kit/modifiers'
|
||||
import { restrictToWindowEdges } from '@dnd-kit/modifiers'
|
||||
import { useQueryClient } from '@tanstack/react-query'
|
||||
import { motion } from 'framer-motion'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
@@ -22,29 +20,19 @@ import SidebarComponent from '@/components/layout/SidebarComponent'
|
||||
import { toast } from '@/components/ui/use-toast'
|
||||
import { CATEGORIES, CATEGORY_NAMES } from '@/consts'
|
||||
import { apiDelete, apiGet, apiPatch, apiPost } from '@/lib/api'
|
||||
import { clientAnimationTransition } from '@/lib/clientAnimation'
|
||||
import { postsKeys, tagsKeys } from '@/lib/queryKeys'
|
||||
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
|
||||
import { dateString, originalCreatedAtString } from '@/lib/utils'
|
||||
|
||||
import type { CollisionDetection, DragEndEvent } from '@dnd-kit/core'
|
||||
import type { DragEndEvent } from '@dnd-kit/core'
|
||||
import type { FC, MutableRefObject, ReactNode } from 'react'
|
||||
|
||||
import type { Category, Post, TagWithSections } from '@/types'
|
||||
import type { Category, Post, Tag } from '@/types'
|
||||
|
||||
type TagByCategory = { [key in Category]: TagWithSections[] }
|
||||
|
||||
const tagCollisionDetection: CollisionDetection = args => {
|
||||
return pointerWithin (args)
|
||||
}
|
||||
|
||||
const alwaysMeasureDroppables = {
|
||||
droppable: { strategy: MeasuringStrategy.Always } } as const
|
||||
type TagByCategory = { [key in Category]: Tag[] }
|
||||
|
||||
|
||||
const renderTagTree = (
|
||||
activeDndId: string | undefined,
|
||||
tag: TagWithSections,
|
||||
tag: Tag,
|
||||
nestLevel: number,
|
||||
path: string,
|
||||
suppressClickRef: MutableRefObject<boolean>,
|
||||
@@ -55,7 +43,6 @@ const renderTagTree = (
|
||||
const self = (
|
||||
<li key={key} className="mb-1">
|
||||
<DraggableDroppableTagRow
|
||||
activeDndId={activeDndId}
|
||||
tag={tag}
|
||||
nestLevel={nestLevel}
|
||||
pathKey={key}
|
||||
@@ -69,21 +56,14 @@ const renderTagTree = (
|
||||
...((tag.children
|
||||
?.sort ((a, b) => a.name < b.name ? -1 : 1)
|
||||
.flatMap (child =>
|
||||
renderTagTree (
|
||||
activeDndId,
|
||||
child,
|
||||
nestLevel + 1,
|
||||
key,
|
||||
suppressClickRef,
|
||||
tag.id,
|
||||
sp)))
|
||||
renderTagTree (child, nestLevel + 1, key, suppressClickRef, tag.id, sp)))
|
||||
?? [])]
|
||||
}
|
||||
|
||||
|
||||
const isDescendant = (
|
||||
root: TagWithSections,
|
||||
targetId: number,
|
||||
): boolean => {
|
||||
root: Tag,
|
||||
targetId: number): boolean => {
|
||||
if (!(root.children))
|
||||
return false
|
||||
|
||||
@@ -101,9 +81,8 @@ const isDescendant = (
|
||||
|
||||
const findTag = (
|
||||
byCat: TagByCategory,
|
||||
id: number,
|
||||
): TagWithSections | undefined => {
|
||||
const walk = (nodes: TagWithSections[]): TagWithSections | undefined => {
|
||||
id: number): Tag | undefined => {
|
||||
const walk = (nodes: Tag[]): Tag | undefined => {
|
||||
for (const t of nodes)
|
||||
{
|
||||
if (t.id === id)
|
||||
@@ -146,37 +125,6 @@ const buildTagByCategory = (post: Post): TagByCategory => {
|
||||
}
|
||||
|
||||
|
||||
const buildFlatTagByCategory = (
|
||||
byCategory: TagByCategory,
|
||||
): TagByCategory => {
|
||||
const tagsTmp = { } as TagByCategory
|
||||
const seen = new Set<number> ()
|
||||
|
||||
for (const category of CATEGORIES)
|
||||
tagsTmp[category] = []
|
||||
|
||||
const visit = (tag: TagWithSections) => {
|
||||
if (seen.has (tag.id))
|
||||
return
|
||||
|
||||
seen.add (tag.id)
|
||||
tagsTmp[tag.category].push ({ ...tag, children: [] })
|
||||
|
||||
for (const child of tag.children ?? [])
|
||||
visit (child)
|
||||
}
|
||||
|
||||
for (const category of CATEGORIES)
|
||||
for (const tag of byCategory[category] ?? [])
|
||||
visit (tag)
|
||||
|
||||
for (const category of CATEGORIES)
|
||||
tagsTmp[category].sort ((tagA, tagB) => tagA.name < tagB.name ? -1 : 1)
|
||||
|
||||
return tagsTmp
|
||||
}
|
||||
|
||||
|
||||
const changeCategory = async (
|
||||
tagId: number,
|
||||
category: Category): Promise<void> => {
|
||||
@@ -195,47 +143,14 @@ const DropSlot = ({ cat }: { cat: Category }) => {
|
||||
</li>)
|
||||
}
|
||||
|
||||
const EmptyCategoryDropSection = (
|
||||
{ cat, children }: { cat: Category
|
||||
children: ReactNode }) => {
|
||||
const { setNodeRef, isOver: over } = useDroppable ({
|
||||
id: `slot:${ cat }`,
|
||||
data: { kind: 'slot', cat } })
|
||||
|
||||
return (
|
||||
<div ref={setNodeRef} className="my-3">
|
||||
{children}
|
||||
<ul>
|
||||
<li className="h-1">
|
||||
{over && <div className="h-0.5 w-full rounded bg-sky-400"/>}
|
||||
</li>
|
||||
</ul>
|
||||
</div>)
|
||||
}
|
||||
type Props = { post: Post; sp?: boolean }
|
||||
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
post: Post
|
||||
sp?: boolean }
|
||||
|
||||
type ActiveTagDrag = {
|
||||
dndId: string
|
||||
tagId: number
|
||||
nestLevel: number }
|
||||
|
||||
|
||||
const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
|
||||
const TagDetailSidebar: FC<Props> = ({ post, sp }) => {
|
||||
sp = Boolean (sp)
|
||||
|
||||
const qc = useQueryClient ()
|
||||
const behaviourSettings = useClientBehaviourSettings ()
|
||||
const tagRelationDisplay = behaviourSettings.tagRelationDisplay ?? 'grouped'
|
||||
const animationMode = behaviourSettings.animation ?? 'normal'
|
||||
const layoutTransition = clientAnimationTransition (
|
||||
animationMode,
|
||||
{ normal: { duration: .2, ease: 'easeOut' as const } },
|
||||
)
|
||||
|
||||
const baseTags = useMemo<TagByCategory> (() => {
|
||||
const tagsTmp = { } as TagByCategory
|
||||
@@ -248,20 +163,15 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
|
||||
}
|
||||
|
||||
for (const cat of Object.keys (tagsTmp) as (keyof typeof tagsTmp)[])
|
||||
tagsTmp[cat].sort ((tagA: TagWithSections, tagB: TagWithSections) => tagA.name < tagB.name ? -1 : 1)
|
||||
tagsTmp[cat].sort ((tagA: Tag, tagB: Tag) => tagA.name < tagB.name ? -1 : 1)
|
||||
|
||||
return tagsTmp
|
||||
}, [post])
|
||||
|
||||
const [activeTagDrag, setActiveTagDrag] = useState<ActiveTagDrag | null> (null)
|
||||
const [activeTagId, setActiveTagId] = useState<number | null> (null)
|
||||
const [dragging, setDragging] = useState (false)
|
||||
const [saving, setSaving] = useState (false)
|
||||
const [tags, setTags] = useState (baseTags)
|
||||
const flatTagsByCategory = useMemo<TagByCategory> (
|
||||
() => buildFlatTagByCategory (tags),
|
||||
[tags],
|
||||
)
|
||||
const activeDndId = activeTagDrag?.dndId
|
||||
|
||||
const suppressClickRef = useRef (false)
|
||||
|
||||
@@ -366,23 +276,13 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
|
||||
}, [baseTags])
|
||||
|
||||
return (
|
||||
<SidebarComponent sidebarKey="post-detail-tags" className={className}>
|
||||
<SidebarComponent>
|
||||
<TagSearch/>
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={tagCollisionDetection}
|
||||
measuring={alwaysMeasureDroppables}
|
||||
onDragStart={e => {
|
||||
if (e.active.data.current?.kind === 'tag')
|
||||
{
|
||||
const tagId = e.active.data.current?.tagId
|
||||
const nestLevel = e.active.data.current?.nestLevel
|
||||
const dndId = e.active.data.current?.dndId
|
||||
setActiveTagDrag (
|
||||
tagId == null || nestLevel == null || dndId == null
|
||||
? null
|
||||
: { dndId, tagId, nestLevel })
|
||||
}
|
||||
setActiveTagId (e.active.data.current?.tagId ?? null)
|
||||
setDragging (true)
|
||||
suppressClickRef.current = true
|
||||
document.body.style.userSelect = 'none'
|
||||
@@ -393,80 +293,38 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
|
||||
suppressClickRef.current = false}, { capture: true, once: true })
|
||||
}}
|
||||
onDragCancel={() => {
|
||||
setActiveTagDrag (null)
|
||||
setActiveTagId (null)
|
||||
setDragging (false)
|
||||
document.body.style.userSelect = ''
|
||||
suppressClickRef.current = false
|
||||
}}
|
||||
onDragEnd={async e => {
|
||||
setActiveTagDrag (null)
|
||||
setActiveTagId (null)
|
||||
setDragging (false)
|
||||
await onDragEnd (e)
|
||||
document.body.style.userSelect = ''
|
||||
}}
|
||||
modifiers={[restrictToWindowEdges]}>
|
||||
{CATEGORIES.map ((cat: Category) => {
|
||||
const categoryTags =
|
||||
tagRelationDisplay === 'grouped'
|
||||
? (tags[cat] ?? [])
|
||||
: (flatTagsByCategory[cat] ?? [])
|
||||
|
||||
if (!(categoryTags.length > 0 || dragging))
|
||||
return null
|
||||
|
||||
const sectionTitle = (
|
||||
{CATEGORIES.map ((cat: Category) => ((tags[cat] ?? []).length > 0 || dragging) && (
|
||||
<div className="my-3" key={cat}>
|
||||
<SubsectionTitle>
|
||||
<motion.div
|
||||
layoutId={animationMode === 'off'
|
||||
? undefined
|
||||
: `tag-${ sp ? 'sp-' : '' }${ cat }`}
|
||||
transition={{ layout: layoutTransition }}>
|
||||
layoutId={`tag-${ sp ? 'sp-' : '' }${ cat }`}
|
||||
transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
|
||||
{CATEGORY_NAMES[cat]}
|
||||
</motion.div>
|
||||
</SubsectionTitle>)
|
||||
</SubsectionTitle>
|
||||
|
||||
if (!(categoryTags.length > 0))
|
||||
return (
|
||||
<EmptyCategoryDropSection cat={cat} key={cat}>
|
||||
{sectionTitle}
|
||||
</EmptyCategoryDropSection>)
|
||||
|
||||
return (
|
||||
<div className="my-3" key={cat}>
|
||||
{sectionTitle}
|
||||
<ul>
|
||||
{(tagRelationDisplay === 'grouped'
|
||||
? (tags[cat] ?? []).flatMap (tag =>
|
||||
renderTagTree (
|
||||
activeDndId,
|
||||
tag,
|
||||
0,
|
||||
`cat-${ cat }`,
|
||||
suppressClickRef,
|
||||
undefined,
|
||||
sp,
|
||||
),
|
||||
)
|
||||
: (flatTagsByCategory[cat] ?? []).map (tag => (
|
||||
<li key={`flat-${ cat }-${ tag.id }`} className="mb-1">
|
||||
<DraggableDroppableTagRow
|
||||
activeDndId={activeDndId}
|
||||
tag={tag}
|
||||
nestLevel={0}
|
||||
pathKey={`flat-${ cat }-${ tag.id }`}
|
||||
suppressClickRef={suppressClickRef}
|
||||
sp={sp}/>
|
||||
</li>)))}
|
||||
<DropSlot cat={cat}/>
|
||||
</ul>
|
||||
</div>)
|
||||
})}
|
||||
<ul>
|
||||
{(tags[cat] ?? []).flatMap (tag => (
|
||||
renderTagTree (tag, 0, `cat-${ cat }`, suppressClickRef, undefined, sp)))}
|
||||
<DropSlot cat={cat}/>
|
||||
</ul>
|
||||
</div>))}
|
||||
{post && (
|
||||
<motion.div
|
||||
layoutId={animationMode === 'off'
|
||||
? undefined
|
||||
: `post-info-${ sp }`}
|
||||
transition={{ layout: layoutTransition }}>
|
||||
layoutId={`post-info-${ sp }`}
|
||||
transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
|
||||
<SectionTitle>情報</SectionTitle>
|
||||
<ul>
|
||||
<li>Id.: {post.id}</li>
|
||||
@@ -503,14 +361,11 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
|
||||
</ul>
|
||||
</motion.div>)}
|
||||
|
||||
<DragOverlay
|
||||
adjustScale={false}
|
||||
modifiers={[snapCenterToCursor]}
|
||||
dropAnimation={animationMode === 'off' ? null : undefined}>
|
||||
<DragOverlay adjustScale={false}>
|
||||
<div className="pointer-events-none">
|
||||
{activeTagDrag != null && (() => {
|
||||
const tag = findTag (tags, activeTagDrag.tagId)
|
||||
return tag && <TagLink tag={tag} nestLevel={activeTagDrag.nestLevel}/>
|
||||
{activeTagId != null && (() => {
|
||||
const tag = findTag (tags, activeTagId)
|
||||
return tag && <TagLink tag={tag}/>
|
||||
}) ()}
|
||||
</div>
|
||||
</DragOverlay>
|
||||
@@ -518,4 +373,4 @@ const TagDetailSidebar: FC<Props> = ({ className, post, sp }) => {
|
||||
</SidebarComponent>)
|
||||
}
|
||||
|
||||
export default TagDetailSidebar
|
||||
export default TagDetailSidebar
|
||||
@@ -1,15 +1,14 @@
|
||||
import PrefetchLink from '@/components/PrefetchLink'
|
||||
import ResponsiveMarqueeText from '@/components/ResponsiveMarqueeText'
|
||||
import { LIGHT_COLOUR_SHADE, DARK_COLOUR_SHADE, TAG_COLOUR } from '@/consts'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import type { ComponentProps, CSSProperties, FC, HTMLAttributes } from 'react'
|
||||
import type { ComponentProps, FC, HTMLAttributes } from 'react'
|
||||
|
||||
import type { Tag } from '@/types'
|
||||
|
||||
type CommonProps = {
|
||||
tag: Tag
|
||||
nestLevel?: number
|
||||
truncateOnMobile?: boolean
|
||||
withWiki?: boolean
|
||||
withCount?: boolean }
|
||||
|
||||
@@ -31,40 +30,29 @@ type Props =
|
||||
const TagLink: FC<Props> = ({ tag,
|
||||
nestLevel = 0,
|
||||
linkFlg = true,
|
||||
truncateOnMobile = false,
|
||||
withWiki = true,
|
||||
withCount = true,
|
||||
className,
|
||||
style,
|
||||
title,
|
||||
...props }) => {
|
||||
const colourStyle = {
|
||||
'--tag-link-colour': `var(--tag-colour-${ tag.category })`,
|
||||
'--tag-link-hover-colour': `var(--tag-colour-${ tag.category }-hover)`,
|
||||
...style,
|
||||
} as CSSProperties
|
||||
const spanClass = 'tag-link-colour'
|
||||
const linkClass = 'tag-link-colour tag-link-hover-colour'
|
||||
const textClass = 'group min-w-0 max-w-full overflow-hidden align-bottom'
|
||||
const rootClass =
|
||||
'inline-flex min-w-0 max-w-full flex-nowrap items-stretch align-baseline gap-x-1 md:items-baseline'
|
||||
const markerWrapClass = 'shrink-0 self-start md:self-auto'
|
||||
const countClass = 'shrink-0 self-end md:self-auto'
|
||||
const textTitle = title
|
||||
?? (tag.matchedAlias == null ? tag.name : `${ tag.matchedAlias } → ${ tag.name }`)
|
||||
const spanClass = cn (
|
||||
`text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE }`,
|
||||
`dark:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE }`)
|
||||
const linkClass = cn (
|
||||
spanClass,
|
||||
`hover:text-${ TAG_COLOUR[tag.category] }-${ LIGHT_COLOUR_SHADE - 200 }`,
|
||||
`dark:hover:text-${ TAG_COLOUR[tag.category] }-${ DARK_COLOUR_SHADE - 200 }`)
|
||||
|
||||
return (
|
||||
<span className={rootClass}>
|
||||
<>
|
||||
{(linkFlg && withWiki) && (
|
||||
<span className={markerWrapClass}>
|
||||
<span className="mr-1">
|
||||
{(tag.materialId != null || tag.hasWiki || tag.hasDeerjikists)
|
||||
? (
|
||||
tag.materialId == null && !(tag.hasDeerjikists)
|
||||
? (
|
||||
<PrefetchLink
|
||||
to={`/wiki/${ encodeURIComponent (tag.name) }`}
|
||||
className={linkClass}
|
||||
style={colourStyle}>
|
||||
className={linkClass}>
|
||||
?
|
||||
</PrefetchLink>)
|
||||
: (
|
||||
@@ -72,15 +60,13 @@ const TagLink: FC<Props> = ({ tag,
|
||||
? (
|
||||
<PrefetchLink
|
||||
to={`/materials/${ tag.materialId }`}
|
||||
className={linkClass}
|
||||
style={colourStyle}>
|
||||
className={linkClass}>
|
||||
?
|
||||
</PrefetchLink>)
|
||||
: (
|
||||
<PrefetchLink
|
||||
to={`/tags/${ tag.id }/deerjikists`}
|
||||
className={linkClass}
|
||||
style={colourStyle}>
|
||||
className={linkClass}>
|
||||
?
|
||||
</PrefetchLink>)))
|
||||
: (
|
||||
@@ -114,51 +100,33 @@ const TagLink: FC<Props> = ({ tag,
|
||||
</span>)}
|
||||
{nestLevel > 0 && (
|
||||
<span
|
||||
className="ml-1 mr-1 shrink-0"
|
||||
className="ml-1 mr-1"
|
||||
style={{ paddingLeft: `${ (nestLevel - 1) }rem` }}>
|
||||
↳
|
||||
</span>)}
|
||||
{tag.matchedAlias != null && (
|
||||
<>
|
||||
<span
|
||||
title={textTitle}
|
||||
className={cn (spanClass, textClass, className)}
|
||||
style={colourStyle}
|
||||
{...props}>
|
||||
<ResponsiveMarqueeText
|
||||
text={tag.matchedAlias}
|
||||
title={textTitle}
|
||||
truncateOnMobile={truncateOnMobile}/>
|
||||
<span className={cn (spanClass, className)} {...props}>
|
||||
{tag.matchedAlias}
|
||||
</span>
|
||||
<span className="shrink-0"> → </span>
|
||||
<> → </>
|
||||
</>)}
|
||||
{linkFlg
|
||||
? (
|
||||
<PrefetchLink
|
||||
to={`/posts?${ (new URLSearchParams ({ tags: tag.name })).toString () }`}
|
||||
title={textTitle}
|
||||
className={cn (linkClass, textClass, className)}
|
||||
style={colourStyle}
|
||||
className={cn (linkClass, className)}
|
||||
{...props}>
|
||||
<ResponsiveMarqueeText
|
||||
text={tag.name}
|
||||
title={textTitle}
|
||||
truncateOnMobile={truncateOnMobile}/>
|
||||
{tag.name}
|
||||
</PrefetchLink>)
|
||||
: (
|
||||
<span
|
||||
title={textTitle}
|
||||
className={cn (spanClass, textClass, className)}
|
||||
style={colourStyle}
|
||||
<span className={cn (spanClass, className)}
|
||||
{...props}>
|
||||
<ResponsiveMarqueeText
|
||||
text={tag.name}
|
||||
title={textTitle}
|
||||
truncateOnMobile={truncateOnMobile}/>
|
||||
{tag.name}
|
||||
</span>)}
|
||||
{withCount && (
|
||||
<span className={countClass}>{tag.postCount}</span>)}
|
||||
</span>)
|
||||
<span className="ml-1">{tag.postCount}</span>)}
|
||||
</>)
|
||||
}
|
||||
|
||||
export default TagLink
|
||||
|
||||
@@ -105,7 +105,6 @@ const TagSearch: FC = () => {
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<input type="text"
|
||||
data-shortcut-focus-search="true"
|
||||
placeholder="タグ検索..."
|
||||
value={search}
|
||||
onChange={whenChanged}
|
||||
|
||||
@@ -20,14 +20,12 @@ const TagSearchBox: FC<Props> = ({ suggestions, activeIndex, onSelect }) => {
|
||||
rounded shadow">
|
||||
{suggestions.map ((tag, i) => (
|
||||
<li key={tag.id}
|
||||
className={cn ('min-w-0 overflow-hidden px-3 py-2 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-700',
|
||||
className={cn ('px-3 py-2 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-700',
|
||||
i === activeIndex && 'bg-gray-300 dark:bg-gray-700')}
|
||||
onMouseDown={() => onSelect (tag)}>
|
||||
<div className="flex min-w-0 max-w-full items-baseline overflow-hidden">
|
||||
<TagLink tag={tag} linkFlg={false} withWiki={false}/>
|
||||
</div>
|
||||
<TagLink tag={tag} linkFlg={false} withWiki={false}/>
|
||||
</li>))}
|
||||
</ul>)
|
||||
}
|
||||
|
||||
export default TagSearchBox
|
||||
export default TagSearchBox
|
||||
@@ -8,8 +8,6 @@ import SectionTitle from '@/components/common/SectionTitle'
|
||||
import SidebarComponent from '@/components/layout/SidebarComponent'
|
||||
import { CATEGORIES } from '@/consts'
|
||||
import { apiGet } from '@/lib/api'
|
||||
import { clientAnimationTransition } from '@/lib/clientAnimation'
|
||||
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
|
||||
|
||||
import type { FC, MouseEvent } from 'react'
|
||||
|
||||
@@ -23,13 +21,6 @@ type Props = { posts: Post[]
|
||||
|
||||
const TagSidebar: FC<Props> = ({ posts, onClick }) => {
|
||||
const navigate = useNavigate ()
|
||||
const behaviourSettings = useClientBehaviourSettings ()
|
||||
const animationMode = behaviourSettings.animation ?? 'normal'
|
||||
const animationsOff = animationMode === 'off'
|
||||
const layoutTransition = clientAnimationTransition (
|
||||
animationMode,
|
||||
{ normal: { duration: .2, ease: 'easeOut' as const } },
|
||||
)
|
||||
|
||||
const [tagsVsbl, setTagsVsbl] = useState (false)
|
||||
const [tags, setTags] = useState<TagByCategory> ({ })
|
||||
@@ -73,19 +64,12 @@ const TagSidebar: FC<Props> = ({ posts, onClick }) => {
|
||||
<ul>
|
||||
{CATEGORIES.flatMap (cat => cat in tags ? (
|
||||
tags[cat].map (tag => (
|
||||
<li key={tag.id} className="mb-1 min-w-0 max-w-full overflow-hidden">
|
||||
{animationsOff
|
||||
? (
|
||||
<div className="flex min-w-0 max-w-full items-baseline overflow-hidden">
|
||||
<TagLink tag={tag} onClick={onClick}/>
|
||||
</div>)
|
||||
: (
|
||||
<motion.div
|
||||
className="flex min-w-0 max-w-full items-baseline overflow-hidden"
|
||||
transition={{ layout: layoutTransition }}
|
||||
layoutId={`tag-${ tag.id }`}>
|
||||
<TagLink tag={tag} onClick={onClick}/>
|
||||
</motion.div>)}
|
||||
<li key={tag.id} className="mb-1">
|
||||
<motion.div
|
||||
transition={{ layout: { duration: .2, ease: 'easeOut' } }}
|
||||
layoutId={`tag-${ tag.id }`}>
|
||||
<TagLink tag={tag} onClick={onClick}/>
|
||||
</motion.div>
|
||||
</li>))) : [])}
|
||||
</ul>
|
||||
<SectionTitle>関聯</SectionTitle>
|
||||
@@ -111,32 +95,25 @@ const TagSidebar: FC<Props> = ({ posts, onClick }) => {
|
||||
</>)
|
||||
|
||||
return (
|
||||
<SidebarComponent sidebarKey="posts-index-tags">
|
||||
<SidebarComponent>
|
||||
<TagSearch/>
|
||||
|
||||
<div className="hidden md:block mt-4">
|
||||
{posts.length > 0 && TagBlock}
|
||||
</div>
|
||||
|
||||
{animationsOff
|
||||
? (
|
||||
tagsVsbl && (
|
||||
<div className="md:hidden overflow-hidden">
|
||||
{posts.length > 0 && TagBlock}
|
||||
</div>))
|
||||
: (
|
||||
<AnimatePresence initial={false}>
|
||||
{tagsVsbl && (
|
||||
<motion.div
|
||||
key="sptags"
|
||||
className="md:hidden overflow-hidden"
|
||||
initial={{ height: 0 }}
|
||||
animate={{ height: 'auto' }}
|
||||
exit={{ height: 0 }}
|
||||
transition={layoutTransition}>
|
||||
{posts.length > 0 && TagBlock}
|
||||
</motion.div>)}
|
||||
</AnimatePresence>)}
|
||||
<AnimatePresence initial={false}>
|
||||
{tagsVsbl && (
|
||||
<motion.div
|
||||
key="sptags"
|
||||
className="md:hidden overflow-hidden"
|
||||
initial={{ height: 0 }}
|
||||
animate={{ height: 'auto' }}
|
||||
exit={{ height: 0 }}
|
||||
transition={{ duration: .2, ease: 'easeOut' }}>
|
||||
{posts.length > 0 && TagBlock}
|
||||
</motion.div>)}
|
||||
</AnimatePresence>
|
||||
|
||||
<a href="#"
|
||||
className="md:hidden block my-2 text-center text-sm
|
||||
@@ -151,4 +128,4 @@ const TagSidebar: FC<Props> = ({ posts, onClick }) => {
|
||||
</SidebarComponent>)
|
||||
}
|
||||
|
||||
export default TagSidebar
|
||||
export default TagSidebar
|
||||
+150
-264
@@ -8,7 +8,6 @@ import PrefetchLink from '@/components/PrefetchLink'
|
||||
import TopNavUser from '@/components/TopNavUser'
|
||||
import { WikiIdBus } from '@/lib/eventBus/WikiIdBus'
|
||||
import { materialsKeys, tagsKeys, wikiKeys } from '@/lib/queryKeys'
|
||||
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
|
||||
import { fetchTag, fetchTagByName } from '@/lib/tags'
|
||||
import { fetchMaterial } from '@/lib/materials'
|
||||
import { cn } from '@/lib/utils'
|
||||
@@ -43,7 +42,6 @@ export const menuOutline = (
|
||||
{ name: '一覧', to: '/posts' },
|
||||
{ name: '検索', to: '/posts/search' },
|
||||
{ name: '追加', to: '/posts/new' },
|
||||
{ name: 'インポート', to: '/posts/import' },
|
||||
{ name: '全体履歴', to: '/posts/changes' },
|
||||
{ name: 'ヘルプ', to: '/wiki/ヘルプ:広場' }] },
|
||||
{ name: 'タグ', to: '/tags', subMenu: [
|
||||
@@ -93,10 +91,6 @@ export const menuOutline = (
|
||||
|
||||
const TopNav: FC<Props> = ({ user }) => {
|
||||
const location = useLocation ()
|
||||
const behaviourSettings = useClientBehaviourSettings ()
|
||||
const animationMode = behaviourSettings.animation ?? 'normal'
|
||||
const animationsOff = animationMode === 'off'
|
||||
const reducedAnimations = animationMode === 'reduced'
|
||||
|
||||
const dirRef = useRef<(-1) | 1> (1)
|
||||
const itemsRef = useRef<(HTMLAnchorElement | null)[]> ([])
|
||||
@@ -161,24 +155,6 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
const activeIdx =
|
||||
visibleMenu.findIndex (item => location.pathname.startsWith (item.base || item.to))
|
||||
const submenuHeight = moreVsbl ? 40 * moreMenu.length : (activeIdx < 0 ? 0 : 40)
|
||||
const topNavTransition =
|
||||
animationsOff
|
||||
? { duration: 0 }
|
||||
: reducedAnimations
|
||||
? { duration: .08, ease: 'linear' as const }
|
||||
: { duration: .2, ease: 'easeOut' as const }
|
||||
const opacityTransition =
|
||||
animationsOff
|
||||
? { duration: 0 }
|
||||
: reducedAnimations
|
||||
? { duration: .08 }
|
||||
: { duration: .12 }
|
||||
const highlightTransitionClass =
|
||||
animationsOff
|
||||
? undefined
|
||||
: reducedAnimations
|
||||
? 'transition-[transform,width] duration-75 ease-linear'
|
||||
: 'transition-[transform,width] duration-200 ease-out'
|
||||
|
||||
const prevActiveIdxRef = useRef<number> (activeIdx)
|
||||
|
||||
@@ -213,11 +189,13 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="top-nav-root px-3 flex justify-between items-center w-full">
|
||||
<nav className="px-3 flex justify-between items-center w-full
|
||||
bg-yellow-200 dark:bg-red-975 md:bg-yellow-50">
|
||||
<div className="flex items-center gap-2 h-12">
|
||||
<PrefetchLink
|
||||
to="/posts"
|
||||
className="top-nav-brand-link mx-4 text-xl font-bold"
|
||||
className="mx-4 text-xl font-bold text-pink-600 hover:text-pink-400
|
||||
dark:text-pink-300 dark:hover:text-pink-100"
|
||||
onClick={() => {
|
||||
scroll (0, 0)
|
||||
}}>
|
||||
@@ -227,8 +205,8 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
<div ref={navRef} className="relative hidden md:flex h-12 items-center">
|
||||
<div aria-hidden
|
||||
className={cn ('absolute inset-y-0 h-12',
|
||||
'top-nav-highlight',
|
||||
highlightTransitionClass)}
|
||||
'bg-yellow-200 dark:bg-red-950',
|
||||
'transition-[transform,width] duration-200 ease-out')}
|
||||
style={{ width: hl.width,
|
||||
transform: `translateX(${ hl.left }px)`,
|
||||
opacity: hl.visible ? 1 : 0 }}/>
|
||||
@@ -236,12 +214,10 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
{visibleMenu.map ((item, i) => (
|
||||
<motion.div
|
||||
key={item.to}
|
||||
{...(animationsOff
|
||||
? { }
|
||||
: { layoutId: `menu-${ item.name }` })}
|
||||
layoutId={`menu-${ item.name }`}
|
||||
animate={{ opacity: moreVsbl ? 0 : 1 }}
|
||||
transition={{ opacity: opacityTransition,
|
||||
layout: topNavTransition }}
|
||||
transition={{ opacity: { duration: .12 },
|
||||
layout: { duration: .2, ease: 'easeOut' } }}
|
||||
style={{ pointerEvents: moreVsbl ? 'none' : 'auto' }}
|
||||
onMouseEnter={() => setMoreVsbl (false)}>
|
||||
<PrefetchLink
|
||||
@@ -249,7 +225,7 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
ref={(el: (HTMLAnchorElement | null)) => {
|
||||
itemsRef.current[i] = el
|
||||
}}
|
||||
className={cn ('top-nav-menu-link relative z-10 flex h-full items-center px-5',
|
||||
className={cn ('relative z-10 flex h-full items-center px-5',
|
||||
(i === openItemIdx) && 'font-bold')}>
|
||||
{item.name}
|
||||
</PrefetchLink>
|
||||
@@ -264,7 +240,7 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
setMoreVsbl (true)
|
||||
measure (-1)
|
||||
}}
|
||||
className={cn ('top-nav-menu-link relative z-10 flex h-full items-center px-5',
|
||||
className={cn ('relative z-10 flex h-full items-center px-5',
|
||||
(openItemIdx < 0 || moreVsbl) && 'font-bold')}>
|
||||
その他 »
|
||||
</PrefetchLink>
|
||||
@@ -273,28 +249,30 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
|
||||
<TopNavUser user={user}/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="top-nav-mobile-toggle md:hidden ml-auto border-0 bg-transparent pr-4"
|
||||
onClick={() => {
|
||||
<a href="#"
|
||||
className="md:hidden ml-auto pr-4
|
||||
text-pink-600 hover:text-pink-400
|
||||
dark:text-pink-300 dark:hover:text-pink-100"
|
||||
onClick={ev => {
|
||||
ev.preventDefault ()
|
||||
setMenuOpen (!(menuOpen))
|
||||
}}>
|
||||
{menuOpen ? '×' : 'Menu'}
|
||||
</button>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<AnimatePresence initial={false}>
|
||||
<motion.div
|
||||
key="submenu-shell"
|
||||
{...(animationsOff ? { }
|
||||
: { layout: true })}
|
||||
className="relative z-20 hidden md:block overflow-hidden top-nav-submenu"
|
||||
layout
|
||||
className="relative z-20 hidden md:block overflow-hidden
|
||||
bg-yellow-200 dark:bg-red-950"
|
||||
animate={{ height: submenuHeight }}
|
||||
onMouseLeave={() => {
|
||||
if (moreVsbl)
|
||||
setMoreVsbl (false)
|
||||
}}
|
||||
transition={{ layout: topNavTransition }}
|
||||
transition={{ layout: { duration: .2, ease: 'easeOut' } }}
|
||||
onAnimationComplete={() => {
|
||||
measure (moreVsbl ? -1 : activeIdx)
|
||||
}}>
|
||||
@@ -304,14 +282,12 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
<div key={i} className="relative h-[40px]">
|
||||
<div className="absolute inset-0 flex items-center px-3">
|
||||
<motion.div
|
||||
transition={topNavTransition}
|
||||
{...(animationsOff
|
||||
? { }
|
||||
: ((item.visible ?? true)
|
||||
transition={{ duration: .2, ease: 'easeOut' }}
|
||||
{...((item.visible ?? true)
|
||||
? { layoutId: `menu-${ item.name }` }
|
||||
: { initial: { x: 40, y: -40, opacity: 0 },
|
||||
animate: { x: 0, y: 0, opacity: 1 },
|
||||
exit: { x: 40, y: -40, opacity: 0 } }))}
|
||||
exit: { x: 40, y: -40, opacity: 0 } })}
|
||||
className="z-10 h-full flex items-center px-3 font-bold w-28">
|
||||
<h2>{item.name}</h2>
|
||||
</motion.div>
|
||||
@@ -322,34 +298,30 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
? (
|
||||
<motion.div
|
||||
key={`c-${ i }-${ j }`}
|
||||
transition={topNavTransition}
|
||||
{...(animationsOff
|
||||
? { }
|
||||
: ((visibleMenu[activeIdx]?.name
|
||||
transition={{ duration: .2, ease: 'easeOut' }}
|
||||
{...((visibleMenu[activeIdx]?.name
|
||||
=== item.name)
|
||||
? { layoutId: `submenu-${ item.name }-${ j }` }
|
||||
: { initial: { y: -40, opacity: 0 },
|
||||
animate: { y: 0, opacity: 1 },
|
||||
exit: { y: -40, opacity: 0 } }))}>
|
||||
exit: { y: -40, opacity: 0 } })}>
|
||||
{subItem.component}
|
||||
</motion.div>)
|
||||
: (
|
||||
<motion.div
|
||||
key={`l-${ i }-${ j }`}
|
||||
transition={topNavTransition}
|
||||
{...(animationsOff
|
||||
? { }
|
||||
: ((visibleMenu[activeIdx]?.name
|
||||
transition={{ duration: .2, ease: 'easeOut' }}
|
||||
{...((visibleMenu[activeIdx]?.name
|
||||
=== item.name)
|
||||
? { layoutId: `submenu-${ item.name }-${ j }` }
|
||||
: { initial: { y: -40, opacity: 0 },
|
||||
animate: { y: 0, opacity: 1 },
|
||||
exit: { y: -40, opacity: 0 } }))}>
|
||||
exit: { y: -40, opacity: 0 } })}>
|
||||
<PrefetchLink
|
||||
to={subItem.to}
|
||||
target={subItem.to.slice (0, 2) === '//' ? '_blank' : undefined}
|
||||
onClick={() => setMoreVsbl (false)}
|
||||
className="top-nav-menu-link h-full flex items-center px-3">
|
||||
className="h-full flex items-center px-3">
|
||||
{subItem.name}
|
||||
</PrefetchLink>
|
||||
</motion.div>)))}
|
||||
@@ -358,215 +330,129 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
: ((visibleMenu[activeIdx]?.subMenu ?? []).length > 0
|
||||
&& (
|
||||
<div className="relative h-[40px]">
|
||||
{animationsOff
|
||||
? (
|
||||
<div className="absolute inset-0 flex items-center px-3">
|
||||
{(visibleMenu[activeIdx]?.subMenu ?? [])
|
||||
.filter (item => item.visible ?? true)
|
||||
.map ((item, i) => (
|
||||
'component' in item
|
||||
? (
|
||||
<div key={`c-${ i }`}>
|
||||
{item.component}
|
||||
</div>)
|
||||
: (
|
||||
<div key={`l-${ i }`}>
|
||||
<PrefetchLink
|
||||
to={item.to}
|
||||
target={item.to.slice (0, 2) === '//'
|
||||
? '_blank'
|
||||
: undefined}
|
||||
className="top-nav-menu-link h-full flex items-center px-3">
|
||||
{item.name}
|
||||
</PrefetchLink>
|
||||
</div>)))}
|
||||
</div>)
|
||||
: (
|
||||
<AnimatePresence initial={false} custom={dir}>
|
||||
<motion.div
|
||||
key={activeIdx}
|
||||
custom={dir}
|
||||
variants={{ enter: (d: -1 | 1) => ({ y: d * 24, opacity: 0 }),
|
||||
centre: { y: 0, opacity: 1 },
|
||||
exit: (d: -1 | 1) => ({ y: (-d) * 24, opacity: 0 }) }}
|
||||
className="absolute inset-0 flex items-center px-3"
|
||||
initial="enter"
|
||||
animate="centre"
|
||||
exit="exit"
|
||||
transition={topNavTransition}>
|
||||
{(visibleMenu[activeIdx]?.subMenu ?? [])
|
||||
.filter (item => item.visible ?? true)
|
||||
.map ((item, i) => (
|
||||
'component' in item
|
||||
? (
|
||||
<motion.div
|
||||
key={`c-${ i }`}
|
||||
transition={{ layout: topNavTransition }}
|
||||
layoutId={`submenu-${ visibleMenu[activeIdx].name }-${ i }`}>
|
||||
{item.component}
|
||||
</motion.div>)
|
||||
: (
|
||||
<motion.div
|
||||
key={`l-${ i }`}
|
||||
transition={{ layout: topNavTransition }}
|
||||
layoutId={`submenu-${ visibleMenu[activeIdx].name }-${ i }`}>
|
||||
<PrefetchLink
|
||||
to={item.to}
|
||||
target={item.to.slice (0, 2) === '//'
|
||||
? '_blank'
|
||||
: undefined}
|
||||
className="top-nav-menu-link h-full flex items-center px-3">
|
||||
{item.name}
|
||||
</PrefetchLink>
|
||||
</motion.div>)))}
|
||||
</motion.div>
|
||||
</AnimatePresence>)}
|
||||
<AnimatePresence initial={false} custom={dir}>
|
||||
<motion.div
|
||||
key={activeIdx}
|
||||
custom={dir}
|
||||
variants={{ enter: (d: -1 | 1) => ({ y: d * 24, opacity: 0 }),
|
||||
centre: { y: 0, opacity: 1 },
|
||||
exit: (d: -1 | 1) => ({ y: (-d) * 24, opacity: 0 }) }}
|
||||
className="absolute inset-0 flex items-center px-3"
|
||||
initial="enter"
|
||||
animate="centre"
|
||||
exit="exit"
|
||||
transition={{ duration: .2, ease: 'easeOut' }}>
|
||||
{(visibleMenu[activeIdx]?.subMenu ?? [])
|
||||
.filter (item => item.visible ?? true)
|
||||
.map ((item, i) => (
|
||||
'component' in item
|
||||
? (
|
||||
<motion.div
|
||||
key={`c-${ i }`}
|
||||
transition={{ layout: { duration: .2, ease: 'easeOut' } }}
|
||||
layoutId={`submenu-${ visibleMenu[activeIdx].name }-${ i }`}>
|
||||
{item.component}
|
||||
</motion.div>)
|
||||
: (
|
||||
<motion.div
|
||||
key={`l-${ i }`}
|
||||
transition={{ layout: { duration: .2, ease: 'easeOut' } }}
|
||||
layoutId={`submenu-${ visibleMenu[activeIdx].name }-${ i }`}>
|
||||
<PrefetchLink
|
||||
to={item.to}
|
||||
target={item.to.slice (0, 2) === '//' ? '_blank' : undefined}
|
||||
className="h-full flex items-center px-3">
|
||||
{item.name}
|
||||
</PrefetchLink>
|
||||
</motion.div>)))}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>))}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
{animationsOff
|
||||
? (
|
||||
menuOpen && (
|
||||
<div
|
||||
className={cn ('top-nav-root top-nav-mobile-menu flex flex-col md:hidden',
|
||||
'items-start')}>
|
||||
<Separator/>
|
||||
{visibleMenu.map ((item, i) => (
|
||||
<Fragment key={i}>
|
||||
<PrefetchLink
|
||||
to={i === openItemIdx ? item.to : '#'}
|
||||
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>) => {
|
||||
if (i !== openItemIdx)
|
||||
{
|
||||
ev.preventDefault ()
|
||||
setOpenItemIdx (i)
|
||||
}
|
||||
}}>
|
||||
{item.name}
|
||||
</PrefetchLink>
|
||||
<AnimatePresence initial={false}>
|
||||
{menuOpen && (
|
||||
<motion.div
|
||||
key="spmenu"
|
||||
className={cn ('flex flex-col md:hidden',
|
||||
'bg-yellow-200 dark:bg-red-975 items-start')}
|
||||
variants={{ closed: { clipPath: 'inset(0 0 100% 0)',
|
||||
height: 0 },
|
||||
open: { clipPath: 'inset(0 0 0% 0)',
|
||||
height: 'auto' } }}
|
||||
initial="closed"
|
||||
animate="open"
|
||||
exit="closed"
|
||||
transition={{ duration: .2, ease: 'easeOut' }}>
|
||||
<Separator/>
|
||||
{visibleMenu.map ((item, i) => (
|
||||
<Fragment key={i}>
|
||||
<PrefetchLink
|
||||
to={i === openItemIdx ? item.to : '#'}
|
||||
className={cn ('w-full min-h-[40px] flex items-center pl-8',
|
||||
((i === openItemIdx)
|
||||
&& 'font-bold bg-yellow-50 dark:bg-red-950'))}
|
||||
onClick={(ev: MouseEvent<HTMLAnchorElement>) => {
|
||||
if (i !== openItemIdx)
|
||||
{
|
||||
ev.preventDefault ()
|
||||
setOpenItemIdx (i)
|
||||
}
|
||||
}}>
|
||||
{item.name}
|
||||
</PrefetchLink>
|
||||
|
||||
{i === openItemIdx && (
|
||||
<div className="top-nav-submenu w-full">
|
||||
{item.subMenu
|
||||
.filter (subItem => subItem.visible ?? true)
|
||||
.map ((subItem, j) => (
|
||||
'component' in subItem
|
||||
? (
|
||||
<Fragment key={`sp-c-${ i }-${ j }`}>
|
||||
{subItem.component}
|
||||
</Fragment>)
|
||||
: (
|
||||
<PrefetchLink
|
||||
key={`sp-l-${ i }-${ j }`}
|
||||
to={subItem.to}
|
||||
target={subItem.to.slice (0, 2) === '//'
|
||||
? '_blank'
|
||||
: undefined}
|
||||
className="top-nav-mobile-row w-full min-h-[36px] flex items-center pl-12">
|
||||
{subItem.name}
|
||||
</PrefetchLink>)))}
|
||||
</div>)}
|
||||
</Fragment>))}
|
||||
<PrefetchLink
|
||||
to="/more"
|
||||
ref={(el: (HTMLAnchorElement | null)) => {
|
||||
itemsRef.current[visibleMenu.length] = el
|
||||
}}
|
||||
className={cn ('top-nav-mobile-row w-full min-h-[40px] flex items-center pl-8',
|
||||
((openItemIdx < 0)
|
||||
&& 'top-nav-mobile-active font-bold'))}>
|
||||
その他 »
|
||||
</PrefetchLink>
|
||||
<TopNavUser user={user} sp/>
|
||||
<Separator/>
|
||||
</div>))
|
||||
: (
|
||||
<AnimatePresence initial={false}>
|
||||
{menuOpen && (
|
||||
<motion.div
|
||||
key="spmenu"
|
||||
className={cn ('top-nav-root top-nav-mobile-menu flex flex-col md:hidden',
|
||||
'items-start')}
|
||||
variants={{ closed: { clipPath: 'inset(0 0 100% 0)',
|
||||
height: 0 },
|
||||
open: { clipPath: 'inset(0 0 0% 0)',
|
||||
height: 'auto' } }}
|
||||
initial="closed"
|
||||
animate="open"
|
||||
exit="closed"
|
||||
transition={topNavTransition}>
|
||||
<Separator/>
|
||||
{visibleMenu.map ((item, i) => (
|
||||
<Fragment key={i}>
|
||||
<PrefetchLink
|
||||
to={i === openItemIdx ? item.to : '#'}
|
||||
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>) => {
|
||||
if (i !== openItemIdx)
|
||||
{
|
||||
ev.preventDefault ()
|
||||
setOpenItemIdx (i)
|
||||
}
|
||||
}}>
|
||||
{item.name}
|
||||
</PrefetchLink>
|
||||
|
||||
<AnimatePresence initial={false}>
|
||||
{i === openItemIdx && (
|
||||
<motion.div
|
||||
key={`sp-sub-${ i }`}
|
||||
className="top-nav-submenu w-full"
|
||||
variants={{ closed: { clipPath: 'inset(0 0 100% 0)',
|
||||
height: 0,
|
||||
opacity: 0 },
|
||||
open: { clipPath: 'inset(0 0 0% 0)',
|
||||
height: 'auto',
|
||||
opacity: 1 } }}
|
||||
initial="closed"
|
||||
animate="open"
|
||||
exit="closed"
|
||||
transition={topNavTransition}>
|
||||
{item.subMenu
|
||||
.filter (subItem => subItem.visible ?? true)
|
||||
.map ((subItem, j) => (
|
||||
'component' in subItem
|
||||
? (
|
||||
<Fragment key={`sp-c-${ i }-${ j }`}>
|
||||
{subItem.component}
|
||||
</Fragment>)
|
||||
: (
|
||||
<PrefetchLink
|
||||
key={`sp-l-${ i }-${ j }`}
|
||||
to={subItem.to}
|
||||
target={subItem.to.slice (0, 2) === '//'
|
||||
? '_blank'
|
||||
: undefined}
|
||||
className="top-nav-mobile-row w-full min-h-[36px] flex items-center pl-12">
|
||||
{subItem.name}
|
||||
</PrefetchLink>)))}
|
||||
</motion.div>)}
|
||||
</AnimatePresence>
|
||||
</Fragment>))}
|
||||
<PrefetchLink
|
||||
to="/more"
|
||||
ref={(el: (HTMLAnchorElement | null)) => {
|
||||
itemsRef.current[visibleMenu.length] = el
|
||||
}}
|
||||
className={cn ('top-nav-mobile-row w-full min-h-[40px] flex items-center pl-8',
|
||||
((openItemIdx < 0)
|
||||
&& 'top-nav-mobile-active font-bold'))}>
|
||||
その他 »
|
||||
</PrefetchLink>
|
||||
<TopNavUser user={user} sp/>
|
||||
<Separator/>
|
||||
</motion.div>)}
|
||||
</AnimatePresence>)}
|
||||
<AnimatePresence initial={false}>
|
||||
{i === openItemIdx && (
|
||||
<motion.div
|
||||
key={`sp-sub-${ i }`}
|
||||
className="w-full bg-yellow-50 dark:bg-red-950"
|
||||
variants={{ closed: { clipPath: 'inset(0 0 100% 0)',
|
||||
height: 0,
|
||||
opacity: 0 },
|
||||
open: { clipPath: 'inset(0 0 0% 0)',
|
||||
height: 'auto',
|
||||
opacity: 1 } }}
|
||||
initial="closed"
|
||||
animate="open"
|
||||
exit="closed"
|
||||
transition={{ duration: .2, ease: 'easeOut' }}>
|
||||
{item.subMenu
|
||||
.filter (subItem => subItem.visible ?? true)
|
||||
.map ((subItem, j) => (
|
||||
'component' in subItem
|
||||
? (
|
||||
<Fragment key={`sp-c-${ i }-${ j }`}>
|
||||
{subItem.component}
|
||||
</Fragment>)
|
||||
: (
|
||||
<PrefetchLink
|
||||
key={`sp-l-${ i }-${ j }`}
|
||||
to={subItem.to}
|
||||
target={subItem.to.slice (0, 2) === '//'
|
||||
? '_blank'
|
||||
: undefined}
|
||||
className="w-full min-h-[36px] flex items-center pl-12">
|
||||
{subItem.name}
|
||||
</PrefetchLink>)))}
|
||||
</motion.div>)}
|
||||
</AnimatePresence>
|
||||
</Fragment>))}
|
||||
<PrefetchLink
|
||||
to="/more"
|
||||
ref={(el: (HTMLAnchorElement | null)) => {
|
||||
itemsRef.current[visibleMenu.length] = el
|
||||
}}
|
||||
className={cn ('w-full min-h-[40px] flex items-center pl-8',
|
||||
((openItemIdx < 0)
|
||||
&& 'font-bold bg-yellow-50 dark:bg-red-950'))}>
|
||||
その他 »
|
||||
</PrefetchLink>
|
||||
<TopNavUser user={user} sp/>
|
||||
<Separator/>
|
||||
</motion.div>)}
|
||||
</AnimatePresence>
|
||||
</>)
|
||||
}
|
||||
|
||||
|
||||
@@ -20,16 +20,4 @@ describe ('TabGroup', () => {
|
||||
expect (screen.getByText ('Alpha')).toBeInTheDocument ()
|
||||
expect (screen.queryByText ('Beta')).not.toBeInTheDocument ()
|
||||
})
|
||||
|
||||
it ('renders tabs as buttons and shows the right addon', () => {
|
||||
render (
|
||||
<TabGroup rightAddon={<span>件数 20</span>}>
|
||||
<Tab name="広場">Plaza</Tab>
|
||||
</TabGroup>,
|
||||
)
|
||||
|
||||
expect (screen.getByRole ('button', { name: '広場' })).toBeInTheDocument ()
|
||||
expect (screen.queryByRole ('link', { name: '広場' })).not.toBeInTheDocument ()
|
||||
expect (screen.getByText ('件数 20')).toBeInTheDocument ()
|
||||
})
|
||||
})
|
||||
|
||||
@@ -7,15 +7,12 @@ type TabProps = { name: string
|
||||
init?: boolean
|
||||
children: React.ReactNode }
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode
|
||||
rightAddon?: React.ReactNode
|
||||
}
|
||||
type Props = { children: React.ReactNode }
|
||||
|
||||
export const Tab = ({ children }: TabProps) => <>{children}</>
|
||||
|
||||
|
||||
const TabGroup: FC<Props> = ({ children, rightAddon }) => {
|
||||
const TabGroup: FC<Props> = ({ children }) => {
|
||||
const tabs = React.Children.toArray (children) as React.ReactElement<TabProps>[]
|
||||
|
||||
const [current, setCurrent] = useState<number> (() => {
|
||||
@@ -25,27 +22,17 @@ const TabGroup: FC<Props> = ({ children, rightAddon }) => {
|
||||
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div className="flex min-w-0 gap-4">
|
||||
{tabs.map ((tab, i) => (
|
||||
<button
|
||||
key={i}
|
||||
type="button"
|
||||
className={cn (
|
||||
'bg-transparent p-0 text-left text-[hsl(var(--theme-link))] hover:opacity-85',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
|
||||
i === current && 'font-bold',
|
||||
)}
|
||||
onClick={() => {
|
||||
setCurrent (i)
|
||||
}}>
|
||||
{tab.props.name}
|
||||
</button>))}
|
||||
</div>
|
||||
{rightAddon && (
|
||||
<div className="shrink-0">
|
||||
{rightAddon}
|
||||
</div>)}
|
||||
<div className="flex gap-4">
|
||||
{tabs.map ((tab, i) => (
|
||||
<a key={i}
|
||||
href="#"
|
||||
className={cn (i === current && 'font-bold')}
|
||||
onClick={ev => {
|
||||
ev.preventDefault ()
|
||||
setCurrent (i)
|
||||
}}>
|
||||
{tab.props.name}
|
||||
</a>))}
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
{tabs[current]}
|
||||
|
||||
@@ -26,7 +26,7 @@ describe ('TagInput', () => {
|
||||
await waitFor (() => {
|
||||
expect (api.apiGet).toHaveBeenCalledWith (
|
||||
'/tags/autocomplete',
|
||||
{ params: { q: '虹夏', nico: '0' } },
|
||||
{ params: { q: '虹夏' } },
|
||||
)
|
||||
})
|
||||
expect (setValue).toHaveBeenCalledWith ('ぼっち 虹夏')
|
||||
@@ -41,20 +41,4 @@ describe ('TagInput', () => {
|
||||
expect (api.apiGet).not.toHaveBeenCalled ()
|
||||
expect (setValue).toHaveBeenCalledWith (' ')
|
||||
})
|
||||
|
||||
it ('sends nico=1 only when includeNico is true', async () => {
|
||||
const setValue = vi.fn ()
|
||||
api.apiGet.mockResolvedValueOnce ([buildTag ({ name: '虹夏', postCount: 2 })])
|
||||
|
||||
render (<TagInput value="" setValue={setValue} includeNico={true}/>)
|
||||
|
||||
fireEvent.change (screen.getByRole ('textbox'), { target: { value: '虹夏' } })
|
||||
|
||||
await waitFor (() => {
|
||||
expect (api.apiGet).toHaveBeenCalledWith (
|
||||
'/tags/autocomplete',
|
||||
{ params: { q: '虹夏', nico: '1' } },
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -10,20 +10,13 @@ import type { Tag } from '@/types'
|
||||
|
||||
|
||||
type Props = {
|
||||
includeNico?: boolean
|
||||
describedBy?: string
|
||||
invalid?: boolean
|
||||
value: string
|
||||
setValue: (value: string) => void }
|
||||
|
||||
|
||||
const TagInput: FC<Props> = ({
|
||||
includeNico = false,
|
||||
describedBy,
|
||||
invalid,
|
||||
value,
|
||||
setValue,
|
||||
}) => {
|
||||
const TagInput: FC<Props> = ({ describedBy, invalid, value, setValue }) => {
|
||||
const [activeIndex, setActiveIndex] = useState (-1)
|
||||
const [suggestions, setSuggestions] = useState<Tag[]> ([])
|
||||
const [suggestionsVsbl, setSuggestionsVsbl] = useState (false)
|
||||
@@ -39,12 +32,10 @@ const TagInput: FC<Props> = ({
|
||||
return
|
||||
}
|
||||
|
||||
const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: {
|
||||
q,
|
||||
nico: includeNico ? '1' : '0' } })
|
||||
const nextSuggestions = data.filter (t => t.postCount > 0)
|
||||
setSuggestions (nextSuggestions)
|
||||
setSuggestionsVsbl (nextSuggestions.length > 0)
|
||||
const data = await apiGet<Tag[]> ('/tags/autocomplete', { params: { q } })
|
||||
setSuggestions (data.filter (t => t.postCount > 0))
|
||||
if (suggestions.length > 0)
|
||||
setSuggestionsVsbl (true)
|
||||
}
|
||||
|
||||
// TODO: TagSearch からのコピペのため，共通化を考へる．
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
import { clientAnimationTransition } from '@/lib/clientAnimation'
|
||||
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import type { FC, ReactNode } from 'react'
|
||||
@@ -11,21 +9,12 @@ type Props = {
|
||||
className?: string }
|
||||
|
||||
|
||||
const MainArea: FC<Props> = ({ children, className }) => {
|
||||
const behaviourSettings = useClientBehaviourSettings ()
|
||||
const animationMode = behaviourSettings.animation ?? 'normal'
|
||||
const layoutTransition = clientAnimationTransition (
|
||||
animationMode,
|
||||
{ normal: { duration: .2, ease: 'easeOut' as const } },
|
||||
)
|
||||
const MainArea: FC<Props> = ({ children, className }) => (
|
||||
<motion.main
|
||||
transition={{ layout: { duration: .2, ease: 'easeOut' } }}
|
||||
className={cn ('flex-1 overflow-y-auto p-4', className)}
|
||||
layout="position">
|
||||
{children}
|
||||
</motion.main>)
|
||||
|
||||
return (
|
||||
<motion.main
|
||||
transition={{ layout: layoutTransition }}
|
||||
className={cn ('flex-1 overflow-y-auto p-4', className)}
|
||||
layout={animationMode === 'off' ? false : 'position'}>
|
||||
{children}
|
||||
</motion.main>)
|
||||
}
|
||||
|
||||
export default MainArea
|
||||
export default MainArea
|
||||
@@ -1,124 +0,0 @@
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react'
|
||||
import { HelmetProvider } from 'react-helmet-async'
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
|
||||
import SidebarComponent from '@/components/layout/SidebarComponent'
|
||||
|
||||
|
||||
const sidebarWidth = (element: Element | null): string =>
|
||||
(element as HTMLElement).style.getPropertyValue ('--sidebar-width')
|
||||
|
||||
|
||||
const sidebarRoot = (container: HTMLElement): Element =>
|
||||
container.querySelector ('[style*="--sidebar-width"]')!
|
||||
|
||||
|
||||
const sidebarTree = (props: Partial<Parameters<typeof SidebarComponent>[0]>) => (
|
||||
<HelmetProvider>
|
||||
<div data-sidebar-container>
|
||||
<SidebarComponent sidebarKey="test-sidebar" {...props}>
|
||||
Sidebar body
|
||||
</SidebarComponent>
|
||||
</div>
|
||||
</HelmetProvider>)
|
||||
|
||||
|
||||
const renderSidebar = (
|
||||
props: Partial<Parameters<typeof SidebarComponent>[0]> = {},
|
||||
containerWidth = 800,
|
||||
) => {
|
||||
Object.defineProperty (HTMLElement.prototype, 'clientWidth', {
|
||||
configurable: true,
|
||||
get () {
|
||||
return this.hasAttribute ('data-sidebar-container') ? containerWidth : 0
|
||||
},
|
||||
})
|
||||
|
||||
const rendered = render (sidebarTree (props))
|
||||
|
||||
return rendered
|
||||
}
|
||||
|
||||
|
||||
describe ('SidebarComponent', () => {
|
||||
beforeEach (() => {
|
||||
Object.defineProperty (window, 'innerWidth', {
|
||||
configurable: true,
|
||||
value: 1_000,
|
||||
})
|
||||
|
||||
Object.defineProperty (HTMLElement.prototype, 'setPointerCapture', {
|
||||
configurable: true,
|
||||
value: vi.fn (),
|
||||
})
|
||||
Object.defineProperty (HTMLElement.prototype, 'releasePointerCapture', {
|
||||
configurable: true,
|
||||
value: vi.fn (),
|
||||
})
|
||||
Object.defineProperty (HTMLElement.prototype, 'hasPointerCapture', {
|
||||
configurable: true,
|
||||
value: vi.fn (() => true),
|
||||
})
|
||||
|
||||
vi.spyOn (HTMLElement.prototype, 'setPointerCapture').mockImplementation (() => {
|
||||
;
|
||||
})
|
||||
vi.spyOn (HTMLElement.prototype, 'releasePointerCapture').mockImplementation (() => {
|
||||
;
|
||||
})
|
||||
vi.spyOn (HTMLElement.prototype, 'hasPointerCapture').mockReturnValue (true)
|
||||
})
|
||||
|
||||
it ('uses maxWidth without applying the container main-width reserve twice', async () => {
|
||||
localStorage.setItem ('sidebar:test-sidebar:left:width', '700')
|
||||
const onWidthChange = vi.fn ()
|
||||
|
||||
const { container } = renderSidebar ({ maxWidth: 700, onWidthChange }, 800)
|
||||
|
||||
await waitFor (() => {
|
||||
expect (sidebarWidth (sidebarRoot (container))).toBe ('700px')
|
||||
})
|
||||
expect (onWidthChange).toHaveBeenLastCalledWith (700)
|
||||
})
|
||||
|
||||
it ('resets width and removes only its storage key on double click', async () => {
|
||||
localStorage.setItem ('sidebar:test-sidebar:right:width', '420')
|
||||
localStorage.setItem ('sidebar:other-sidebar:right:width', '480')
|
||||
|
||||
const { container } = renderSidebar ({ side: 'right' }, 900)
|
||||
|
||||
await waitFor (() => {
|
||||
expect (sidebarWidth (sidebarRoot (container))).toBe ('420px')
|
||||
})
|
||||
|
||||
fireEvent.doubleClick (screen.getByRole ('separator', { name: 'サイドバー幅' }))
|
||||
|
||||
await waitFor (() => {
|
||||
expect (sidebarWidth (sidebarRoot (container))).toBe ('256px')
|
||||
})
|
||||
expect (localStorage.getItem ('sidebar:test-sidebar:right:width')).toBeNull ()
|
||||
expect (localStorage.getItem ('sidebar:other-sidebar:right:width')).toBe ('480')
|
||||
})
|
||||
|
||||
it ('clamps current width on maxWidth changes without re-reading storage', async () => {
|
||||
localStorage.setItem ('sidebar:test-sidebar:left:width', '420')
|
||||
|
||||
const { container, rerender } = renderSidebar ({ maxWidth: 420 }, 900)
|
||||
|
||||
await waitFor (() => {
|
||||
expect (sidebarWidth (sidebarRoot (container))).toBe ('420px')
|
||||
})
|
||||
|
||||
rerender (sidebarTree ({ maxWidth: 300 }))
|
||||
|
||||
await waitFor (() => {
|
||||
expect (sidebarWidth (sidebarRoot (container))).toBe ('300px')
|
||||
})
|
||||
|
||||
rerender (sidebarTree ({ maxWidth: 500 }))
|
||||
|
||||
await waitFor (() => {
|
||||
expect (sidebarWidth (sidebarRoot (container))).toBe ('300px')
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -1,327 +1,19 @@
|
||||
import { motion } from 'framer-motion'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
|
||||
import { clientAnimationTransition } from '@/lib/clientAnimation'
|
||||
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
|
||||
import { cn } from '@/lib/utils'
|
||||
import type { FC, ReactNode } from 'react'
|
||||
|
||||
import type { CSSProperties, FC, MouseEvent, PointerEvent, ReactNode } from 'react'
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
|
||||
type SidebarSide = 'left' | 'right'
|
||||
|
||||
type Props = {
|
||||
children: ReactNode
|
||||
className?: string
|
||||
maxWidth?: number
|
||||
onWidthChange?: (width: number) => void
|
||||
sidebarKey: string
|
||||
side?: SidebarSide }
|
||||
|
||||
type ResizeState = {
|
||||
pointerId: number
|
||||
startWidth: number
|
||||
startX: number
|
||||
side: SidebarSide }
|
||||
|
||||
type PendingPressState = ResizeState & { startY: number }
|
||||
|
||||
const DEFAULT_SIDEBAR_WIDTH = 256
|
||||
const MIN_SIDEBAR_WIDTH = 192
|
||||
const MIN_MAIN_WIDTH = 360
|
||||
const MAX_VIEWPORT_WIDTH_RATIO = .8
|
||||
const LONG_PRESS_DELAY_MS = 350
|
||||
const TOUCH_MOVE_THRESHOLD_PX = 8
|
||||
type Props = { children: ReactNode }
|
||||
|
||||
|
||||
const storageKeyForSidebar = (sidebarKey: string, side: SidebarSide): string =>
|
||||
`sidebar:${ sidebarKey }:${ side }:width`
|
||||
|
||||
|
||||
const getSidebarMaxWidth = (containerWidth: number): number => {
|
||||
const viewportWidth =
|
||||
typeof window === 'undefined' ? containerWidth : window.innerWidth
|
||||
const viewportMaxWidth = Math.floor (viewportWidth * MAX_VIEWPORT_WIDTH_RATIO)
|
||||
const containerMaxWidth = Math.floor (containerWidth - MIN_MAIN_WIDTH)
|
||||
const dynamicMaxWidth = Math.min (viewportMaxWidth, containerMaxWidth)
|
||||
|
||||
return Math.max (MIN_SIDEBAR_WIDTH, dynamicMaxWidth)
|
||||
}
|
||||
|
||||
|
||||
const readStoredSidebarWidth = (
|
||||
sidebarKey: string,
|
||||
side: SidebarSide): number => {
|
||||
if (typeof window === 'undefined')
|
||||
return DEFAULT_SIDEBAR_WIDTH
|
||||
|
||||
const value = window.localStorage.getItem (storageKeyForSidebar (sidebarKey, side))
|
||||
const width = value == null ? Number.NaN : Number (value)
|
||||
|
||||
return Number.isFinite (width) ? width : DEFAULT_SIDEBAR_WIDTH
|
||||
}
|
||||
|
||||
|
||||
const SidebarComponent: FC<Props> = ({
|
||||
children,
|
||||
className,
|
||||
maxWidth,
|
||||
onWidthChange,
|
||||
sidebarKey,
|
||||
side = 'left',
|
||||
}) => {
|
||||
const behaviourSettings = useClientBehaviourSettings ()
|
||||
const animationMode = behaviourSettings.animation ?? 'normal'
|
||||
const layoutTransition = clientAnimationTransition (
|
||||
animationMode,
|
||||
{ normal: { duration: .2, ease: 'easeOut' as const } },
|
||||
)
|
||||
const rootRef = useRef<HTMLDivElement | null> (null)
|
||||
const maxWidthRef = useRef (maxWidth)
|
||||
const getContainerWidth = useCallback (() => {
|
||||
const containerWidth = rootRef.current
|
||||
?.closest ('[data-sidebar-container]')
|
||||
?.clientWidth
|
||||
?? window.innerWidth
|
||||
return containerWidth
|
||||
}, [])
|
||||
const getClampedWidth = useCallback ((
|
||||
nextWidth: number,
|
||||
containerWidth: number): number => {
|
||||
const viewportWidth =
|
||||
typeof window === 'undefined' ? containerWidth : window.innerWidth
|
||||
const viewportMaxWidth = Math.floor (viewportWidth * MAX_VIEWPORT_WIDTH_RATIO)
|
||||
const maxAllowedWidth =
|
||||
maxWidthRef.current == null
|
||||
? getSidebarMaxWidth (containerWidth)
|
||||
: Math.max (
|
||||
MIN_SIDEBAR_WIDTH,
|
||||
Math.min (viewportMaxWidth, maxWidthRef.current))
|
||||
|
||||
return Math.min (maxAllowedWidth, Math.max (MIN_SIDEBAR_WIDTH, nextWidth))
|
||||
}, [])
|
||||
|
||||
const [width, setWidth] = useState (() => (
|
||||
typeof window === 'undefined'
|
||||
? DEFAULT_SIDEBAR_WIDTH
|
||||
: getClampedWidth (
|
||||
readStoredSidebarWidth (sidebarKey, side),
|
||||
window.innerWidth)))
|
||||
const [resizing, setResizing] = useState (false)
|
||||
const widthRef = useRef (width)
|
||||
const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null> (null)
|
||||
const pendingPressRef = useRef<PendingPressState | null> (null)
|
||||
const resizeRef = useRef<ResizeState | null> (null)
|
||||
const bodyStyleRef = useRef<{ cursor: string, userSelect: string } | null> (null)
|
||||
|
||||
const clearLongPressTimer = useCallback (() => {
|
||||
if (longPressTimerRef.current == null)
|
||||
return
|
||||
|
||||
clearTimeout (longPressTimerRef.current)
|
||||
longPressTimerRef.current = null
|
||||
}, [])
|
||||
|
||||
const restoreBodyStyle = useCallback (() => {
|
||||
if (bodyStyleRef.current == null)
|
||||
return
|
||||
|
||||
document.body.style.cursor = bodyStyleRef.current.cursor
|
||||
document.body.style.userSelect = bodyStyleRef.current.userSelect
|
||||
bodyStyleRef.current = null
|
||||
}, [])
|
||||
|
||||
const startResize = useCallback ((state: ResizeState) => {
|
||||
clearLongPressTimer ()
|
||||
pendingPressRef.current = null
|
||||
resizeRef.current = state
|
||||
setResizing (true)
|
||||
|
||||
if (bodyStyleRef.current == null)
|
||||
{
|
||||
bodyStyleRef.current = {
|
||||
cursor: document.body.style.cursor,
|
||||
userSelect: document.body.style.userSelect }
|
||||
}
|
||||
|
||||
document.body.style.cursor = 'col-resize'
|
||||
document.body.style.userSelect = 'none'
|
||||
}, [clearLongPressTimer])
|
||||
|
||||
const finishResize = useCallback (() => {
|
||||
clearLongPressTimer ()
|
||||
pendingPressRef.current = null
|
||||
|
||||
const state = resizeRef.current
|
||||
resizeRef.current = null
|
||||
|
||||
if (state != null)
|
||||
window.localStorage.setItem (
|
||||
storageKeyForSidebar (sidebarKey, state.side),
|
||||
String (widthRef.current))
|
||||
|
||||
setResizing (false)
|
||||
restoreBodyStyle ()
|
||||
}, [clearLongPressTimer, restoreBodyStyle, sidebarKey])
|
||||
|
||||
const applyWidth = useCallback ((nextWidth: number) => {
|
||||
if (nextWidth === widthRef.current)
|
||||
return
|
||||
|
||||
widthRef.current = nextWidth
|
||||
setWidth (nextWidth)
|
||||
}, [])
|
||||
|
||||
useEffect (() => {
|
||||
maxWidthRef.current = maxWidth
|
||||
const containerWidth = getContainerWidth ()
|
||||
const nextWidth = getClampedWidth (widthRef.current, containerWidth)
|
||||
applyWidth (nextWidth)
|
||||
}, [applyWidth, getClampedWidth, getContainerWidth, maxWidth])
|
||||
|
||||
const updateWidth = useCallback ((clientX: number) => {
|
||||
const state = resizeRef.current
|
||||
if (state == null)
|
||||
return
|
||||
|
||||
const containerWidth = getContainerWidth ()
|
||||
const delta = state.side === 'left'
|
||||
? clientX - state.startX
|
||||
: state.startX - clientX
|
||||
const nextWidth = getClampedWidth (state.startWidth + delta, containerWidth)
|
||||
applyWidth (nextWidth)
|
||||
}, [applyWidth, getClampedWidth, getContainerWidth])
|
||||
|
||||
const handlePointerDown = (ev: PointerEvent<HTMLDivElement>) => {
|
||||
if (ev.pointerType !== 'mouse' && ev.pointerType !== 'touch')
|
||||
return
|
||||
|
||||
if (ev.pointerType === 'mouse' && ev.button !== 0)
|
||||
return
|
||||
|
||||
ev.preventDefault ()
|
||||
ev.stopPropagation ()
|
||||
ev.currentTarget.setPointerCapture (ev.pointerId)
|
||||
|
||||
const state = {
|
||||
pointerId: ev.pointerId,
|
||||
side,
|
||||
startWidth: widthRef.current,
|
||||
startX: ev.clientX }
|
||||
|
||||
if (ev.pointerType === 'mouse')
|
||||
{
|
||||
startResize (state)
|
||||
return
|
||||
}
|
||||
|
||||
pendingPressRef.current = { ...state, startY: ev.clientY }
|
||||
clearLongPressTimer ()
|
||||
longPressTimerRef.current = setTimeout (() => {
|
||||
if (pendingPressRef.current != null)
|
||||
startResize (pendingPressRef.current)
|
||||
}, LONG_PRESS_DELAY_MS)
|
||||
}
|
||||
|
||||
const handlePointerMove = (ev: PointerEvent<HTMLDivElement>) => {
|
||||
ev.stopPropagation ()
|
||||
|
||||
if (resizeRef.current != null)
|
||||
{
|
||||
ev.preventDefault ()
|
||||
updateWidth (ev.clientX)
|
||||
return
|
||||
}
|
||||
|
||||
const pendingPress = pendingPressRef.current
|
||||
if (pendingPress == null || pendingPress.pointerId !== ev.pointerId)
|
||||
return
|
||||
|
||||
const deltaX = ev.clientX - pendingPress.startX
|
||||
const deltaY = ev.clientY - pendingPress.startY
|
||||
const distance = Math.hypot (deltaX, deltaY)
|
||||
|
||||
if (distance >= TOUCH_MOVE_THRESHOLD_PX)
|
||||
{
|
||||
clearLongPressTimer ()
|
||||
pendingPressRef.current = null
|
||||
}
|
||||
}
|
||||
|
||||
const handlePointerEnd = (ev: PointerEvent<HTMLDivElement>) => {
|
||||
ev.stopPropagation ()
|
||||
|
||||
if (ev.currentTarget.hasPointerCapture (ev.pointerId))
|
||||
ev.currentTarget.releasePointerCapture (ev.pointerId)
|
||||
|
||||
finishResize ()
|
||||
}
|
||||
|
||||
const resetWidth = useCallback (() => {
|
||||
const containerWidth = getContainerWidth ()
|
||||
const nextWidth = getClampedWidth (DEFAULT_SIDEBAR_WIDTH, containerWidth)
|
||||
applyWidth (nextWidth)
|
||||
window.localStorage.removeItem (storageKeyForSidebar (sidebarKey, side))
|
||||
}, [applyWidth, getClampedWidth, getContainerWidth, sidebarKey, side])
|
||||
|
||||
const handleDoubleClick = (ev: MouseEvent<HTMLDivElement>) => {
|
||||
ev.preventDefault ()
|
||||
ev.stopPropagation ()
|
||||
resetWidth ()
|
||||
}
|
||||
|
||||
useEffect (() => {
|
||||
const containerWidth = getContainerWidth ()
|
||||
const nextWidth = getClampedWidth (
|
||||
readStoredSidebarWidth (sidebarKey, side),
|
||||
containerWidth)
|
||||
applyWidth (nextWidth)
|
||||
}, [applyWidth, getClampedWidth, getContainerWidth, sidebarKey, side])
|
||||
|
||||
useEffect (() => {
|
||||
const containerWidth = getContainerWidth ()
|
||||
const nextWidth = getClampedWidth (widthRef.current, containerWidth)
|
||||
applyWidth (nextWidth)
|
||||
}, [applyWidth, getClampedWidth, getContainerWidth])
|
||||
|
||||
useEffect (() => {
|
||||
if (typeof window === 'undefined')
|
||||
return
|
||||
|
||||
const handleResize = () => {
|
||||
const containerWidth = getContainerWidth ()
|
||||
const nextWidth = getClampedWidth (widthRef.current, containerWidth)
|
||||
applyWidth (nextWidth)
|
||||
}
|
||||
|
||||
window.addEventListener ('resize', handleResize)
|
||||
return () => window.removeEventListener ('resize', handleResize)
|
||||
}, [applyWidth, getClampedWidth, getContainerWidth])
|
||||
|
||||
useEffect (() => {
|
||||
onWidthChange?.(width)
|
||||
}, [onWidthChange, width])
|
||||
|
||||
useEffect (() => () => {
|
||||
clearLongPressTimer ()
|
||||
restoreBodyStyle ()
|
||||
}, [clearLongPressTimer, restoreBodyStyle])
|
||||
|
||||
const style = {
|
||||
'--sidebar-width': `${ width }px` } as CSSProperties
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={rootRef}
|
||||
layout={animationMode === 'off' ? false : 'position'}
|
||||
transition={{ layout: layoutTransition }}
|
||||
style={style}
|
||||
className={cn (
|
||||
'relative w-full md:w-[var(--sidebar-width)] md:shrink-0 md:h-full',
|
||||
className)}>
|
||||
<Helmet>
|
||||
<style>
|
||||
{`
|
||||
const SidebarComponent: FC<Props> = ({ children }) => (
|
||||
<motion.div
|
||||
layout="position"
|
||||
transition={{ layout: { duration: .2, ease: 'easeOut' } }}
|
||||
className="p-4 w-full md:w-64 md:h-full md:overflow-y-auto sidebar">
|
||||
<Helmet>
|
||||
<style>
|
||||
{`
|
||||
.sidebar
|
||||
{
|
||||
direction: rtl;
|
||||
@@ -331,34 +23,10 @@ const SidebarComponent: FC<Props> = ({
|
||||
{
|
||||
direction: ltr;
|
||||
}`}
|
||||
</style>
|
||||
</Helmet>
|
||||
</style>
|
||||
</Helmet>
|
||||
|
||||
<div className="h-full overflow-y-auto p-4 sidebar">
|
||||
{children}
|
||||
</div>
|
||||
{children}
|
||||
</motion.div>)
|
||||
|
||||
<div
|
||||
role="separator"
|
||||
aria-orientation="vertical"
|
||||
aria-label="サイドバー幅"
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerUp={handlePointerEnd}
|
||||
onPointerCancel={handlePointerEnd}
|
||||
onDoubleClick={handleDoubleClick}
|
||||
className={cn (
|
||||
'hidden md:block absolute top-0 bottom-0 z-20 w-4 cursor-col-resize',
|
||||
'touch-none select-none',
|
||||
side === 'left' ? '-right-2' : '-left-2',
|
||||
'before:absolute before:top-0 before:bottom-0 before:w-px',
|
||||
'before:bg-neutral-500/0 hover:before:bg-neutral-500/30',
|
||||
'before:transition-colors before:duration-150',
|
||||
side === 'left'
|
||||
? 'before:left-1/2'
|
||||
: 'before:right-1/2',
|
||||
resizing && 'before:bg-neutral-500/40')}/>
|
||||
</motion.div>)
|
||||
}
|
||||
|
||||
export default SidebarComponent
|
||||
export default SidebarComponent
|
||||
@@ -1,198 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { toast } from '@/components/ui/use-toast'
|
||||
import { getClientBehaviorSettings, setClientBehaviorSettings } from '@/lib/settings'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import type { FC, ReactNode } from 'react'
|
||||
|
||||
import type { ClientAnimationMode,
|
||||
ClientBehaviorSettings,
|
||||
ClientEmbedAutoLoadMode,
|
||||
ClientLinkPreloadMode,
|
||||
ClientTagRelationDisplayMode } from '@/lib/settings'
|
||||
|
||||
type Props = {
|
||||
sectionClassName: string
|
||||
onDirtyStateChange?: (
|
||||
dirty: boolean,
|
||||
discard: () => void,
|
||||
) => void }
|
||||
|
||||
type SegmentedOption<T extends string> = {
|
||||
value: T
|
||||
label: string }
|
||||
|
||||
type SegmentedControlProps<T extends string> = {
|
||||
value: T
|
||||
options: SegmentedOption<T>[]
|
||||
onChange: (value: T) => void }
|
||||
|
||||
type SettingBlockProps = {
|
||||
title: string
|
||||
description?: string
|
||||
children: ReactNode }
|
||||
|
||||
const animationOptions: SegmentedOption<ClientAnimationMode>[] = [
|
||||
{ value: 'off', label: 'なし' },
|
||||
{ value: 'reduced', label: '控えめ' },
|
||||
{ value: 'normal', label: '通常' }]
|
||||
|
||||
const embedAutoLoadOptions: SegmentedOption<ClientEmbedAutoLoadMode>[] = [
|
||||
{ value: 'off', label: '読み込まない' },
|
||||
{ value: 'manual', label: 'クリック時' },
|
||||
{ value: 'auto', label: '自動' }]
|
||||
|
||||
const linkPreloadOptions: SegmentedOption<ClientLinkPreloadMode>[] = [
|
||||
{ value: 'off', label: 'しない' },
|
||||
{ value: 'intent', label: 'する' }]
|
||||
|
||||
const tagRelationDisplayOptions: SegmentedOption<ClientTagRelationDisplayMode>[] = [
|
||||
{ value: 'flat', label: 'まとめない' },
|
||||
{ value: 'grouped', label: 'まとめる' }]
|
||||
|
||||
const SegmentedControl = <T extends string,> (
|
||||
{ value, options, onChange }: SegmentedControlProps<T>,
|
||||
) => {
|
||||
return (
|
||||
<div
|
||||
role="radiogroup"
|
||||
className="flex flex-wrap gap-2 rounded-xl border border-border bg-muted/40 p-1">
|
||||
{options.map (option => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
role="radio"
|
||||
aria-checked={value === option.value}
|
||||
className={cn (
|
||||
'min-w-0 flex-1 rounded-lg px-3 py-2 text-sm font-medium',
|
||||
'transition-colors focus-visible:outline-none focus-visible:ring-2',
|
||||
'focus-visible:ring-ring focus-visible:ring-offset-2',
|
||||
value === option.value
|
||||
? 'bg-primary text-primary-foreground shadow-sm ring-1 ring-primary/40'
|
||||
: 'bg-transparent text-muted-foreground hover:bg-background/70 hover:text-foreground',
|
||||
)}
|
||||
onClick={() => onChange (option.value)}>
|
||||
{option.label}
|
||||
</button>))}
|
||||
</div>)
|
||||
}
|
||||
|
||||
|
||||
const SettingBlock: FC<SettingBlockProps> = (
|
||||
{ title, description, children },
|
||||
) => (
|
||||
<div className="space-y-3 rounded-xl px-4">
|
||||
<div className="space-y-1">
|
||||
<h3 className="text-sm font-semibold">{title}</h3>
|
||||
<p className="text-sm text-muted-foreground">{description}</p>
|
||||
</div>
|
||||
{children}
|
||||
</div>)
|
||||
|
||||
|
||||
const BehaviourSettingsSection: FC<Props> = (
|
||||
{ sectionClassName,
|
||||
onDirtyStateChange },
|
||||
) => {
|
||||
const [savedSettings, setSavedSettings] =
|
||||
useState<ClientBehaviorSettings> (() => getClientBehaviorSettings ())
|
||||
const [draftSettings, setDraftSettings] =
|
||||
useState<ClientBehaviorSettings> (() => getClientBehaviorSettings ())
|
||||
|
||||
useEffect (() => {
|
||||
const current = getClientBehaviorSettings ()
|
||||
setSavedSettings (current)
|
||||
setDraftSettings (current)
|
||||
}, [])
|
||||
|
||||
const hasUnsavedChanges = useMemo (
|
||||
() => JSON.stringify (draftSettings) !== JSON.stringify (savedSettings),
|
||||
[draftSettings, savedSettings])
|
||||
|
||||
const updateDraft = <Key extends keyof ClientBehaviorSettings,> (
|
||||
key: Key,
|
||||
value: ClientBehaviorSettings[Key],
|
||||
) => {
|
||||
setDraftSettings (current => ({ ...current, [key]: value }))
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
const next = setClientBehaviorSettings (draftSettings)
|
||||
setSavedSettings (next)
|
||||
setDraftSettings (next)
|
||||
toast ({ title: '動作設定を保存しました' })
|
||||
}
|
||||
|
||||
const handleDiscard = () => {
|
||||
setDraftSettings (savedSettings)
|
||||
}
|
||||
|
||||
useEffect (() => {
|
||||
onDirtyStateChange?.(hasUnsavedChanges, handleDiscard)
|
||||
|
||||
return () => {
|
||||
onDirtyStateChange?.(false, () => { })
|
||||
}
|
||||
}, [handleDiscard, hasUnsavedChanges, onDirtyStateChange])
|
||||
|
||||
return (
|
||||
<section className={sectionClassName}>
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-xl font-bold">動作</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
disabled={hasUnsavedChanges === false}
|
||||
onClick={handleDiscard}>
|
||||
変更を破棄
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={hasUnsavedChanges === false}
|
||||
onClick={handleSave}>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<SettingBlock title="アニメーション">
|
||||
<SegmentedControl
|
||||
value={draftSettings.animation ?? 'normal'}
|
||||
options={animationOptions}
|
||||
onChange={value => updateDraft ('animation', value)}/>
|
||||
</SettingBlock>
|
||||
|
||||
<SettingBlock
|
||||
title="リンク先の先読み"
|
||||
description="マウスを置いた時点でリンク先のデータを取得します。">
|
||||
<SegmentedControl
|
||||
value={draftSettings.linkPreload ?? 'intent'}
|
||||
options={linkPreloadOptions}
|
||||
onChange={value => updateDraft ('linkPreload', value)}/>
|
||||
</SettingBlock>
|
||||
|
||||
<SettingBlock title="タグの親子関係表示">
|
||||
<SegmentedControl
|
||||
value={draftSettings.tagRelationDisplay ?? 'grouped'}
|
||||
options={tagRelationDisplayOptions}
|
||||
onChange={value => updateDraft ('tagRelationDisplay', value)}/>
|
||||
</SettingBlock>
|
||||
|
||||
<SettingBlock title="埋め込み自動読込">
|
||||
<SegmentedControl
|
||||
value={draftSettings.embedAutoLoad ?? 'auto'}
|
||||
options={embedAutoLoadOptions}
|
||||
onChange={value => updateDraft ('embedAutoLoad', value)}/>
|
||||
</SettingBlock>
|
||||
</div>
|
||||
</section>)
|
||||
}
|
||||
|
||||
export default BehaviourSettingsSection
|
||||
@@ -1,262 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { toast } from '@/components/ui/use-toast'
|
||||
import {
|
||||
getConflictingShortcutActionIds,
|
||||
formatKeyBinding,
|
||||
isSpaceBinding,
|
||||
keyBindingFromKeyboardEvent,
|
||||
SHORTCUT_DEFINITIONS,
|
||||
SHORTCUT_SCOPE_LABELS,
|
||||
} from '@/lib/keyboardShortcuts'
|
||||
import { getEffectiveKeyBindings } from '@/lib/settings'
|
||||
import { useKeyboardShortcutSettings } from '@/lib/useKeyboardShortcuts'
|
||||
|
||||
import type { ShortcutActionId } from '@/lib/keyboardShortcuts'
|
||||
import type { ClientKeyboardSettings } from '@/lib/settings'
|
||||
import type { FC } from 'react'
|
||||
|
||||
type Props = {
|
||||
sectionClassName: string
|
||||
onDirtyStateChange?: (
|
||||
dirty: boolean,
|
||||
discard: () => void,
|
||||
) => void
|
||||
}
|
||||
|
||||
|
||||
const KeyboardSettingsSection: FC<Props> = (
|
||||
{ sectionClassName,
|
||||
onDirtyStateChange },
|
||||
) => {
|
||||
const {
|
||||
keyboardSettings,
|
||||
saveKeyboardSettings,
|
||||
} = useKeyboardShortcutSettings ()
|
||||
const [capturingActionId, setCapturingActionId] =
|
||||
useState<ShortcutActionId | null> (null)
|
||||
const [draftKeyboardSettings, setDraftKeyboardSettings] =
|
||||
useState<ClientKeyboardSettings> (keyboardSettings)
|
||||
|
||||
useEffect (() => {
|
||||
setDraftKeyboardSettings (keyboardSettings)
|
||||
}, [keyboardSettings])
|
||||
|
||||
const draftEffectiveBindings = useMemo (
|
||||
() => getEffectiveKeyBindings (draftKeyboardSettings.bindings),
|
||||
[draftKeyboardSettings.bindings],
|
||||
)
|
||||
const draftConflictActionIds = useMemo (
|
||||
() => getConflictingShortcutActionIds (draftEffectiveBindings),
|
||||
[draftEffectiveBindings],
|
||||
)
|
||||
const hasUnsavedChanges = useMemo (
|
||||
() => JSON.stringify (draftKeyboardSettings) !== JSON.stringify (keyboardSettings),
|
||||
[draftKeyboardSettings, keyboardSettings],
|
||||
)
|
||||
|
||||
useEffect (() => {
|
||||
if (capturingActionId == null)
|
||||
return
|
||||
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.isComposing || event.key === 'Process')
|
||||
return
|
||||
|
||||
event.preventDefault ()
|
||||
event.stopPropagation ()
|
||||
|
||||
if (event.key === 'Escape')
|
||||
{
|
||||
setCapturingActionId (null)
|
||||
return
|
||||
}
|
||||
|
||||
if (event.key === 'Backspace' || event.key === 'Delete')
|
||||
{
|
||||
setDraftKeyboardSettings (current => ({
|
||||
...current,
|
||||
bindings: {
|
||||
...(current.bindings ?? { }),
|
||||
[capturingActionId]: null,
|
||||
},
|
||||
}))
|
||||
setCapturingActionId (null)
|
||||
return
|
||||
}
|
||||
|
||||
const binding = keyBindingFromKeyboardEvent (event)
|
||||
if (binding == null)
|
||||
return
|
||||
|
||||
if (isSpaceBinding (binding))
|
||||
{
|
||||
toast ({ title: 'Space は今は割り当てられません．' })
|
||||
return
|
||||
}
|
||||
|
||||
setDraftKeyboardSettings (current => ({
|
||||
...current,
|
||||
bindings: {
|
||||
...(current.bindings ?? { }),
|
||||
[capturingActionId]: binding,
|
||||
},
|
||||
}))
|
||||
setCapturingActionId (null)
|
||||
}
|
||||
|
||||
document.addEventListener ('keydown', onKeyDown, true)
|
||||
return () => document.removeEventListener ('keydown', onKeyDown, true)
|
||||
}, [capturingActionId])
|
||||
|
||||
const rows = useMemo (() => SHORTCUT_DEFINITIONS.map (definition => ({
|
||||
...definition,
|
||||
currentBinding: draftEffectiveBindings[definition.id],
|
||||
hasConflict: draftConflictActionIds.has (definition.id),
|
||||
hasCustomBinding: Object.prototype.hasOwnProperty.call (
|
||||
draftKeyboardSettings.bindings ?? { },
|
||||
definition.id,
|
||||
),
|
||||
})), [
|
||||
draftConflictActionIds,
|
||||
draftEffectiveBindings,
|
||||
draftKeyboardSettings.bindings,
|
||||
])
|
||||
|
||||
const handleSave = () => {
|
||||
saveKeyboardSettings (draftKeyboardSettings)
|
||||
toast ({ title: 'キーボード設定を保存しました' })
|
||||
}
|
||||
|
||||
const handleDiscard = () => {
|
||||
setDraftKeyboardSettings (keyboardSettings)
|
||||
setCapturingActionId (null)
|
||||
}
|
||||
|
||||
useEffect (() => {
|
||||
onDirtyStateChange?.(hasUnsavedChanges, handleDiscard)
|
||||
|
||||
return () => {
|
||||
onDirtyStateChange?.(false, () => { })
|
||||
}
|
||||
}, [handleDiscard, hasUnsavedChanges, onDirtyStateChange])
|
||||
|
||||
return (
|
||||
<section className={sectionClassName}>
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-xl font-bold">キーボード</h2>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setDraftKeyboardSettings (current => ({
|
||||
...current,
|
||||
bindings: { },
|
||||
}))
|
||||
}}>
|
||||
すべて既定に戻す
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
disabled={!(hasUnsavedChanges)}
|
||||
onClick={handleDiscard}>
|
||||
変更を破棄
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
disabled={!(hasUnsavedChanges) || draftConflictActionIds.size > 0}
|
||||
onClick={handleSave}>
|
||||
保存
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={draftKeyboardSettings.enabled !== false}
|
||||
onChange={event => {
|
||||
setDraftKeyboardSettings (current => ({
|
||||
...current,
|
||||
enabled: event.target.checked,
|
||||
}))
|
||||
}}/>
|
||||
<span>キーボード・ショートカットを有効にする</span>
|
||||
</label>
|
||||
|
||||
{capturingActionId != null && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
キー入力待ちです．Escape で取消し，Backspace / Delete で未割当にできます．
|
||||
</p>)}
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[52rem] table-fixed border-collapse text-sm">
|
||||
<thead className="border-b border-border">
|
||||
<tr>
|
||||
<th className="p-2 text-left">操作</th>
|
||||
<th className="p-2 text-left">適用範囲</th>
|
||||
<th className="p-2 text-left">現在のキー</th>
|
||||
<th className="p-2 text-left"></th>
|
||||
<th className="p-2 text-left"></th>
|
||||
<th className="p-2 text-left">競合状態</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map (row => (
|
||||
<tr key={row.id} className="border-b border-border/60 last:border-b-0">
|
||||
<td className="p-2">{row.label}</td>
|
||||
<td className="p-2">{SHORTCUT_SCOPE_LABELS[row.scope]}</td>
|
||||
<td className="p-2 font-mono">
|
||||
{formatKeyBinding (row.currentBinding)}
|
||||
</td>
|
||||
<td className="p-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant={capturingActionId === row.id ? 'default' : 'outline'}
|
||||
className="h-8"
|
||||
onClick={() => {
|
||||
setCapturingActionId (
|
||||
capturingActionId === row.id ? null : row.id,
|
||||
)
|
||||
}}>
|
||||
{capturingActionId === row.id ? '入力待ち…' : '変更'}
|
||||
</Button>
|
||||
</td>
|
||||
<td className="p-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
className="h-8"
|
||||
disabled={!(row.hasCustomBinding)}
|
||||
onClick={() => {
|
||||
setDraftKeyboardSettings (current => {
|
||||
const nextBindings = { ...(current.bindings ?? { }) }
|
||||
delete nextBindings[row.id]
|
||||
return {
|
||||
...current,
|
||||
bindings: nextBindings,
|
||||
}
|
||||
})
|
||||
}}>
|
||||
既定に戻す
|
||||
</Button>
|
||||
</td>
|
||||
<td className="p-2">
|
||||
{row.hasConflict
|
||||
? <span className="text-red-600 dark:text-red-400">競合あり</span>
|
||||
: 'なし'}
|
||||
</td>
|
||||
</tr>))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>)
|
||||
}
|
||||
|
||||
export default KeyboardSettingsSection
|
||||
@@ -1,87 +0,0 @@
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import {
|
||||
formatKeyBinding,
|
||||
SHORTCUT_DEFINITIONS,
|
||||
SHORTCUT_SCOPE_LABELS,
|
||||
} from '@/lib/keyboardShortcuts'
|
||||
|
||||
import type {
|
||||
KeyBinding,
|
||||
ShortcutActionId,
|
||||
ShortcutScope,
|
||||
} from '@/lib/keyboardShortcuts'
|
||||
import type { FC } from 'react'
|
||||
|
||||
type Props = {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
activeScope: ShortcutScope
|
||||
effectiveBindings: Record<ShortcutActionId, KeyBinding | null>
|
||||
conflictActionIds: Set<ShortcutActionId>
|
||||
availableActionIds: Set<ShortcutActionId>
|
||||
}
|
||||
|
||||
|
||||
const ShortcutHelpDialog: FC<Props> = (
|
||||
{
|
||||
open,
|
||||
onOpenChange,
|
||||
activeScope,
|
||||
effectiveBindings,
|
||||
conflictActionIds,
|
||||
availableActionIds,
|
||||
},
|
||||
) => {
|
||||
const rows = SHORTCUT_DEFINITIONS
|
||||
.filter (definition =>
|
||||
definition.scope === 'global' || definition.scope === activeScope)
|
||||
.filter (definition => availableActionIds.has (definition.id))
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-3xl px-6 pb-6 pt-7">
|
||||
<DialogHeader className="pl-8">
|
||||
<DialogTitle>キーボード・ショートカット</DialogTitle>
|
||||
<DialogDescription>
|
||||
この画面で利用できるショートカットを表示します。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full min-w-[40rem] table-fixed border-collapse text-sm">
|
||||
<thead className="border-b border-border">
|
||||
<tr>
|
||||
<th className="p-2 text-left">操作</th>
|
||||
<th className="p-2 text-left">適用範囲</th>
|
||||
<th className="p-2 text-left">キー</th>
|
||||
<th className="p-2 text-left">競合</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map (row => (
|
||||
<tr key={row.id} className="border-b border-border/60 last:border-b-0">
|
||||
<td className="p-2">{row.label}</td>
|
||||
<td className="p-2">{SHORTCUT_SCOPE_LABELS[row.scope]}</td>
|
||||
<td className="p-2 font-mono">
|
||||
{formatKeyBinding (effectiveBindings[row.id])}
|
||||
</td>
|
||||
<td className="p-2">
|
||||
{conflictActionIds.has (row.id)
|
||||
? <span className="text-red-600 dark:text-red-400">競合あり</span>
|
||||
: 'なし'}
|
||||
</td>
|
||||
</tr>))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>)
|
||||
}
|
||||
|
||||
export default ShortcutHelpDialog
|
||||
+22
-155
@@ -10,10 +10,6 @@
|
||||
{
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
@@ -33,40 +29,12 @@
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--theme-link: 221.2 83.2% 53.3%;
|
||||
--top-nav-root-bg-mobile: #fef08a;
|
||||
--top-nav-root-bg-desktop: #fefce8;
|
||||
--top-nav-active-bg: #fef08a;
|
||||
--top-nav-submenu-bg: #fef08a;
|
||||
--top-nav-mobile-menu-bg: #fef08a;
|
||||
--top-nav-mobile-active-bg: #fefce8;
|
||||
--top-nav-brand-link: #db2777;
|
||||
--top-nav-menu-link: #1d4ed8;
|
||||
|
||||
--tag-colour-deerjikist: #9f1239;
|
||||
--tag-colour-deerjikist-hover: #b62a51;
|
||||
--tag-colour-meme: #6b21a8;
|
||||
--tag-colour-meme-hover: #8238bf;
|
||||
--tag-colour-character: #4d7c0f;
|
||||
--tag-colour-character-hover: #649326;
|
||||
--tag-colour-general: #155e75;
|
||||
--tag-colour-general-hover: #2c758c;
|
||||
--tag-colour-material: #c2410c;
|
||||
--tag-colour-material-hover: #d95823;
|
||||
--tag-colour-meta: #a16207;
|
||||
--tag-colour-meta-hover: #b8791e;
|
||||
--tag-colour-nico: #4b5563;
|
||||
--tag-colour-nico-hover: #626c7a;
|
||||
}
|
||||
|
||||
.dark
|
||||
{
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
@@ -86,28 +54,20 @@
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
--top-nav-root-bg-mobile: #230505;
|
||||
--top-nav-root-bg-desktop: #230505;
|
||||
--top-nav-active-bg: #450a0a;
|
||||
--top-nav-submenu-bg: #450a0a;
|
||||
--top-nav-mobile-menu-bg: #230505;
|
||||
--top-nav-mobile-active-bg: #450a0a;
|
||||
--top-nav-brand-link: #f9a8d4;
|
||||
--top-nav-menu-link: #93c5fd;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
@apply overflow-x-clip bg-background text-foreground;
|
||||
@apply overflow-x-clip;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
color: hsl(var(--theme-link));
|
||||
@apply text-blue-700 dark:text-blue-300;
|
||||
}
|
||||
a:hover
|
||||
{
|
||||
color: color-mix(in oklab, hsl(var(--theme-link)), white 18%);
|
||||
@apply text-blue-500 dark:text-blue-100;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -118,8 +78,8 @@
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: hsl(var(--foreground));
|
||||
background-color: hsl(var(--background));
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
@@ -127,23 +87,6 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
:root[data-animation='reduced'] *,
|
||||
:root[data-animation='off'] *
|
||||
{
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
:root[data-animation='off'] *,
|
||||
:root[data-animation='off'] *::before,
|
||||
:root[data-animation='off'] *::after
|
||||
{
|
||||
animation-duration: 0ms !important;
|
||||
animation-delay: 0ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0ms !important;
|
||||
transition-delay: 0ms !important;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
font-weight: 500;
|
||||
@@ -154,15 +97,28 @@ body
|
||||
{
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
background: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
#root
|
||||
{
|
||||
min-height: 100dvh;
|
||||
background: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light)
|
||||
{
|
||||
:root
|
||||
{
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover
|
||||
{
|
||||
color: #747bff;
|
||||
}
|
||||
button
|
||||
{
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wiki-blink
|
||||
@@ -176,92 +132,3 @@ body
|
||||
0%, 100% { color: #f87171; }
|
||||
50% { color: #60a5fa; }
|
||||
}
|
||||
|
||||
.tag-marquee
|
||||
{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tag-link-colour
|
||||
{
|
||||
color: var(--tag-link-colour);
|
||||
}
|
||||
|
||||
.tag-link-hover-colour:hover
|
||||
{
|
||||
color: var(--tag-link-hover-colour) !important;
|
||||
}
|
||||
|
||||
.top-nav-root
|
||||
{
|
||||
background: var(--top-nav-root-bg-mobile);
|
||||
}
|
||||
|
||||
@media (min-width: 768px)
|
||||
{
|
||||
.top-nav-root
|
||||
{
|
||||
background: var(--top-nav-root-bg-desktop);
|
||||
}
|
||||
}
|
||||
|
||||
.top-nav-brand-link,
|
||||
.top-nav-mobile-toggle
|
||||
{
|
||||
color: var(--top-nav-brand-link);
|
||||
}
|
||||
|
||||
.top-nav-brand-link:hover,
|
||||
.top-nav-mobile-toggle:hover
|
||||
{
|
||||
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-active-bg);
|
||||
}
|
||||
|
||||
.top-nav-submenu
|
||||
{
|
||||
background: var(--top-nav-submenu-bg);
|
||||
}
|
||||
|
||||
.top-nav-mobile-menu .top-nav-submenu
|
||||
{
|
||||
background: var(--top-nav-mobile-active-bg);
|
||||
}
|
||||
|
||||
.top-nav-mobile-menu
|
||||
{
|
||||
background: var(--top-nav-mobile-menu-bg);
|
||||
}
|
||||
|
||||
.top-nav-mobile-active
|
||||
{
|
||||
background: var(--top-nav-mobile-active-bg);
|
||||
}
|
||||
|
||||
.tag-marquee__animated
|
||||
{
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
min-width: 100%;
|
||||
width: max-content;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
import { readFileSync } from 'node:fs'
|
||||
import { resolve } from 'node:path'
|
||||
|
||||
import { describe, expect, it } from 'vitest'
|
||||
|
||||
|
||||
const indexCss = readFileSync (
|
||||
resolve (process.cwd (), 'src/index.css'),
|
||||
'utf8')
|
||||
const compactIndexCss = indexCss.replace (/\s+/g, ' ')
|
||||
const mobileActiveRule = '.top-nav-mobile-active {'
|
||||
+ ' background: var(--top-nav-mobile-active-bg); }'
|
||||
const mobileSubmenuRule = '.top-nav-mobile-menu .top-nav-submenu {'
|
||||
+ ' background: var(--top-nav-mobile-active-bg); }'
|
||||
|
||||
|
||||
describe ('TopNav mobile menu colours', () => {
|
||||
it ('uses one background variable for active rows and expanded submenus', () => {
|
||||
expect (compactIndexCss).toContain (mobileActiveRule)
|
||||
expect (compactIndexCss).toContain (mobileSubmenuRule)
|
||||
})
|
||||
})
|
||||
@@ -1,34 +0,0 @@
|
||||
import type { Transition } from 'framer-motion'
|
||||
|
||||
import type { ClientAnimationMode } from '@/lib/settings'
|
||||
|
||||
type ClientAnimationTransitionOptions = {
|
||||
normal: Transition
|
||||
reduced?: Transition
|
||||
off?: Transition }
|
||||
|
||||
|
||||
export const clientAnimationsOff = (
|
||||
animationMode: ClientAnimationMode,
|
||||
): boolean =>
|
||||
animationMode === 'off'
|
||||
|
||||
|
||||
export const clientAnimationTransition = (
|
||||
animationMode: ClientAnimationMode,
|
||||
{ normal, reduced, off }: ClientAnimationTransitionOptions,
|
||||
): Transition => {
|
||||
if (animationMode === 'off')
|
||||
return off ?? { duration: 0 }
|
||||
|
||||
if (animationMode === 'reduced')
|
||||
return reduced ?? { duration: .08, ease: 'linear' as const }
|
||||
|
||||
return normal
|
||||
}
|
||||
|
||||
|
||||
export const clientScrollBehaviour = (
|
||||
animationMode: ClientAnimationMode,
|
||||
): ScrollBehavior =>
|
||||
animationMode === 'off' ? 'auto' : 'smooth'
|
||||
@@ -1,65 +0,0 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
|
||||
import { DEFAULT_KEY_BINDINGS,
|
||||
formatKeyBinding,
|
||||
getConflictingShortcutActionIds,
|
||||
isEditableEventTarget,
|
||||
keyBindingFromKeyboardEvent,
|
||||
resolveShortcutScope,
|
||||
SHORTCUT_DEFINITIONS_BY_ID } from '@/lib/keyboardShortcuts'
|
||||
|
||||
describe ('keyboardShortcuts', () => {
|
||||
it ('defines the default key bindings used by the settings screen', () => {
|
||||
expect (SHORTCUT_DEFINITIONS_BY_ID['global.openShortcutHelp']).toMatchObject ({
|
||||
label: 'ショートカット一覧を開く',
|
||||
scope: 'global',
|
||||
defaultBinding: { key: '?', shift: true } })
|
||||
expect (DEFAULT_KEY_BINDINGS['global.focusSearch']).toEqual ({ key: '/' })
|
||||
expect (DEFAULT_KEY_BINDINGS['navigation.posts']).toEqual ({ key: 'p' })
|
||||
expect (DEFAULT_KEY_BINDINGS['pagination.next']).toEqual ({ key: 'ArrowRight' })
|
||||
expect (DEFAULT_KEY_BINDINGS['settings.theme']).toEqual ({ key: '3' })
|
||||
})
|
||||
|
||||
it ('formats key bindings for display', () => {
|
||||
expect (formatKeyBinding ({ key: '?', shift: true })).toBe ('Shift + ?')
|
||||
expect (formatKeyBinding ({ key: '/' })).toBe ('/')
|
||||
expect (formatKeyBinding ({ key: 'p' })).toBe ('P')
|
||||
expect (formatKeyBinding ({ key: 'ArrowRight' })).toBe ('ArrowRight')
|
||||
expect (formatKeyBinding (null)).toBe ('未割当')
|
||||
})
|
||||
|
||||
it ('normalises keyboard events without assigning space by default', () => {
|
||||
const event = { key: 'P',
|
||||
ctrlKey: false,
|
||||
shiftKey: false,
|
||||
altKey: false,
|
||||
metaKey: false } as KeyboardEvent
|
||||
|
||||
expect (keyBindingFromKeyboardEvent (event)).toEqual ({ key: 'p' })
|
||||
expect (DEFAULT_KEY_BINDINGS['pagination.next']).not.toEqual ({ key: ' ' })
|
||||
})
|
||||
|
||||
it ('detects conflicting action bindings', () => {
|
||||
const conflicts = getConflictingShortcutActionIds ({
|
||||
...DEFAULT_KEY_BINDINGS,
|
||||
'navigation.posts': { key: 'p' },
|
||||
'navigation.tags': { key: 'p' } })
|
||||
|
||||
expect (conflicts.has ('navigation.posts')).toBe (true)
|
||||
expect (conflicts.has ('navigation.tags')).toBe (true)
|
||||
expect (conflicts.has ('navigation.wiki')).toBe (false)
|
||||
})
|
||||
|
||||
it ('resolves route scopes and editable event targets', () => {
|
||||
const input = document.createElement ('input')
|
||||
const div = document.createElement ('div')
|
||||
div.setAttribute ('role', 'textbox')
|
||||
|
||||
expect (resolveShortcutScope ('/posts/search')).toBe ('postSearch')
|
||||
expect (resolveShortcutScope ('/users/settings')).toBe ('settings')
|
||||
expect (resolveShortcutScope ('/materials/1')).toBe ('materials')
|
||||
expect (isEditableEventTarget (input)).toBe (true)
|
||||
expect (isEditableEventTarget (div)).toBe (true)
|
||||
expect (isEditableEventTarget (document.createElement ('button'))).toBe (false)
|
||||
})
|
||||
})
|
||||
@@ -1,328 +0,0 @@
|
||||
export type ShortcutScope =
|
||||
| 'global'
|
||||
| 'posts'
|
||||
| 'postSearch'
|
||||
| 'tags'
|
||||
| 'settings'
|
||||
| 'wiki'
|
||||
| 'materials'
|
||||
|
||||
export type ShortcutActionId =
|
||||
| 'global.openShortcutHelp'
|
||||
| 'global.focusSearch'
|
||||
| 'navigation.posts'
|
||||
| 'navigation.tags'
|
||||
| 'navigation.materials'
|
||||
| 'navigation.wiki'
|
||||
| 'pagination.next'
|
||||
| 'pagination.previous'
|
||||
| 'settings.account'
|
||||
| 'settings.behavior'
|
||||
| 'settings.theme'
|
||||
| 'settings.keyboard'
|
||||
|
||||
export type KeyBinding = {
|
||||
key: string
|
||||
ctrl?: boolean
|
||||
shift?: boolean
|
||||
alt?: boolean
|
||||
meta?: boolean
|
||||
}
|
||||
|
||||
export type ShortcutDefinition = {
|
||||
id: ShortcutActionId
|
||||
label: string
|
||||
scope: ShortcutScope
|
||||
defaultBinding: KeyBinding | null
|
||||
}
|
||||
|
||||
export const SHORTCUT_SCOPE_LABELS: Record<ShortcutScope, string> = {
|
||||
global: '全画面',
|
||||
posts: '広場',
|
||||
postSearch: '広場検索',
|
||||
tags: 'タグ',
|
||||
settings: '設定',
|
||||
wiki: 'Wiki',
|
||||
materials: '素材',
|
||||
}
|
||||
|
||||
export const SHORTCUT_DEFINITIONS: ShortcutDefinition[] = [
|
||||
{
|
||||
id: 'global.openShortcutHelp',
|
||||
label: 'ショートカット一覧を開く',
|
||||
scope: 'global',
|
||||
defaultBinding: { key: '?', shift: true },
|
||||
},
|
||||
{
|
||||
id: 'global.focusSearch',
|
||||
label: '検索欄へ移動',
|
||||
scope: 'global',
|
||||
defaultBinding: { key: '/' },
|
||||
},
|
||||
{
|
||||
id: 'navigation.posts',
|
||||
label: '広場へ移動',
|
||||
scope: 'global',
|
||||
defaultBinding: { key: 'p' },
|
||||
},
|
||||
{
|
||||
id: 'navigation.tags',
|
||||
label: 'タグへ移動',
|
||||
scope: 'global',
|
||||
defaultBinding: { key: 't' },
|
||||
},
|
||||
{
|
||||
id: 'navigation.materials',
|
||||
label: '素材へ移動',
|
||||
scope: 'global',
|
||||
defaultBinding: { key: 'm' },
|
||||
},
|
||||
{
|
||||
id: 'navigation.wiki',
|
||||
label: 'Wiki へ移動',
|
||||
scope: 'global',
|
||||
defaultBinding: { key: 'w' },
|
||||
},
|
||||
{
|
||||
id: 'pagination.next',
|
||||
label: '次のページへ移動',
|
||||
scope: 'global',
|
||||
defaultBinding: { key: 'ArrowRight' },
|
||||
},
|
||||
{
|
||||
id: 'pagination.previous',
|
||||
label: '前のページへ移動',
|
||||
scope: 'global',
|
||||
defaultBinding: { key: 'ArrowLeft' },
|
||||
},
|
||||
{
|
||||
id: 'settings.account',
|
||||
label: '設定: アカウント',
|
||||
scope: 'settings',
|
||||
defaultBinding: { key: '1' },
|
||||
},
|
||||
{
|
||||
id: 'settings.behavior',
|
||||
label: '設定: 動作',
|
||||
scope: 'settings',
|
||||
defaultBinding: { key: '2' },
|
||||
},
|
||||
{
|
||||
id: 'settings.theme',
|
||||
label: '設定: テーマ',
|
||||
scope: 'settings',
|
||||
defaultBinding: { key: '3' },
|
||||
},
|
||||
{
|
||||
id: 'settings.keyboard',
|
||||
label: '設定: キーボード',
|
||||
scope: 'settings',
|
||||
defaultBinding: { key: '4' },
|
||||
},
|
||||
]
|
||||
|
||||
export const SHORTCUT_DEFINITIONS_BY_ID =
|
||||
SHORTCUT_DEFINITIONS.reduce<Record<ShortcutActionId, ShortcutDefinition>> (
|
||||
(definitions, definition) => {
|
||||
definitions[definition.id] = definition
|
||||
return definitions
|
||||
},
|
||||
{
|
||||
'global.openShortcutHelp': SHORTCUT_DEFINITIONS[0],
|
||||
'global.focusSearch': SHORTCUT_DEFINITIONS[1],
|
||||
'navigation.posts': SHORTCUT_DEFINITIONS[2],
|
||||
'navigation.tags': SHORTCUT_DEFINITIONS[3],
|
||||
'navigation.materials': SHORTCUT_DEFINITIONS[4],
|
||||
'navigation.wiki': SHORTCUT_DEFINITIONS[5],
|
||||
'pagination.next': SHORTCUT_DEFINITIONS[6],
|
||||
'pagination.previous': SHORTCUT_DEFINITIONS[7],
|
||||
'settings.account': SHORTCUT_DEFINITIONS[8],
|
||||
'settings.behavior': SHORTCUT_DEFINITIONS[9],
|
||||
'settings.theme': SHORTCUT_DEFINITIONS[10],
|
||||
'settings.keyboard': SHORTCUT_DEFINITIONS[11],
|
||||
},
|
||||
)
|
||||
|
||||
export const DEFAULT_KEY_BINDINGS =
|
||||
SHORTCUT_DEFINITIONS.reduce<Record<ShortcutActionId, KeyBinding | null>> (
|
||||
(bindings, definition) => {
|
||||
bindings[definition.id] = definition.defaultBinding
|
||||
return bindings
|
||||
},
|
||||
{
|
||||
'global.openShortcutHelp': null,
|
||||
'global.focusSearch': null,
|
||||
'navigation.posts': null,
|
||||
'navigation.tags': null,
|
||||
'navigation.materials': null,
|
||||
'navigation.wiki': null,
|
||||
'pagination.next': null,
|
||||
'pagination.previous': null,
|
||||
'settings.account': null,
|
||||
'settings.behavior': null,
|
||||
'settings.theme': null,
|
||||
'settings.keyboard': null,
|
||||
},
|
||||
)
|
||||
|
||||
const normaliseKey = (key: string): string => {
|
||||
if (key === 'Spacebar')
|
||||
return ' '
|
||||
if (key.length === 1 && key !== ' ')
|
||||
return key.toLowerCase ()
|
||||
return key
|
||||
}
|
||||
|
||||
const isModifierKey = (key: string): boolean =>
|
||||
key === 'Shift'
|
||||
|| key === 'Control'
|
||||
|| key === 'Alt'
|
||||
|| key === 'Meta'
|
||||
|
||||
export const normaliseKeyBinding = (value: unknown): KeyBinding | null => {
|
||||
if (!(value) || typeof value !== 'object')
|
||||
return null
|
||||
|
||||
const binding = value as Partial<KeyBinding>
|
||||
if (typeof binding.key !== 'string')
|
||||
return null
|
||||
|
||||
const key = normaliseKey (binding.key)
|
||||
if (key.length === 0 || isModifierKey (key))
|
||||
return null
|
||||
|
||||
return {
|
||||
key,
|
||||
...(binding.ctrl ? { ctrl: true } : { }),
|
||||
...(binding.shift ? { shift: true } : { }),
|
||||
...(binding.alt ? { alt: true } : { }),
|
||||
...(binding.meta ? { meta: true } : { }),
|
||||
}
|
||||
}
|
||||
|
||||
export const serialiseKeyBinding = (binding: KeyBinding | null): string | null => {
|
||||
if (binding == null)
|
||||
return null
|
||||
|
||||
const parts = [
|
||||
binding.ctrl ? 'Ctrl' : null,
|
||||
binding.shift ? 'Shift' : null,
|
||||
binding.alt ? 'Alt' : null,
|
||||
binding.meta ? 'Meta' : null,
|
||||
binding.key,
|
||||
].filter ((part): part is string => part != null)
|
||||
|
||||
return parts.join ('+')
|
||||
}
|
||||
|
||||
const keyLabel = (key: string): string => {
|
||||
switch (key)
|
||||
{
|
||||
case ' ':
|
||||
return 'Space'
|
||||
|
||||
case 'ArrowLeft':
|
||||
return 'ArrowLeft'
|
||||
|
||||
case 'ArrowRight':
|
||||
return 'ArrowRight'
|
||||
|
||||
case 'ArrowUp':
|
||||
return 'ArrowUp'
|
||||
|
||||
case 'ArrowDown':
|
||||
return 'ArrowDown'
|
||||
|
||||
case 'Escape':
|
||||
return 'Escape'
|
||||
|
||||
case 'Backspace':
|
||||
return 'Backspace'
|
||||
|
||||
case 'Delete':
|
||||
return 'Delete'
|
||||
|
||||
default:
|
||||
return key.length === 1 ? key.toUpperCase () : key
|
||||
}
|
||||
}
|
||||
|
||||
export const formatKeyBinding = (binding: KeyBinding | null): string => {
|
||||
if (binding == null)
|
||||
return '未割当'
|
||||
|
||||
return [
|
||||
binding.ctrl ? 'Ctrl' : null,
|
||||
binding.shift ? 'Shift' : null,
|
||||
binding.alt ? 'Alt' : null,
|
||||
binding.meta ? 'Meta' : null,
|
||||
keyLabel (binding.key),
|
||||
].filter ((part): part is string => part != null)
|
||||
.join (' + ')
|
||||
}
|
||||
|
||||
export const keyBindingFromKeyboardEvent = (
|
||||
event: Pick<KeyboardEvent, 'key' | 'ctrlKey' | 'shiftKey' | 'altKey' | 'metaKey'>,
|
||||
): KeyBinding | null => {
|
||||
const key = normaliseKey (event.key)
|
||||
if (key.length === 0 || isModifierKey (key))
|
||||
return null
|
||||
|
||||
return {
|
||||
key,
|
||||
...(event.ctrlKey ? { ctrl: true } : { }),
|
||||
...(event.shiftKey ? { shift: true } : { }),
|
||||
...(event.altKey ? { alt: true } : { }),
|
||||
...(event.metaKey ? { meta: true } : { }),
|
||||
}
|
||||
}
|
||||
|
||||
export const isEditableEventTarget = (target: EventTarget | null): boolean => {
|
||||
if (!(target instanceof Element))
|
||||
return false
|
||||
|
||||
return target.closest (
|
||||
'input, textarea, select, [contenteditable="true"], [role="textbox"]',
|
||||
) != null
|
||||
}
|
||||
|
||||
export const getConflictingShortcutActionIds = (
|
||||
bindings: Record<ShortcutActionId, KeyBinding | null>,
|
||||
): Set<ShortcutActionId> => {
|
||||
const grouped = new Map<string, ShortcutActionId[]> ()
|
||||
|
||||
Object.entries (bindings).forEach (([actionId, binding]) => {
|
||||
const serialised = serialiseKeyBinding (binding)
|
||||
if (serialised == null)
|
||||
return
|
||||
|
||||
const ids = grouped.get (serialised) ?? []
|
||||
ids.push (actionId as ShortcutActionId)
|
||||
grouped.set (serialised, ids)
|
||||
})
|
||||
|
||||
return new Set (
|
||||
[...grouped.values ()]
|
||||
.filter (actionIds => actionIds.length > 1)
|
||||
.flat (),
|
||||
)
|
||||
}
|
||||
|
||||
export const resolveShortcutScope = (pathname: string): ShortcutScope => {
|
||||
if (pathname.startsWith ('/posts/search'))
|
||||
return 'postSearch'
|
||||
if (pathname.startsWith ('/posts'))
|
||||
return 'posts'
|
||||
if (pathname.startsWith ('/tags'))
|
||||
return 'tags'
|
||||
if (pathname.startsWith ('/users/settings'))
|
||||
return 'settings'
|
||||
if (pathname.startsWith ('/wiki'))
|
||||
return 'wiki'
|
||||
if (pathname.startsWith ('/materials'))
|
||||
return 'materials'
|
||||
return 'global'
|
||||
}
|
||||
|
||||
export const isSpaceBinding = (binding: KeyBinding | null): boolean =>
|
||||
binding?.key === ' '
|
||||
@@ -70,7 +70,6 @@ describe ('posts API functions', () => {
|
||||
id: 5,
|
||||
title: 'new title',
|
||||
tags: 'tag',
|
||||
duration: null,
|
||||
parentPostIds: '1 2',
|
||||
originalCreatedFrom: null,
|
||||
originalCreatedBefore: '2026-01-02T00:00:00Z',
|
||||
@@ -83,7 +82,6 @@ describe ('posts API functions', () => {
|
||||
{
|
||||
title: 'new title',
|
||||
tags: 'tag',
|
||||
duration: null,
|
||||
parent_post_ids: '1 2',
|
||||
original_created_from: null,
|
||||
original_created_before: '2026-01-02T00:00:00Z',
|
||||
|
||||
@@ -44,7 +44,6 @@ export const updatePost = async (
|
||||
post: { id: number
|
||||
title: string | null
|
||||
tags: string
|
||||
duration: string | null
|
||||
parentPostIds: string
|
||||
originalCreatedFrom: string | null
|
||||
originalCreatedBefore: string | null },
|
||||
@@ -56,7 +55,6 @@ export const updatePost = async (
|
||||
`/posts/${ post.id }`,
|
||||
{ title: post.title,
|
||||
tags: post.tags,
|
||||
duration: post.duration,
|
||||
parent_post_ids: post.parentPostIds,
|
||||
original_created_from: post.originalCreatedFrom,
|
||||
original_created_before: post.originalCreatedBefore },
|
||||
|
||||
@@ -1,112 +0,0 @@
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
|
||||
import { applyClientAnimationMode,
|
||||
applyThemeTokens,
|
||||
buildThemeTokens,
|
||||
CLIENT_SETTINGS_STORAGE_KEY,
|
||||
DARK_THEME_TOKENS,
|
||||
DEFAULT_POST_LIST_ORDER,
|
||||
getClientListLimit,
|
||||
getClientListOrder,
|
||||
getClientThemeMode,
|
||||
LIGHT_THEME_TOKENS,
|
||||
loadClientSettings,
|
||||
setClientListSettings,
|
||||
setClientThemeAppearance } from '@/lib/settings'
|
||||
|
||||
import type { FetchPostsOrder } from '@/types'
|
||||
|
||||
const installMatchMedia = (matches: boolean) => {
|
||||
Object.defineProperty (window, 'matchMedia', {
|
||||
configurable: true,
|
||||
value: vi.fn ().mockImplementation (() => ({
|
||||
matches,
|
||||
addEventListener: vi.fn (),
|
||||
removeEventListener: vi.fn () })) })
|
||||
}
|
||||
|
||||
describe ('settings', () => {
|
||||
beforeEach (() => {
|
||||
localStorage.clear ()
|
||||
document.documentElement.removeAttribute ('data-animation')
|
||||
document.documentElement.removeAttribute ('style')
|
||||
document.documentElement.className = ''
|
||||
installMatchMedia (false)
|
||||
})
|
||||
|
||||
it ('stores list settings under the shared client settings key', () => {
|
||||
setClientListSettings ('postSearch', {
|
||||
limit: 50,
|
||||
order: 'title:asc' })
|
||||
|
||||
expect (getClientListLimit ('postSearch')).toBe (50)
|
||||
expect (getClientListOrder<FetchPostsOrder> ('postSearch')).toBe ('title:asc')
|
||||
expect (JSON.parse (localStorage.getItem (CLIENT_SETTINGS_STORAGE_KEY) ?? '{}'))
|
||||
.toMatchObject ({ lists: { postSearch: { limit: 50, order: 'title:asc' } } })
|
||||
})
|
||||
|
||||
it ('ignores invalid list limits and keeps stored order strings', () => {
|
||||
localStorage.setItem (
|
||||
CLIENT_SETTINGS_STORAGE_KEY,
|
||||
JSON.stringify ({ lists: { postList: { limit: 30, order: DEFAULT_POST_LIST_ORDER } } }))
|
||||
|
||||
expect (getClientListLimit ('postList')).toBeNull ()
|
||||
expect (getClientListOrder<FetchPostsOrder> ('postList')).toBe (
|
||||
DEFAULT_POST_LIST_ORDER)
|
||||
})
|
||||
|
||||
it ('stores theme mode and light/dark slot selections in client settings', () => {
|
||||
setClientThemeAppearance ({
|
||||
themeMode: 'dark',
|
||||
activeLightThemeSlotNo: 2,
|
||||
activeDarkThemeSlotNo: 3 })
|
||||
|
||||
expect (getClientThemeMode ()).toBe ('dark')
|
||||
expect (loadClientSettings ().appearance).toMatchObject ({
|
||||
themeMode: 'dark',
|
||||
activeLightThemeSlotNo: 2,
|
||||
activeDarkThemeSlotNo: 3 })
|
||||
})
|
||||
|
||||
it ('applies animation mode to the document dataset', () => {
|
||||
applyClientAnimationMode ('off')
|
||||
expect (document.documentElement.dataset.animation).toBe ('off')
|
||||
|
||||
applyClientAnimationMode ('reduced')
|
||||
expect (document.documentElement.dataset.animation).toBe ('reduced')
|
||||
|
||||
applyClientAnimationMode ('normal')
|
||||
expect (document.documentElement.dataset.animation).toBeUndefined ()
|
||||
})
|
||||
|
||||
it ('normalises TopNav menu link tokens to complete CSS colours', () => {
|
||||
const tokens = buildThemeTokens ('light', {
|
||||
link: '221.2 83.2% 53.3%',
|
||||
topNavMenuLink: '221.2 83.2% 53.3%' })
|
||||
|
||||
expect (tokens.link).toBe ('221.2 83.2% 53.3%')
|
||||
expect (tokens.topNavMenuLink).toBe ('hsl(221.2 83.2% 53.3%)')
|
||||
})
|
||||
|
||||
it ('derives TopNav colours without mixing mobile active backgrounds', () => {
|
||||
const tokens = buildThemeTokens ('light', { })
|
||||
|
||||
expect (tokens.topNavMobileActiveBackground).toBe (
|
||||
LIGHT_THEME_TOKENS.topNavRootBackgroundDesktop)
|
||||
expect (tokens.topNavMobileActiveBackground).not.toBe (
|
||||
tokens.topNavRootBackgroundMobile)
|
||||
expect (buildThemeTokens ('dark', { }).topNavMobileActiveBackground).toBe (
|
||||
DARK_THEME_TOKENS.topNavActiveBackground)
|
||||
})
|
||||
|
||||
it ('sets shadcn tokens and TopNav tokens with their different value formats', () => {
|
||||
const tokens = buildThemeTokens ('dark', { link: '213.1 93.9% 67.8%' })
|
||||
|
||||
applyThemeTokens (tokens)
|
||||
|
||||
expect (document.documentElement.style.getPropertyValue ('--theme-link')).toBe (
|
||||
'213.1 93.9% 67.8%')
|
||||
expect (document.documentElement.style.getPropertyValue ('--top-nav-menu-link')).toBe (
|
||||
'hsl(213.1 93.9% 67.8%)')
|
||||
})
|
||||
})
|
||||
ファイル差分が大きすぎるため省略します
差分を読込み
@@ -1,26 +0,0 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
import {
|
||||
CLIENT_SETTINGS_EVENT,
|
||||
getClientBehaviorSettings,
|
||||
} from '@/lib/settings'
|
||||
|
||||
import type { ClientBehaviorSettings } from '@/lib/settings'
|
||||
|
||||
|
||||
export const useClientBehaviourSettings = (): ClientBehaviorSettings => {
|
||||
const [settings, setSettings] =
|
||||
useState<ClientBehaviorSettings> (() => getClientBehaviorSettings ())
|
||||
|
||||
useEffect (() => {
|
||||
const handleClientSettingsChange = () => {
|
||||
setSettings (getClientBehaviorSettings ())
|
||||
}
|
||||
|
||||
window.addEventListener (CLIENT_SETTINGS_EVENT, handleClientSettingsChange)
|
||||
return () =>
|
||||
window.removeEventListener (CLIENT_SETTINGS_EVENT, handleClientSettingsChange)
|
||||
}, [])
|
||||
|
||||
return settings
|
||||
}
|
||||
@@ -1,322 +0,0 @@
|
||||
import {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { useLocation, useNavigate } from 'react-router-dom'
|
||||
|
||||
import ShortcutHelpDialog from '@/components/users/ShortcutHelpDialog'
|
||||
import {
|
||||
DEFAULT_KEY_BINDINGS,
|
||||
getConflictingShortcutActionIds,
|
||||
isEditableEventTarget,
|
||||
keyBindingFromKeyboardEvent,
|
||||
resolveShortcutScope,
|
||||
serialiseKeyBinding,
|
||||
SHORTCUT_DEFINITIONS,
|
||||
SHORTCUT_SCOPE_LABELS,
|
||||
} from '@/lib/keyboardShortcuts'
|
||||
import {
|
||||
getClientKeyboardSettings,
|
||||
getEffectiveKeyBindings,
|
||||
setClientKeyboardSettings,
|
||||
} from '@/lib/settings'
|
||||
import { useUnsavedChangesGuard } from '@/lib/useUnsavedChangesGuard'
|
||||
|
||||
import type {
|
||||
KeyBinding,
|
||||
ShortcutActionId,
|
||||
ShortcutScope,
|
||||
} from '@/lib/keyboardShortcuts'
|
||||
import type { ClientKeyboardSettings } from '@/lib/settings'
|
||||
import type { PropsWithChildren } from 'react'
|
||||
|
||||
type ShortcutHandler = () => void
|
||||
type ShortcutHandlers = Partial<Record<ShortcutActionId, ShortcutHandler>>
|
||||
|
||||
type KeyboardShortcutsContextValue = {
|
||||
activeScope: ShortcutScope
|
||||
keyboardSettings: ClientKeyboardSettings
|
||||
effectiveBindings: Record<ShortcutActionId, KeyBinding | null>
|
||||
conflictActionIds: Set<ShortcutActionId>
|
||||
saveKeyboardSettings: (settings: ClientKeyboardSettings) => void
|
||||
registerHandlers: (handlers: ShortcutHandlers) => () => void
|
||||
}
|
||||
|
||||
const KeyboardShortcutsContext =
|
||||
createContext<KeyboardShortcutsContextValue | null> (null)
|
||||
|
||||
|
||||
const isFocusableShortcutTarget = (element: HTMLElement): boolean => {
|
||||
if (element.closest ('[hidden], [aria-hidden="true"]') != null)
|
||||
return false
|
||||
|
||||
if (
|
||||
(element instanceof HTMLInputElement
|
||||
|| element instanceof HTMLButtonElement
|
||||
|| element instanceof HTMLSelectElement
|
||||
|| element instanceof HTMLTextAreaElement)
|
||||
&& element.disabled
|
||||
)
|
||||
return false
|
||||
|
||||
const style = window.getComputedStyle (element)
|
||||
if (
|
||||
style.display === 'none'
|
||||
|| style.visibility === 'hidden'
|
||||
|| style.pointerEvents === 'none'
|
||||
)
|
||||
return false
|
||||
|
||||
return element.getClientRects ().length > 0
|
||||
}
|
||||
|
||||
|
||||
const focusSearchTarget = (): void => {
|
||||
const targets = [
|
||||
...document.querySelectorAll<HTMLElement> (
|
||||
'[data-shortcut-focus-search="true"]',
|
||||
),
|
||||
]
|
||||
const target = targets.find (isFocusableShortcutTarget)
|
||||
|
||||
if (target == null)
|
||||
return
|
||||
|
||||
target.focus ()
|
||||
|
||||
if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)
|
||||
target.select ()
|
||||
}
|
||||
|
||||
|
||||
export const KeyboardShortcutsProvider = ({ children }: PropsWithChildren) => {
|
||||
const location = useLocation ()
|
||||
const navigate = useNavigate ()
|
||||
const { confirmDiscardNavigation } = useUnsavedChangesGuard ()
|
||||
|
||||
const [keyboardSettings, setKeyboardSettingsState] =
|
||||
useState<ClientKeyboardSettings> (() => getClientKeyboardSettings ())
|
||||
const [registeredHandlers, setRegisteredHandlers] =
|
||||
useState<Record<number, ShortcutHandlers>> ({ })
|
||||
const [shortcutHelpOpen, setShortcutHelpOpen] = useState (false)
|
||||
const registrationIdRef = useRef (0)
|
||||
|
||||
const activeScope = useMemo<ShortcutScope> (
|
||||
() => resolveShortcutScope (location.pathname),
|
||||
[location.pathname],
|
||||
)
|
||||
const effectiveBindings = useMemo (
|
||||
() => getEffectiveKeyBindings (keyboardSettings.bindings),
|
||||
[keyboardSettings.bindings],
|
||||
)
|
||||
const conflictActionIds = useMemo (
|
||||
() => getConflictingShortcutActionIds (effectiveBindings),
|
||||
[effectiveBindings],
|
||||
)
|
||||
const mergedRegisteredHandlers = useMemo<ShortcutHandlers> (
|
||||
() => Object.values (registeredHandlers).reduce<ShortcutHandlers> (
|
||||
(handlers, currentHandlers) => ({ ...handlers, ...currentHandlers }),
|
||||
{ },
|
||||
),
|
||||
[registeredHandlers],
|
||||
)
|
||||
|
||||
const saveKeyboardSettings = useCallback ((settings: ClientKeyboardSettings) => {
|
||||
const next = setClientKeyboardSettings (settings)
|
||||
setKeyboardSettingsState (next)
|
||||
}, [])
|
||||
|
||||
const registerHandlers = useCallback ((handlers: ShortcutHandlers) => {
|
||||
const registrationId = ++registrationIdRef.current
|
||||
|
||||
setRegisteredHandlers (current => ({
|
||||
...current,
|
||||
[registrationId]: handlers,
|
||||
}))
|
||||
|
||||
return () => {
|
||||
setRegisteredHandlers (current => {
|
||||
const next = { ...current }
|
||||
delete next[registrationId]
|
||||
return next
|
||||
})
|
||||
}
|
||||
}, [])
|
||||
|
||||
const guardedNavigate = useCallback ((path: string) => {
|
||||
confirmDiscardNavigation ().then (confirmed => {
|
||||
if (confirmed)
|
||||
navigate (path)
|
||||
})
|
||||
}, [confirmDiscardNavigation, navigate])
|
||||
|
||||
const builtinHandlers = useMemo<ShortcutHandlers> (
|
||||
() => ({
|
||||
'global.openShortcutHelp': () => {
|
||||
setShortcutHelpOpen (true)
|
||||
},
|
||||
'global.focusSearch': () => {
|
||||
focusSearchTarget ()
|
||||
},
|
||||
'navigation.posts': () => guardedNavigate ('/posts'),
|
||||
'navigation.tags': () => guardedNavigate ('/tags'),
|
||||
'navigation.materials': () => guardedNavigate ('/materials'),
|
||||
'navigation.wiki': () => guardedNavigate ('/wiki'),
|
||||
'settings.account': () => guardedNavigate ('/users/settings?tab=account'),
|
||||
'settings.theme': () => guardedNavigate ('/users/settings?tab=theme'),
|
||||
'settings.keyboard': () => guardedNavigate ('/users/settings?tab=keyboard'),
|
||||
'settings.behavior': () => guardedNavigate ('/users/settings?tab=behavior'),
|
||||
}),
|
||||
[guardedNavigate],
|
||||
)
|
||||
|
||||
const availableActionIds = useMemo<Set<ShortcutActionId>> (
|
||||
() => new Set (
|
||||
SHORTCUT_DEFINITIONS
|
||||
.filter (definition =>
|
||||
definition.scope === 'global' || definition.scope === activeScope)
|
||||
.filter (definition =>
|
||||
builtinHandlers[definition.id] != null
|
||||
|| mergedRegisteredHandlers[definition.id] != null)
|
||||
.map (definition => definition.id),
|
||||
),
|
||||
[activeScope, builtinHandlers, mergedRegisteredHandlers],
|
||||
)
|
||||
|
||||
useEffect (() => {
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (
|
||||
keyboardSettings.enabled === false
|
||||
|| event.defaultPrevented
|
||||
|| event.isComposing
|
||||
|| event.key === 'Process'
|
||||
|| event.repeat
|
||||
)
|
||||
return
|
||||
|
||||
if (isEditableEventTarget (event.target))
|
||||
return
|
||||
|
||||
if (shortcutHelpOpen)
|
||||
return
|
||||
|
||||
const binding = keyBindingFromKeyboardEvent (event)
|
||||
if (binding == null)
|
||||
return
|
||||
|
||||
const serialisedBinding = serialiseKeyBinding (binding)
|
||||
if (serialisedBinding == null)
|
||||
return
|
||||
|
||||
const candidates = SHORTCUT_DEFINITIONS.filter (definition => (
|
||||
definition.scope === 'global'
|
||||
|| definition.scope === activeScope
|
||||
)).filter (definition => {
|
||||
const currentBinding = effectiveBindings[definition.id]
|
||||
return (
|
||||
currentBinding != null
|
||||
&& serialiseKeyBinding (currentBinding) === serialisedBinding
|
||||
)
|
||||
}).filter (definition => !(conflictActionIds.has (definition.id)))
|
||||
|
||||
if (candidates.length !== 1)
|
||||
return
|
||||
|
||||
const actionId = candidates[0].id
|
||||
const handler = mergedRegisteredHandlers[actionId] ?? builtinHandlers[actionId]
|
||||
|
||||
if (handler == null)
|
||||
return
|
||||
|
||||
event.preventDefault ()
|
||||
handler ()
|
||||
}
|
||||
|
||||
document.addEventListener ('keydown', onKeyDown)
|
||||
return () => document.removeEventListener ('keydown', onKeyDown)
|
||||
}, [
|
||||
activeScope,
|
||||
conflictActionIds,
|
||||
effectiveBindings,
|
||||
builtinHandlers,
|
||||
keyboardSettings.enabled,
|
||||
mergedRegisteredHandlers,
|
||||
shortcutHelpOpen,
|
||||
])
|
||||
|
||||
const value = useMemo<KeyboardShortcutsContextValue> (() => ({
|
||||
activeScope,
|
||||
keyboardSettings,
|
||||
effectiveBindings,
|
||||
conflictActionIds,
|
||||
saveKeyboardSettings,
|
||||
registerHandlers,
|
||||
}), [
|
||||
activeScope,
|
||||
conflictActionIds,
|
||||
effectiveBindings,
|
||||
keyboardSettings,
|
||||
registerHandlers,
|
||||
saveKeyboardSettings,
|
||||
])
|
||||
|
||||
return (
|
||||
<KeyboardShortcutsContext.Provider value={value}>
|
||||
{children}
|
||||
<ShortcutHelpDialog
|
||||
open={shortcutHelpOpen}
|
||||
onOpenChange={setShortcutHelpOpen}
|
||||
activeScope={activeScope}
|
||||
effectiveBindings={effectiveBindings}
|
||||
conflictActionIds={conflictActionIds}
|
||||
availableActionIds={availableActionIds}/>
|
||||
</KeyboardShortcutsContext.Provider>)
|
||||
}
|
||||
|
||||
|
||||
export const useKeyboardShortcutSettings = (): KeyboardShortcutsContextValue => {
|
||||
const context = useContext (KeyboardShortcutsContext)
|
||||
|
||||
if (context == null)
|
||||
throw new Error ('KeyboardShortcutsProvider が必要です．')
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
|
||||
export const useKeyboardShortcuts = (handlers: ShortcutHandlers): void => {
|
||||
const { registerHandlers } = useKeyboardShortcutSettings ()
|
||||
const handlersRef = useRef (handlers)
|
||||
const actionIdsKey = Object.keys (handlers).sort ().join ('|')
|
||||
|
||||
useEffect (() => {
|
||||
handlersRef.current = handlers
|
||||
}, [handlers])
|
||||
|
||||
const stableHandlers = useMemo<ShortcutHandlers> (() => {
|
||||
return actionIdsKey.split ('|').filter (actionId => actionId !== '')
|
||||
.reduce<ShortcutHandlers> ((nextHandlers, actionId) => {
|
||||
const key = actionId as ShortcutActionId
|
||||
nextHandlers[key] = () => {
|
||||
handlersRef.current[key]?.()
|
||||
}
|
||||
return nextHandlers
|
||||
}, { })
|
||||
}, [actionIdsKey])
|
||||
|
||||
useEffect (
|
||||
() => registerHandlers (stableHandlers),
|
||||
[registerHandlers, stableHandlers],
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
DEFAULT_KEY_BINDINGS,
|
||||
SHORTCUT_DEFINITIONS,
|
||||
SHORTCUT_SCOPE_LABELS,
|
||||
}
|
||||
変更されたファイルが多すぎるため，一部のファイルは表示されません さらに表示
新しい課題から参照
ユーザをブロックする