Added selected tool state

apps/web/components.json

@@ -15,3 +15,4 @@
     "utils": "@/utils/css"
   }
 }
+

apps/web/src/components/icon.tsx

@@ -1,8 +1,8 @@
 /* This is an icon aggregator where all icons from various libraries are imported. */
 import { Pen, Pencil, Moon, Sun } from "lucide-react";
 
-type IconType = "pen" | "pencil" | "moon" | "sun";
-type IconSize = "small" | "medium";
+export type IconType = "pen" | "pencil" | "moon" | "sun";
+export type IconSize = "small" | "medium";
 
 const renderLucideIcon = (
   icon: IconType,
@@ -28,6 +28,7 @@ export const Icon = (props: {
   type: IconType;
   size: IconSize;
   className?: string;
+  // onClick
 }) => {
   const { type, size, className } = props;
   return renderLucideIcon(type, size, className);

apps/web/src/components/iconButton.tsx

@@ -0,0 +1,24 @@
+import { cn } from "@/utils/css";
+import { IconType, IconSize, Icon } from "./icon";
+
+export const IconButton = (props: {
+  type: IconType;
+  size: IconSize;
+  onClick: () => void;
+  className?: string;
+  iconClassName?: string;
+}) => {
+  const { type, size, onClick, className, iconClassName } = props;
+  return (
+    <button
+      className={cn(
+        "hover:bg-accent rounded-md hover:text-accent-foreground p-1",
+        className
+      )}
+      onClick={onClick}
+    >
+      <Icon type={type} size={size} className={iconClassName} />
+    </button>
+  );
+};
+

apps/web/src/components/panels/selectToolPanel.tsx

@@ -1,16 +1,28 @@
 import { PanelHeader } from "./panelHeader";
-import { Icon } from "../icon";
 import { translations } from "@/translations";
+import { IconButton } from "../iconButton";
+import { useDrawingToolStore } from "@/store";
+import { DrawingToolType } from "@/drawing-tools";
+
+const tools: DrawingToolType[] = ["pen", "pencil"];
 
 export const SelectToolPanel = () => {
+  const { selectedTool, setSelectedTool } = useDrawingToolStore(
+    (state) => state
+  );
   return (
-    <div>
+    <div className="p-2 flex flex-col gap-2">
       <PanelHeader title={translations.tools} />
-      <div>
-        <Icon type="pen" size="medium" />
-        {/* <button>Pointer</button>
-        <button>Marquee</button>
-        <button>Lasso</button> */}
+      <div className="flex flex-wrap flex-row gap-1">
+        {tools.map((tool) => (
+          <IconButton
+            className={selectedTool === tool ? "bg-accent" : ""}
+            key={tool}
+            type={tool}
+            size="medium"
+            onClick={() => setSelectedTool(tool)}
+          />
+        ))}
       </div>
     </div>
   );

apps/web/src/drawing-tools/index.ts

@@ -0,0 +1,19 @@
+type PenTool = {
+  type: "pen";
+  settings: {
+    color: string;
+    size: number;
+  };
+};
+
+type PencilTool = {
+  type: "pencil";
+  settings: {
+    color: string;
+    size: number;
+  };
+};
+
+export type DrawingTool = PenTool | PencilTool;
+export type DrawingToolType = DrawingTool["type"];
+

apps/web/src/store/drawingToolStore.ts

@@ -0,0 +1,31 @@
+import { DrawingToolType } from "@/drawing-tools";
+import { create, type StateCreator } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+
+type AppDrawingToolState = {
+  selectedTool: DrawingToolType;
+};
+
+const defaultState: AppDrawingToolState = {
+  selectedTool: "pen",
+};
+
+type AppDrawingToolSlice = AppDrawingToolState & {
+  setSelectedTool: (type: DrawingToolType) => void;
+};
+
+export const settingsStoreCreator: StateCreator<AppDrawingToolSlice> = (
+  set
+) => ({
+  ...defaultState,
+  setSelectedTool: (type: DrawingToolType) => set({ selectedTool: type }),
+});
+
+export const useDrawingToolStore = create<AppDrawingToolSlice>()(
+  persist(settingsStoreCreator, {
+    version: 1,
+    name: "drawing-tool",
+    storage: createJSONStorage(() => sessionStorage),
+  })
+);
+

apps/web/src/store/index.ts

@@ -1,3 +1,5 @@
 export { useSettingsStore } from "./settingsStore";
 export { useSessionStore } from "./sessionStore";
+export { useDrawingToolStore } from "./drawingToolStore";
+export { useWorkspacesStore } from "./workspacesStore";