From 313ff4ef875b2b3ad19cd83e9f272c4511212d86 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sun, 22 Mar 2026 23:39:16 +0100
Subject: [PATCH] feat: add Nori mascot to mobile empty states

---
 packages/web/src/components/layout/MobileDmsScreen.tsx    | 6 ++++--
 packages/web/src/components/layout/MobileSpacesScreen.tsx | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/layout/MobileDmsScreen.tsx b/packages/web/src/components/layout/MobileDmsScreen.tsx
index 412b32a3..bc0d4045 100644
--- a/packages/web/src/components/layout/MobileDmsScreen.tsx
+++ b/packages/web/src/components/layout/MobileDmsScreen.tsx
@@ -5,6 +5,7 @@ import { useChatStore } from '../../stores/chatStore';
 import { useAuthStore } from '../../stores/authStore';
 import { useSocialStore } from '../../stores/socialStore';
 import { Avatar } from '../ui/Avatar';
+import { Mascot } from '../ui/Mascot';
 import { resolveAssetUrl } from '../../utils/assetUrls';
 import { useNavigate } from 'react-router-dom';
 
@@ -180,8 +181,9 @@ export function MobileDmsScreen() {
         })}
 
         {sortedDms.length === 0 && (
-          <div className="flex flex-col items-center justify-center h-40 text-txt-tertiary text-sm">
-            No conversations yet
+          <div className="flex flex-col items-center justify-center h-40 opacity-80">
+            <Mascot state="sleeping" className="w-20 h-20 mb-2" />
+            <p className="text-txt-tertiary text-sm">No conversations yet.</p>
           </div>
         )}
       </div>
diff --git a/packages/web/src/components/layout/MobileSpacesScreen.tsx b/packages/web/src/components/layout/MobileSpacesScreen.tsx
index 67269c80..dc0ccb14 100644
--- a/packages/web/src/components/layout/MobileSpacesScreen.tsx
+++ b/packages/web/src/components/layout/MobileSpacesScreen.tsx
@@ -8,6 +8,7 @@ import { useNavigate } from 'react-router-dom';
 import { getSpaceGradient } from '../../utils/gradients';
 import { hasPermissionBit, PermissionBits } from '../../utils/permissions';
 import type { Channel } from '@backspace/shared';
+import { Mascot } from '../ui/Mascot';
 
 export function MobileSpacesScreen() {
   const spaces = useSpaceStore((s) => s.spaces);
@@ -308,8 +309,9 @@ export function MobileSpacesScreen() {
 
           {/* Empty state */}
           {spaceChannels.length === 0 && selectedSpaceId && (
-            <div className="flex items-center justify-center h-32 text-txt-tertiary text-sm">
-              No channels yet
+            <div className="flex flex-col items-center justify-center h-32 opacity-80">
+              <Mascot state="idle" className="w-20 h-20 mb-2" />
+              <p className="text-txt-tertiary text-sm">No channels yet.</p>
             </div>
           )}
         </div>