From 546b4c2e8d0b4adeed3d1af5faca7c95a9966495 Mon Sep 17 00:00:00 2001
From: aster <137767097+aster-void@users.noreply.github.com>
Date: Sun, 18 Jan 2026 21:58:52 +0900
Subject: [PATCH] feat: add joinable channels with join/leave functionality

Implement Slack-style channel discovery and membership:
- Add 'default' channel type (auto-join, cannot leave)
- Add joined/memberCount fields to channel API response
- Add POST /channels/:id/join and /leave endpoints
- Auto-join new org members to default channels
- Filter sidebar to show only joined channels
- Add ChannelBrowser modal for discovering public channels
- Add Leave option to channel context menu
---
 .../components/channels/ChannelBrowser.svelte | 135 ++++++++++++++++++
 .../channels/ChannelContextMenu.svelte        |  25 +++-
 .../components/channels/ChannelGroup.svelte   |   4 +
 .../components/channels/ChannelItem.svelte    |   4 +
 .../channels/ChannelList.controller.svelte.ts |  42 +++++-
 .../components/channels/ChannelList.svelte    |  18 +++
 .../src/components/channels/modals.svelte.ts  |  13 ++
 apps/server/src/db/channels.ts                |   2 +-
 apps/server/src/domains/channels/routes.ts    | 108 +++++++++++++-
 .../src/domains/organizations/members-add.ts  |  27 +++-
 packages/api-client/src/types.ts              |   4 +-
 11 files changed, 373 insertions(+), 9 deletions(-)
 create mode 100644 apps/desktop/src/components/channels/ChannelBrowser.svelte

