chore: remove home tab (#129)

* docs: add design for removing home tab

Documents the design for removing the home tab and defaulting to the first
data source on initial load.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

* docs: add detailed implementation plan for removing home tab

* feat: add general 404 not found page

* feat: redirect root to first source and add 404 route

* feat: redirect invalid source IDs to 404 page

* feat: remove Home navigation item from sidebar

* feat: remove unused HomeView component

* chore: cleanup plan

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: tianzhou

frontend/src/App.tsx

@@ -1,12 +1,35 @@
 import { useEffect, useState } from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import Layout from './components/Layout';
-import HomeView from './components/views/HomeView';
 import SourceDetailView from './components/views/SourceDetailView';
+import NotFoundView from './components/views/NotFoundView';
 import Toast from './components/Toast';
+import ErrorBoundary from './components/ErrorBoundary';
 import { fetchSources } from './api/sources';
+import { ApiError } from './api/errors';
 import type { DataSource } from './types/datasource';
 
+function RedirectToFirstSource({ sources, isLoading }: { sources: DataSource[]; isLoading: boolean }) {
+  if (isLoading) {
+    return (
+      <div className="container mx-auto px-8 py-12">
+        <div className="text-muted-foreground">Loading...</div>
+      </div>
+    );
+  }
+
+  if (sources.length === 0) {
+    // This should never happen as backend validates at least one source
+    return (
+      <div className="container mx-auto px-8 py-12">
+        <div className="text-destructive">No data sources configured</div>
+      </div>
+    );
+  }
+
+  return <Navigate to={`/source/${sources[0].id}`} replace />;
+}
+
 function App() {
   const [sources, setSources] = useState<DataSource[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -18,23 +41,27 @@ function App() {
         setSources(data);
         setIsLoading(false);
       })
-      .catch((error) => {
-        console.error('Failed to fetch sources:', error);
-        setError(error instanceof Error ? error.message : 'Failed to load data sources');
+      .catch((err) => {
+        console.error('Failed to fetch sources:', err);
+        const message = err instanceof ApiError ? err.message : 'Failed to load data sources';
+        setError(message);
         setIsLoading(false);
       });
   }, []);
 
   return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Layout sources={sources} isLoading={isLoading} />}>
-          <Route index element={<HomeView />} />
-          <Route path="source/:sourceId" element={<SourceDetailView />} />
-        </Route>
-      </Routes>
-      {error && <Toast message={error} type="error" onClose={() => setError(null)} />}
-    </BrowserRouter>
+    <ErrorBoundary>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Layout sources={sources} isLoading={isLoading} />}>
+            <Route index element={<RedirectToFirstSource sources={sources} isLoading={isLoading} />} />
+            <Route path="source/:sourceId" element={<SourceDetailView />} />
+            <Route path="*" element={<NotFoundView />} />
+          </Route>
+        </Routes>
+        {error && <Toast message={error} type="error" onClose={() => setError(null)} />}
+      </BrowserRouter>
+    </ErrorBoundary>
   );
 }
 

frontend/src/api/errors.ts

@@ -0,0 +1,13 @@
+/**
+ * Custom error class for API-related errors with HTTP status codes
+ */
+export class ApiError extends Error {
+  constructor(
+    message: string,
+    public readonly status: number,
+    public readonly statusText?: string
+  ) {
+    super(message);
+    this.name = 'ApiError';
+  }
+}

frontend/src/api/sources.ts

@@ -1,4 +1,5 @@
 import type { DataSource } from '../types/datasource';
+import { ApiError } from './errors';
 
 const API_BASE = '/api';
 
@@ -9,43 +10,62 @@ async function parseJsonResponse<T>(response: Response): Promise<T> {
   }
   // Fallback to text if not JSON
   const text = await response.text();
