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/forms/invoice-form.tsx

@@ -20,6 +20,7 @@ import { NumberInput } from "~/components/ui/number-input";
 import { PageHeader } from "~/components/layout/page-header";
 import { InvoiceLineItems } from "./invoice-line-items";
 import { InvoiceCalendarView } from "./invoice-calendar-view";
+import { EmailPreview } from "./email-preview";
 import { api } from "~/trpc/react";
 import { toast } from "sonner";
 import {
@@ -30,6 +31,7 @@ import {
   List,
   FileText,
   ChevronDown,
+  Mail,
 } from "lucide-react";
 import { SUPPORTED_CURRENCIES } from "~/lib/currency";
 import { Textarea } from "~/components/ui/textarea";
@@ -58,7 +60,7 @@ interface InvoiceFormProps {
 
 function InvoiceFormSkeleton() {
   return (
-    <div className="space-y-6 pb-32">
+    <div className="space-y-6 pb-8">
       <PageHeader
         title="Loading..."
         description="Loading invoice form"
@@ -199,6 +201,16 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
     const total = subtotal + taxAmount;
     return { subtotal, taxAmount, total };
   }, [formData.items, formData.taxRate]);
+  const selectedClient = React.useMemo(
+    () => clients?.find((client) => client.id === formData.clientId),
+    [clients, formData.clientId],
+  );
+  const selectedBusiness = React.useMemo(
+    () =>
+      businesses?.find((business) => business.id === formData.businessId) ??
+      businesses?.find((business) => business.isDefault),
+    [businesses, formData.businessId],
+  );
 
   // Handlers (addItem, updateItem etc. - same as before)
   const addItem = (date?: unknown) => {
@@ -370,7 +382,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
 
   return (
     <>
-      <div className="page-enter space-y-6 pb-32">
+      <div className="page-enter space-y-6 pb-8">
         <PageHeader
           title={invoiceId !== "new" ? "Edit Invoice" : "Create Invoice"}
           description="Manage your invoice"
@@ -393,7 +405,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
 
         <Tabs value={activeTab} className="w-full" onValueChange={setActiveTab}>
           {/* TAB SELECTOR: w-full, p-1, visible background */}
-          <TabsList className="bg-muted grid h-auto w-full grid-cols-3 rounded-xl p-1">
+          <TabsList className="bg-muted grid h-auto w-full grid-cols-4 rounded-xl p-1">
             <TabsTrigger
               value="details"
               className="data-[state=active]:bg-background rounded-lg py-2.5 data-[state=active]:shadow-sm"
@@ -412,6 +424,12 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
             >
               Timesheet
             </TabsTrigger>
+            <TabsTrigger
+              value="preview"
+              className="data-[state=active]:bg-background rounded-lg py-2.5 data-[state=active]:shadow-sm"
+            >
+              Preview
+            </TabsTrigger>
           </TabsList>
 
           {/* DETAILS TAB */}
@@ -419,7 +437,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
             value="details"
             className="mt-6 grid grid-cols-1 gap-6 focus-visible:outline-none lg:grid-cols-2"
           >
-            <Card className="h-fit">
+            <Card className="h-full">
               <CardHeader>
                 <CardTitle className="flex gap-2 text-base">
                   <User className="h-4 w-4" /> Client Details
@@ -495,10 +513,10 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
               </CardContent>
             </Card>
 
-            <Card className="h-fit">
+            <Card className="h-full">
               <CardHeader>
                 <CardTitle className="flex gap-2 text-base">
-                  <Tag className="h-4 w-4" /> Invoice Config
+                  <Tag className="h-4 w-4" /> Invoice Settings
                 </CardTitle>
               </CardHeader>
               <CardContent className="space-y-4">
@@ -524,7 +542,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
                     />
                   </div>
                 </div>
-                <div className="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:gap-4">
+                <div className="grid grid-cols-1 gap-3 sm:grid-cols-[96px_1fr] sm:gap-4">
                   <div className="space-y-2">
                     <Label>Prefix</Label>
                     <Input
@@ -536,6 +554,17 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
                       className="w-full"
                     />
                   </div>
+                  <div className="space-y-2">
+                    <Label>Invoice Number</Label>
+                    <Input
+                      value={formData.invoiceNumber}
+                      onChange={(e) =>
+                        updateField("invoiceNumber", e.target.value)
+                      }
+                      placeholder="INV-20260428-000001"
+                      className="w-full font-mono"
+                    />
+                  </div>
                 </div>
                 <div className="grid grid-cols-2 gap-4">
                   <div className="space-y-2">
@@ -717,6 +746,54 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
               </CardContent>
             </Card>
           </TabsContent>
+
+          <TabsContent
+            value="preview"
+            className="mt-6 focus-visible:outline-none"
+          >
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex gap-2">
+                  <Mail className="h-5 w-5" /> Email Preview
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <EmailPreview
+                  subject={`Invoice ${formData.invoiceNumber} from ${
+                    selectedBusiness?.name ?? "Your Business"
+                  }`}
+                  fromEmail={selectedBusiness?.email ?? ""}
+                  toEmail={selectedClient?.email ?? ""}
+                  content=""
+                  invoice={{
+                    invoiceNumber: formData.invoiceNumber,
+                    issueDate: formData.issueDate,
+                    dueDate: formData.dueDate,
+                    taxRate: formData.taxRate,
+                    status: formData.status,
+                    totalAmount: totals.total,
+                    client: selectedClient
+                      ? {
+                          name: selectedClient.name,
+                          email: selectedClient.email,
+                        }
+                      : undefined,
+                    business: selectedBusiness
+                      ? {
+                          name: selectedBusiness.name,
+                          email: selectedBusiness.email,
+                        }
+                      : undefined,
+                    items: formData.items.map((item) => ({
+                      id: item.id,
+                      hours: item.hours,
+                      rate: item.rate,
+                    })),
+                  }}
+                />
+              </CardContent>
+            </Card>
+          </TabsContent>
         </Tabs>
       </div>
 

src/components/forms/invoice-line-items.tsx

@@ -49,79 +49,59 @@ const LineItemCard = React.forwardRef<HTMLDivElement, LineItemRowProps>(
       <div
         ref={ref}
         className={cn(
-          "bg-card group hover:border-primary/20 hidden rounded-xl border p-4 shadow-sm transition-all md:block",
+          "group hover:bg-muted/40 hidden min-h-16 grid-cols-[140px_minmax(200px,1fr)_124px_136px_104px_32px] items-center gap-2 border-b px-3 py-2 transition-colors md:grid",
         )}
       >
-        <div className="flex items-center gap-3">
-          {/* Main Content */}
-          <div className="flex-1 space-y-3">
-            {/* Description */}
-            <div>
-              <Input
-                value={item.description}
-                onChange={(e) => onUpdate(index, "description", e.target.value)}
-                placeholder="Describe the work performed..."
-                className="w-full text-sm font-medium"
-              />
-            </div>
+        <DatePicker
+          date={item.date}
+          onDateChange={(date) => onUpdate(index, "date", date ?? new Date())}
+          size="sm"
+          className="w-full"
+          inputClassName="h-9"
+        />
 
-            {/* Controls Row */}
-            <div className="flex flex-wrap items-center gap-3">
-              {/* Date */}
-              <DatePicker
-                date={item.date}
-                onDateChange={(date) =>
-                  onUpdate(index, "date", date ?? new Date())
-                }
-                size="sm"
-                className="w-full sm:w-[180px]"
-                inputClassName="h-9"
-              />
+        <Input
+          value={item.description}
+          onChange={(e) => onUpdate(index, "description", e.target.value)}
+          placeholder="Describe the work performed..."
+          className="h-9 w-full text-sm font-medium"
+        />
 
-              {/* Hours */}
-              <NumberInput
-                value={item.hours}
-                onChange={(value) => onUpdate(index, "hours", value)}
-                min={0}
-                step={0.25}
-                width="auto"
-                className="h-9 min-w-[100px] flex-1 font-mono"
-                suffix="h"
-              />
+        <NumberInput
+          value={item.hours}
+          onChange={(value) => onUpdate(index, "hours", value)}
+          min={0}
+          step={0.25}
+          width="full"
+          className="h-9 font-mono [&_button]:w-6 [&_input]:min-w-12"
+          suffix="h"
+        />
 
-              {/* Rate */}
-              <NumberInput
-                value={item.rate}
-                onChange={(value) => onUpdate(index, "rate", value)}
-                min={0}
-                step={1}
-                prefix="$"
-                width="auto"
-                className="h-9 min-w-[100px] flex-1 font-mono"
-              />
+        <NumberInput
+          value={item.rate}
+          onChange={(value) => onUpdate(index, "rate", value)}
+          min={0}
+          step={1}
+          prefix="$"
+          width="full"
+          className="h-9 font-mono [&_button]:w-6 [&_input]:min-w-14"
+        />
 
-              {/* Amount */}
-              <div className="ml-auto">
-                <span className="text-primary font-semibold">
-                  ${(item.hours * item.rate).toFixed(2)}
-                </span>
-              </div>
-
-              {/* Actions */}
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={() => onRemove(index)}
-                className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
-                disabled={!canRemove}
-                aria-label="Remove item"
-              >
-                <Trash2 className="h-4 w-4" />
-              </Button>
-            </div>
-          </div>
+        <div className="text-primary text-right font-mono font-semibold">
+          ${(item.hours * item.rate).toFixed(2)}
         </div>
+
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          onClick={() => onRemove(index)}
+          className="text-muted-foreground hover:text-destructive h-8 w-8 p-0"
+          disabled={!canRemove}
+          aria-label="Remove item"
+        >
+          <Trash2 className="h-4 w-4" />
+        </Button>
       </div>
     );
   },
@@ -240,7 +220,15 @@ export function InvoiceLineItems({
   return (
     <div className={cn("space-y-2", className)}>
       <AnimatePresence>
-        <div className="space-y-2">
+        <div className="space-y-2 md:space-y-0 md:overflow-hidden md:rounded-lg md:border">
+          <div className="bg-muted/60 text-muted-foreground hidden grid-cols-[140px_minmax(200px,1fr)_124px_136px_104px_32px] gap-2 border-b px-3 py-2 text-xs font-medium md:grid">
+            <span>Date</span>
+            <span>Description</span>
+            <span className="text-right">Hours</span>
+            <span className="text-right">Rate</span>
+            <span className="text-right">Amount</span>
+            <span />
+          </div>
           {items.map((item, index) => (
             <React.Fragment key={item.id}>
               {/* Desktop/Tablet Card */}
@@ -275,19 +263,15 @@ export function InvoiceLineItems({
       </AnimatePresence>
 
       {/* Add Item Button */}
-      <div className="px-3 pt-3">
-        <div className="border-t pt-6">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={onAddItem}
-            className="border-border text-muted-foreground hover:text-primary hover:bg-accent/50 hover:border-primary/50 w-full border-dashed py-8 transition-all"
-          >
-            <Plus className="mr-2 h-4 w-4" />
-            Add Line Item
-          </Button>
-        </div>
-      </div>
+      <Button
+        type="button"
+        variant="outline"
+        onClick={onAddItem}
+        className="border-border text-muted-foreground hover:text-primary hover:bg-accent/50 hover:border-primary/50 mt-3 w-full border-dashed py-6 transition-all"
+      >
+        <Plus className="mr-2 h-4 w-4" />
+        Add Line Item
+      </Button>
     </div>
   );
 }