テンプレート文字数を1024に拡張

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)');
+    }
+}

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;

src/frontend/pages/apps/misshai.scss

@@ -15,3 +15,12 @@
         flex: 5 0 300px;
     }
 }
+
+.textarea-wrapper {
+    position: relative;
+    > .textarea-remaining {
+        position: absolute;
+        right: 16px;
+        bottom: 16px;
+    }
+}

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,12 +235,16 @@ 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">
+				<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>
+					<div className="card pa-2">
 						<h3>{t('alertMode')}</h3>
 						<div className="vstack slim">
 							{ alertModes.map((mode) => (
@@ -258,7 +264,7 @@ export const MisshaiPage: React.VFC = () => {
 						)}
 						{ (draft.alertMode === 'note' || draft.alertMode === 'both') && (
 							<>
-						<h3>{t('visibility')}</h3>
+								<h3 className="mt-2">{t('visibility')}</h3>
 								<div className="vstack slim">
 									{
 										availableVisibilities.map((visibility) => (
@@ -279,6 +285,8 @@ export const MisshaiPage: React.VFC = () => {
 								</label>
 							</>
 						)}
+					</div>
+					<div className="card pa-2">
 						<h3>{t('template')}</h3>
 						<p>{t('_template.description')}</p>
 						<div className="hstack dense mb-2">
@@ -290,15 +298,20 @@ export const MisshaiPage: React.VFC = () => {
 								<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) => {
+						<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 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 });
-					}}>{t('save')}</button>
+							}} disabled={remaining < 0}>{t('save')}</button>
+						</div>
+					</div>
 				</div>
 			</section>
 			<section className="list-form mt-2">