feat: add red theme and board background modal

- Introduced a new red theme with custom color variables for a bold aesthetic.
- Updated the theme management to include the new red theme option.
- Added a BoardBackgroundModal component for managing board background settings, including image uploads and opacity controls.
- Enhanced KanbanCard and KanbanColumn components to support new background settings such as opacity and border visibility.
- Updated API client to handle saving and deleting board backgrounds.
- Refactored theme application logic to accommodate the new preview theme functionality.

apps/app/src/components/views/kanban-column.tsx

@@ -12,6 +12,9 @@ interface KanbanColumnProps {
   count: number;
   children: ReactNode;
   headerAction?: ReactNode;
+  opacity?: number; // Opacity percentage (0-100) - only affects background
+  showBorder?: boolean; // Whether to show column border
+  hideScrollbar?: boolean; // Whether to hide the column scrollbar
 }
 
 export const KanbanColumn = memo(function KanbanColumn({
@@ -21,6 +24,9 @@ export const KanbanColumn = memo(function KanbanColumn({
   count,
   children,
   headerAction,
+  opacity = 100,
+  showBorder = true,
+  hideScrollbar = false,
 }: KanbanColumnProps) {
   const { setNodeRef, isOver } = useDroppable({ id });
 
@@ -28,13 +34,27 @@ export const KanbanColumn = memo(function KanbanColumn({
     <div
       ref={setNodeRef}
       className={cn(
-        "flex flex-col h-full rounded-lg bg-card backdrop-blur-sm border border-border transition-colors w-72",
-        isOver && "bg-accent"
+        "relative flex flex-col h-full rounded-lg transition-colors w-72",
+        showBorder && "border border-border"
       )}
       data-testid={`kanban-column-${id}`}
     >
-      {/* Column Header */}
-      <div className="flex items-center gap-2 p-3 border-b border-border">
+      {/* Background layer with opacity - only this layer is affected by opacity */}
+      <div
+        className={cn(
+          "absolute inset-0 rounded-lg backdrop-blur-sm transition-colors",
+          isOver ? "bg-accent" : "bg-card"
+        )}
+        style={{ opacity: opacity / 100 }}
+      />
+
+      {/* Column Header - positioned above the background */}
+      <div
+        className={cn(
+          "relative z-10 flex items-center gap-2 p-3",
+          showBorder && "border-b border-border"
+        )}
+      >
         <div className={cn("w-3 h-3 rounded-full", color)} />
         <h3 className="font-medium text-sm flex-1">{title}</h3>
         {headerAction}
@@ -43,8 +63,14 @@ export const KanbanColumn = memo(function KanbanColumn({
         </span>
       </div>
 
-      {/* Column Content */}
-      <div className="flex-1 overflow-y-auto p-2 space-y-2">
+      {/* Column Content - positioned above the background */}
+      <div
+        className={cn(
+          "relative z-10 flex-1 overflow-y-auto p-2 space-y-2",
+          hideScrollbar &&
+            "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+        )}
+      >
         {children}
       </div>
     </div>