Enhance ConnectionBanner and LiveContext for improved data handling

- Updated the ConnectionBanner component to conditionally render based on the presence of loaded data, preventing unnecessary "Connecting..." messages.
- Modified the LiveContext to include a new `hasData` state, indicating when data is available, enhancing the overall user experience.
- Refactored the RootLayout to pass the new `hasData` prop to the ConnectionBanner.
- Cleaned up the Sidebar component by removing unused links, streamlining the navigation structure.

Author: jamiepine

interface/src/components/ConnectionBanner.tsx

@@ -7,7 +7,10 @@ const stateConfig: Record<Exclude<ConnectionState, "connected">, { label: string
 	disconnected: { label: "Disconnected from server.", variant: "error" },
 };
 
-export function ConnectionBanner({ state }: { state: ConnectionState }) {
+export function ConnectionBanner({ state, hasData }: { state: ConnectionState; hasData: boolean }) {
+	// Don't show "Connecting..." if we already have data loaded
+	if (state === "connecting" && hasData) return null;
+	
 	if (state === "connected") return null;
 
 	const { label, variant } = stateConfig[state];

interface/src/components/Sidebar.tsx

@@ -81,23 +81,15 @@ export function Sidebar({ liveStates, collapsed, onToggle }: SidebarProps) {
 			{/* Collapsed: icon-only nav */}
 			{collapsed ? (
 				<div className="flex flex-col items-center gap-1 pt-2">
-					<Link
-						to="/"
-						className={`flex h-8 w-8 items-center justify-center rounded-md ${
-							isOverview ? "bg-sidebar-selected text-sidebar-ink" : "text-sidebar-inkDull hover:bg-sidebar-selected/50"
-						}`}
+				<Link
+					to="/"
+					className={`flex h-8 w-8 items-center justify-center rounded-md ${
+						isOverview ? "bg-sidebar-selected text-sidebar-ink" : "text-sidebar-inkDull hover:bg-sidebar-selected/50"
+					}`}
 					title="Dashboard"
 				>
 					<HugeiconsIcon icon={DashboardSquare01Icon} className="h-4 w-4" />
 				</Link>
-				<Link
-					to="/logs"
-					className="flex h-8 w-8 items-center justify-center rounded-md text-sidebar-inkDull hover:bg-sidebar-selected/50 [&.active]:bg-sidebar-selected [&.active]:text-sidebar-ink"
-					activeProps={{ className: "active" }}
-					title="Logs"
-				>
-					<HugeiconsIcon icon={LeftToRightListBulletIcon} className="h-4 w-4" />
-				</Link>
 				<Link
 					to="/settings"
 					className={`flex h-8 w-8 items-center justify-center rounded-md ${
@@ -139,13 +131,6 @@ export function Sidebar({ liveStates, collapsed, onToggle }: SidebarProps) {
 						>
 							Dashboard
 						</Link>
-					<Link
-						to="/logs"
-						className="mx-2 flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-sidebar-inkDull hover:bg-sidebar-selected/50 [&.active]:bg-sidebar-selected [&.active]:text-sidebar-ink"
-						activeProps={{ className: "active" }}
-					>
-						Logs
-					</Link>
 					<Link
 						to="/settings"
 						className={`mx-2 flex items-center gap-2 rounded-md px-2 py-1.5 text-sm ${

interface/src/hooks/useLiveContext.tsx

@@ -8,13 +8,15 @@ interface LiveContextValue {
 	liveStates: Record<string, ChannelLiveState>;
 	channels: ChannelInfo[];
 	connectionState: ConnectionState;
+	hasData: boolean;
 	loadOlderMessages: (channelId: string) => void;
 }
 
 const LiveContext = createContext<LiveContextValue>({
 	liveStates: {},
 	channels: [],
 	connectionState: "connecting",
+	hasData: false,
 	loadOlderMessages: () => {},
 });
 
@@ -46,8 +48,11 @@ export function LiveContextProvider({ children }: { children: ReactNode }) {
 		onReconnect,
 	});
 
+	// Consider app "ready" once we have any data loaded
+	const hasData = channels.length > 0 || channelsData !== undefined;
+
 	return (
-		<LiveContext.Provider value={{ liveStates, channels, connectionState, loadOlderMessages }}>
+		<LiveContext.Provider value={{ liveStates, channels, connectionState, hasData, loadOlderMessages }}>
 			{children}
 		</LiveContext.Provider>
 	);

interface/src/router.tsx

@@ -23,7 +23,7 @@ import {useLiveContext} from "@/hooks/useLiveContext";
 import {AgentTabs} from "@/components/AgentTabs";
 
 function RootLayout() {
-	const {liveStates, connectionState} = useLiveContext();
+	const {liveStates, connectionState, hasData} = useLiveContext();
 	const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
 
 	return (
@@ -34,7 +34,7 @@ function RootLayout() {
 				onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
 			/>
 			<div className="flex flex-1 flex-col overflow-hidden">
-				<ConnectionBanner state={connectionState} />
+				<ConnectionBanner state={connectionState} hasData={hasData} />
 				<UpdateBanner />
 				<SetupBanner />
 				<div className="flex-1 overflow-hidden">