feat: add light/dark theme with settings page

apps/frontend/src/components/Card.tsx

@@ -0,0 +1,42 @@
+import { splitProps, type ParentProps, type Flow } from "solid-js";
+
+interface CardProps extends ParentProps {
+  /** "default" = rounded-xl (overview tile), "section" = rounded-2xl panel (details) */
+  variant?: "default" | "section";
+  /** Subtle shadow, off by default */
+  shadowed?: boolean;
+  /** If set, render as an <a> link instead of a <div> */
+  href?: string;
+  [key: string]: any;
+}
+
+export function Card(props: CardProps) {
+  const [local, rest] = splitProps(props, [
+    "variant",
+    "shadowed",
+    "class",
+    "children",
+    "href",
+  ]);
+
+  const base = () =>
+    `border border-line ${
+      local.variant === "section" ? "bg-surface/50 rounded-2xl" : "bg-surface rounded-xl"
+    } ${local.shadowed ? "shadow-md" : ""} ${local.class ?? ""}`;
+
+  const children = local.children as Flow;
+
+  if (local.href) {
+    return (
+      <a {...(rest as object)} href={local.href} class={base()}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <div {...(rest as object)} class={base()}>
+      {children}
+    </div>
+  );
+}