#34

frontend/src/components/users/BehaviourSettingsSection.tsx

@@ -10,6 +10,8 @@ import type { FC, ReactNode } from 'react'
 import type { ClientAnimationMode,
 	      ClientBehaviorSettings,
 	      ClientEmbedAutoLoadMode,
+	      ClientLinkPreloadMode,
+	      ClientTagRelationDisplayMode,
 	      ClientThumbnailMode } from '@/lib/settings'
 
 type Props = {
@@ -39,6 +41,14 @@ const embedAutoLoadOptions: SegmentedOption<ClientEmbedAutoLoadMode>[] = [
     { 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 thumbnailModeOptions: SegmentedOption<ClientThumbnailMode>[] = [
     { value: 'off', label: '非表示' },
     { value: 'light', label: '軽量' },
@@ -63,8 +73,8 @@ const SegmentedControl = <T extends string,> (
 		    'transition-colors focus-visible:outline-none focus-visible:ring-2',
 		    'focus-visible:ring-ring focus-visible:ring-offset-2',
 		    value === option.value
-		    ? 'bg-background text-foreground shadow-sm'
-		    : 'text-muted-foreground hover:bg-background/70 hover:text-foreground',
+		    ? '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}
@@ -157,6 +167,24 @@ const BehaviourSettingsSection: FC<Props> = ({ sectionClassName }) => {
 		onChange={value => updateDraft ('animation', value)}/>
 	  </SettingBlock>
 
+	  <SettingBlock
+	      title="リンク先の先読み"
+	      description="リンクにマウスを置いた時などに、移動先の情報を先に読みます。通信量や意図しない読込みが気になる場合は「しない」にできます。">
+	    <SegmentedControl
+		value={draftSettings.linkPreload ?? 'intent'}
+		options={linkPreloadOptions}
+		onChange={value => updateDraft ('linkPreload', value)}/>
+	  </SettingBlock>
+
+	  <SettingBlock
+	      title="タグの親子関係表示"
+	      description="親子関係があるタグを、まとまりとして表示します。見た目を単純にしたい場合は「まとめない」にできます。">
+	    <SegmentedControl
+		value={draftSettings.tagRelationDisplay ?? 'grouped'}
+		options={tagRelationDisplayOptions}
+		onChange={value => updateDraft ('tagRelationDisplay', value)}/>
+	  </SettingBlock>
+
 	  <SettingBlock
 	      title="埋め込み自動読込"
 	      description="外部埋め込みを自動で読み込むかを切り替えます。">