fix: enable removing background color in text back to transparent and remember last selection (#510)

apps/web/src/components/editor/properties-panel/text-properties.tsx

@@ -6,7 +6,8 @@ import { useTimelineStore } from "@/stores/timeline-store";
 import { Slider } from "@/components/ui/slider";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
-import { useState } from "react";
+import { Switch } from "@/components/ui/switch"; // Add Switch import
+import { useState, useRef } from "react";
 import {
   PropertyItem,
   PropertyItemLabel,
@@ -30,6 +31,9 @@ export function TextProperties({
     Math.round(element.opacity * 100).toString()
   );
 
+  // Track the last selected color for toggling
+  const lastSelectedColor = useRef("#000000");
+
   const parseAndValidateNumber = (
     value: string,
     min: number,
@@ -86,6 +90,20 @@ export function TextProperties({
     updateTextElement(trackId, element.id, { opacity: opacityPercent / 100 });
   };
 
+  // Update last selected color when a new color is picked
+  const handleColorChange = (color: string) => {
+    if (color !== "transparent") {
+      lastSelectedColor.current = color;
+    }
+    updateTextElement(trackId, element.id, { backgroundColor: color });
+  };
+
+  // Toggle between transparent and last selected color
+  const handleTransparentToggle = (isTransparent: boolean) => {
+    const newColor = isTransparent ? "transparent" : lastSelectedColor.current;
+    updateTextElement(trackId, element.id, { backgroundColor: newColor });
+  };
+
   return (
     <div className="space-y-6 p-5">
       <Textarea
@@ -220,21 +238,31 @@ export function TextProperties({
           />
         </PropertyItemValue>
       </PropertyItem>
-      <PropertyItem direction="row">
-        <PropertyItemLabel>Background</PropertyItemLabel>
+      <PropertyItem direction="column">
+        <div className="flex items-center justify-between">
+          <PropertyItemLabel>Background</PropertyItemLabel>
+          <div className="flex items-center space-x-2">
+            <Switch
+              id="transparent-bg-toggle"
+              checked={element.backgroundColor === "transparent"}
+              onCheckedChange={handleTransparentToggle}
+            />
+            <label htmlFor="transparent-bg-toggle" className="text-sm font-medium">
+              Transparent
+            </label>
+          </div>
+        </div>
         <PropertyItemValue>
           <Input
             type="color"
             value={
               element.backgroundColor === "transparent"
-                ? "#000000"
+                ? lastSelectedColor.current
                 : element.backgroundColor || "#000000"
             }
-            onChange={(e) => {
-              const backgroundColor = e.target.value;
-              updateTextElement(trackId, element.id, { backgroundColor });
-            }}
+            onChange={(e) => handleColorChange(e.target.value)}
             className="w-full cursor-pointer rounded-full"
+            disabled={element.backgroundColor === "transparent"}
           />
         </PropertyItemValue>
       </PropertyItem>