sync: phase 1 backend + frontend from server

web/src/components/ServerBar.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useServerStore } from '../stores/server.ts';
 import { useChannelStore } from '../stores/channel.ts';
+import { useLayoutStore } from '../stores/layout.ts';
 import { CreateServerModal } from './CreateServerModal.tsx';
 import { JoinServerModal } from './JoinServerModal.tsx';
 
@@ -18,6 +19,7 @@ export function ServerBar() {
   const fetchServers = useServerStore((state) => state.fetchServers);
   const setActiveServer = useServerStore((state) => state.setActiveServer);
   const setActiveChannel = useChannelStore((state) => state.setActiveChannel);
+  const { isDM, setDM } = useLayoutStore();
   const [showCreate, setShowCreate] = useState(false);
   const [showJoin, setShowJoin] = useState(false);
 
@@ -28,26 +30,43 @@ export function ServerBar() {
   const handleSelect = (id: string) => {
     setActiveServer(id);
     setActiveChannel(null);
+    setDM(false);
+  };
+
+  const handleDM = () => {
+    setActiveServer(null);
+    setActiveChannel(null);
+    setDM(true);
   };
 
   return (
     <>
       <div className="h-full w-16 bg-gb-bg-h border-r border-gb-bg-t flex flex-col items-center py-3 gap-2 overflow-y-auto">
+        <button
+          onClick={handleDM}
+          className={'w-11 h-11 flex items-center justify-center font-mono text-sm border ' +
+            (isDM
+              ? 'bg-gb-bg-t text-gb-orange border-gb-orange'
+              : 'bg-gb-bg-s text-gb-fg border-gb-bg-t hover:border-gb-fg-t hover:text-gb-aqua')}
+          title="Direct messages"
+        >
+          [@]
+        </button>
+        <div className="w-8 h-px bg-gb-bg-t" />
         {servers.map((server) => (
           <button
             key={server.id}
             onClick={() => handleSelect(server.id)}
-            className={`w-11 h-11 flex items-center justify-center font-mono text-sm border ${
-              server.id === activeServerId
+            className={'w-11 h-11 flex items-center justify-center font-mono text-sm border ' +
+              (server.id === activeServerId && !isDM
                 ? 'bg-gb-bg-t text-gb-orange border-gb-orange'
-                : 'bg-gb-bg-s text-gb-fg border-gb-bg-t hover:border-gb-fg-t hover:text-gb-aqua'
-            }`}
+                : 'bg-gb-bg-s text-gb-fg border-gb-bg-t hover:border-gb-fg-t hover:text-gb-aqua')}
             title={server.name}
           >
             {server.unread && server.id !== activeServerId ? (
               <span className="text-gb-aqua">[{getInitials(server.name)}]</span>
             ) : (
-              `[${getInitials(server.name)}]`
+              '[' + getInitials(server.name) + ']'
             )}
           </button>
         ))}