feature (desktop): sidebar style and close functionality

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/PortsList/PortsList.tsx

@@ -4,6 +4,7 @@ import { LuChevronRight, LuExternalLink, LuRadioTower } from "react-icons/lu";
 import { trpc } from "renderer/lib/trpc";
 import { type DetectedPort, usePortsStore } from "renderer/stores";
 import { useTabsStore } from "renderer/stores/tabs/store";
+import { STROKE_WIDTH } from "../constants";
 
 interface WorkspaceGroup {
 	workspaceId: string;
@@ -104,8 +105,9 @@ export function PortsList() {
 			>
 				<LuChevronRight
 					className={`size-3 transition-transform ${isCollapsed ? "" : "rotate-90"}`}
+					strokeWidth={STROKE_WIDTH}
 				/>
-				<LuRadioTower className="size-3" />
+				<LuRadioTower className="size-3" strokeWidth={STROKE_WIDTH} />
 				Ports
 				<span className="text-[10px] ml-auto font-normal">{ports.length}</span>
 			</button>
@@ -218,7 +220,7 @@ function PortBadge({ port, isCurrentWorkspace }: PortBadgeProps) {
 						aria-label={`Open port ${port.port} in browser`}
 						className="opacity-0 group-hover:opacity-100 pr-1.5 transition-opacity hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none"
 					>
-						<LuExternalLink className="size-3" />
+						<LuExternalLink className="size-3" strokeWidth={STROKE_WIDTH} />
 					</button>
 				</div>
 			</TooltipTrigger>

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/ProjectSection/ProjectHeader.tsx

@@ -18,6 +18,7 @@ import { HiChevronRight, HiMiniPlus, HiOutlineBolt } from "react-icons/hi2";
 import { LuFolderOpen, LuSettings, LuX } from "react-icons/lu";
 import { trpc } from "renderer/lib/trpc";
 import { useOpenSettings } from "renderer/stores/app-state";
+import { STROKE_WIDTH } from "../constants";
 import { ProjectThumbnail } from "./ProjectThumbnail";
 
 interface ProjectHeaderProps {
@@ -118,11 +119,11 @@ export function ProjectHeader({
 				</Tooltip>
 				<ContextMenuContent>
 					<ContextMenuItem onSelect={handleOpenInFinder}>
-						<LuFolderOpen className="size-4 mr-2" />
+						<LuFolderOpen className="size-4 mr-2" strokeWidth={STROKE_WIDTH} />
 						Open in Finder
 					</ContextMenuItem>
 					<ContextMenuItem onSelect={handleOpenSettings}>
-						<LuSettings className="size-4 mr-2" />
+						<LuSettings className="size-4 mr-2" strokeWidth={STROKE_WIDTH} />
 						Project Settings
 					</ContextMenuItem>
 					<ContextMenuSeparator />
@@ -131,7 +132,7 @@ export function ProjectHeader({
 						disabled={closeProject.isPending}
 						className="text-destructive focus:text-destructive"
 					>
-						<LuX className="size-4 mr-2" />
+						<LuX className="size-4 mr-2" strokeWidth={STROKE_WIDTH} />
 						{closeProject.isPending ? "Closing..." : "Close Project"}
 					</ContextMenuItem>
 				</ContextMenuContent>
@@ -236,11 +237,11 @@ export function ProjectHeader({
 			</ContextMenuTrigger>
 			<ContextMenuContent>
 				<ContextMenuItem onSelect={handleOpenInFinder}>
-					<LuFolderOpen className="size-4 mr-2" />
+					<LuFolderOpen className="size-4 mr-2" strokeWidth={STROKE_WIDTH} />
 					Open in Finder
 				</ContextMenuItem>
 				<ContextMenuItem onSelect={handleOpenSettings}>
-					<LuSettings className="size-4 mr-2" />
+					<LuSettings className="size-4 mr-2" strokeWidth={STROKE_WIDTH} />
 					Project Settings
 				</ContextMenuItem>
 				<ContextMenuSeparator />
@@ -249,7 +250,7 @@ export function ProjectHeader({
 					disabled={closeProject.isPending}
 					className="text-destructive focus:text-destructive"
 				>
-					<LuX className="size-4 mr-2" />
+					<LuX className="size-4 mr-2" strokeWidth={STROKE_WIDTH} />
 					{closeProject.isPending ? "Closing..." : "Close Project"}
 				</ContextMenuItem>
 			</ContextMenuContent>

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/WorkspaceListItem.tsx

@@ -29,6 +29,7 @@ import { useWorkspaceRename } from "renderer/screens/main/hooks/useWorkspaceRena
 import { useCloseWorkspacesList } from "renderer/stores/app-state";
 import { useTabsStore } from "renderer/stores/tabs/store";
 import { extractPaneIdsFromLayout } from "renderer/stores/tabs/utils";
+import { STROKE_WIDTH } from "../constants";
 import {
 	BranchSwitcher,
 	DeleteWorkspaceDialog,
@@ -198,14 +199,22 @@ export function WorkspaceListItem({
 					isActive && "bg-muted",
 				)}
 			>
-				{/* Active indicator */}
-				{isActive && (
-					<div className="absolute left-0 top-1 bottom-1 w-0.5 bg-primary rounded-r" />
-				)}
 				{isBranchWorkspace ? (
-					<LuFolder className="size-4 text-muted-foreground" />
+					<LuFolder
+						className={cn(
+							"size-4",
+							isActive ? "text-foreground" : "text-muted-foreground",
+						)}
+						strokeWidth={STROKE_WIDTH}
+					/>
 				) : (
-					<LuFolderGit2 className="size-4 text-muted-foreground" />
+					<LuFolderGit2
+						className={cn(
+							"size-4",
+							isActive ? "text-foreground" : "text-muted-foreground",
+						)}
+						strokeWidth={STROKE_WIDTH}
+					/>
 				)}
 				{/* Notification dot */}
 				{needsAttention && (
@@ -232,17 +241,35 @@ export function WorkspaceListItem({
 			);
 		}
 
-		// Worktree workspaces get the full hover card
+		// Worktree workspaces get the full hover card with context menu
 		return (
-			<HoverCard
-				openDelay={HOVER_CARD_OPEN_DELAY}
-				closeDelay={HOVER_CARD_CLOSE_DELAY}
-			>
-				<HoverCardTrigger asChild>{collapsedButton}</HoverCardTrigger>
-				<HoverCardContent side="right" align="start" className="w-72">
-					<WorkspaceHoverCardContent workspaceId={id} workspaceAlias={name} />
-				</HoverCardContent>
-			</HoverCard>
+			<>
+				<HoverCard
+					openDelay={HOVER_CARD_OPEN_DELAY}
+					closeDelay={HOVER_CARD_CLOSE_DELAY}
+				>
+					<ContextMenu>
+						<HoverCardTrigger asChild>
+							<ContextMenuTrigger asChild>{collapsedButton}</ContextMenuTrigger>
+						</HoverCardTrigger>
+						<ContextMenuContent>
+							<ContextMenuItem onSelect={() => handleDeleteClick()}>
+								Close Worktree
+							</ContextMenuItem>
+						</ContextMenuContent>
+					</ContextMenu>
+					<HoverCardContent side="right" align="start" className="w-72">
+						<WorkspaceHoverCardContent workspaceId={id} workspaceAlias={name} />
+					</HoverCardContent>
+				</HoverCard>
+				<DeleteWorkspaceDialog
+					workspaceId={id}
+					workspaceName={name}
+					workspaceType={type}
+					open={showDeleteDialog}
+					onOpenChange={setShowDeleteDialog}
+				/>
+			</>
 		);
 	}
 
@@ -275,9 +302,15 @@ export function WorkspaceListItem({
 				<TooltipTrigger asChild>
 					<div className="relative shrink-0 size-5 flex items-center justify-center mr-2.5">
 						{isBranchWorkspace ? (
-							<LuFolder className="size-4 text-muted-foreground" />
+							<LuFolder
+								className="size-4 text-muted-foreground"
+								strokeWidth={STROKE_WIDTH}
+							/>
 						) : (
-							<LuFolderGit2 className="size-4 text-muted-foreground" />
+							<LuFolderGit2
+								className="size-4 text-muted-foreground"
+								strokeWidth={STROKE_WIDTH}
+							/>
 						)}
 						{needsAttention && (
 							<span className="absolute -top-0.5 -right-0.5 flex size-2">
@@ -394,12 +427,12 @@ export function WorkspaceListItem({
 		<ContextMenuItem onSelect={handleToggleUnread}>
 			{isUnread ? (
 				<>
-					<LuEye className="size-4 mr-2" />
+					<LuEye className="size-4 mr-2" strokeWidth={STROKE_WIDTH} />
 					Mark as Read
 				</>
 			) : (
 				<>
-					<LuEyeOff className="size-4 mr-2" />
+					<LuEyeOff className="size-4 mr-2" strokeWidth={STROKE_WIDTH} />
 					Mark as Unread
 				</>
 			)}

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/WorkspaceStatusBadge.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@superset/ui/utils";
 import { LuCircleDot, LuGitMerge, LuGitPullRequest } from "react-icons/lu";
+import { STROKE_WIDTH } from "../constants";
 
 type PRState = "open" | "merged" | "closed" | "draft";
 
@@ -16,20 +17,38 @@ export function WorkspaceStatusBadge({
 
 	const config = {
 		open: {
-			icon: <LuGitPullRequest className={cn(iconClass, "text-emerald-500")} />,
+			icon: (
+				<LuGitPullRequest
+					className={cn(iconClass, "text-emerald-500")}
+					strokeWidth={STROKE_WIDTH}
+				/>
+			),
 			bgColor: "bg-emerald-500/10",
 		},
 		merged: {
-			icon: <LuGitMerge className={cn(iconClass, "text-purple-500")} />,
+			icon: (
+				<LuGitMerge
+					className={cn(iconClass, "text-purple-500")}
+					strokeWidth={STROKE_WIDTH}
+				/>
+			),
 			bgColor: "bg-purple-500/10",
 		},
 		closed: {
-			icon: <LuCircleDot className={cn(iconClass, "text-destructive")} />,
+			icon: (
+				<LuCircleDot
+					className={cn(iconClass, "text-destructive")}
+					strokeWidth={STROKE_WIDTH}
+				/>
+			),
 			bgColor: "bg-destructive/10",
 		},
 		draft: {
 			icon: (
-				<LuGitPullRequest className={cn(iconClass, "text-muted-foreground")} />
+				<LuGitPullRequest
+					className={cn(iconClass, "text-muted-foreground")}
+					strokeWidth={STROKE_WIDTH}
+				/>
 			),
 			bgColor: "bg-muted",
 		},

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/components/BranchSwitcher/BranchSwitcher.tsx

@@ -13,6 +13,7 @@ import { HiCheck, HiChevronUpDown } from "react-icons/hi2";
 import { LuGitBranch, LuGitFork, LuLoader } from "react-icons/lu";
 import { trpc } from "renderer/lib/trpc";
 import { useSetActiveWorkspace } from "renderer/react-query/workspaces";
+import { STROKE_WIDTH } from "../../../constants";
 
 interface BranchSwitcherProps {
 	projectId: string;
@@ -146,7 +147,10 @@ export function BranchSwitcher({
 				<div className="overflow-y-auto flex-1 py-1">
 					{isLoading ? (
 						<div className="flex items-center justify-center py-4">
-							<LuLoader className="size-4 animate-spin text-muted-foreground" />
+							<LuLoader
+								className="size-4 animate-spin text-muted-foreground"
+								strokeWidth={STROKE_WIDTH}
+							/>
 						</div>
 					) : filteredBranches.length === 0 ? (
 						<div className="text-center py-4 text-xs text-muted-foreground">
@@ -169,9 +173,15 @@ export function BranchSwitcher({
 										className="flex items-center gap-2 px-2 py-1.5"
 									>
 										{isInUse ? (
-											<LuGitFork className="size-3.5 shrink-0 text-amber-500" />
+											<LuGitFork
+												className="size-3.5 shrink-0 text-amber-500"
+												strokeWidth={STROKE_WIDTH}
+											/>
 										) : (
-											<LuGitBranch className="size-3.5 shrink-0 text-muted-foreground" />
+											<LuGitBranch
+												className="size-3.5 shrink-0 text-muted-foreground"
+												strokeWidth={STROKE_WIDTH}
+											/>
 										)}
 										<span className="flex-1 truncate text-xs">{branch}</span>
 										{isInUse && (

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/components/WorkspaceHoverCard/WorkspaceHoverCard.tsx

@@ -8,6 +8,7 @@ import {
 } from "react-icons/lu";
 import { trpc } from "renderer/lib/trpc";
 import { usePRStatus } from "renderer/screens/main/hooks";
+import { STROKE_WIDTH } from "../../../constants";
 import { ChecksList } from "./components/ChecksList";
 import { ChecksSummary } from "./components/ChecksSummary";
 import { PRStatusBadge } from "./components/PRStatusBadge";
@@ -60,7 +61,10 @@ export function WorkspaceHoverCardContent({
 								className={`flex items-center gap-1 font-mono break-all hover:underline ${hasCustomAlias ? "text-xs" : "text-sm"}`}
 							>
 								{worktreeName}
-								<LuExternalLink className="size-3 shrink-0" />
+								<LuExternalLink
+									className="size-3 shrink-0"
+									strokeWidth={STROKE_WIDTH}
+								/>
 							</a>
 						) : (
 							<code
@@ -81,15 +85,21 @@ export function WorkspaceHoverCardContent({
 			{/* Needs Rebase Warning */}
 			{needsRebase && (
 				<div className="flex items-center gap-2 text-amber-500 text-xs bg-amber-500/10 px-2 py-1.5 rounded-md">
-					<LuTriangleAlert className="size-3.5 shrink-0" />
+					<LuTriangleAlert
+						className="size-3.5 shrink-0"
+						strokeWidth={STROKE_WIDTH}
+					/>
 					<span>Behind main, needs rebase</span>
 				</div>
 			)}
 
 			{/* PR Section */}
 			{isLoadingGithub ? (
 				<div className="flex items-center gap-2 text-muted-foreground pt-2 border-t border-border">
-					<LuLoaderCircle className="size-3 animate-spin" />
+					<LuLoaderCircle
+						className="size-3 animate-spin"
+						strokeWidth={STROKE_WIDTH}
+					/>
 					<span className="text-xs">Loading PR...</span>
 				</div>
 			) : pr ? (

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/components/WorkspaceHoverCard/components/ChecksList/ChecksList.tsx

@@ -1,6 +1,7 @@
 import type { CheckItem } from "@superset/local-db";
 import { useState } from "react";
 import { LuChevronDown, LuChevronRight } from "react-icons/lu";
+import { STROKE_WIDTH } from "../../../../../constants";
 import { CheckItemRow } from "./components/CheckItemRow";
 
 interface ChecksListProps {
@@ -25,9 +26,9 @@ export function ChecksList({ checks }: ChecksListProps) {
 				className="flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors"
 			>
 				{expanded ? (
-					<LuChevronDown className="size-3" />
+					<LuChevronDown className="size-3" strokeWidth={STROKE_WIDTH} />
 				) : (
-					<LuChevronRight className="size-3" />
+					<LuChevronRight className="size-3" strokeWidth={STROKE_WIDTH} />
 				)}
 				<span>{expanded ? "Hide checks" : "Show checks"}</span>
 			</button>

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/components/WorkspaceHoverCard/components/ChecksList/components/CheckItemRow/CheckItemRow.tsx

@@ -1,5 +1,6 @@
 import type { CheckItem } from "@superset/local-db";
 import { LuCheck, LuLoaderCircle, LuMinus, LuX } from "react-icons/lu";
+import { STROKE_WIDTH } from "../../../../../../../constants";
 
 interface CheckItemRowProps {
 	check: CheckItem;
@@ -20,6 +21,7 @@ export function CheckItemRow({ check }: CheckItemRowProps) {
 		<span className="flex items-center gap-1.5 py-0.5">
 			<Icon
 				className={`size-3 shrink-0 ${className} ${check.status === "pending" ? "animate-spin" : ""}`}
+				strokeWidth={STROKE_WIDTH}
 			/>
 			<span className="truncate">{check.name}</span>
 		</span>

apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/WorkspaceListItem/components/WorkspaceHoverCard/components/ChecksSummary/ChecksSummary.tsx

@@ -1,5 +1,6 @@
 import type { CheckItem } from "@superset/local-db";
 import { LuCheck, LuLoaderCircle, LuX } from "react-icons/lu";
+import { STROKE_WIDTH } from "../../../../../constants";
 
 interface ChecksSummaryProps {
 	checks: CheckItem[];
@@ -36,6 +37,7 @@ export function ChecksSummary({ checks, status }: ChecksSummaryProps) {
 		<span className={`flex items-center gap-1 ${className}`}>
 			<Icon
 				className={`size-3 ${status === "pending" ? "animate-spin" : ""}`}
+				strokeWidth={STROKE_WIDTH}
 			/>
 			<span>{label}</span>
 		</span>