wip

src/frontend/components/Card.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export type CardProps = {
+	className?: string;
+	bodyClassName?: string;
+};
+
+export const Card: React.FC<CardProps> = ({children, className, bodyClassName}) => {
+	return (
+		<div className={`card ${className}`}>
+			<div className={`body ${bodyClassName}`}>
+				{children}
+			</div>
+		</div>
+	);
+};

src/frontend/components/SettingPage.tsx

@@ -1,9 +1,11 @@
-import React, { useEffect, useMemo, useReducer } from 'react';
+import React, { useEffect, useMemo, useReducer, useState } from 'react';
 import { AlertMode } from '../../common/types/alert-mode';
 import { IUser } from '../../common/types/user';
 import { Visibility } from '../../common/types/visibility';
 import { useGetSessionQuery } from '../services/session';
 import { defaultTemplate } from '../../common/default-template';
+import { Card } from './Card';
+import { Theme } from '../misc/theme';
 
 type SettingDraftType = Pick<IUser,
 	| 'alertMode'
@@ -30,6 +32,24 @@ export const SettingPage: React.VFC = () => {
 		template: data?.template ?? null,
 	});
 
+	const themes: Array<{ theme: Theme, name: string }> = [
+		{
+			theme: 'light',
+			name: 'ライトテーマ'
+		},
+		{
+			theme: 'dark',
+			name: 'ダークテーマ'
+		},
+		{
+			theme: 'system',
+			name: 'システム設定に準じる'
+		},
+	];
+
+	const [currentTheme, setCurrentTheme] = useState<Theme>('light');
+	const [currentLang, setCurrentLang] = useState<string>('ja-JP');
+
 	useEffect(() => {
 		if (data) {
 			dispatchDraft({
@@ -52,8 +72,7 @@ export const SettingPage: React.VFC = () => {
 		<div className="skeleton" style={{width: '100%', height: '128px'}}></div>
 	) : (
 		<div className="vstack fade">
-			<div className="card">
+			<Card bodyClassName="vstack">
-				<div className="body vstack">
 				<h1>スコア通知方法</h1>
 				<div>
 					<select name="alertMode" className="input-field" value={draft.alertMode} onChange={(e) => {
@@ -88,17 +107,63 @@ export const SettingPage: React.VFC = () => {
 					</div>
 				)}
 				{saveButton}
+			</Card>
+			<Card bodyClassName="vstack">
+				<h1>表示設定</h1>
+				<h2>テーマ</h2>
+				<div>
+					{
+						themes.map(({ theme, name }) => (
+							<label key={theme} className="input-check">
+								<input type="radio" name={theme} value={theme} checked={theme === currentTheme} onChange={(e) => setCurrentTheme(e.target.value as Theme)} />
+								<span>{name}</span>
+							</label>
+						))
+					}
 				</div>
-			</div>
+
-			<div className="card">
+				<h2>言語設定</h2>
-				<div className="body vstack">
+				<select name="currentLang" className="input-field" value={currentLang} onChange={e => setCurrentLang(e.target.value)}>
+					<option value="ja-JP">日本語</option>
+					<option value="en-US">英語</option>
+				</select>
+			</Card>
+
+			<Card bodyClassName="vstack">
 				<h1>テンプレート</h1>
+				<p>アラートの自動投稿をカスタマイズできます。テンプレートに使える文字数は280文字です。空欄にすると、デフォルト値にリセットされます。</p>
 				<textarea className="input-field" value={draft.template ?? defaultTemplate} style={{height: 228}} onChange={(e) => {
 					dispatchDraft({ template: e.target.value });
 				}} />
+				<small className="text-dimmed">
+					ハッシュタグ #misshaialert は、テンプレートに関わらず自動付与されます。
+				</small>
+				<details>
+					<summary>ヘルプ</summary>
+					<ul className="fade">
+						<li><code>{'{'}notesCount{'}'}</code>といった形式のテキストは変数として扱われ、これを含めると投稿時に自動的に値が埋め込まれます。</li>
+					</ul>
+				</details>
 				{saveButton}
-				</div>
+			</Card>
-			</div>
+			<Card bodyClassName="vstack">
+				<button className="btn block">アラートをテスト送信する</button>
+				<p className="text-dimmed">
+					このボタンを押すと、現在の設定でアラートを送信するテストを行います。
+				</p>
+			</Card>
+			<Card bodyClassName="vstack">
+				<button className="btn block">ログアウトする</button>
+				<p className="text-dimmed">
+					ログアウトしても、アラートは送信されます。
+				</p>
+			</Card>
+			<Card bodyClassName="vstack">
+				<button className="btn danger block">アカウント連携を解除する</button>
+				<p className="text-dimmed">
+					これを実行すると、Misskeyとの連携設定を含むみす廃アラートのアカウントを削除します。
+				</p>
+			</Card>
 		</div>
 	);
 };

src/frontend/misc/theme.ts

@@ -0,0 +1,3 @@
+export type Theme = ActualTheme | 'system';
+
+export type ActualTheme = 'light' | 'dark';

src/frontend/style.scss

@@ -21,3 +21,15 @@ body {
         transform: none;
     }
 }
+
+.block {
+    display: block !important;
+}
+
+.inline {
+    display: inline !important;
+}
+
+small {
+    font-size: 0.8rem;
+}