Adding workspaces

apps/web/package.json

@@ -15,6 +15,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-menubar": "^1.0.4",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-slot": "^1.0.2",
     "@tauri-apps/api": "^1",
     "class-variance-authority": "^0.7.0",

apps/web/src/App.tsx

@@ -6,7 +6,7 @@ import { useSyncTheme } from "./hooks/useSyncTheme";
 export const App = () => {
   useSyncTheme();
   return (
-    <div className="w-full h-full flex flex-col">
+    <div className="w-full h-full flex flex-col select-none">
       <AppHeaderBar></AppHeaderBar>
       <AppContent></AppContent>
       <AppStatusBar></AppStatusBar>

apps/web/src/components/appHeaderBar.tsx

@@ -1,10 +1,57 @@
 import { ModeToggle } from "./themeToggle";
 import { MenuBar } from "./menu-bar/menuBar";
+import { ScrollArea, ScrollBar } from "./ui/scroll-area";
+import { IconButton } from "./iconButton";
+import { Button } from "./ui/button";
+import { cn } from "@/utils/css";
+import { useWorkspacesStore } from "@/store";
+
+const WorkspaceTab = (props: {
+  index: number;
+  name: string;
+  isSelected: boolean;
+}) => {
+  const { index, name, isSelected } = props;
+  const selectWorkspace = useWorkspacesStore((state) => state.selectWorkspace);
+
+  return (
+    <Button
+      className={cn(
+        "border-b-4 h-full text-sm hover:text-primary py-[6px] rounded-none",
+        isSelected ? "border-primary" : "border-transparent"
+      )}
+      variant="ghost"
+      size="sm"
+      onClick={() => selectWorkspace(index)}
+    >
+      {name}
+    </Button>
+  );
+};
 
 export const AppHeaderBar = () => {
+  const { workspaces, selectedWorkspaceIndex, addWorkspace } =
+    useWorkspacesStore((state) => state);
+
   return (
-    <div className="border-b flex flex-row justify-between items-center px-2">
+    <div className="border-b flex flex-row justify-between items-center px-small gap-big">
       <MenuBar />
+      <div className="flex-1 flex flex-row justify-center overflow-auto">
+        <ScrollArea className="whitespace-nowrap">
+          <div className="h-full flex-row flex items-center">
+            {workspaces.map((tab, index) => (
+              <WorkspaceTab
+                key={tab.id}
+                index={index}
+                name={tab.name}
+                isSelected={index === selectedWorkspaceIndex}
+              />
+            ))}
+          </div>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+        <IconButton type="plus" size="medium" onClick={addWorkspace} />
+      </div>
       <ModeToggle />
     </div>
   );

apps/web/src/components/icon.tsx

@@ -1,7 +1,7 @@
 /* This is an icon aggregator where all icons from various libraries are imported. */
-import { Pen, Pencil, Moon, Sun } from "lucide-react";
+import { Pen, Pencil, Moon, Sun, Plus } from "lucide-react";
 
-export type IconType = "pen" | "pencil" | "moon" | "sun";
+export type IconType = "pen" | "pencil" | "moon" | "sun" | "plus";
 export type IconSize = "small" | "medium";
 
 const renderLucideIcon = (
@@ -19,6 +19,8 @@ const renderLucideIcon = (
       return <Moon className={className} size={fontSize} />;
     case "sun":
       return <Sun className={className} size={fontSize} />;
+    case "plus":
+      return <Plus className={className} size={fontSize} />;
     default:
       return null;
   }

apps/web/src/components/ui/scroll-area.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/utils/css"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

apps/web/src/store/workspacesStore.ts

@@ -1,6 +1,8 @@
+import { uuid } from "@/utils/uuid";
 import { create, type StateCreator } from "zustand";
 
 type Workspace = {
+  id: string;
   name: string;
   filePath: string | null;
   isSaved: boolean;
@@ -14,6 +16,7 @@ type AppWorkspacesState = {
 const defaultState: AppWorkspacesState = {
   workspaces: [
     {
+      id: uuid(),
       name: "Untitled",
       filePath: null,
       isSaved: false,
@@ -24,13 +27,28 @@ const defaultState: AppWorkspacesState = {
 
 type AppWorkspacesSlice = AppWorkspacesState & {
   selectWorkspace: (index: number) => void;
+  addWorkspace: () => void;
 };
 
 export const settingsStoreCreator: StateCreator<AppWorkspacesSlice> = (
-  set
+  set,
+  get
 ) => ({
   ...defaultState,
   selectWorkspace: (index) => set({ selectedWorkspaceIndex: index }),
+  addWorkspace: () =>
+    set((state) => ({
+      workspaces: [
+        ...state.workspaces,
+        {
+          id: uuid(),
+          name: `Workspace ${get().workspaces.length + 1}`,
+          filePath: null,
+          isSaved: false,
+        },
+      ],
+      selectedWorkspaceIndex: state.workspaces.length,
+    })),
 });
 
 export const useWorkspacesStore =

apps/web/src/utils/uuid.ts

@@ -0,0 +1,2 @@
+export const uuid = () => crypto.randomUUID();
+

apps/web/tailwind.config.js

@@ -4,7 +4,7 @@ const space = {
   ["very-small"]: "0.125rem",
   small: "0.25rem",
   medium: "0.5rem",
-  huge: "1rem",
+  big: "1rem",
 };