Fontsize PR for Issue #429 (#430)

* adding font size

* removing trash

* moving font menu

* chore: revert port change in compose

---------

Co-authored-by: Henry <henry_ball@hotmail.co.uk>

apps/web/src/providers/font-size.tsx

@@ -0,0 +1,57 @@
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+
+export type FontSize = "small" | "medium" | "large";
+
+const fontSizeMap: Record<FontSize, string> = {
+  small: "14px",
+  medium: "16px",
+  large: "18px",
+};
+
+interface FontSizeContextProps {
+  fontSize: FontSize;
+  setFontSize: (size: FontSize) => void;
+}
+
+const FontSizeContext = createContext<FontSizeContextProps | undefined>(
+  undefined,
+);
+
+export const FontSizeProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [fontSize, setFontSizeState] = useState<FontSize>("medium");
+
+  const setFontSize = (size: FontSize) => {
+    document.documentElement.style.fontSize = fontSizeMap[size];
+    localStorage.setItem("fontSize", size);
+    setFontSizeState(size);
+  };
+
+  useEffect(() => {
+    const stored = localStorage.getItem("fontSize") as FontSize | null;
+    const size = stored && fontSizeMap[stored] ? stored : "medium";
+    document.documentElement.style.fontSize = fontSizeMap[size];
+    setFontSizeState(size);
+  }, []);
+
+  return (
+    <FontSizeContext.Provider value={{ fontSize, setFontSize }}>
+      {children}
+    </FontSizeContext.Provider>
+  );
+};
+
+export const useFontSize = (): FontSizeContextProps => {
+  const context = useContext(FontSizeContext);
+  if (!context) {
+    throw new Error("useFontSize must be used within a FontSizeProvider");
+  }
+  return context;
+};