From 34d904864185b64a6935b8fec75e80656ae12acf Mon Sep 17 00:00:00 2001
From: Xeltica <xeltica@gmail.com>
Date: Thu, 15 Sep 2022 16:36:05 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=86=E3=83=B3=E3=83=97=E3=83=AC=E3=83=BC?=
 =?UTF-8?q?=E3=83=88=E6=96=87=E5=AD=97=E6=95=B0=E3=82=921024=E3=81=AB?=
 =?UTF-8?q?=E6=8B=A1=E5=BC=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../1663226831484-expandTemplateLength.ts     |  13 ++
 src/backend/models/entities/user.ts           |   2 +-
 src/frontend/pages/apps/misshai.scss          |   9 ++
 src/frontend/pages/apps/misshai.tsx           | 135 ++++++++++--------
 4 files changed, 97 insertions(+), 62 deletions(-)
 create mode 100644 migration/1663226831484-expandTemplateLength.ts

diff --git a/migration/1663226831484-expandTemplateLength.ts b/migration/1663226831484-expandTemplateLength.ts
new file mode 100644
index 0000000..b36acd8
--- /dev/null
+++ b/migration/1663226831484-expandTemplateLength.ts
@@ -0,0 +1,13 @@
+import {MigrationInterface, QueryRunner} from 'typeorm';
+
+export class expandTemplateLength1663226831484 implements MigrationInterface {
+    name = 'expandTemplateLength1663226831484'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+    	await queryRunner.query('ALTER TABLE "user" ALTER COLUMN "template" TYPE character varying(1024)');
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+    	await queryRunner.query('ALTER TABLE "user" ALTER COLUMN "template" TYPE character varying(280)');
+    }
+}
diff --git a/src/backend/models/entities/user.ts b/src/backend/models/entities/user.ts
index cba5eeb..ad08e85 100644
--- a/src/backend/models/entities/user.ts
+++ b/src/backend/models/entities/user.ts
@@ -76,7 +76,7 @@ export class User implements IUser {
 
 	@Column({
 		type: 'varchar',
-		length: 280,
+		length: 1024,
 		nullable: true,
 	})
 	public template: string | null;
diff --git a/src/frontend/pages/apps/misshai.scss b/src/frontend/pages/apps/misshai.scss
index 4ad80dc..4048f11 100644
--- a/src/frontend/pages/apps/misshai.scss
+++ b/src/frontend/pages/apps/misshai.scss
@@ -14,4 +14,13 @@
     > .templateSetting {
         flex: 5 0 300px;
     }
+}
+
+.textarea-wrapper {
+    position: relative;
+    > .textarea-remaining {
+        position: absolute;
+        right: 16px;
+        bottom: 16px;
+    }
 }
