♻️ refactor!: massive refactor

apps/web/components/canvas-size-modal.tsx

@@ -15,12 +15,48 @@ interface CanvasSizeModalProps {
 }
 
 const PRESETS = [
-  { labelKey: "editor.presetSquare", sublabel: "1080 × 1080", aspect: "1:1" as AspectRatio, width: 1080, height: 1080 },
-  { labelKey: "editor.presetPortrait45", sublabel: "1080 × 1350", aspect: "4:5" as AspectRatio, width: 1080, height: 1350 },
-  { labelKey: "editor.presetStory916", sublabel: "1080 × 1920", aspect: "9:16" as AspectRatio, width: 1080, height: 1920 },
-  { labelKey: "editor.presetWidescreen", sublabel: "1920 × 1080", aspect: "16:9" as AspectRatio, width: 1920, height: 1080 },
-  { labelKey: "editor.presetPhoto43", sublabel: "1440 × 1080", aspect: "4:3" as AspectRatio, width: 1440, height: 1080 },
-  { labelKey: "editor.presetClassic32", sublabel: "1620 × 1080", aspect: "3:2" as AspectRatio, width: 1620, height: 1080 },
+  {
+    labelKey: "editor.presetSquare",
+    sublabel: "1080 × 1080",
+    aspect: "1:1" as AspectRatio,
+    width: 1080,
+    height: 1080,
+  },
+  {
+    labelKey: "editor.presetPortrait45",
+    sublabel: "1080 × 1350",
+    aspect: "4:5" as AspectRatio,
+    width: 1080,
+    height: 1350,
+  },
+  {
+    labelKey: "editor.presetStory916",
+    sublabel: "1080 × 1920",
+    aspect: "9:16" as AspectRatio,
+    width: 1080,
+    height: 1920,
+  },
+  {
+    labelKey: "editor.presetWidescreen",
+    sublabel: "1920 × 1080",
+    aspect: "16:9" as AspectRatio,
+    width: 1920,
+    height: 1080,
+  },
+  {
+    labelKey: "editor.presetPhoto43",
+    sublabel: "1440 × 1080",
+    aspect: "4:3" as AspectRatio,
+    width: 1440,
+    height: 1080,
+  },
+  {
+    labelKey: "editor.presetClassic32",
+    sublabel: "1620 × 1080",
+    aspect: "3:2" as AspectRatio,
+    width: 1620,
+    height: 1080,
+  },
 ];
 
 export function CanvasSizeModal({
@@ -37,8 +73,11 @@ export function CanvasSizeModal({
     PRESETS.some((p) => p.aspect === currentAspect) ? "preset" : "custom",
   );
   const [customWidth, setCustomWidth] = React.useState(currentWidth.toString());
-  const [customHeight, setCustomHeight] = React.useState(currentHeight.toString());
-  const [selectedPreset, setSelectedPreset] = React.useState<AspectRatio>(currentAspect);
+  const [customHeight, setCustomHeight] = React.useState(
+    currentHeight.toString(),
+  );
+  const [selectedPreset, setSelectedPreset] =
+    React.useState<AspectRatio>(currentAspect);
 
   if (!isOpen) return null;
 
@@ -56,7 +95,8 @@ export function CanvasSizeModal({
     onClose();
   }
 
-  const overlay = "fixed inset-0 z-50 flex items-center justify-center bg-black/40";
+  const overlay =
+    "fixed inset-0 z-50 flex items-center justify-center bg-black/40";
   const panel = `w-full max-w-sm rounded-2xl border p-5 shadow-2xl ${
     isDark ? "border-white/15 bg-[#2b2d31]" : "border-black/15 bg-white"
   }`;
@@ -65,7 +105,9 @@ export function CanvasSizeModal({
     <div className={overlay} onClick={onClose}>
       <div className={panel} onClick={(e) => e.stopPropagation()}>
         <div className="mb-4 flex items-center justify-between">
-          <h2 className={`text-base font-semibold ${isDark ? "text-[#f5f7fa]" : "text-[#1f2430]"}`}>
+          <h2
+            className={`text-base font-semibold ${isDark ? "text-[#f5f7fa]" : "text-[#1f2430]"}`}
+          >
             {t("editor.canvasSizeTitle")}
           </h2>
           <button
@@ -109,7 +151,9 @@ export function CanvasSizeModal({
                 }`}
               >
                 <div className="text-xs font-semibold">{t(p.labelKey)}</div>
-                <div className={`text-[10px] ${selectedPreset === p.aspect ? "text-white/70" : isDark ? "text-[#aeb3bc]" : "text-[#6c7382]"}`}>
+                <div
+                  className={`text-[10px] ${selectedPreset === p.aspect ? "text-white/70" : isDark ? "text-[#aeb3bc]" : "text-[#6c7382]"}`}
+                >
                   {p.sublabel}
                 </div>
               </button>
@@ -118,33 +162,55 @@ export function CanvasSizeModal({
         ) : (
           <div className="space-y-3">
             <div className="flex items-center gap-2">
-              <label className={`w-16 text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}>{t("editor.widthShort")}</label>
+              <label
+                className={`w-16 text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}
+              >
+                {t("editor.widthShort")}
+              </label>
               <input
                 type="number"
                 value={customWidth}
                 onChange={(e) => setCustomWidth(e.target.value)}
                 min={1}
                 className={`flex-1 rounded border px-2 py-1.5 text-sm ${
-                  isDark ? "border-white/20 bg-[#25272b] text-[#e8eaed]" : "border-black/20 bg-[#f6f8fb] text-[#1f2430]"
+                  isDark
+                    ? "border-white/20 bg-[#25272b] text-[#e8eaed]"
+                    : "border-black/20 bg-[#f6f8fb] text-[#1f2430]"
                 }`}
               />
-              <span className={`text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}>px</span>
+              <span
+                className={`text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}
+              >
+                px
+              </span>
             </div>
             <div className="flex items-center gap-2">
-              <label className={`w-16 text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}>{t("editor.heightShort")}</label>
+              <label
+                className={`w-16 text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}
+              >
+                {t("editor.heightShort")}
+              </label>
               <input
                 type="number"
                 value={customHeight}
                 onChange={(e) => setCustomHeight(e.target.value)}
                 min={1}
                 className={`flex-1 rounded border px-2 py-1.5 text-sm ${
-                  isDark ? "border-white/20 bg-[#25272b] text-[#e8eaed]" : "border-black/20 bg-[#f6f8fb] text-[#1f2430]"
+                  isDark
+                    ? "border-white/20 bg-[#25272b] text-[#e8eaed]"
+                    : "border-black/20 bg-[#f6f8fb] text-[#1f2430]"
                 }`}
               />
-              <span className={`text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}>px</span>
+              <span
+                className={`text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}
+              >
+                px
+              </span>
             </div>
             <div className="rounded border border-dashed border-black/20 p-2 text-center">
-              <span className={`text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}>
+              <span
+                className={`text-xs ${isDark ? "text-[#aeb3bc]" : "text-[#5f6672]"}`}
+              >
                 {parseInt(customWidth) || 0} × {parseInt(customHeight) || 0} px
               </span>
             </div>
@@ -155,7 +221,9 @@ export function CanvasSizeModal({
           <button
             onClick={onClose}
             className={`rounded border px-3 py-1.5 text-xs font-medium ${
-              isDark ? "border-white/20 text-[#d7dae0]" : "border-black/20 text-[#1f2430]"
+              isDark
+                ? "border-white/20 text-[#d7dae0]"
+                : "border-black/20 text-[#1f2430]"
             }`}
           >
             {t("editor.cancel")}