fix: tighten sharing and shadcn composition

src/modules/garden/components/container-list.tsx

@@ -3,6 +3,14 @@
 import { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { Container } from "lucide-react";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/components/ui/empty";
 import { ContainerForm } from "./container-form";
 import type { ContainerDto } from "../server/queries";
 
@@ -35,9 +43,15 @@ export function ContainerList({ containers }: Props) {
       )}
 
       {containers.length === 0 && !showNew && (
-        <p className="text-sm text-[var(--ink-mute)]">
-          No containers yet. Add one to start organising your plants.
-        </p>
+        <Empty className="border-none">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <Container />
+            </EmptyMedia>
+            <EmptyTitle>No containers yet</EmptyTitle>
+            <EmptyDescription>Add a container to start organising your plants.</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
       )}
 
       <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">