Unified Messaging: Move channel management to Messenger

packages/client/src/navbar.ts

@@ -79,11 +79,6 @@ export const navbarItemDef = reactive({
 		icon: "ph-film-strip ph-bold ph-lg",
 		to: "/gallery",
 	},
-	channels: {
-		title: "channel",
-		icon: "ph-television ph-bold ph-lg",
-		to: "/channels",
-	},
 	achievements: {
 		title: "achievements",
 		icon: "ph-medal-military ph-bold ph-lg",

packages/client/src/pages/channel-editor.vue

@@ -1,7 +1,7 @@
 <template>
 	<MkStickyContainer>
 		<template #header
-			><MkPageHeader :actions="headerActions" :tabs="headerTabs"
+			><MkPageHeader :actions="headerActions" :tabs="headerTabs" :display-back-button="true"
 		/></template>
 		<MkSpacer :content-max="700">
 			<div class="_formRoot">

packages/client/src/pages/channels.vue

@@ -5,6 +5,7 @@
 				v-model:tab="tab"
 				:actions="headerActions"
 				:tabs="headerTabs"
+				:display-back-button="true"
 		/></template>
 		<MkSpacer :content-max="700">
 			<MkInfo class="_gap" :warn="true">{{
@@ -66,39 +67,11 @@
 						</MkFoldableSection>
 					</div>
 				</swiper-slide>
-				<swiper-slide>
-					<div class="_content grwlizim featured">
-						<!-- <MkPagination
-							v-slot="{ items }"
-							:pagination="featuredPagination"
-							:disable-auto-load="true"
-						>
-							<MkChannelPreview
-								v-for="channel in items"
-								:key="channel.id"
-								class="_gap"
-								:channel="channel"
-							/>
-						</MkPagination> -->
-						<MkChannelList
-							key="featured"
-							:pagination="featuredPagination"
-						/>
-					</div>
-				</swiper-slide>
-				<swiper-slide>
-					<div class="_content grwlizim following">
-						<MkChannelList
-							key="following"
-							:pagination="followingPagination"
-						/>
-					</div>
-				</swiper-slide>
 				<swiper-slide>
 					<div class="_content grwlizim owned">
 						<MkButton class="new" @click="create()"
 							><i class="ph-plus ph-bold ph-lg"></i
-						></MkButton>
+						>{{ i18n.ts._channel.create }}</MkButton>
 						<MkChannelList
 							key="owned"
 							:pagination="ownedPagination"
@@ -132,7 +105,7 @@ import "swiper/scss/virtual";
 
 const router = useRouter();
 
-const tabs = ["search", "featured", "following", "owned"];
+const tabs = ["search", "owned"];
 let tab = $ref(tabs[1]);
 watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
 
@@ -149,15 +122,6 @@ onMounted(() => {
 	searchType = props.type ?? "nameAndDescription";
 });
 
-const featuredPagination = {
-	endpoint: "channels/featured" as const,
-	limit: 10,
-	noPaging: false,
-};
-const followingPagination = {
-	endpoint: "channels/followed" as const,
-	limit: 10,
-};
 const ownedPagination = {
 	endpoint: "channels/owned" as const,
 	limit: 10,
@@ -196,16 +160,6 @@ const headerTabs = $computed(() => [
 		title: i18n.ts.search,
 		icon: "ph-magnifying-glass ph-bold ph-lg",
 	},
-	{
-		key: "featured",
-		title: i18n.ts._channel.featured,
-		icon: "ph-fire-simple ph-bold ph-lg",
-	},
-	{
-		key: "following",
-		title: i18n.ts._channel.following,
-		icon: "ph-heart ph-bold ph-lg",
-	},
 	{
 		key: "owned",
 		title: i18n.ts._channel.owned,
@@ -216,7 +170,7 @@ const headerTabs = $computed(() => [
 definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.channel,
-		icon: "ph-television ph-bold ph-lg",
+		icon: "ph-megaphone-simple ph-bold ph-lg",
 	})),
 );
 

packages/client/src/pages/messaging/index.vue

@@ -87,17 +87,25 @@
 								primary
 								class="start"
 								v-if="!isMobile"
-								@click="createChannel"
-								><i class="ph-plus ph-bold ph-lg"></i>
-								{{ i18n.ts._channel.create }}</MkButton
+								@click="visitAnnouncements"
+								><i class="ph-megaphone-simple ph-bold ph-lg"></i>
+								{{ i18n.ts.announcements }}</MkButton
 							>
 							<MkButton
 								primary
 								class="start"
 								v-if="!isMobile"
-								@click="visitAnnouncements"
-								><i class="ph-megaphone-simple ph-bold ph-lg"></i>
-								{{ i18n.ts.announcements }}</MkButton
+								@click="manageChannel"
+								><i class="ph-gear-fine ph-bold ph-lg"></i>
+								{{ i18n.ts._channel.owned }}</MkButton
+							>
+							<MkButton
+								primary
+								class="start"
+								v-if="!isMobile"
+								@click="createChannel"
+								><i class="ph-plus ph-bold ph-lg"></i>
+								{{ i18n.ts._channel.create }}</MkButton
 							>
 							<MkChannelList
 								key="owned"
@@ -236,28 +244,6 @@ function onRead(ids): void {
 	}
 }
 
-function startMenu(ev) {
-	os.popupMenu(
-		[
-			{
-				text: i18n.ts.messagingWithUser,
-				icon: "ph-user ph-bold ph-lg",
-				action: () => {
-					startUser();
-				},
-			},
-			{
-				text: i18n.ts.messagingWithGroup,
-				icon: "ph-users-three ph-bold ph-lg",
-				action: () => {
-					startGroup();
-				},
-			},
-		],
-		ev.currentTarget ?? ev.target,
-	);
-}
-
 async function startUser(): void {
 	os.selectUser().then((user) => {
 		router.push(`/my/messaging/${Acct.toString(user)}`);
@@ -290,6 +276,10 @@ function createChannel() {
 	router.push("/channels/new");
 }
 
+function manageChannel() {
+	router.push("/channels");
+}
+
 function visitAnnouncements() {
 	router.push("/announcements");
 }

packages/client/src/ui/universal.vue

@@ -286,6 +286,13 @@ function messagingStart(ev) {
 					startGroup();
 				},
 			},
+			{
+				text: i18n.ts._channel.create,
+				icon: "ph-plus ph-bold ph-lg",
+				action: () => {
+					mainRouter.push("/channels/new");
+				},
+			},
 			{
 				text: i18n.ts.manageGroups,
 				icon: "ph-user-circle-gear ph-bold ph-lg",
@@ -293,6 +300,13 @@ function messagingStart(ev) {
 					mainRouter.push("/my/groups");
 				},
 			},
+			{
+				text: i18n.ts._channel.owned,
+				icon: "ph-gear-fine ph-bold ph-lg",
+				action: () => {
+					mainRouter.push("/channels");
+				},
+			},
 		],
 		ev.currentTarget ?? ev.target,
 	);