refactor: various API and UI cleanups

Author: Frando

browser-chat/frontend/src/app.css

@@ -2,8 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+    background: hsl(0 0% 3.9%);
+}
+
 body {
     font-family: Arial, Helvetica, sans-serif;
+    display: none;
 }
 
 @layer utilities {
@@ -91,4 +96,8 @@ body {
     body {
         @apply bg-background text-foreground;
     }
+    .dark body,
+    .light body {
+        @apply block;
+    }
 }

browser-chat/frontend/src/app.tsx

@@ -7,65 +7,80 @@ import Header from "./components/header"
 import LogView from "./components/logview"
 import Sidebar from "./components/sidebar"
 import { ThemeProvider } from "next-themes"
-import { Button } from "@/components/ui/button"
-import { Moon, Sun } from "lucide-react"
-import { useTheme } from "next-themes"
 import { InvitePopup } from "./components/invitepopup"
-import { api, type ChannelInfo } from "./lib/api"
-import { log } from "./lib/log"
+import { API, initApi, type ChannelInfo } from "./lib/api"
 import { generate as generateName } from 'yet-another-name-generator'
+import { log } from "./lib/log"
 
-function ThemeToggle() {
-  const { theme, setTheme } = useTheme()
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => setMounted(true), [])
+export default function AppWrapper() {
+  const [api, setApi] = useState<API | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  useEffect(() => {
+    initApi()
+      .then(setApi)
+      .catch(err => setError(err.toString()))
+  }, [])
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <div className="flex h-screen">
+        {!api && (
+          <SplashScreen>
+            {!error && <div className="text-center">Spawning Iroh…<br /><Spinner /></div>}
+            {error && <div>{error}</div>}
+          </SplashScreen>
+        )}
+        {api && <App api={api} />}
+      </div>
+    </ThemeProvider>
+  )
+}
 
-  if (!mounted) return null
+function Spinner() {
+  return (
+    <svg className="inline-block h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+  )
+}
 
+function SplashScreen({ children }: React.PropsWithChildren) {
+  const [showLogView, setShowLogView] = useState(false)
   return (
-    <Button variant="ghost" size="icon" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
-      {theme === "light" ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />}
-      <span className="sr-only">Toggle theme</span>
-    </Button>
+    <div className="flex flex-col flex-grow">
+      <Header
+        onLogsClick={() => setShowLogView(!showLogView)}
+      />
+      {showLogView && <LogView onClose={() => setShowLogView(false)} />}
+      <div className="flex items-center justify-center">
+        {children}
+      </div>
+    </div>
   )
+
+}
+
+interface AppProps {
+  api: API
 }
 
-export default function App() {
-  // ... (previous state declarations)
+function App({ api }: AppProps) {
   const [currentView, setCurrentView] = useState<"home" | "chat">("home")
   const [channels, setChannels] = useState<ChannelInfo[]>([])
   const [activeChannel, setActiveChannel] = useState<string | null>(null)
-  const [isConnected, setIsConnected] = useState(false)
-  const [neighbors, setNeighbors] = useState(0)
   const [showLogView, setShowLogView] = useState(false)
   const [nickname, setNickname] = useState(generateName())
-  const [logs, setLogs] = useState<{ timestamp: Date; level: "info" | "warn" | "error"; message: string }[]>([])
   const [showInvitePopup, setShowInvitePopup] = useState(false)
-
   const [showSidebar, setShowSidebar] = useState(false)
 
-  // ... (previous useEffect and other functions)
-
-  useEffect(() => {
-    const unsubscribe = log.subscribe((logMessage) => {
-      setLogs((prevLogs) => [...prevLogs, logMessage])
-    })
-
-    return () => unsubscribe()
-  }, [])
-
   const joinChannel = async (ticket: string) => {
     try {
       const channel = await api.joinChannel(ticket, nickname)
       setChannels((prevChannels) => [...prevChannels, channel])
       setActiveChannel(channel.id)
       setCurrentView("chat")
-      setIsConnected(true)
-      const peers = await api.getPeers(channel.id)
-      setNeighbors(peers.length)
     } catch (error) {
-      console.error(`Failed to join channel: ${error}`)
+      log.error("Failed to join channel", error)
     }
   }
 
@@ -75,10 +90,8 @@ export default function App() {
       setChannels((prevChannels) => [...prevChannels, channel])
       setActiveChannel(channel.id)
       setCurrentView("chat")
-      setIsConnected(true)
-      setNeighbors(0)
     } catch (error) {
-      console.error(`Failed to create channel: ${error}`)
+      log.error("Failed to create channel", error)
     }
   }
 
@@ -90,11 +103,10 @@ export default function App() {
         setActiveChannel(channels.length > 1 ? channels[0].id : null)
         if (channels.length === 1) {
           setCurrentView("home")
-          setIsConnected(false)
         }
       }
     } catch (error) {
-      console.error(`Failed to close channel: ${error}`)
+      log.error("Failed to close channel", error)
     }
   }
 