-  throw new Error(text || response.statusText);
+  throw new ApiError(text || response.statusText, response.status, response.statusText);
 }
 
 export async function fetchSources(): Promise<DataSource[]> {
-  const response = await fetch(`${API_BASE}/sources`);
+  try {
+    const response = await fetch(`${API_BASE}/sources`);
 
-  if (!response.ok) {
-    const errorMessage = await parseJsonResponse<{ error: string }>(response)
-      .then((data) => data.error)
-      .catch(() => response.statusText);
-    throw new Error(`Failed to fetch sources: ${errorMessage}`);
-  }
+    if (!response.ok) {
+      const errorMessage = await parseJsonResponse<{ error: string }>(response)
+        .then((data) => data.error)
+        .catch(() => response.statusText);
+      throw new ApiError(`Failed to fetch sources: ${errorMessage}`, response.status, response.statusText);
+    }
 
-  return response.json();
+    return response.json();
+  } catch (err) {
+    // Ensure all errors are ApiError instances
+    if (err instanceof ApiError) {
+      throw err;
+    }
+    // Network errors, timeout, etc.
+    throw new ApiError(err instanceof Error ? err.message : 'Network error', 0);
+  }
 }
 
 export async function fetchSource(sourceId: string): Promise<DataSource> {
-  // Validate sourceId to prevent path traversal attacks
-  if (!sourceId || sourceId.trim() === '') {
-    throw new Error('Source ID cannot be empty');
-  }
-  if (sourceId.includes('/') || sourceId.includes('..')) {
-    throw new Error('Invalid source ID format');
-  }
+  try {
+    // Validate sourceId to prevent path traversal attacks
+    if (!sourceId || sourceId.trim() === '') {
+      throw new ApiError('Source ID cannot be empty', 400);
+    }
+    if (sourceId.includes('/') || sourceId.includes('..')) {
+      throw new ApiError('Invalid source ID format', 400);
+    }
 
-  const response = await fetch(`${API_BASE}/sources/${encodeURIComponent(sourceId)}`);
+    const response = await fetch(`${API_BASE}/sources/${encodeURIComponent(sourceId)}`);
 
-  if (!response.ok) {
-    const errorMessage = await parseJsonResponse<{ error: string }>(response)
-      .then((data) => data.error)
-      .catch(() => response.statusText);
+    if (!response.ok) {
+      const errorMessage = await parseJsonResponse<{ error: string }>(response)
+        .then((data) => data.error)
+        .catch(() => response.statusText);
 
-    if (response.status === 404) {
-      throw new Error(`Source not found: ${sourceId}`);
+      throw new ApiError(
+        response.status === 404 ? `Source not found: ${sourceId}` : `Failed to fetch source: ${errorMessage}`,
+        response.status,
+        response.statusText
+      );
     }
-    throw new Error(`Failed to fetch source: ${errorMessage}`);
-  }
 
-  return response.json();
+    return response.json();
+  } catch (err) {
+    // Ensure all errors are ApiError instances
+    if (err instanceof ApiError) {
+      throw err;
+    }
+    // Network errors, timeout, etc.
+    throw new ApiError(err instanceof Error ? err.message : 'Network error', 0);
+  }
 }

frontend/src/components/ErrorBoundary.tsx

@@ -0,0 +1,63 @@
+import { Component, ReactNode, ErrorInfo } from 'react';
+import { ApiError } from '../api/errors';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  error: Error | null;
+}
+
+/**
+ * Error Boundary to catch unexpected errors in the component tree
+ */
+export default class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.error) {
+      const error = this.state.error;
+      const isApiError = error instanceof ApiError;
+
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-background px-4">
+          <div className="max-w-md w-full">
+            <div className="bg-destructive/10 border border-destructive/20 rounded-lg p-6">
+              <h1 className="text-2xl font-bold text-destructive mb-4">
+                Something went wrong
+              </h1>
+              <p className="text-destructive/90 mb-4">
+                {error.message}
+              </p>
+              {isApiError && (
+                <p className="text-sm text-muted-foreground mb-4">
+                  Error code: {error.status}
+                </p>
+              )}
+              <button
+                onClick={() => window.location.reload()}
+                className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
+              >
+                Reload page
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

frontend/src/components/Sidebar/NavItem.tsx

@@ -1,5 +1,4 @@
 import Logo from './Logo';
-import NavItem from './NavItem';
 import SourceList from './SourceList';
 import type { DataSource } from '../../types/datasource';
 
@@ -8,31 +7,11 @@ interface SidebarProps {
   isLoading: boolean;
 }
 
-function HomeIcon() {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-      <polyline points="9 22 9 12 15 12 15 22" />
-    </svg>
-  );
-}
-
 export default function Sidebar({ sources, isLoading }: SidebarProps) {
   return (
     <aside className="w-[200px] sm:w-[220px] md:w-[240px] lg:w-[280px] border-r border-border bg-card flex flex-col" aria-label="Navigation sidebar">
       <Logo />
       <nav className="flex-1 flex flex-col overflow-hidden" aria-label="Sidebar navigation">
-        <NavItem to="/" icon={<HomeIcon />} label="Home" />
         <SourceList sources={sources} isLoading={isLoading} />
       </nav>
     </aside>