Top bar

apps/desktop/src/lib/trpc/routers/workspaces/workspaces.ts

@@ -208,6 +208,43 @@ export const createWorkspacesRouter = () => {
 			return workspace;
 		}),
 
+		getActiveWithDetails: publicProcedure.query(() => {
+			const { lastActiveWorkspaceId } = db.data.settings;
+
+			if (!lastActiveWorkspaceId) {
+				return null;
+			}
+
+			const workspace = db.data.workspaces.find(
+				(w) => w.id === lastActiveWorkspaceId,
+			);
+			if (!workspace) {
+				throw new Error(
+					`Active workspace ${lastActiveWorkspaceId} not found in database`,
+				);
+			}
+
+			const worktree = db.data.worktrees.find(
+				(wt) => wt.id === workspace.worktreeId,
+			);
+			const project = db.data.projects.find(
+				(p) => p.id === workspace.projectId,
+			);
+
+			return {
+				workspace,
+				worktree: worktree ?? null,
+				project: project
+					? {
+							id: project.id,
+							name: project.name,
+							color: project.color,
+							mainRepoPath: project.mainRepoPath,
+						}
+					: null,
+			};
+		}),
+
 		update: publicProcedure
 			.input(
 				z.object({

apps/desktop/src/renderer/screens/main/components/WorkspaceView/WorkspaceTopBar/WorkspaceTopBar.tsx

@@ -0,0 +1,42 @@
+import { HiMiniFolderOpen, HiMiniCodeBracketSquare } from "react-icons/hi2";
+import { trpc } from "renderer/lib/trpc";
+
+export function WorkspaceTopBar() {
+	const { data } = trpc.workspaces.getActiveWithDetails.useQuery();
+
+	if (!data) {
+		return null;
+	}
+
+	const { worktree, project } = data;
+
+	const displayPath = worktree?.path ?? "No path";
+	const displayBranch = worktree?.branch ?? "No branch";
+
+	return (
+		<div className="flex items-center gap-4 px-3 py-2 text-sm text-muted-foreground">
+			<div className="flex items-center gap-2 min-w-0">
+				<HiMiniFolderOpen className="size-4 shrink-0" />
+				<span className="truncate" title={displayPath}>
+					{displayPath}
+				</span>
+			</div>
+			<div className="flex items-center gap-2">
+				<HiMiniCodeBracketSquare className="size-4 shrink-0" />
+				<span title={displayBranch}>{displayBranch}</span>
+			</div>
+			{project && (
+				<div
+					className="ml-auto flex items-center gap-2 shrink-0"
+					title={`Project: ${project.name}`}
+				>
+					<div
+						className="size-2 rounded-full"
+						style={{ backgroundColor: project.color }}
+					/>
+					<span>{project.name}</span>
+				</div>
+			)}
+		</div>
+	);
+}

apps/desktop/src/renderer/screens/main/components/WorkspaceView/WorkspaceTopBar/index.ts

@@ -0,0 +1 @@
+export { WorkspaceTopBar } from "./WorkspaceTopBar";

apps/desktop/src/renderer/screens/main/components/WorkspaceView/index.tsx

@@ -10,6 +10,7 @@ import {
 } from "renderer/stores";
 import { ContentView } from "./ContentView";
 import { Sidebar } from "./Sidebar";
+import { WorkspaceTopBar } from "./WorkspaceTopBar";
 
 export function WorkspaceView() {
 	const { data: activeWorkspace } = trpc.workspaces.getActive.useQuery();
@@ -78,10 +79,13 @@ export function WorkspaceView() {
 	);
 
 	return (
-		<div className="flex flex-1 bg-tertiary">
-			<Sidebar />
-			<div className="flex-1 m-3 bg-background rounded p-2">
-				<ContentView />
+		<div className="flex flex-col flex-1 bg-tertiary">
+			<WorkspaceTopBar />
+			<div className="flex flex-1 min-h-0">
+				<Sidebar />
+				<div className="flex-1 m-3 mt-0 bg-background rounded p-2">
+					<ContentView />
+				</div>
 			</div>
 		</div>
 	);