#34

frontend/src/pages/users/SettingPage.tsx

@@ -254,28 +254,10 @@ const ThemeSection: FC<SharedSectionProps> = (
 	    </select>)}
       </FormField>
 
-      <div className="space-y-2 rounded-lg border border-dashed border-border/70 p-3 text-sm">
-	<p>
-	  テーマの選択状態は現在のブラウザに保存し，背景・文字色はそのテーマの base に従います．
-	</p>
-	<p className="text-muted-foreground">
-	  backend には system / light / dark の mode だけ保存します．
-	  カスタムテーマ本体は今は browser-local です．
-	</p>
-	<p className="text-muted-foreground">
-	  将来は themes テーブルなどへ移して，端末間同期できる構造に拡張できます．
-	</p>
-      </div>
-
       <div className="space-y-3">
 	<div className="flex flex-wrap items-center justify-between gap-2">
 	  <div>
 	  <h3 className="font-medium">タグカテゴリ色</h3>
-	  <p className="text-sm text-muted-foreground">
-	    {selectedTheme.builtin || draftActiveThemeId === 'system'
-	     ? '組み込みテーマは直接変更されません．色を変更するとカスタムテーマを作成します．'
-	     : `現在の編輯対象: ${ selectedTheme.name }`}
-	  </p>
 	  </div>
 	  <Button
 	      type="button"
@@ -344,14 +326,6 @@ const ThemeSection: FC<SharedSectionProps> = (
 	</div>
       </div>
 
-      <div className="space-y-2 rounded-lg border border-dashed border-border/70 p-3 text-sm">
-	<p className="font-medium">既存 backend 設定について</p>
-	<p>
-	  auto_fetch_title、auto_fetch_thumbnail、wiki_editor_mode は backend 側に
-	  保持したままです．この共通設定画面にはまだ接続していません．
-	</p>
-      </div>
-
       <Button type="button" onClick={onThemeSubmit}>
 	テーマを保存
       </Button>
@@ -682,15 +656,40 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 	<div className="mx-auto max-w-xl space-y-4 p-4 md:hidden">
 	  <PageTitle>設定</PageTitle>
 	  <FieldError messages={settingsError ? [settingsError] : []}/>
+	  <div
+	      role="tablist"
+	      aria-label="設定区分"
+	      aria-orientation="horizontal"
+	      className="-mx-4 flex gap-2 overflow-x-auto px-4 pb-1">
+	    {tabs.map (tab => (
+		<button
+		    key={tab.id}
+		    id={tabButtonId (tab.id)}
+		    type="button"
+		    role="tab"
+		    aria-selected={activeTab === tab.id}
+		    aria-controls={tabPanelId (tab.id)}
+		    className={cn (
+			'shrink-0 rounded-full border px-3 py-2 text-sm font-medium',
+			(activeTab === tab.id
+			 ? ['border-slate-900 bg-slate-900 text-white',
+			    'dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900']
+			 : ['border-border bg-background text-foreground']))}
+		    onClick={() => setActiveTab (tab.id)}>
+		  {tab.label}
+		  {settingsTabErrors[tab.id] ? ' !' : ''}
+		</button>))}
+	  </div>
 	  {loading ? 'Loading...' : (
-	      <>
-		{sectionProps && (
-		    <>
-		      <AccountSection {...sectionProps}/>
-		      <ThemeSection {...sectionProps}/>
-		      <KeyboardSettingsSection sectionClassName={sectionClassName}/>
-		    </>)}
-	      </>)}
+	      <div
+		  id={tabPanelId (activeTab)}
+		  role="tabpanel"
+		  aria-labelledby={tabButtonId (activeTab)}>
+		{sectionProps && activeTab === 'account' && <AccountSection {...sectionProps}/>}
+		{sectionProps && activeTab === 'theme' && <ThemeSection {...sectionProps}/>}
+		{activeTab === 'keyboard' && (
+		    <KeyboardSettingsSection sectionClassName={sectionClassName}/>)}
+	      </div>)}
 	</div>
 
 	<div className="hidden md:flex md:justify-center md:px-4">