From 2d60bf58ffd80f93cfff8733932532e0d8be2c1d Mon Sep 17 00:00:00 2001
From: Monibee-Fudgekins <Monibee-Fudgekins@users.noreply.github.com>
Date: Sun, 3 May 2026 00:41:30 -0400
Subject: [PATCH] fix: improve empty-state copy for channels (closes #93)

When no channels exist yet, show a friendly message explaining
there are no channels and guide the user to create one or browse
via the + button in the sidebar.

When channels exist but none is selected, clarify that the user
should choose one from the sidebar.

Also update the per-category empty label from the terse
'No channels' to 'No channels in this category yet'.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../src/components/layout/ChannelSidebar.vue    |  2 +-
 frontend/src/views/main/ChannelView.vue         | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/layout/ChannelSidebar.vue b/frontend/src/components/layout/ChannelSidebar.vue
index f55924bf..d667572c 100644
--- a/frontend/src/components/layout/ChannelSidebar.vue
+++ b/frontend/src/components/layout/ChannelSidebar.vue
@@ -639,7 +639,7 @@ async function handleLeaveTeam() {
             
             <!-- Empty Category State -->
             <div v-if="cat.channels.length === 0" class="px-8 py-3 text-xs text-text-3 italic">
-              No channels
+              No channels in this category yet
             </div>
           </div>
         </div>
diff --git a/frontend/src/views/main/ChannelView.vue b/frontend/src/views/main/ChannelView.vue
index a310b9ba..55c6d163 100644
--- a/frontend/src/views/main/ChannelView.vue
+++ b/frontend/src/views/main/ChannelView.vue
@@ -266,11 +266,20 @@ function handleKeydown(e: KeyboardEvent) {
             class="relative flex flex-col flex-1 min-w-0 z-10 bg-transparent transition-all duration-300"
             :class="{ 'mr-0': !uiStore.isRhsOpen }"
           >
-              <!-- No Channel Selected -->
+              <!-- No Channel Selected / No Channels Exist -->
               <div v-if="!currentChannel" class="flex-1 flex items-center justify-center text-slate-500">
-                  <div class="text-center">
-                      <p class="text-lg">Select a channel to start messaging</p>
-                      <p class="text-sm mt-2">Choose a channel from the sidebar</p>
+                  <div class="text-center max-w-sm px-4">
+                    <template v-if="channelStore.channels.length === 0">
+                      <p class="text-lg font-medium text-slate-600">No channels yet</p>
+                      <p class="text-sm mt-2">
+                        Get started by creating a channel or browsing existing ones —
+                        use the <span class="font-semibold">+</span> button in the sidebar.
+                      </p>
+                    </template>
+                    <template v-else>
+                      <p class="text-lg font-medium text-slate-600">No channel selected</p>
+                      <p class="text-sm mt-2">Choose a channel from the sidebar to start messaging.</p>
+                    </template>
                   </div>
               </div>