+
+
+
+ Enable Desktop Notifications
+ Enable Notifications
+
+
+
+
+ Get notified when you receive messages while away from the app
+
+ Get notified when you receive messages
+
+
+ {/* Main content area with padding for fixed header and nav */}
+
+ {children}
+
+
+ {/* Thread panel slides in from right on mobile */}
+ {isThreadOpen() && openThreadMessageId && (
+
+
+ setThreadOpen(null)} />
+
+
+ )}
+
+ {/* Profile panel as full-screen overlay on mobile */}
+ {isProfilePanelOpen() && profileMemberId && (
+
+
+
+
+
+ )}
+
+ {/* Notifications as full-screen overlay on mobile */}
+ {isNotificationsPanelOpen && workspaceId && (
+
+
+
+
+
+ )}
+
+ {!isInConversation && }
+
+
+ );
+};
+
+export default WorkspaceIdClientLayout;
diff --git a/src/app/[workspace-id]/layout.tsx b/src/app/[workspace-id]/layout.tsx
index 84ccb5a0..74b972eb 100644
--- a/src/app/[workspace-id]/layout.tsx
+++ b/src/app/[workspace-id]/layout.tsx
@@ -1,233 +1,20 @@
-'use client';
-
-import { Bell, X } from 'lucide-react';
-import { usePathname } from 'next/navigation';
-import { type ReactNode, useEffect, useState } from 'react';
-import { toast } from 'sonner';
-
-import { MobileBottomNav } from '@/components/mobile/mobile-bottom-nav';
-import { ProfilePanel } from '@/components/profile-panel';
-import { NotificationsSidebar } from '@/components/side-nav/notifications-sidebar';
-import { Sidebar } from '@/components/side-nav/sidebar';
-import { WorkspaceSidebar } from '@/components/side-nav/workspace-sidebar';
-import { Toolbar } from '@/components/toolbar';
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { Button } from '@/components/ui/button';
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
-import { useCurrentUser } from '@/features/auth';
-import { Thread } from '@/features/messages/component/thread';
-import { useNotificationPermissions } from '@/features/notifications/hooks/use-notification-permissions';
-import { useRealtimeNotifications } from '@/features/notifications/hooks/use-realtime-notifications';
-import { usePresence } from '@/hooks/use-presence';
-import { useWorkspaceId } from '@/hooks/use-workspace-id';
-import { useUIStore } from '@/stores/ui-store';
+import { ReactNode } from 'react';
+import { ServerLayout } from './server-layout';
+import { WorkspaceIdClientLayout } from './client-layout';
interface WorkspaceIdLayoutProps {
children: ReactNode;
+ params: Promise<{ 'workspace-id': string }>;
}
-const WorkspaceIdLayout = ({ children }: WorkspaceIdLayoutProps) => {
- const {
- setThreadOpen,
- isThreadOpen,
- openThreadMessageId,
- isNotificationsPanelOpen,
- setNotificationsPanelOpen,
- isProfilePanelOpen,
- profileMemberId,
- } = useUIStore();
-
- const workspaceId = useWorkspaceId();
- const { user, isLoading: isUserLoading } = useCurrentUser(workspaceId);
- const [showPermissionBanner, setShowPermissionBanner] = useState(false);
- const pathname = usePathname();
-
- useRealtimeNotifications({
- workspaceMemberId: user?.workspace_member_id || '',
- workspaceId: workspaceId || '',
- enabled: !!user?.workspace_member_id && !!workspaceId,
- });
-
- usePresence({
- workspaceId: workspaceId || '',
- userId: user?.id || '',
- workspaceMemberId: user?.workspace_member_id || '',
- enabled: !isUserLoading && !!user?.id && !!user?.workspace_member_id && !!workspaceId,
- });
-
- const { permission, requestPermission, isSupported, hasAskedBefore, setHasAskedBefore } =
- useNotificationPermissions();
-
- useEffect(() => {
- // Show banner immediately when:
- // 1. Notifications are supported
- // 2. We have a user (notifications will start)
- // 3. Permission is still default (not granted/denied)
- // 4. We haven't asked before in this session
- if (isSupported && user?.workspace_member_id && permission === 'default' && !hasAskedBefore) {
- setShowPermissionBanner(true);
- } else {
- setShowPermissionBanner(false);
- }
- }, [isSupported, user?.workspace_member_id, permission, hasAskedBefore]);
-
- const handleEnableNotifications = async () => {
- const result = await requestPermission();
- setShowPermissionBanner(false);
-
- if (result === 'granted') {
- // You could show a success toast here
- toast.success('Notifications enabled!');
- } else if (result === 'denied') {
- // Ensure we don't show the banner again even if denied
- localStorage.setItem('notification_permission_asked', 'true');
- setHasAskedBefore(true);
- }
- };
-
- const handleDismissBanner = () => {
- setShowPermissionBanner(false);
- localStorage.setItem('notification_permission_asked', 'true');
- setHasAskedBefore(true);
- };
+export default async function WorkspaceIdLayout({ children, params }: WorkspaceIdLayoutProps) {
+ const { 'workspace-id': workspaceId } = await params;
- const handleCloseNotifications = () => {
- setNotificationsPanelOpen(false);
- };
-
- // Check if we're in a channel, DM, or agent conversation
- const isInConversation =
- pathname &&
- (pathname.includes('/c-') || pathname.includes('/d-') || pathname.includes('/agents'));
return (
-
-
-
-
- Enable Desktop Notifications
- Enable Notifications
-
-
-
-
- Get notified when you receive messages while away from the app
-
- Get notified when you receive messages
-
-
- {/* Main content area with padding for fixed header and nav */}
-
- {children}
-
-
- {/* Thread panel slides in from right on mobile */}
- {isThreadOpen() && openThreadMessageId && (
-
-
- setThreadOpen(null)} />
-
-
- )}
-
- {/* Profile panel as full-screen overlay on mobile */}
- {isProfilePanelOpen() && profileMemberId && (
-
-
-
-
-
- )}
-
- {/* Notifications as full-screen overlay on mobile */}
- {isNotificationsPanelOpen && workspaceId && (
-
-
-
-
-
- )}
-
- {!isInConversation && }
-
-
+
+
+ {children}
+
+
);
-};
-
-export default WorkspaceIdLayout;
+}
\ No newline at end of file
diff --git a/src/app/[workspace-id]/page.tsx b/src/app/[workspace-id]/page.tsx
index bca658dd..08330800 100644
--- a/src/app/[workspace-id]/page.tsx
+++ b/src/app/[workspace-id]/page.tsx
@@ -21,16 +21,19 @@ const WorkspaceIdPage = () => {
const {
data: currentMember,
isLoading: isMemberLoading,
+ isFetching: isMemberFetching,
error: memberError,
} = useCurrentMember(workspaceId);
const {
data: workspace,
isLoading: isWorkspaceLoading,
+ isFetching: isWorkspaceFetching,
error: workspaceError,
} = useGetWorkspace(workspaceId);
const {
data: channels,
isLoading: isChannelsLoading,
+ isFetching: isChannelsFetching,
error: channelsError,
} = useGetUserChannels(workspaceId);
@@ -40,7 +43,11 @@ const WorkspaceIdPage = () => {
return currentMember?.role === 'admin';
}, [currentMember]);
- const isLoading = isWorkspaceLoading || isChannelsLoading || isMemberLoading;
+ // Only show loading when we have no data AND are fetching
+ const isLoading =
+ (!workspace && (isWorkspaceLoading || isWorkspaceFetching)) ||
+ (!channels && (isChannelsLoading || isChannelsFetching)) ||
+ (!currentMember && (isMemberLoading || isMemberFetching));
const hasError = workspaceError || channelsError || memberError;
// Note: Desktop-only redirect logic
@@ -73,7 +80,8 @@ const WorkspaceIdPage = () => {
);
}
- if (hasError || !workspace || !currentMember) {
+ // Only show error state if we're not loading and there's an actual error or no data after loading
+ if (!isLoading && (hasError || !workspace || !currentMember)) {
return (