feat: remove start.sh script and add appearance preferences management

- Deleted the start.sh script for container management.
- Added AGENTS.md for project guidelines and development principles.
- Introduced new SQL migration files for user appearance preferences and platform settings.
- Implemented appearance provider to manage user interface themes and preferences.
- Created branding utility to define and manage branding-related constants and types.

Co-authored-by: Copilot <copilot@github.com>

src/components/layout/floating-action-bar.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { cn } from "~/lib/utils";
 import { Card, CardContent } from "~/components/ui/card";
+import { useAppearance } from "~/components/providers/appearance-provider";
+import { useSidebar } from "~/components/layout/sidebar-provider";
 
 interface FloatingActionBarProps {
   /** Content to display on the left side */
@@ -13,74 +15,38 @@ interface FloatingActionBarProps {
   className?: string;
 }
 
-import { useSidebar } from "~/components/layout/sidebar-provider";
-
 export function FloatingActionBar({
   leftContent,
   children,
   className,
 }: FloatingActionBarProps) {
-  const [isDocked, setIsDocked] = useState(false);
   const { isCollapsed } = useSidebar();
-
-  useEffect(() => {
-    const handleScroll = () => {
-      // Check if we're truly at the bottom of the page
-      const scrollHeight = document.documentElement.scrollHeight;
-      const scrollTop = document.documentElement.scrollTop;
-      const clientHeight = document.documentElement.clientHeight;
-      const distanceFromBottom = scrollHeight - (scrollTop + clientHeight);
-
-      // Only dock when we're within 50px of the actual bottom AND there's content to scroll
-      const hasScrollableContent = scrollHeight > clientHeight;
-      const shouldDock = hasScrollableContent && distanceFromBottom <= 50;
-
-      // If content is too small, keep it at bottom of viewport
-      const contentTooSmall = scrollHeight <= clientHeight + 200;
-
-      setIsDocked(shouldDock && !contentTooSmall);
-    };
-
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    handleScroll(); // Check initial state
-
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
+  const { sidebarStyle } = useAppearance();
 
   return (
     <div
       className={cn(
-        // Base positioning - always at bottom
-        "fixed right-0 z-50 transition-all duration-300 ease-in-out",
-        // Safe area and sidebar adjustments
-        "pb-safe-area-inset-bottom left-0",
-        isCollapsed ? "md:left-24" : "md:left-[18rem]",
-        // Conditional centering based on dock state
-        isDocked ? "flex justify-center" : "",
-        // Dynamic bottom positioning
-        isDocked ? "bottom-4" : "bottom-0",
-        // Add entrance animation
+        "pb-safe-area-inset-bottom fixed right-0 bottom-4 left-0 z-50 transition-all duration-300 ease-in-out",
+        sidebarStyle === "floating"
+          ? isCollapsed
+            ? "md:left-24"
+            : "md:left-[18rem]"
+          : isCollapsed
+            ? "md:left-16"
+            : "md:left-64",
         "animate-slide-in-bottom",
         className,
       )}
     >
-      {/* Content container - full width when floating, content width when docked */}
-      <div
-        className={cn(
-          "w-full transition-transform duration-300",
-          isDocked ? "mx-auto mb-0 px-4" : "mb-4 px-4",
-        )}
-      >
+      <div className="w-full px-4 transition-transform duration-300">
         <Card className="hover-lift bg-card border-border border shadow-lg">
           <CardContent className="flex flex-col gap-3 p-3 sm:flex-row sm:items-center sm:justify-between sm:p-4">
-            {/* Left content */}
             {leftContent && (
               <div className="text-card-foreground animate-fade-in flex flex-1 items-center gap-3">
                 {leftContent}
               </div>
             )}
 
-            {/* Right actions */}
             <div className="animate-fade-in animate-delay-100 flex items-center gap-2 sm:gap-3">
               {children}
             </div>