From 5f869e5d8735f3c058554b59e2c33f40ae7ef959 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 7 Aug 2021 17:55:16 +0900
Subject: [PATCH] Improve client

---
 locales/ja-JP.yml                             |  1 +
 src/client/components/ui/button.vue           |  4 +-
 src/client/pages/_error_.vue                  | 26 +++++---
 src/client/pages/my-antennas/create.vue       | 51 ++++++++++++++++
 src/client/pages/my-antennas/edit.vue         | 56 ++++++++++++++++++
 .../{index.antenna.vue => editor.vue}         | 28 +++++----
 src/client/pages/my-antennas/index.vue        | 59 ++++++++-----------
 src/client/style.scss                         |  1 +
 src/client/themes/_light.json5                |  2 +-
 src/client/themes/l-vivid.json5               |  2 +-
 10 files changed, 171 insertions(+), 59 deletions(-)
 create mode 100644 src/client/pages/my-antennas/create.vue
 create mode 100644 src/client/pages/my-antennas/edit.vue
 rename src/client/pages/my-antennas/{index.antenna.vue => editor.vue} (92%)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index ef6a094fd..3a00c28dd 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -769,6 +769,7 @@ sent: "送信"
 received: "受信"
 searchResult: "検索結果"
 hashtags: "ハッシュタグ"
+troubleshooting: "トラブルシューティング"
 
 _docs: 
   continueReading: "続きを読む"
diff --git a/src/client/components/ui/button.vue b/src/client/components/ui/button.vue
index c92f30db9..8a8394382 100644
--- a/src/client/components/ui/button.vue
+++ b/src/client/components/ui/button.vue
@@ -1,6 +1,6 @@
 <template>
 <component class="bghgjjyj _button"
-	:is="link ? 'a' : 'button'"
+	:is="link ? 'MkA' : 'button'"
 	:class="{ inline, primary, danger, full }"
 	:type="type"
 	@click="$emit('click', $event)"
