enhance(client): improve channel ui

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: "獲得日時"

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;

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

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',

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,

packages/frontend/src/style.scss

@@ -285,6 +285,12 @@ hr {
 	flex-wrap: wrap;
 }
 
+._buttonsCenter {
+	@extend ._buttons;
+
+	justify-content: center;
+}
+
 ._borderButton {
 	@extend ._button;
 	display: block;

packages/frontend/src/ui/deck/channel-column.vue

@@ -61,7 +61,6 @@ function post() {
 		channel: {
 			id: props.column.channelId,
 		},
-		instant: true,
 	});
 }