Tighten project sidebar spacing and message ids

- Use `MessageId` for queued chat messages
- Adjust sidebar project item spacing and typography

Author: BunsDev

apps/web/src/components/ChatView.logic.ts

@@ -1,4 +1,4 @@
-import { ProjectId, type ThreadId } from "@okcode/contracts";
+import { type MessageId, ProjectId, type ThreadId } from "@okcode/contracts";
 import { type ChatMessage, type Thread } from "../types";
 import { randomUUID } from "~/lib/utils";
 import { type ComposerImageAttachment, type DraftThreadState } from "../composerDraftStore";
@@ -78,7 +78,7 @@ export type SendPhase = "idle" | "preparing-worktree" | "sending-turn";
 
 /** A message queued locally while the agent is busy processing a turn. */
 export interface QueuedMessage {
-  id: string;
+  id: MessageId;
   text: string;
   images: ComposerImageAttachment[];
   terminalContexts: TerminalContextDraft[];

apps/web/src/components/Sidebar.tsx

@@ -344,7 +344,7 @@ function SortableProjectItem({
         transform: CSS.Translate.toString(transform),
         transition,
       }}
-      className={`group/menu-item relative rounded-md ${
+      className={`group/menu-item relative rounded-md mt-1.5 first:mt-0 ${
         isDragging ? "z-20 opacity-80" : ""
       } ${isOver && !isDragging ? "ring-1 ring-primary/40" : ""}`}
       data-sidebar="menu-item"
@@ -1290,7 +1290,7 @@ export default function Sidebar() {
           <SidebarMenuButton
             ref={isManualProjectSorting ? dragHandleProps?.setActivatorNodeRef : undefined}
             size="sm"
-            className={`gap-2 px-2 py-1.5 text-left hover:bg-accent group-hover/project-header:bg-accent group-hover/project-header:text-sidebar-accent-foreground ${
+            className={`gap-2 px-2 py-2 text-left hover:bg-accent group-hover/project-header:bg-accent group-hover/project-header:text-sidebar-accent-foreground ${
               isManualProjectSorting ? "cursor-grab active:cursor-grabbing" : "cursor-pointer"
             }`}
             {...(isManualProjectSorting && dragHandleProps ? dragHandleProps.attributes : {})}
@@ -1329,7 +1329,7 @@ export default function Sidebar() {
               />
             )}
             <ProjectFavicon cwd={project.cwd} />
-            <span className="flex-1 truncate text-xs font-medium text-foreground/90">
+            <span className="flex-1 truncate text-xs font-semibold tracking-[0.01em] text-foreground">
               {project.name}
             </span>
           </SidebarMenuButton>
@@ -1865,7 +1865,7 @@ export default function Sidebar() {
           ) : (
             <SidebarMenu ref={attachProjectListAutoAnimateRef}>
               {sortedProjects.map((project) => (
-                <SidebarMenuItem key={project.id} className="rounded-md">
+                <SidebarMenuItem key={project.id} className="rounded-md mt-1.5 first:mt-0">
                   {renderProjectItem(project, null)}
                 </SidebarMenuItem>
               ))}