triggershell/src/app/(app)/page.tsx

export const dynamic = "force-dynamic";

import type { Metadata } from "next";
import Link from "next/link";
import { ChevronRight, PlayCircle } from "lucide-react";
import { getConfig } from "@/lib/config/load";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

export const metadata: Metadata = { title: "Scripts" };

export default function DashboardPage() {
  const { config } = getConfig();

  if (config.scripts.length === 0) {
    return (
      <div className="flex flex-col items-center gap-2 py-24 text-center">
        <PlayCircle className="text-muted-foreground/50 mb-2 size-8" />
        <h1 className="font-heading text-lg font-semibold tracking-tight">
          No scripts yet
        </h1>
        <p className="text-muted-foreground max-w-sm text-sm">
          Add entries under{" "}
          <code className="bg-muted rounded px-1.5 py-0.5 font-mono text-xs">
            scripts:
          </code>{" "}
          in your config file to see them here.
        </p>
      </div>
    );
  }

  return (
    <div className="flex flex-col gap-4">
      <h1 className="font-heading text-2xl font-semibold tracking-tight">
        Scripts
      </h1>
      <div className="grid gap-3 sm:grid-cols-2">
        {config.scripts.map((script) => (
          <Link key={script.id} href={`/scripts/${script.id}`}>
            <Card className="hover:border-primary/50 h-full transition-colors">
              <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0">
                <div className="flex items-center gap-2">
                  <PlayCircle className="text-muted-foreground size-4.5 shrink-0" />
                  <CardTitle className="text-base">{script.name}</CardTitle>
                </div>
                <ChevronRight className="text-muted-foreground size-4 shrink-0" />
              </CardHeader>
              {script.description && (
                <CardContent className="text-muted-foreground text-sm">
                  {script.description}
                </CardContent>
              )}
            </Card>
          </Link>
        ))}
      </div>
    </div>
  );
}