\ No newline at end of file
diff --git a/src/frontend/pages/apps/misshai.tsx b/src/frontend/pages/apps/misshai.tsx
index 1b009bd..ac3aec4 100644
--- a/src/frontend/pages/apps/misshai.tsx
+++ b/src/frontend/pages/apps/misshai.tsx
@@ -187,6 +187,8 @@ export const MisshaiPage: React.VFC = () => {
 
 	const defaultTemplate = t('_template.default');
 
+	const remaining = 1024 - (draft.template ?? defaultTemplate).length;
+
 	return session.isLoading || score.isLoading || !session.data || !score.data ? (
 		<div className="vstack">
 			<Skeleton width="100%" height="1rem" />
@@ -233,72 +235,83 @@ export const MisshaiPage: React.VFC = () => {
 			</section>
 			<section className="alertModeSetting">
 				<h2><i className="fas fa-gear"></i> {t('settings')}</h2>
-				<label className="input-check mt-2">
-					<input type="checkbox" checked={draft.useRanking} onChange={(e) => {
-						updateSetting({ useRanking: e.target.checked });
-					}}/>
-					<span>{t('_missHai.useRanking')}</span>
-				</label>
-				<h3>{t('alertMode')}</h3>
-				<div className="vstack slim">
-					{ alertModes.map((mode) => (
-						<label key={mode} className="input-check">
-							<input type="radio" checked={mode === draft.alertMode} onChange={() => {
-								updateSetting({ alertMode: mode });
-							}} />
-							<span>{t(`_alertMode.${mode}`)}</span>
+				<div className="vstack">
+					<div className="card pa-2">
+						<label className="input-check">
+							<input type="checkbox" checked={draft.useRanking} onChange={(e) => {
+								updateSetting({ useRanking: e.target.checked });
+							}}/>
+							<span>{t('_missHai.useRanking')}</span>
 						</label>
-					))}
-				</div>
-				{ (draft.alertMode === 'notification' || draft.alertMode === 'both') && (
-					<div className="alert bg-danger mt-2">
-						<i className="icon fas fa-circle-exclamation"></i>
-						{t('_alertMode.notificationWarning')}
 					</div>
-				)}
-				{ (draft.alertMode === 'note' || draft.alertMode === 'both') && (
-					<>
-						<h3>{t('visibility')}</h3>
+					<div className="card pa-2">
+						<h3>{t('alertMode')}</h3>
 						<div className="vstack slim">
-							{
-								availableVisibilities.map((visibility) => (
-									<label key={visibility} className="input-check">
-										<input type="radio" checked={visibility === draft.visibility} onChange={() => {
-											updateSetting({ visibility });
-										}} />
-										<span>{t(`_visibility.${visibility}`)}</span>
-									</label>
-								))
-							}
+							{ alertModes.map((mode) => (
+								<label key={mode} className="input-check">
+									<input type="radio" checked={mode === draft.alertMode} onChange={() => {
+										updateSetting({ alertMode: mode });
+									}} />
+									<span>{t(`_alertMode.${mode}`)}</span>
+								</label>
+							))}
 						</div>
-						<label className="input-check mt-2">
-							<input type="checkbox" checked={draft.localOnly} onChange={(e) => {
-								updateSetting({ localOnly: e.target.checked });
+						{ (draft.alertMode === 'notification' || draft.alertMode === 'both') && (
+							<div className="alert bg-danger mt-2">
+								<i className="icon fas fa-circle-exclamation"></i>
+								{t('_alertMode.notificationWarning')}
+							</div>
+						)}
+						{ (draft.alertMode === 'note' || draft.alertMode === 'both') && (
+							<>
+								<h3 className="mt-2">{t('visibility')}</h3>
+								<div className="vstack slim">
+									{
+										availableVisibilities.map((visibility) => (
+											<label key={visibility} className="input-check">
+												<input type="radio" checked={visibility === draft.visibility} onChange={() => {
+													updateSetting({ visibility });
+												}} />
+												<span>{t(`_visibility.${visibility}`)}</span>
+											</label>
+										))
+									}
+								</div>
+								<label className="input-check mt-2">
+									<input type="checkbox" checked={draft.localOnly} onChange={(e) => {
+										updateSetting({ localOnly: e.target.checked });
+									}} />
+									<span>{t('localOnly')}</span>
+								</label>
+							</>
+						)}
+					</div>
+					<div className="card pa-2">
+						<h3>{t('template')}</h3>
+						<p>{t('_template.description')}</p>
+						<div className="hstack dense mb-2">
+							<button className="btn" onClick={onClickInsertVariables}>
+								{'{ } '}
+								{t('_template.insertVariables')}
+							</button>
+							<button className="btn link text-info" onClick={onClickInsertVariablesHelp}>
+								<i className="fas fa-circle-question" />
+							</button>
+						</div>
+						<div className="textarea-wrapper">
+							<textarea ref={templateTextarea} className="input-field" value={draft.template ?? defaultTemplate} placeholder={defaultTemplate} style={{height: 240}} onChange={(e) => {
+								dispatchDraft({ template: e.target.value });
 							}} />
-							<span>{t('localOnly')}</span>
-						</label>
-					</>
-				)}
-				<h3>{t('template')}</h3>
-				<p>{t('_template.description')}</p>
-				<div className="hstack dense mb-2">
-					<button className="btn" onClick={onClickInsertVariables}>
-						{'{ } '}
-						{t('_template.insertVariables')}
-					</button>
-					<button className="btn link text-info" onClick={onClickInsertVariablesHelp}>
-						<i className="fas fa-circle-question" />
-					</button>
-				</div>
-				<textarea ref={templateTextarea} className="input-field" value={draft.template ?? defaultTemplate} placeholder={defaultTemplate} style={{height: 228}} onChange={(e) => {
-					dispatchDraft({ template: e.target.value });
-				}} />
-				<small className="text-dimmed">{t('_template.description2')}</small>
-				<div className="hstack mt-2">
-					<button className="btn danger" onClick={() => dispatchDraft({ template: null })}>{t('resetToDefault')}</button>
-					<button className="btn primary" onClick={() => {
-						updateSettingWithDialog({ template: draft.template === '' ? null : draft.template });
-					}}>{t('save')}</button>
+							<span className={`textarea-remaining ${remaining <= 0 ? 'text-red text-bold' : ''}`}>{remaining}</span>
+						</div>
+						<small className="text-dimmed">{t('_template.description2')}</small>
+						<div className="hstack mt-2">
+							<button className="btn danger" onClick={() => dispatchDraft({ template: null })}>{t('resetToDefault')}</button>
+							<button className="btn primary" onClick={() => {
+								updateSettingWithDialog({ template: draft.template === '' ? null : draft.template });
+							}} disabled={remaining < 0}>{t('save')}</button>
+						</div>
+					</div>
 				</div>
 			</section>
 			<section className="list-form mt-2">