feat: add custom font styling to canvas text

frontend/src/components/editor/ToolBar.tsx

@@ -1,12 +1,16 @@
 import {
+  CircleHalfTiltIcon,
   ImageIcon,
   LockIcon,
+  PaintBucketIcon,
   QuestionIcon,
   StampIcon,
+  TextAUnderlineIcon,
   TrayIcon,
   VaultIcon,
 } from "@phosphor-icons/react";
 import { Modal } from "../ui/Modal";
+import type { CanvasStyle } from "./ComposeCanvas.tsx";
 
 interface ToolBarProps {
   fileInputRef: React.RefObject<HTMLInputElement | null>;
@@ -14,21 +18,39 @@ interface ToolBarProps {
   setSealBtnClicked: (v: boolean) => void;
   onSave: (status: "SEALED" | "DRAFT" | "VAULT", date?: Date) => Promise<void>;
   setConfirmModal: (v: "VAULT" | "SEAL" | null) => void;
+  onFontChange: (style: CanvasStyle) => void;
+  latestFontStyle: CanvasStyle;
 }
 
+const FONT_FAMILIES: Map<string, string> = new Map([
+  ["Serif", "Playfair Display Variable"],
+  ["Sans", "Jost Variable"],
+  ["Cursive", "Playwrite HR Lijeva Variable"],
+]);
+const FONT_COLORS: Map<string, string> = new Map([
+  ["Black", "#000"],
+  ["Gold", "#866a0e"],
+  ["Purple", "#711caf"],
+  ["Green", "#1f5b1f"],
+  ["Blue", "#111e67"],
+]);
+
 export function ToolBar({
   fileInputRef,
   sealBtnClicked,
   setSealBtnClicked,
   onSave,
   setConfirmModal,
+  onFontChange,
+  latestFontStyle,
 }: ToolBarProps) {
   return (
     <div
       id="writer-toolbar"
-      className="flex items-center justify-between mb-8 h-14 bg-base-100/50 backdrop-blur-md rounded-full border border-base-content/5 px-6"
+      className="relative z-10 flex items-center justify-between mb-8 h-14 bg-base-100/50 backdrop-blur-md rounded-full border border-base-content/5 px-6"
     >
       <div className="flex gap-4">
+        {/* Image upload */}
         <button
           type="button"
           className="btn btn-ghost btn-sm group"
@@ -39,8 +61,76 @@ export function ToolBar({
             Add Image
           </span>
         </button>
+        <div className="w-px h-4 bg-base-content/10 mx-2 my-auto hidden md:inline" />
+
+        {/* Font Family */}
+        <div className={"flex items-center gap-2 group"}>
+          <TextAUnderlineIcon
+            size={24}
+            weight="bold"
+            className={"hidden md:inline"}
+          />
+          <select
+            className="select select-sm"
+            onChange={(e) => {
+              onFontChange({ ...latestFontStyle, fontFamily: e.target.value });
+            }}
+            value={latestFontStyle.fontFamily}
+          >
+            {Array.from(FONT_FAMILIES.entries()).map(
+              ([fontFamily, fontName]) => {
+                return (
+                  <option key={fontName} value={fontName}>
+                    {fontFamily}
+                  </option>
+                );
+              },
+            )}
+          </select>
+        </div>
+        <div className="w-px h-4 bg-base-content/10 mx-2 my-auto hidden md:inline" />
+
+        {/* Font Color */}
+        <div className="dropdown dropdown-bottom flex items-center gap-2 group">
+          <PaintBucketIcon
+            size={16}
+            weight="bold"
+            className={"hidden md:flex"}
+          />
+          <button
+            className="btn btn-ghost btn-sm px-2 gap-2 flex items-center"
+            type={"button"}
+          >
+            <CircleHalfTiltIcon
+              size={18}
+              style={{ color: latestFontStyle.fontColor }}
+              weight="duotone"
+            />
+          </button>
+          <ul className="dropdown-content z-50 menu p-2 shadow bg-base-200/95 rounded-full md:ml-4">
+            {Array.from(FONT_COLORS.entries()).map(([_, colorCode]) => (
+              <li key={colorCode}>
+                <button
+                  type="button"
+                  className={`${latestFontStyle.fontColor === colorCode ? "active" : ""}`}
+                  onClick={() => {
+                    onFontChange({ ...latestFontStyle, fontColor: colorCode });
+                    (document.activeElement as HTMLButtonElement)?.blur();
+                  }}
+                >
+                  <CircleHalfTiltIcon
+                    size={18}
+                    style={{ color: colorCode }}
+                    weight="fill"
+                  />
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
       </div>
 
+      {/* Draft */}
       <div className="flex items-center gap-2">
         <button
           type="button"
@@ -54,8 +144,9 @@ export function ToolBar({
           </span>
         </button>
 
-        <div className="w-px h-4 bg-base-content/10 mx-2" />
+        <div className="w-px h-4 bg-base-content/10 mx-2 hidden md:inline" />
 
+        {/*Seal */}
         <button
           type="button"
           className={`btn btn-primary btn-sm rounded-full px-6 group ${sealBtnClicked ? "invisible" : "visible"}`}
@@ -101,6 +192,7 @@ export function ToolBar({
           <span className="transition-all duration-1000">Vault</span>
         </button>
       </div>
+
       <button
         type="button"
         aria-label="Help"