diff --git a/apps/desktop/src/components/channels/ChannelBrowser.svelte b/apps/desktop/src/components/channels/ChannelBrowser.svelte
new file mode 100644
index 0000000..f866bf9
--- /dev/null
+++ b/apps/desktop/src/components/channels/ChannelBrowser.svelte
@@ -0,0 +1,135 @@
+<script lang="ts">
+  import Hash from "@lucide/svelte/icons/hash";
+  import Search from "@lucide/svelte/icons/search";
+  import Users from "@lucide/svelte/icons/users";
+  import type { Channel } from "@packages/api-client";
+
+  interface Props {
+    channels: Channel[];
+    isOpen: boolean;
+    onClose: () => void;
+    onJoin: (channelId: string) => void;
+  }
+
+  let { channels, isOpen, onClose, onJoin }: Props = $props();
+
+  let dialog: HTMLDialogElement | null = $state(null);
+  let searchQuery = $state("");
+  let showJoined = $state(false);
+
+  const filteredChannels = $derived(
+    channels
+      .filter((ch) => ch.type === "public")
+      .filter((ch) => (showJoined ? ch.joined : !ch.joined))
+      .filter((ch) =>
+        ch.name.toLowerCase().includes(searchQuery.toLowerCase()),
+      ),
+  );
+
+  $effect(() => {
+    if (isOpen) {
+      searchQuery = "";
+      showJoined = false;
+      dialog?.showModal();
+    } else {
+      dialog?.close();
+    }
+  });
+
+  function handleJoin(channelId: string) {
+    onJoin(channelId);
+  }
+</script>
+
+<dialog bind:this={dialog} class="modal" onclose={onClose}>
+  <div class="modal-box max-w-lg">
+    <h3 class="mb-4 text-lg font-medium">Browse Channels</h3>
+
+    <div class="mb-4 flex items-center gap-2">
+      <div class="relative flex-1">
+        <Search
+          class="text-muted absolute top-1/2 left-3 size-4 -translate-y-1/2"
+        />
+        <input
+          type="text"
+          placeholder="Search channels..."
+          class="input input-bordered w-full pl-10"
+          bind:value={searchQuery}
+        />
+      </div>
+    </div>
+
+    <div class="mb-4">
+      <div class="tabs tabs-box">
+        <button
+          type="button"
+          class={["tab", !showJoined && "tab-active"]}
+          onclick={() => (showJoined = false)}
+        >
+          Available
+        </button>
+        <button
+          type="button"
+          class={["tab", showJoined && "tab-active"]}
+          onclick={() => (showJoined = true)}
+        >
+          Joined
+        </button>
+      </div>
+    </div>
+
+    <div class="max-h-64 overflow-y-auto">
+      {#if filteredChannels.length === 0}
+        <div class="text-muted py-8 text-center text-sm">
+          {#if showJoined}
+            No joined channels
+          {:else}
+            No available channels to join
+          {/if}
+        </div>
+      {:else}
+        <ul class="flex flex-col gap-1">
+          {#each filteredChannels as channel (channel.id)}
+            <li
+              class="hover:bg-base-200 flex items-center justify-between rounded-lg px-3 py-2"
+            >
+              <div class="flex items-center gap-2">
+                <Hash class="text-muted size-4" />
+                <span class="font-medium">{channel.name}</span>
+                {#if channel.description}
+                  <span class="text-muted text-sm">{channel.description}</span>
+                {/if}
+              </div>
+              <div class="flex items-center gap-3">
+                <span class="text-muted flex items-center gap-1 text-xs">
+                  <Users class="size-3" />
+                  {channel.memberCount}
+                </span>
+                {#if !channel.joined}
+                  <button
+                    type="button"
+                    class="btn btn-primary btn-xs"
+                    onclick={() => handleJoin(channel.id)}
+                  >
+                    Join
+                  </button>
+                {:else}
+                  <span class="text-success text-xs">Joined</span>
+                {/if}
+              </div>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </div>
+
+    <div class="modal-action">
+      <button type="button" class="btn btn-ghost btn-sm" onclick={onClose}>
+        Close
+      </button>
+    </div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button type="submit">close</button>
+  </form>
+</dialog>
diff --git a/apps/desktop/src/components/channels/ChannelContextMenu.svelte b/apps/desktop/src/components/channels/ChannelContextMenu.svelte
index 9c90608..135a241 100644
--- a/apps/desktop/src/components/channels/ChannelContextMenu.svelte
+++ b/apps/desktop/src/components/channels/ChannelContextMenu.svelte
@@ -2,17 +2,20 @@
   import ChevronRight from "@lucide/svelte/icons/chevron-right";
   import FolderInput from "@lucide/svelte/icons/folder-input";
   import FolderOutput from "@lucide/svelte/icons/folder-output";
+  import LogOut from "@lucide/svelte/icons/log-out";
   import Pencil from "@lucide/svelte/icons/pencil";
   import Trash2 from "@lucide/svelte/icons/trash-2";
-  import type { ChannelGroup } from "@packages/api-client";
+  import type { Channel, ChannelGroup } from "@packages/api-client";
 
   interface Props {
     x: number;
     y: number;
+    channelType: Channel["type"];
     currentGroupId: string | null;
     groups: ChannelGroup[];
     onEdit: () => void;
     onDelete: () => void;
+    onLeave?: () => void;
     onMoveToGroup: (groupId: string | null) => void;
     onClose: () => void;
   }
@@ -20,14 +23,18 @@
   const {
     x,
     y,
+    channelType,
     currentGroupId,
     groups,
     onEdit,
     onDelete,
+    onLeave,
     onMoveToGroup,
     onClose,
   }: Props = $props();
 
+  const canLeave = $derived(channelType !== "default");
+
   let showMoveSubmenu = $state(false);
 
   function handleEdit() {
@@ -40,6 +47,11 @@
     onClose();
   }
 
+  function handleLeave() {
+    onLeave?.();
+    onClose();
+  }
+
   function handleSelect(groupId: string | null) {
     onMoveToGroup(groupId);
     onClose();
@@ -129,6 +141,17 @@
     </button>
   {/if}
 
+  {#if canLeave}
+    <button
+      type="button"
+      class="btn btn-ghost btn-sm justify-start gap-2"
+      onclick={handleLeave}
+    >
+      <LogOut class="size-4" />
+      Leave Channel
+    </button>
+  {/if}
+
   <div class="divider my-1"></div>
 
   <button
diff --git a/apps/desktop/src/components/channels/ChannelGroup.svelte b/apps/desktop/src/components/channels/ChannelGroup.svelte
index c72e9fb..62d2693 100644
--- a/apps/desktop/src/components/channels/ChannelGroup.svelte
+++ b/apps/desktop/src/components/channels/ChannelGroup.svelte
@@ -29,6 +29,7 @@
     onDelete?: (groupId: string) => void;
     onEditChannel?: (channel: Channel) => void;
     onDeleteChannel?: (channelId: string) => void;
+    onLeaveChannel?: (channelId: string) => void;
     onMoveChannelToGroup?: (channelId: string, groupId: string | null) => void;
   }
 
@@ -50,6 +51,7 @@
     onDelete,
     onEditChannel,
     onDeleteChannel,
+    onLeaveChannel,
     onMoveChannelToGroup,
   }: Props = $props();
 
@@ -105,6 +107,7 @@
           groups={allGroups}
           onEdit={onEditChannel}
           onDelete={onDeleteChannel}
+          onLeave={onLeaveChannel}
           onMoveToGroup={onMoveChannelToGroup}
         />
       {/each}
@@ -128,6 +131,7 @@
           {onDelete}
           {onEditChannel}
           {onDeleteChannel}
+          {onLeaveChannel}
           {onMoveChannelToGroup}
         />
       {/each}
diff --git a/apps/desktop/src/components/channels/ChannelItem.svelte b/apps/desktop/src/components/channels/ChannelItem.svelte
index 092c3c4..384d79e 100644
--- a/apps/desktop/src/components/channels/ChannelItem.svelte
+++ b/apps/desktop/src/components/channels/ChannelItem.svelte
@@ -12,6 +12,7 @@
     groups?: ChannelGroup[];
     onEdit?: (channel: Channel) => void;
     onDelete?: (channelId: string) => void;
+    onLeave?: (channelId: string) => void;
     onMoveToGroup?: (channelId: string, groupId: string | null) => void;
   }
 
@@ -24,6 +25,7 @@
     groups = [],
     onEdit,
     onDelete,
+    onLeave,
     onMoveToGroup,
   }: Props = $props();
 
@@ -39,10 +41,12 @@
   <ChannelContextMenu
     x={contextMenu.x}
     y={contextMenu.y}
+    channelType={channel.type}
     currentGroupId={channel.groupId ?? null}
     {groups}
     onEdit={() => onEdit?.(channel)}
     onDelete={() => onDelete?.(channel.id)}
+    onLeave={() => onLeave?.(channel.id)}
     onMoveToGroup={(groupId) => onMoveToGroup?.(channel.id, groupId)}
     onClose={() => (contextMenu = null)}
   />
diff --git a/apps/desktop/src/components/channels/ChannelList.controller.svelte.ts b/apps/desktop/src/components/channels/ChannelList.controller.svelte.ts
index 8f570f3..21fd679 100644
--- a/apps/desktop/src/components/channels/ChannelList.controller.svelte.ts
+++ b/apps/desktop/src/components/channels/ChannelList.controller.svelte.ts
@@ -20,9 +20,14 @@ export class ChannelListController {
   unreadManager;
   groupState;
 
+  // Filter to show only joined channels in sidebar
+  #joinedChannels: Channel[] = $derived.by(() =>
+    (this.channels.data ?? []).filter((ch) => ch.joined),
+  );
+
   #organized: GroupedChannels = $derived.by(() =>
     organizeChannelsIntoGroups(
-      this.channels.data ?? [],
+      this.#joinedChannels,
       this.channelGroups.data ?? [],
     ),
   );
@@ -31,6 +36,11 @@ export class ChannelListController {
     return this.#organized;
   }
 
+  // All channels (for channel browser)
+  get allChannels() {
+    return this.channels.data ?? [];
+  }
+
   get rootGroups() {
     return this.#organized.groups.filter((g) => g.parentGroupId === null);
   }
@@ -160,4 +170,34 @@ export class ChannelListController {
   refetchChannels() {
     this.channels.refetch();
   }
+
+  async joinChannel(channelId: string) {
+    try {
+      await this.#api.channels({ id: channelId }).join.post();
+      this.channels.refetch();
+      showToast("Joined channel", "success");
+    } catch (error) {
+      showToast("Failed to join channel", "error");
+      throw error;
+    }
+  }
+
+  async leaveChannel(channelId: string) {
+    const confirmed = await confirm({
+      title: "Leave Channel",
+      message: "Are you sure you want to leave this channel?",
+      confirmText: "Leave",
+      variant: "danger",
+    });
+    if (!confirmed) return;
+
+    try {
+      await this.#api.channels({ id: channelId }).leave.post();
+      this.channels.refetch();
+      showToast("Left channel", "success");
+    } catch (error) {
+      showToast("Failed to leave channel", "error");
+      throw error;
+    }
+  }
 }
diff --git a/apps/desktop/src/components/channels/ChannelList.svelte b/apps/desktop/src/components/channels/ChannelList.svelte
index ed6e1d9..b076ae0 100644
--- a/apps/desktop/src/components/channels/ChannelList.svelte
+++ b/apps/desktop/src/components/channels/ChannelList.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import FolderPlus from "@lucide/svelte/icons/folder-plus";
+  import Hash from "@lucide/svelte/icons/hash";
   import Plus from "@lucide/svelte/icons/plus";
   import User from "@lucide/svelte/icons/user";
   import type { Selection } from "$components/chat/types";
+  import ChannelBrowser from "./ChannelBrowser.svelte";
   import ChannelGroup from "./ChannelGroup.svelte";
   import ChannelItem from "./ChannelItem.svelte";
   import { ChannelListController } from "./ChannelList.controller.svelte.ts";
@@ -31,6 +33,13 @@
         Channels
       </span>
       <div class="flex items-center gap-1">
+        <button
+          class="btn btn-ghost btn-xs btn-square"
+          title="Browse channels"
+          onclick={() => modals.openBrowseChannels()}
+        >
+          <Hash class="text-muted size-4" />
+        </button>
         <button
           class="btn btn-ghost btn-xs btn-square"
           title="New group"
@@ -70,6 +79,7 @@
             onDelete={(id) => controller.deleteGroup(id)}
             onEditChannel={(ch) => modals.openEditChannel(ch)}
             onDeleteChannel={(id) => controller.deleteChannel(id)}
+            onLeaveChannel={(id) => controller.leaveChannel(id)}
             onMoveChannelToGroup={(chId, gId) =>
               controller.moveChannelToGroup(chId, gId)}
           />
@@ -89,6 +99,7 @@
             groups={controller.organized.groups}
             onEdit={(ch) => modals.openEditChannel(ch)}
             onDelete={(id) => controller.deleteChannel(id)}
+            onLeave={(id) => controller.leaveChannel(id)}
             onMoveToGroup={(chId, gId) =>
               controller.moveChannelToGroup(chId, gId)}
           />
@@ -139,6 +150,13 @@
     onSave={(id, name, desc) => controller.editChannel(id, name, desc)}
   />
 
+  <ChannelBrowser
+    channels={controller.allChannels}
+    isOpen={modals.browseChannels.isOpen}
+    onClose={() => modals.closeBrowseChannels()}
+    onJoin={(id) => controller.joinChannel(id)}
+  />
+
   <DMSection
     {organizationId}
     selectedChannelId={screenMode.type === "chat"
diff --git a/apps/desktop/src/components/channels/modals.svelte.ts b/apps/desktop/src/components/channels/modals.svelte.ts
index bc43c12..352dbe5 100644
--- a/apps/desktop/src/components/channels/modals.svelte.ts
+++ b/apps/desktop/src/components/channels/modals.svelte.ts
@@ -26,7 +26,12 @@ interface EditChannelModalState {
   channel: Channel | null;
 }
 
+interface BrowseChannelsModalState {
+  isOpen: boolean;
+}
+
 class ChannelModals {
+  browseChannels = $state<BrowseChannelsModalState>({ isOpen: false });
   createChannel = $state<CreateChannelModalState>({
     isOpen: false,
     defaultGroupId: null,
@@ -79,6 +84,14 @@ class ChannelModals {
   closeEditChannel() {
     this.editChannel = { isOpen: false, channel: null };
   }
+
+  openBrowseChannels() {
+    this.browseChannels = { isOpen: true };
+  }
+
+  closeBrowseChannels() {
+    this.browseChannels = { isOpen: false };
+  }
 }
 
 export function useChannelModals() {
diff --git a/apps/server/src/db/channels.ts b/apps/server/src/db/channels.ts
index a421a1d..18977c5 100644
--- a/apps/server/src/db/channels.ts
+++ b/apps/server/src/db/channels.ts
@@ -13,7 +13,7 @@ export const channels = pgTable(
     id: uuid("id").primaryKey().defaultRandom(),
     name: text("name").notNull(),
     description: text("description"),
-    type: text("type", { enum: ["public", "private", "dm"] })
+    type: text("type", { enum: ["default", "public", "private", "dm"] })
       .notNull()
       .default("public"),
     organizationId: uuid("organization_id")
diff --git a/apps/server/src/domains/channels/routes.ts b/apps/server/src/domains/channels/routes.ts
index 299705a..e852f97 100644
--- a/apps/server/src/domains/channels/routes.ts
+++ b/apps/server/src/domains/channels/routes.ts
@@ -1,7 +1,7 @@
-import { asc, eq } from "drizzle-orm";
+import { and, asc, count, eq, sql } from "drizzle-orm";
 import { Elysia, t } from "elysia";
 import { db } from "../../db/index.ts";
-import { channels } from "../../db/schema.ts";
+import { channelMembers, channels } from "../../db/schema.ts";
 import {
   BadRequestError,
   ForbiddenError,
@@ -26,13 +26,31 @@ export const channelRoutes = new Elysia({ prefix: "/channels" })
 
       await getOrganizationPermissions(user.id, query.organizationId);
 
+      // Get channels with membership info and member counts
       const channelList = await db
-        .select()
+        .select({
+          id: channels.id,
+          name: channels.name,
+          description: channels.description,
+          type: channels.type,
+          organizationId: channels.organizationId,
+          groupId: channels.groupId,
+          createdAt: channels.createdAt,
+          updatedAt: channels.updatedAt,
+          memberCount: count(channelMembers.id),
+          joined: sql<boolean>`bool_or(${channelMembers.userId} = ${user.id})`,
+        })
         .from(channels)
+        .leftJoin(channelMembers, eq(channels.id, channelMembers.channelId))
         .where(eq(channels.organizationId, query.organizationId))
+        .groupBy(channels.id)
         .orderBy(asc(channels.name));
 
-      return channelList;
+      // For default channels, everyone is considered joined
+      return channelList.map((ch) => ({
+        ...ch,
+        joined: ch.type === "default" ? true : (ch.joined ?? false),
+      }));
     } catch (error) {
       return handleError(error, set);
     }
@@ -217,6 +235,88 @@ export const channelRoutes = new Elysia({ prefix: "/channels" })
 
       await db.delete(channels).where(eq(channels.id, params.id));
 
+      return { success: true };
+    } catch (error) {
+      return handleError(error, set);
+    }
+  })
+  .post("/:id/join", async ({ user, params, set }) => {
+    try {
+      if (!user) throw new UnauthorizedError();
+
+      const [channel] = await db
+        .select()
+        .from(channels)
+        .where(eq(channels.id, params.id))
+        .limit(1);
+
+      if (!channel) throw new NotFoundError("Channel", "CHANNEL_NOT_FOUND");
+
+      await getOrganizationPermissions(user.id, channel.organizationId);
+
+      // Only public channels can be joined freely
+      if (channel.type !== "public") {
+        throw new ForbiddenError(
+          "Only public channels can be joined",
+          "CANNOT_JOIN_CHANNEL",
+        );
+      }
+
+      // Check if already a member (idempotent)
+      const [existing] = await db
+        .select()
+        .from(channelMembers)
+        .where(
+          and(
+            eq(channelMembers.channelId, params.id),
+            eq(channelMembers.userId, user.id),
+          ),
+        )
+        .limit(1);
+
+      if (!existing) {
+        await db.insert(channelMembers).values({
+          channelId: params.id,
+          userId: user.id,
+        });
+      }
+
+      return { success: true };
+    } catch (error) {
+      return handleError(error, set);
+    }
+  })
+  .post("/:id/leave", async ({ user, params, set }) => {
+    try {
+      if (!user) throw new UnauthorizedError();
+
+      const [channel] = await db
+        .select()
+        .from(channels)
+        .where(eq(channels.id, params.id))
+        .limit(1);
+
+      if (!channel) throw new NotFoundError("Channel", "CHANNEL_NOT_FOUND");
+
+      await getOrganizationPermissions(user.id, channel.organizationId);
+
+      // Cannot leave default channels
+      if (channel.type === "default") {
+        throw new ForbiddenError(
+          "Cannot leave default channels",
+          "CANNOT_LEAVE_CHANNEL",
+        );
+      }
+
+      await db
+        .delete(channelMembers)
+        .where(
+          and(
+            eq(channelMembers.channelId, params.id),
+            eq(channelMembers.userId, user.id),
+          ),
+        );
+
       return { success: true };
     } catch (error) {
       return handleError(error, set);
diff --git a/apps/server/src/domains/organizations/members-add.ts b/apps/server/src/domains/organizations/members-add.ts
index 0b56b81..6d4ce58 100644
--- a/apps/server/src/domains/organizations/members-add.ts
+++ b/apps/server/src/domains/organizations/members-add.ts
@@ -1,7 +1,12 @@
 import { and, eq } from "drizzle-orm";
 import { Elysia, t } from "elysia";
 import { db } from "../../db/index.ts";
-import { organizationMembers, users } from "../../db/schema.ts";
+import {
+  channelMembers,
+  channels,
+  organizationMembers,
+  users,
+} from "../../db/schema.ts";
 import { authMiddleware } from "../../middleware/auth.ts";
 import { getOrganizationPermissions } from "./permissions.ts";
 
@@ -63,6 +68,26 @@ export const organizationMemberAddRoute = new Elysia().use(authMiddleware).post(
       })
       .returning();
 
+    // Auto-join all default channels in this organization
+    const defaultChannels = await db
+      .select({ id: channels.id })
+      .from(channels)
+      .where(
+        and(
+          eq(channels.organizationId, params.id),
+          eq(channels.type, "default"),
+        ),
+      );
+
+    if (defaultChannels.length > 0) {
+      await db.insert(channelMembers).values(
+        defaultChannels.map((ch) => ({
+          channelId: ch.id,
+          userId: body.userId,
+        })),
+      );
+    }
+
     return membership;
   },
   {
diff --git a/packages/api-client/src/types.ts b/packages/api-client/src/types.ts
index a2d6696..fe443dd 100644
--- a/packages/api-client/src/types.ts
+++ b/packages/api-client/src/types.ts
@@ -34,9 +34,11 @@ export interface Channel {
   id: string;
   name: string;
   description?: string | null;
-  type: "public" | "private" | "dm";
+  type: "default" | "public" | "private" | "dm";
   organizationId: string;
   groupId?: string | null;
+  joined: boolean;
+  memberCount: number;
   createdAt: Date;
   updatedAt: Date;
 }