From dcd4d808690f2ee9b9bea6bdfd164efa43296d52 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 4 Mar 2023 10:34:54 +0900
Subject: [PATCH] enhance(client): improve channel ui

---
 locales/ja-JP.yml                             |  2 ++
 packages/frontend/src/pages/channel.vue       | 29 ++++++++++++++++++-
 .../frontend/src/pages/settings/general.vue   |  2 ++
 .../pages/settings/preferences-backups.vue    |  1 +
 packages/frontend/src/store.ts                |  4 +++
 packages/frontend/src/style.scss              |  6 ++++
 .../frontend/src/ui/deck/channel-column.vue   |  1 -
 7 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 8fee2726e8..ef70469935 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -506,6 +506,7 @@ objectStorageSetPublicRead: "アップロード時に'public-read'を設定す
 serverLogs: "サーバーログ"
 deleteAll: "全て削除"
 showFixedPostForm: "タイムライン上部に投稿フォームを表示する"
+showFixedPostFormInChannel: "タイムライン上部に投稿フォームを表示する(チャンネル)"
 newNoteRecived: "新しいノートがあります"
 sounds: "サウンド"
 sound: "サウンド"
@@ -955,6 +956,7 @@ exploreOtherServers: "他のサーバーを探す"
 letsLookAtTimeline: "タイムラインを見てみる"
 disableFederationWarn: "連合が無効になっています。無効にしても投稿が非公開にはなりません。ほとんどの場合、このオプションを有効にする必要はありません。"
 invitationRequiredToRegister: "現在このサーバーは招待制です。招待コードをお持ちの方のみ登録できます。"
+postToTheChannel: "チャンネルに投稿"
 
 _achievements:
   earnedAt: "獲得日時"
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index 7e9cebbd4d..81fc5ec877 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -24,7 +24,7 @@
 			</div>
 
 			<!-- スマホ・タブレットの場合、キーボードが表示されると投稿が見づらくなるので、デスクトップ場合のみ自動でフォーカスを当てる -->
-			<MkPostForm v-if="$i" :channel="channel" class="post-form _panel" fixed :autofocus="deviceKind === 'desktop'"/>
+			<MkPostForm v-if="$i && defaultStore.reactiveState.showFixedPostFormInChannel.value" :channel="channel" class="post-form _panel" fixed :autofocus="deviceKind === 'desktop'"/>
 
 			<MkTimeline :key="channelId" src="channel" :channel="channelId" @before="before" @after="after"/>
 		</div>
@@ -32,6 +32,15 @@
 			<MkNotes :pagination="featuredPagination"/>
 		</div>
 	</MkSpacer>
+	<template #footer>
+		<div :class="$style.footer">
+			<MkSpacer :content-max="700" :margin-min="16" :margin-max="16">
+				<div class="_buttonsCenter">
+					<MkButton inline rounded primary gradate @click="openPostForm()"><i class="ti ti-pencil"></i> {{ i18n.ts.postToTheChannel }}</MkButton>
+				</div>
+			</MkSpacer>
+		</div>
+	</template>
 </MkStickyContainer>
 </template>
 
@@ -48,6 +57,8 @@ import { definePageMetadata } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
 import MkNotes from '@/components/MkNotes.vue';
 import { url } from '@/config';
+import MkButton from '@/components/MkButton.vue';
+import { defaultStore } from '@/store';
 
 const router = useRouter();
 
@@ -77,6 +88,14 @@ function edit() {
 	router.push(`/channels/${channel.id}/edit`);
 }
 
+function openPostForm() {
+	os.post({
+		channel: {
+			id: channel.channelId,
+		},
+	});
+}
+
 const headerActions = $computed(() => channel && channel.userId ? [{
 	icon: 'ti ti-share',
 	text: i18n.ts.share,
@@ -109,6 +128,14 @@ definePageMetadata(computed(() => channel ? {
 } : null));
 </script>
 
+<style lang="scss" module>
+.footer {
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+	border-top: solid 0.5px var(--divider);
+}
+</style>
+
 <style lang="scss" scoped>
 .wpgynlbz {
 	position: relative;
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index a578c5c747..8c8c9b9dbf 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -21,6 +21,7 @@
 	</MkRadios>
 
 	<MkSwitch v-model="showFixedPostForm">{{ i18n.ts.showFixedPostForm }}</MkSwitch>
+	<MkSwitch v-model="showFixedPostFormInChannel">{{ i18n.ts.showFixedPostFormInChannel }}</MkSwitch>
 
 	<FormSection>
 		<template #label>{{ i18n.ts.behavior }}</template>
@@ -156,6 +157,7 @@ const loadRawImages = computed(defaultStore.makeGetterSetter('loadRawImages'));
 const imageNewTab = computed(defaultStore.makeGetterSetter('imageNewTab'));
 const nsfw = computed(defaultStore.makeGetterSetter('nsfw'));
 const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostForm'));
+const showFixedPostFormInChannel = computed(defaultStore.makeGetterSetter('showFixedPostFormInChannel'));
 const numberOfPageCache = computed(defaultStore.makeGetterSetter('numberOfPageCache'));
 const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'));
 const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
diff --git a/packages/frontend/src/pages/settings/preferences-backups.vue b/packages/frontend/src/pages/settings/preferences-backups.vue
index e3cf1aefb0..28e39236f7 100644
--- a/packages/frontend/src/pages/settings/preferences-backups.vue
+++ b/packages/frontend/src/pages/settings/preferences-backups.vue
@@ -73,6 +73,7 @@ const defaultStoreSaveKeys: (keyof typeof defaultStore['state'])[] = [
 	'useBlurEffectForModal',
 	'useBlurEffect',
 	'showFixedPostForm',
+	'showFixedPostFormInChannel',
 	'enableInfiniteScroll',
 	'useReactionPickerForContextMenu',
 	'showGapBetweenNotesInTimeline',
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index a6ad1774ff..9378cd573c 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -197,6 +197,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: false,
 	},
+	showFixedPostFormInChannel: {
+		where: 'device',
+		default: false,
+	},
 	enableInfiniteScroll: {
 		where: 'device',
 		default: true,
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index 5a465d7873..3634e02745 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -285,6 +285,12 @@ hr {
 	flex-wrap: wrap;
 }
 
+._buttonsCenter {
+	@extend ._buttons;
+
+	justify-content: center;
+}
+
 ._borderButton {
 	@extend ._button;
 	display: block;
diff --git a/packages/frontend/src/ui/deck/channel-column.vue b/packages/frontend/src/ui/deck/channel-column.vue
index 4c6b41e42e..b81d6729e6 100644
--- a/packages/frontend/src/ui/deck/channel-column.vue
+++ b/packages/frontend/src/ui/deck/channel-column.vue
@@ -61,7 +61,6 @@ function post() {
 		channel: {
 			id: props.column.channelId,
 		},
-		instant: true,
 	});
 }