このコミットが含まれているのは:
@@ -5,7 +5,7 @@ import NicoViewer from '@/components/NicoViewer'
|
||||
import TwitterEmbed from '@/components/TwitterEmbed'
|
||||
import { useDialogue } from '@/components/dialogues/DialogueProvider'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { getClientEmbedAutoLoadMode } from '@/lib/settings'
|
||||
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
|
||||
|
||||
import type { FC, RefObject } from 'react'
|
||||
|
||||
@@ -36,7 +36,8 @@ const PostEmbed: FC<Props> = (
|
||||
onError },
|
||||
) => {
|
||||
const dialogue = useDialogue ()
|
||||
const embedAutoLoadMode = getClientEmbedAutoLoadMode ()
|
||||
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)
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useRef } from 'react'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
|
||||
import PrefetchLink from '@/components/PrefetchLink'
|
||||
import { getClientThumbnailMode } from '@/lib/settings'
|
||||
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useSharedTransitionStore } from '@/stores/sharedTransitionStore'
|
||||
|
||||
@@ -17,7 +17,15 @@ type Props = { posts: Post[]
|
||||
|
||||
const PostList: FC<Props> = ({ posts, onClick }) => {
|
||||
const location = useLocation ()
|
||||
const thumbnailMode = getClientThumbnailMode ()
|
||||
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)
|
||||
|
||||
@@ -41,7 +49,8 @@ const PostList: FC<Props> = ({ posts, onClick }) => {
|
||||
}}>
|
||||
<motion.div
|
||||
ref={cardRef}
|
||||
layoutId={layoutId}
|
||||
layout={animationMode === 'off' ? false : true}
|
||||
layoutId={animationMode === 'off' ? undefined : 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',
|
||||
@@ -61,7 +70,7 @@ const PostList: FC<Props> = ({ posts, onClick }) => {
|
||||
cardRef.current.style.zIndex = ''
|
||||
cardRef.current.style.position = ''
|
||||
}}
|
||||
transition={{ layout: { duration: .2, ease: 'easeOut' } }}>
|
||||
transition={{ layout: cardLayoutTransition }}>
|
||||
{thumbnailMode === 'off'
|
||||
? (
|
||||
<div className="flex h-full w-full items-center justify-center
|
||||
|
||||
+247
-133
@@ -8,6 +8,7 @@ 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'
|
||||
@@ -91,6 +92,10 @@ 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)[]> ([])
|
||||
@@ -155,6 +160,20 @@ 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 =
|
||||
reducedAnimations
|
||||
? { duration: .08, ease: 'linear' as const }
|
||||
: { duration: .2, ease: 'easeOut' as const }
|
||||
const opacityTransition =
|
||||
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)
|
||||
|
||||
@@ -206,7 +225,7 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
<div aria-hidden
|
||||
className={cn ('absolute inset-y-0 h-12',
|
||||
'bg-yellow-200 dark:bg-red-950',
|
||||
'transition-[transform,width] duration-200 ease-out')}
|
||||
highlightTransitionClass)}
|
||||
style={{ width: hl.width,
|
||||
transform: `translateX(${ hl.left }px)`,
|
||||
opacity: hl.visible ? 1 : 0 }}/>
|
||||
@@ -214,10 +233,12 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
{visibleMenu.map ((item, i) => (
|
||||
<motion.div
|
||||
key={item.to}
|
||||
layoutId={`menu-${ item.name }`}
|
||||
{...(animationsOff
|
||||
? { }
|
||||
: { layoutId: `menu-${ item.name }` })}
|
||||
animate={{ opacity: moreVsbl ? 0 : 1 }}
|
||||
transition={{ opacity: { duration: .12 },
|
||||
layout: { duration: .2, ease: 'easeOut' } }}
|
||||
transition={{ opacity: opacityTransition,
|
||||
layout: topNavTransition }}
|
||||
style={{ pointerEvents: moreVsbl ? 'none' : 'auto' }}
|
||||
onMouseEnter={() => setMoreVsbl (false)}>
|
||||
<PrefetchLink
|
||||
@@ -264,7 +285,8 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
<AnimatePresence initial={false}>
|
||||
<motion.div
|
||||
key="submenu-shell"
|
||||
layout
|
||||
{...(animationsOff ? { }
|
||||
: { layout: true })}
|
||||
className="relative z-20 hidden md:block overflow-hidden
|
||||
bg-yellow-200 dark:bg-red-950"
|
||||
animate={{ height: submenuHeight }}
|
||||
@@ -272,7 +294,7 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
if (moreVsbl)
|
||||
setMoreVsbl (false)
|
||||
}}
|
||||
transition={{ layout: { duration: .2, ease: 'easeOut' } }}
|
||||
transition={{ layout: topNavTransition }}
|
||||
onAnimationComplete={() => {
|
||||
measure (moreVsbl ? -1 : activeIdx)
|
||||
}}>
|
||||
@@ -282,12 +304,14 @@ 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={{ duration: .2, ease: 'easeOut' }}
|
||||
{...((item.visible ?? true)
|
||||
transition={topNavTransition}
|
||||
{...(animationsOff
|
||||
? { }
|
||||
: ((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>
|
||||
@@ -298,25 +322,29 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
? (
|
||||
<motion.div
|
||||
key={`c-${ i }-${ j }`}
|
||||
transition={{ duration: .2, ease: 'easeOut' }}
|
||||
{...((visibleMenu[activeIdx]?.name
|
||||
transition={topNavTransition}
|
||||
{...(animationsOff
|
||||
? { }
|
||||
: ((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={{ duration: .2, ease: 'easeOut' }}
|
||||
{...((visibleMenu[activeIdx]?.name
|
||||
transition={topNavTransition}
|
||||
{...(animationsOff
|
||||
? { }
|
||||
: ((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}
|
||||
@@ -330,129 +358,215 @@ const TopNav: FC<Props> = ({ user }) => {
|
||||
: ((visibleMenu[activeIdx]?.subMenu ?? []).length > 0
|
||||
&& (
|
||||
<div className="relative h-[40px]">
|
||||
<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>
|
||||
{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="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="h-full flex items-center px-3">
|
||||
{item.name}
|
||||
</PrefetchLink>
|
||||
</motion.div>)))}
|
||||
</motion.div>
|
||||
</AnimatePresence>)}
|
||||
</div>))}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
<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>
|
||||
{animationsOff
|
||||
? (
|
||||
menuOpen && (
|
||||
<div
|
||||
className={cn ('flex flex-col md:hidden',
|
||||
'bg-yellow-200 dark:bg-red-975 items-start')}>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
{i === openItemIdx && (
|
||||
<div className="w-full bg-yellow-50 dark:bg-red-950">
|
||||
{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>)))}
|
||||
</div>)}
|
||||
</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/>
|
||||
</div>))
|
||||
: (
|
||||
<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={topNavTransition}>
|
||||
<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>
|
||||
|
||||
<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={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="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>)}
|
||||
</>)
|
||||
}
|
||||
|
||||
|
||||
@@ -2,17 +2,16 @@ 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 { getClientBehaviorSettings, setClientBehaviorSettings } from '@/lib/settings'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
import type {
|
||||
ClientAnimationMode,
|
||||
ClientBehaviorSettings,
|
||||
ClientEmbedAutoLoadMode,
|
||||
ClientThumbnailMode } from '@/lib/settings'
|
||||
import type { FC, ReactNode } from 'react'
|
||||
|
||||
import type { ClientAnimationMode,
|
||||
ClientBehaviorSettings,
|
||||
ClientEmbedAutoLoadMode,
|
||||
ClientThumbnailMode } from '@/lib/settings'
|
||||
|
||||
type Props = {
|
||||
sectionClassName: string }
|
||||
|
||||
@@ -31,25 +30,22 @@ type SettingBlockProps = {
|
||||
children: ReactNode }
|
||||
|
||||
const animationOptions: SegmentedOption<ClientAnimationMode>[] = [
|
||||
{ value: 'normal', label: '通常' },
|
||||
{ value: 'reduced', label: '控えめ' },
|
||||
{ value: 'off', label: 'なし' },
|
||||
]
|
||||
{ value: 'reduced', label: '控えめ' },
|
||||
{ value: 'normal', label: '通常' }]
|
||||
|
||||
const embedAutoLoadOptions: SegmentedOption<ClientEmbedAutoLoadMode>[] = [
|
||||
{ value: 'auto', label: '自動' },
|
||||
{ value: 'manual', label: 'クリック時' },
|
||||
{ value: 'off', label: '読み込まない' },
|
||||
]
|
||||
{ value: 'manual', label: 'クリック時' },
|
||||
{ value: 'auto', label: '自動' }]
|
||||
|
||||
const thumbnailModeOptions: SegmentedOption<ClientThumbnailMode>[] = [
|
||||
{ value: 'normal', label: '通常' },
|
||||
{ value: 'light', label: '軽量' },
|
||||
{ value: 'off', label: '非表示' },
|
||||
]
|
||||
{ value: 'light', label: '軽量' },
|
||||
{ value: 'normal', label: '通常' }]
|
||||
|
||||
|
||||
const SegmentedControl = <T extends string,>(
|
||||
const SegmentedControl = <T extends string,> (
|
||||
{ value, options, onChange }: SegmentedControlProps<T>,
|
||||
) => {
|
||||
return (
|
||||
@@ -103,8 +99,7 @@ const BehaviourSettingsSection: FC<Props> = ({ sectionClassName }) => {
|
||||
|
||||
const hasUnsavedChanges = useMemo (
|
||||
() => JSON.stringify (draftSettings) !== JSON.stringify (savedSettings),
|
||||
[draftSettings, savedSettings],
|
||||
)
|
||||
[draftSettings, savedSettings])
|
||||
|
||||
const updateDraft = <Key extends keyof ClientBehaviorSettings,> (
|
||||
key: Key,
|
||||
@@ -129,12 +124,6 @@ const BehaviourSettingsSection: FC<Props> = ({ sectionClassName }) => {
|
||||
<div className="flex flex-wrap items-start justify-between gap-3">
|
||||
<div className="space-y-1">
|
||||
<h2 className="text-xl font-bold">動作</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
この設定は現在のブラウザに保存されます。
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
重い端末や通信量を抑えたい場合に調整します。
|
||||
</p>
|
||||
{hasUnsavedChanges && (
|
||||
<p className="text-sm text-amber-700 dark:text-amber-300">
|
||||
未保存の変更があります
|
||||
|
||||
新しい課題から参照
ユーザをブロックする