@@ -115,6 +115,7 @@ export default defineComponent({
 	z-index: 1; // 他コンポーネントのbox-shadowに隠されないようにするため
 	display: block;
 	min-width: 100px;
+	width: min-content;
 	padding: 8px 14px;
 	text-align: center;
 	font-weight: normal;
@@ -125,6 +126,7 @@ export default defineComponent({
 	background: var(--buttonBg);
 	border-radius: 999px;
 	overflow: hidden;
+	box-sizing: border-box;
 
 	&:not(:disabled):hover {
 		background: var(--buttonHoverBg);
diff --git a/src/client/pages/_error_.vue b/src/client/pages/_error_.vue
index 6caecd6ea..1d67d9b14 100644
--- a/src/client/pages/_error_.vue
+++ b/src/client/pages/_error_.vue
@@ -1,11 +1,11 @@
 <template>
 <transition :name="$store.state.animation ? 'zoom' : ''" appear>
-	<div class="_section">
-		<div class="mjndxjch _content">
-			<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
-			<p><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</p>
-			<p>{{ $ts.pageLoadErrorDescription }}</p>
-		</div>
+	<div class="mjndxjch">
+		<img src="https://xn--931a.moe/assets/error.jpg" class="_ghost"/>
+		<p><b><i class="fas fa-exclamation-triangle"></i> {{ $ts.pageLoadError }}</b></p>
+		<p>{{ $ts.pageLoadErrorDescription }}</p>
+		<p><MkA to="/docs/general/troubleshooting" class="_link">{{ $ts.troubleshooting }}</MkA></p>
+		<p v-if="error" class="error">ERROR: {{ error }}</p>
 	</div>
 </transition>
 </template>
@@ -19,6 +19,11 @@ export default defineComponent({
 	components: {
 		MkButton,
 	},
+	props: {
+		error: {
+			required: false,
+		}
+	},
 	data() {
 		return {
 			[symbols.PAGE_INFO]: {
@@ -32,10 +37,11 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .mjndxjch {
+	padding: 32px;
 	text-align: center;
 
 	> p {
-		margin: 0 0 8px 0;
+		margin: 0 0 12px 0;
 	}
 
 	> .button {
@@ -45,8 +51,12 @@ export default defineComponent({
 	> img {
 		vertical-align: bottom;
 		height: 128px;
-		margin-bottom: 16px;
+		margin-bottom: 24px;
 		border-radius: 16px;
 	}
+
+	> .error {
+		opacity: 0.7;
+	}
 }
 </style>
diff --git a/src/client/pages/my-antennas/create.vue b/src/client/pages/my-antennas/create.vue
new file mode 100644
index 000000000..d4762411e
--- /dev/null
+++ b/src/client/pages/my-antennas/create.vue
@@ -0,0 +1,51 @@
+<template>
+<div class="geegznzt">
+	<XAntenna :antenna="draft" @created="onAntennaCreated"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkButton from '@client/components/ui/button.vue';
+import XAntenna from './editor.vue';
+import * as symbols from '@client/symbols';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		XAntenna,
+	},
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: this.$ts.manageAntennas,
+				icon: 'fas fa-satellite',
+			},
+			draft: {
+				name: '',
+				src: 'all',
+				userListId: null,
+				userGroupId: null,
+				users: [],
+				keywords: [],
+				excludeKeywords: [],
+				withReplies: false,
+				caseSensitive: false,
+				withFile: false,
+				notify: false
+			},
+		};
+	},
+
+	methods: {
+		onAntennaCreated() {
+			this.$router.push('/my/antennas');
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/client/pages/my-antennas/edit.vue b/src/client/pages/my-antennas/edit.vue
new file mode 100644
index 000000000..9deafb423
--- /dev/null
+++ b/src/client/pages/my-antennas/edit.vue
@@ -0,0 +1,56 @@
+<template>
+<div class="">
+	<XAntenna v-if="antenna" :antenna="antenna" @updated="onAntennaUpdated"/>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import MkButton from '@client/components/ui/button.vue';
+import XAntenna from './editor.vue';
+import * as symbols from '@client/symbols';
+import * as os from '@client/os';
+
+export default defineComponent({
+	components: {
+		MkButton,
+		XAntenna,
+	},
+
+	props: {
+		antennaId: {
+			type: String,
+			required: true,
+		}
+	},
+
+	data() {
+		return {
+			[symbols.PAGE_INFO]: {
+				title: this.$ts.manageAntennas,
+				icon: 'fas fa-satellite',
+			},
+			antenna: null,
+		};
+	},
+
+	watch: {
+		antennaId: {
+			async handler() {
+				this.antenna = await os.api('antennas/show', { antennaId: this.antennaId });
+			},
+			immediate: true,
+		}
+	},
+
+	methods: {
+		onAntennaUpdated() {
+			this.$router.push('/my/antennas');
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/client/pages/my-antennas/index.antenna.vue b/src/client/pages/my-antennas/editor.vue
similarity index 92%
rename from src/client/pages/my-antennas/index.antenna.vue
rename to src/client/pages/my-antennas/editor.vue
index 3a74a9d7f..882d48e64 100644
--- a/src/client/pages/my-antennas/index.antenna.vue
+++ b/src/client/pages/my-antennas/editor.vue
@@ -1,8 +1,7 @@
 <template>
-<div class="shaynizk _card">
-	<div class="_title" v-if="antenna.name">{{ antenna.name }}</div>
-	<div class="_content body">
-		<MkInput v-model="name">
+<div class="shaynizk">
+	<div class="form">
+		<MkInput v-model="name" class="_inputNoTopMargin">
 			<template #label>{{ $ts.name }}</template>
 		</MkInput>
 		<MkSelect v-model="src">
@@ -38,9 +37,9 @@
 		<MkSwitch v-model="withFile">{{ $ts.withFileAntenna }}</MkSwitch>
 		<MkSwitch v-model="notify">{{ $ts.notifyAntenna }}</MkSwitch>
 	</div>
-	<div class="_footer">
+	<div class="actions">
 		<MkButton inline @click="saveAntenna()" primary><i class="fas fa-save"></i> {{ $ts.save }}</MkButton>
-		<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null"><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
+		<MkButton inline @click="deleteAntenna()" v-if="antenna.id != null" danger><i class="fas fa-trash"></i> {{ $ts.delete }}</MkButton>
 	</div>
 </div>
 </template>
@@ -117,7 +116,7 @@ export default defineComponent({
 	methods: {
 		async saveAntenna() {
 			if (this.antenna.id == null) {
-				await os.api('antennas/create', {
+				await os.apiWithDialog('antennas/create', {
 					name: this.name,
 					src: this.src,
 					userListId: this.userListId,
@@ -132,7 +131,7 @@ export default defineComponent({
 				});
 				this.$emit('created');
 			} else {
-				await os.api('antennas/update', {
+				await os.apiWithDialog('antennas/update', {
 					antennaId: this.antenna.id,
 					name: this.name,
 					src: this.src,
@@ -146,9 +145,8 @@ export default defineComponent({
 					keywords: this.keywords.trim().split('\n').map(x => x.trim().split(' ')),
 					excludeKeywords: this.excludeKeywords.trim().split('\n').map(x => x.trim().split(' ')),
 				});
+				this.$emit('updated');
 			}
-
-			os.success();
 		},
 
 		async deleteAntenna() {
@@ -180,9 +178,13 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .shaynizk {
-	> .body {
-		max-height: 250px;
-		overflow: auto;
+	> .form {
+		padding: 32px;
+	}
+
+	> .actions {
+		padding: 24px 32px;
+		border-top: solid 0.5px var(--divider);
 	}
 }
 </style>
diff --git a/src/client/pages/my-antennas/index.vue b/src/client/pages/my-antennas/index.vue
index 57c55cefd..c27bb2c15 100644
--- a/src/client/pages/my-antennas/index.vue
+++ b/src/client/pages/my-antennas/index.vue
@@ -1,12 +1,12 @@
 <template>
 <div class="ieepwinx _section">
-	<MkButton @click="create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
+	<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="fas fa-plus"></i> {{ $ts.add }}</MkButton>
 
 	<div class="_content">
-		<XAntenna v-if="draft" :antenna="draft" @created="onAntennaCreated" style="margin-bottom: var(--margin);"/>
-
-		<MkPagination :pagination="pagination" #default="{items}" class="antennas" ref="list">
-			<XAntenna v-for="(antenna, i) in items" :key="antenna.id" :antenna="antenna" @deleted="onAntennaDeleted"/>
+		<MkPagination :pagination="pagination" #default="{items}" ref="list">
+			<MkA class="ljoevbzj" v-for="antenna in items" :key="antenna.id" :to="`/my/antennas/${antenna.id}`">
+				<div class="name">{{ antenna.name }}</div>
+			</MkA>
 		</MkPagination>
 	</div>
 </div>
@@ -16,14 +16,12 @@
 import { defineComponent } from 'vue';
 import MkPagination from '@client/components/ui/pagination.vue';
 import MkButton from '@client/components/ui/button.vue';
-import XAntenna from './index.antenna.vue';
 import * as symbols from '@client/symbols';
 
 export default defineComponent({
 	components: {
 		MkPagination,
 		MkButton,
-		XAntenna,
 	},
 
 	data() {
@@ -40,43 +38,34 @@ export default defineComponent({
 				endpoint: 'antennas/list',
 				limit: 10,
 			},
-			draft: null,
 		};
 	},
-
-	methods: {
-		create() {
-			this.draft = {
-				name: '',
-				src: 'all',
-				userListId: null,
-				userGroupId: null,
-				users: [],
-				keywords: [],
-				excludeKeywords: [],
-				withReplies: false,
-				caseSensitive: false,
-				withFile: false,
-				notify: false
-			};
-		},
-
-		onAntennaCreated() {
-			this.$refs.list.reload();
-			this.draft = null;
-		},
-
-		onAntennaDeleted() {
-			this.$refs.list.reload();
-		},
-	}
 });
 </script>
 
 <style lang="scss" scoped>
 .ieepwinx {
+	padding: 16px;
+
 	> .add {
 		margin: 0 auto 16px auto;
 	}
+
+	.ljoevbzj {
+		display: block;
+		padding: 16px;
+		margin-bottom: 8px;
+		border: solid 1px var(--divider);
+		border-radius: 6px;
+
+		&:hover {
+			border: solid 1px var(--accent);
+			text-decoration: none;
+		}
+
+		> .name {
+			font-weight: bold;
+		}
+	}
 }
 </style>
diff --git a/src/client/style.scss b/src/client/style.scss
index 99c1ced04..9127b6f23 100644
--- a/src/client/style.scss
+++ b/src/client/style.scss
@@ -255,6 +255,7 @@ hr {
 	margin: var(--margin) 0;
 }
 
+// TODO: 廃止
 ._card {
 	@extend ._panel;
 
diff --git a/src/client/themes/_light.json5 b/src/client/themes/_light.json5
index b31e369a3..97f56c75f 100644
--- a/src/client/themes/_light.json5
+++ b/src/client/themes/_light.json5
@@ -47,7 +47,7 @@
 		infoBg: '#e5f5ff',
 		infoFg: '#72818a',
 		infoWarnBg: '#fff0db',
-		infoWarnFg: '#573c08',
+		infoWarnFg: '#8f6e31',
 		cwBg: '#b1b9c1',
 		cwFg: '#fff',
 		cwHoverBg: '#bbc4ce',
diff --git a/src/client/themes/l-vivid.json5 b/src/client/themes/l-vivid.json5
index 32bb9dc26..0f4abe0a4 100644
--- a/src/client/themes/l-vivid.json5
+++ b/src/client/themes/l-vivid.json5
@@ -38,7 +38,7 @@
 		messageBg: '@bg',
 		navActive: '@accent',
 		infoWarnBg: '#fff0db',
-		infoWarnFg: '#573c08',
+		infoWarnFg: '#8f6e31',
 		navHoverFg: ':darken<17<@fg',
 		dateLabelFg: '@fg',
 		inputBorder: 'rgba(0, 0, 0, 0.1)',