Add custom icon mechanism

apps/web/src/components/appContent.tsx

@@ -3,12 +3,13 @@ import {
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
+import { SelectToolPanel } from "./panels/selectToolPanel";
 
 const LeftContent = () => {
   return (
     <ResizablePanelGroup direction="vertical">
       <ResizablePanel>
-        <div className="p-2">Tools</div>
+        <SelectToolPanel />
       </ResizablePanel>
       <ResizableHandle />
       <ResizablePanel defaultSize={30}>

apps/web/src/components/icon.tsx

@@ -0,0 +1,35 @@
+/* This is icon aggregator, all icons from different libraries are imported here */
+import { Pen, Pencil, Moon, Sun } from "lucide-react";
+
+type IconType = "pen" | "pencil" | "moon" | "sun";
+type IconSize = "small" | "medium";
+
+const renderLucideIcon = (
+  icon: IconType,
+  size: IconSize,
+  className?: string
+) => {
+  const fontSize = size === "medium" ? 24 : 12;
+  switch (icon) {
+    case "pen":
+      return <Pen className={className} size={fontSize} />;
+    case "pencil":
+      return <Pencil className={className} size={fontSize} />;
+    case "moon":
+      return <Moon className={className} size={fontSize} />;
+    case "sun":
+      return <Sun className={className} size={fontSize} />;
+    default:
+      return null;
+  }
+};
+
+export const Icon = (props: {
+  type: IconType;
+  size: IconSize;
+  className?: string;
+}) => {
+  const { type, size, className } = props;
+  return renderLucideIcon(type, size, className);
+};
+

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

@@ -0,0 +1,9 @@
+export const PanelHeader = (props: { title: string }) => {
+  const { title } = props;
+  return (
+    <div>
+      <h2>{title}</h2>
+    </div>
+  );
+};
+

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

@@ -0,0 +1,17 @@
+import { PanelHeader } from "./panelHeader";
+import { Icon } from "../icon";
+
+export const SelectToolPanel = () => {
+  return (
+    <div>
+      <PanelHeader title="Select Tool" />
+      <div>
+        <Icon type="pen" size="medium" />
+        {/* <button>Pointer</button>
+        <button>Marquee</button>
+        <button>Lasso</button> */}
+      </div>
+    </div>
+  );
+};
+

apps/web/src/components/themeToggle.tsx

@@ -1,4 +1,3 @@
-import { Moon, Sun } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -7,16 +6,25 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useSettingsStore } from "@/store";
+import { Icon } from "./icon";
 
 export const ModeToggle = () => {
   const setTheme = useSettingsStore((state) => state.setTheme);
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+        <Button variant="ghost" size="sm">
+          <Icon
+            type="sun"
+            size="small"
+            className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+          />
+          <Icon
+            type="moon"
+            size="small"
+            className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+          />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>