From 0edb0133fcb2dab8904d9da7f444fe6996b6d6b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Thu, 6 Nov 2025 10:15:59 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=83=81=E3=83=A3?=
 =?UTF-8?q?=E3=83=B3=E3=83=8D=E3=83=AB=E5=91=A8=E3=82=8A=E3=81=AEUI?=
 =?UTF-8?q?=E3=81=AE=E6=95=B4=E7=90=86=20(#16743)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* enhance(frontend): チャンネル周りのUIの整理

* fix: 共通要素間の一貫性を保つ

* Update Changelog

* fix: チャンネル新規作成を管理タブに移動・上部ボタン削除
---
 CHANGELOG.md                                       |  1 +
 locales/index.d.ts                                 |  4 ++++
 locales/ja-JP.yml                                  |  1 +
 .../frontend/src/components/MkChannelPreview.vue   |  5 +++++
 packages/frontend/src/pages/channel.vue            |  1 +
 packages/frontend/src/pages/channels.vue           | 14 +++-----------
 6 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f554db1705..afecb18d72 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Enhance: DockerのNode.jsが24.10.0に更新されました
 
 ### Client
+- Enhance: 管理しているチャンネルの見分けがつきやすくなるように
 - Fix: 紙吹雪エフェクトがアニメーション設定を考慮せず常に表示される問題を修正
 - Fix: ナビゲーションバーのリアルタイムモード切替ボタンの状態をよりわかりやすく表示するように
 - Fix: ページのタイトルが長いとき、はみ出る問題を修正
diff --git a/locales/index.d.ts b/locales/index.d.ts
index 7962d8caee..3a80467e8d 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -5605,6 +5605,10 @@ export interface Locale extends ILocale {
      * 技術的なお問い合わせの際に、以下の情報を併記すると問題の解決に役立つことがあります。
      */
     "deviceInfoDescription": string;
+    /**
+     * あなたは管理者です
+     */
+    "youAreAdmin": string;
     "_compression": {
         "_quality": {
             /**
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 83ce235607..84d651ec3b 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -1396,6 +1396,7 @@ scheduled: "予約"
 widgets: "ウィジェット"
 deviceInfo: "デバイス情報"
 deviceInfoDescription: "技術的なお問い合わせの際に、以下の情報を併記すると問題の解決に役立つことがあります。"
+youAreAdmin: "あなたは管理者です"
 
 _compression:
   _quality:
diff --git a/packages/frontend/src/components/MkChannelPreview.vue b/packages/frontend/src/components/MkChannelPreview.vue
index f79989d882..d3ed222cdb 100644
--- a/packages/frontend/src/components/MkChannelPreview.vue
+++ b/packages/frontend/src/components/MkChannelPreview.vue
@@ -27,6 +27,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</template>
 					</I18n>
 				</div>
+				<div v-if="$i != null && $i.id === channel.userId" style="color: var(--MI_THEME-warn)">
+					<i class="ti ti-user-star ti-fw"></i>
+					<span style="margin-left: 4px;">{{ i18n.ts.youAreAdmin }}</span>
+				</div>
 			</div>
 		</div>
 		<article v-if="channel.description">
@@ -48,6 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
+import { $i } from '@/i.js';
 import { i18n } from '@/i18n.js';
 import { miLocalStorage } from '@/local-storage.js';
 
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index 9e1608f24d..7c19e6798d 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -15,6 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div :class="$style.bannerStatus">
 						<div><i class="ti ti-users ti-fw"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
 						<div><i class="ti ti-pencil ti-fw"></i><I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
+						<div v-if="$i != null && channel != null && $i.id === channel.userId" style="color: var(--MI_THEME-warn)"><i class="ti ti-user-star ti-fw"></i><span style="margin-left: 4px;">{{ i18n.ts.youAreAdmin }}</span></div>
 					</div>
 					<div v-if="channel.isSensitive" :class="$style.sensitiveIndicator">{{ i18n.ts.sensitive }}</div>
 					<div :class="$style.bannerFade"></div>
diff --git a/packages/frontend/src/pages/channels.vue b/packages/frontend/src/pages/channels.vue
index 1e7301d06d..f77034e318 100644
--- a/packages/frontend/src/pages/channels.vue
+++ b/packages/frontend/src/pages/channels.vue
@@ -44,8 +44,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</MkPagination>
 		</div>
-		<div v-else-if="tab === 'owned'">
-			<MkButton class="new" @click="create()"><i class="ti ti-plus"></i></MkButton>
+		<div v-else-if="tab === 'owned'" class="_gaps">
+			<MkButton link primary rounded to="/channels/new"><i class="ti ti-plus"></i> {{ i18n.ts.createNew }}</MkButton>
 			<MkPagination v-slot="{items}" :paginator="ownedPaginator">
 				<div :class="$style.root">
 					<MkChannelPreview v-for="channel in items" :key="channel.id" :channel="channel"/>
@@ -126,15 +126,7 @@ async function search() {
 	key.value = query + type;
 }
 
-function create() {
-	router.push('/channels/new');
-}
-
-const headerActions = computed(() => [{
-	icon: 'ti ti-plus',
-	text: i18n.ts.create,
-	handler: create,
-}]);
+const headerActions = computed(() => []);
 
 const headerTabs = computed(() => [{
 	key: 'search',