@@ -103,56 +115,56 @@ export default function App() {
     setShowSidebar(true)
   }
 
+  let title
+  if (activeChannel) {
+    title = '#' + channels.find((c) => c.id === activeChannel)?.name
+  }
+
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <div className="flex h-screen">
-        {(currentView === "chat" || showSidebar) && (
-          <Sidebar
-            channels={channels}
-            activeChannel={activeChannel}
-            onChannelSelect={(channelId) => {
-              setActiveChannel(channelId)
-              setCurrentView("chat")
+    <>
+      {(currentView === "chat" || showSidebar) && (
+        <Sidebar
+          channels={channels}
+          activeChannel={activeChannel}
+          onChannelSelect={(channelId) => {
+            setActiveChannel(channelId)
+            setCurrentView("chat")
+          }}
+          onNewChannel={handleNewChannel}
+        />
+      )}
+      <div className="flex flex-col flex-grow">
+        <Header
+          onLogsClick={() => setShowLogView(!showLogView)}
+          title={title}
+          onInviteClick={activeChannel ? (() => setShowInvitePopup(true)) : undefined}
+        />
+        {currentView === "home" && (
+          <HomeScreen
+            name={nickname}
+            onSetName={setNickname}
+            onJoin={(ticket) => {
+              joinChannel(ticket)
+              setShowSidebar(false)
+            }}
+            onCreate={() => {
+              createChannel()
+              setShowSidebar(false)
             }}
-            onNewChannel={handleNewChannel}
           />
         )}
-        <div className="flex flex-col flex-grow">
-          <Header
-            isConnected={isConnected}
-            neighbors={neighbors}
-            onMenuClick={() => setShowLogView(!showLogView)}
-            themeToggle={<ThemeToggle />}
-            channel={activeChannel ? channels.find((c) => c.id === activeChannel)?.name || null : null}
-            onInviteClick={() => setShowInvitePopup(true)}
+        {currentView === "chat" && activeChannel && (
+          <ChatView api={api} channel={activeChannel} onClose={() => closeChannel(activeChannel)} />
+        )}
+        {showLogView && <LogView onClose={() => setShowLogView(false)} />}
+        {showInvitePopup && activeChannel && (
+          <InvitePopup
+            onClose={() => setShowInvitePopup(false)}
+            channel={channels.find((c) => c.id === activeChannel)?.name || ""}
+            getTicket={(opts) => api.getTicket(activeChannel!, opts)}
           />
-          {currentView === "home" && (
-            <HomeScreen
-              name={nickname}
-              onSetName={setNickname}
-              onJoin={(ticket) => {
-                joinChannel(ticket)
-                setShowSidebar(false)
-              }}
-              onCreate={() => {
-                createChannel()
-                setShowSidebar(false)
-              }}
-            />
-          )}
-          {currentView === "chat" && activeChannel && (
-            <ChatView channel={activeChannel} onClose={() => closeChannel(activeChannel)} />
-          )}
-          {showLogView && <LogView logs={logs} onClose={() => setShowLogView(false)} />}
-          {showInvitePopup && activeChannel && (
-            <InvitePopup
-              onClose={() => setShowInvitePopup(false)}
-              channel={channels.find((c) => c.id === activeChannel)?.name || ""}
-              getTicket={(opts) => api.getTicket(activeChannel!, opts)}
-            />
-          )}
-        </div>
+        )}
       </div>
-    </ThemeProvider>
+    </>
   )
 }