ui: theme system, routing fixes, major overhaul, still need to fix dropdowns

concord-client/src/App.tsx

@@ -1,18 +1,20 @@
-import React, { useEffect } from "react";
-import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router";
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { Toaster } from "@/components/ui/sonner";
 
+import { ThemeProvider } from "@/components/theme-provider";
 import AppLayout from "@/components/layout/AppLayout";
 import LoginPage from "@/pages/LoginPage";
 import ChatPage from "@/pages/ChatPage";
 import SettingsPage from "@/pages/SettingsPage";
 import NotFoundPage from "@/pages/NotFoundPage";
 
-import { useAuthStore } from "@/stores/authStore";
-import { useUiStore } from "@/stores/uiStore";
+// import { useAuthStore } from "@/stores/authStore";
+// import { useUiStore } from "@/stores/uiStore";
 import ErrorBoundary from "@/components/common/ErrorBoundary";
+import { Home } from "lucide-react";
 
 // Create a client
 const queryClient = new QueryClient({
@@ -33,76 +35,77 @@ const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   // const { isAuthenticated } = useAuthStore();
-
   // if (!isAuthenticated) {
   //   return <Navigate to="/login" replace />;
   // }
-
   return <>{children}</>;
 };
 
+// Home page component - shows server selection
+const HomePage: React.FC = () => {
+  return (
+    <div className="flex-1 flex items-center justify-center bg-concord-primary">
+      <div className="text-center text-concord-secondary max-w-md">
+        <div className="w-16 h-16 mx-auto mb-4 bg-concord-secondary rounded-full flex items-center justify-center">
+          <Home />
+        </div>
+        <h2 className="text-xl font-semibold mb-2 text-concord-primary">
+          Welcome to Concord
+        </h2>
+        <p className="text-sm mb-4">
+          Select a server from the sidebar to start chatting, or create a new
+          server
+        </p>
+      </div>
+    </div>
+  );
+};
+
 function App() {
-  const { theme } = useUiStore();
-
-  // Apply theme to document
-  useEffect(() => {
-    document.documentElement.classList.toggle("dark", theme === "dark");
-  }, [theme]);
-
   return (
     <ErrorBoundary>
       <QueryClientProvider client={queryClient}>
-        <Router>
-          <div
-            className={`h-screen w-screen overflow-hidden ${theme === "dark" ? "bg-gray-900 text-white" : "bg-white text-gray-900"}`}
-          >
-            <Routes>
-              {/* Auth routes */}
-              <Route path="/login" element={<LoginPage />} />
+        <ThemeProvider defaultTheme="system" storageKey="discord-theme">
+          <Router>
+            <div className="h-screen w-screen overflow-hidden bg-background text-foreground">
+              <Routes>
+                {/* Auth routes */}
+                <Route path="/login" element={<LoginPage />} />
 
-              {/* Protected routes with layout */}
-              <Route
-                path="/"
-                element={
-                  // <ProtectedRoute>
-                  <AppLayout />
-                  // </ProtectedRoute>
-                }
-              >
-                {/* Default redirect to channels */}
+                {/* Protected routes with layout */}
                 <Route
-                  index
-                  element={<Navigate to="/channels/@me" replace />}
-                />
+                  path="/"
+                  element={
+                    <ProtectedRoute>
+                      <AppLayout />
+                    </ProtectedRoute>
+                  }
+                >
+                  {/* Default redirect to home */}
+                  <Route index element={<HomePage />} />
 
-                {/* Chat routes */}
-                <Route
-                  path="channels"
-                  element={<Navigate to="/channels/@me" replace />}
-                />
-                <Route path="channels/@me" element={<ChatPage />} />
-                <Route path="channels/:instanceId" element={<ChatPage />} />
-                <Route
-                  path="channels/:instanceId/:channelId"
-                  element={<ChatPage />}
-                />
+                  {/* Server and channel routes */}
+                  <Route path="channels/:instanceId" element={<ChatPage />} />
+                  <Route
+                    path="channels/:instanceId/:channelId"
+                    element={<ChatPage />}
+                  />
 
-                {/* Settings */}
-                <Route path="settings" element={<SettingsPage />} />
-                <Route path="settings/:section" element={<SettingsPage />} />
-              </Route>
+                  {/* Settings */}
+                  <Route path="settings" element={<SettingsPage />} />
+                  <Route path="settings/:section" element={<SettingsPage />} />
+                </Route>
 
-              {/* 404 */}
-              <Route path="*" element={<NotFoundPage />} />
-            </Routes>
-          </div>
-        </Router>
+                {/* 404 */}
+                <Route path="*" element={<NotFoundPage />} />
+              </Routes>
+            </div>
+          </Router>
 
-        {/* Dev tools - only in development */}
-        {/*process.env.NODE_ENV === "development" && <ReactQueryDevtools />*/}
-
-        {/* Toast notifications */}
-        <Toaster />
+          {import.meta.env.DEV === true && <ReactQueryDevtools />}
+          {/* Toast notifications */}
+          <Toaster />
+        </ThemeProvider>
       </QueryClientProvider>
     </ErrorBoundary>
   );