feat: clean up project sidebar display

- better padding
- abbreviate long project paths

Author: ammario

src/components/ProjectSidebar.tsx

@@ -5,6 +5,8 @@ import type { ProjectConfig } from "../config";
 import type { WorkspaceMetadata } from "../types/workspace";
 import { usePersistedState } from "../hooks/usePersistedState";
 import { matchesKeybind, formatKeybind, KEYBINDS } from "../utils/ui/keybinds";
+import { abbreviatePath } from "../utils/ui/pathAbbreviation";
+import { TooltipWrapper, Tooltip } from "./Tooltip";
 
 // Styled Components
 const SidebarContainer = styled.div`
@@ -196,12 +198,10 @@ const RemoveBtn = styled.button`
 
 const WorkspacesContainer = styled.div`
   background: #1a1a1a;
-  border-left: 1px solid #2a2a2b;
-  margin-left: 10px;
 `;
 
 const WorkspaceHeader = styled.div`
-  padding: 8px 12px;
+  padding: 8px 12px 8px 22px;
   border-bottom: 1px solid #2a2a2b;
 `;
 
@@ -234,7 +234,7 @@ const StatusIndicator = styled.div<{ active?: boolean }>`
 `;
 
 const WorkspaceItem = styled.div<{ selected?: boolean }>`
-  padding: 6px 12px 6px 24px;
+  padding: 6px 12px 6px 28px;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -300,7 +300,7 @@ const WorkspaceNameInput = styled.input`
 const RenameErrorContainer = styled.div`
   position: absolute;
   top: 100%;
-  left: 24px;
+  left: 28px;
   right: 32px;
   margin-top: 4px;
   padding: 6px 8px;
@@ -458,7 +458,12 @@ const ProjectSidebar: React.FC<ProjectSidebarProps> = ({
                 <ExpandIcon expanded={expandedProjects.has(projectPath)}>▶</ExpandIcon>
                 <ProjectInfo>
                   <ProjectName>{getProjectName(projectPath)}</ProjectName>
-                  <ProjectPath>{projectPath}</ProjectPath>
+                  <TooltipWrapper inline>
+                    <ProjectPath>{abbreviatePath(projectPath)}</ProjectPath>
+                    <Tooltip className="tooltip" align="left">
+                      {projectPath}
+                    </Tooltip>
+                  </TooltipWrapper>
                 </ProjectInfo>
                 <RemoveBtn
                   onClick={(e) => {

src/utils/ui/pathAbbreviation.test.ts

@@ -0,0 +1,34 @@
+import { abbreviatePath } from "./pathAbbreviation";
+
+describe("abbreviatePath", () => {
+  it("should abbreviate all directory components except the last one", () => {
+    expect(abbreviatePath("/Users/ammar/Projects/coder/cmux")).toBe("/U/a/P/c/cmux");
+  });
+
+  it("should handle paths without leading slash", () => {
+    expect(abbreviatePath("Users/ammar/Projects/coder/cmux")).toBe("U/a/P/c/cmux");
+  });
+
+  it("should handle single directory paths", () => {
+    expect(abbreviatePath("/Users")).toBe("/Users");
+    expect(abbreviatePath("Users")).toBe("Users");
+  });
+
+  it("should handle root path", () => {
+    expect(abbreviatePath("/")).toBe("/");
+  });
+
+  it("should handle empty string", () => {
+    expect(abbreviatePath("")).toBe("");
+  });
+
+  it("should handle paths with multiple character directories", () => {
+    expect(abbreviatePath("/home/username/Documents/project")).toBe("/h/u/D/project");
+  });
+
+  it("should preserve the full last directory name", () => {
+    expect(abbreviatePath("/Users/ammar/very-long-project-name")).toBe(
+      "/U/a/very-long-project-name"
+    );
+  });
+});

src/utils/ui/pathAbbreviation.ts

@@ -0,0 +1,33 @@
+/**
+ * Fish-style path abbreviation utility
+ * Abbreviates all directory components except the last one to their first letter
+ * Example: /Users/ammar/Projects/coder/cmux -> /U/a/P/c/cmux
+ */
+export function abbreviatePath(path: string): string {
+  if (!path || typeof path !== "string") {
+    return path;
+  }
+
+  const parts = path.split("/");
+
+  // Handle root path or empty parts
+  if (parts.length <= 1) {
+    return path;
+  }
+
+  // Abbreviate all parts except the last one
+  const abbreviated = parts.map((part, index) => {
+    // Keep the last part full
+    if (index === parts.length - 1) {
+      return part;
+    }
+    // Keep empty parts (like leading slash)
+    if (part === "") {
+      return part;
+    }
+    // Abbreviate to first character
+    return part[0];
+  });
+
+  return abbreviated.join("/");
+}