feat(grid): linked-field sort/filter, nested filter groups, kanban card config, branding

apps/web/app/layout.tsx

@@ -4,8 +4,9 @@ import { Sidebar, type SidebarTable } from "@/components/Sidebar";
 import { getMeta } from "@/lib/server/gridApi";
 
 export const metadata: Metadata = {
-  title: "grid",
-  description: "Database-backed workspace (Airtable replacement)",
+  title: "gridbase",
+  description: "Database-backed workspace (open-source Airtable replacement)",
+  icons: { icon: "/icon.png" },
 };
 
 /** First non-hidden view for a table, by position. */

apps/web/app/t/[tableId]/[viewId]/page.tsx

@@ -56,7 +56,7 @@ export default async function ViewPage({
         </div>
         <div className="mt-3 flex items-center justify-between">
           <ViewSwitcher tableId={tableId} currentViewId={viewId} views={allViews} currentConfig={view.config} />
-          {view.type !== "form" ? <ViewToolbar viewId={viewId} fields={fields} config={view.config} /> : null}
+          {view.type !== "form" ? <ViewToolbar viewId={viewId} fields={fields} config={view.config} meta={meta} /> : null}
         </div>
       </header>
 

apps/web/components/KanbanView.tsx

@@ -35,7 +35,13 @@ export function KanbanView({
 
   if (!stackField || !stackId) return <p className="text-neutral-500">This Kanban view has no stack field configured.</p>;
 
-  const previewFields = fields.filter((f) => f.fieldId !== primaryId && f.fieldId !== stackId && f.type !== "link").slice(0, 3);
+  // Card fields follow the view's FieldEditor (show/hide/reorder) — the single
+  // source of truth — minus the stack (it's the column) and the primary (the
+  // card title). A soft cap (default 8) keeps cards readable.
+  const maxPreview = view.config.kanban?.maxPreviewFields ?? 8;
+  const previewFields = fields
+    .filter((f) => f.fieldId !== primaryId && f.fieldId !== stackId)
+    .slice(0, maxPreview);
   const columns = [
     ...(stackField.options?.choices?.map((c) => ({ id: c.name, label: c.name })) ?? []),
     { id: UNSET, label: "Uncategorized" },
@@ -75,6 +81,7 @@ export function KanbanView({
                   href={`/t/${view.tableId}/${view.viewId}/${rec.id}`}
                   primaryId={primaryId}
                   previewFields={previewFields}
+                  labels={labels}
                 />
               ))}
             </Column>
@@ -98,7 +105,19 @@ function Column({ id, label, count, children }: { id: string; label: string; cou
   );
 }
 
-function Card({ rec, href, primaryId, previewFields }: { rec: RecordEnvelope; href: string; primaryId?: string; previewFields: FieldMeta[] }) {
+/** Render a card-preview cell value: link/lookup arrays become comma-joined
+ *  labels (via the id→label map); scalars stringify. Returns "" when empty. */
+function previewValue(field: FieldMeta, value: unknown, labels: Map<string, string>): string {
+  if (value == null || value === "") return "";
+  if (field.type === "link") {
+    const ids = Array.isArray(value) ? (value as string[]) : [String(value)];
+    return ids.map((id) => labels.get(id) ?? id).join(", ");
+  }
+  if (Array.isArray(value)) return value.filter((v) => v != null && v !== "").map((v) => String(v)).join(", ");
+  return String(value);
+}
+
+function Card({ rec, href, primaryId, previewFields, labels }: { rec: RecordEnvelope; href: string; primaryId?: string; previewFields: FieldMeta[]; labels: Map<string, string> }) {
   const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id: rec.id });
   const style = transform ? { transform: `translate(${transform.x}px, ${transform.y}px)`, zIndex: 50 } : undefined;
   return (
@@ -113,11 +132,11 @@ function Card({ rec, href, primaryId, previewFields }: { rec: RecordEnvelope; hr
         {primaryId && rec.fields[primaryId] ? String(rec.fields[primaryId]) : "(untitled)"}
       </Link>
       {previewFields.map((f) => {
-        const v = rec.fields[f.fieldId];
-        if (v == null || v === "") return null;
+        const text = previewValue(f, rec.fields[f.fieldId], labels);
+        if (!text) return null;
         return (
           <div key={f.fieldId} className="truncate text-xs text-neutral-500">
-            <span className="text-neutral-400">{f.name}:</span> {String(v)}
+            <span className="text-neutral-400">{f.name}:</span> {text}
           </div>
         );
       })}

apps/web/components/Sidebar.tsx

@@ -1,4 +1,5 @@
 "use client";
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -29,6 +30,9 @@ export function Sidebar({ tables }: { tables: SidebarTable[] }) {
   if (collapsed) {
     return (
       <nav className="flex w-11 flex-shrink-0 flex-col items-center border-r border-surface-border bg-white py-3">
+        <Link href="/" title="gridbase" className="mb-1">
+          <Image src="/grid.png" alt="gridbase" width={28} height={28} className="rounded" />
+        </Link>
         <button onClick={toggle} title="Expand sidebar" className="rounded-md p-1.5 text-neutral-400 hover:bg-surface-muted hover:text-neutral-700">
           »
         </button>
@@ -68,9 +72,14 @@ export function Sidebar({ tables }: { tables: SidebarTable[] }) {
   return (
     <nav className="w-56 flex-shrink-0 border-r border-surface-border bg-white">
       <div className="flex items-start justify-between px-4 py-4">
-        <div>
-          <Link href="/" className="text-sm font-semibold tracking-tight text-neutral-900">gridbase</Link>
-          <p className="mt-0.5 text-[11px] text-neutral-400">workspace</p>
+        <div className="flex items-center gap-2">
+          <Link href="/" title="gridbase" className="flex-shrink-0">
+            <Image src="/grid.png" alt="gridbase" width={28} height={28} className="rounded" />
+          </Link>
+          <div>
+            <Link href="/" className="text-sm font-semibold tracking-tight text-neutral-900">gridbase</Link>
+            <p className="mt-0.5 text-[11px] text-neutral-400">workspace</p>
+          </div>
         </div>
         <button onClick={toggle} title="Collapse sidebar" className="rounded-md p-1 text-neutral-400 hover:bg-surface-muted hover:text-neutral-700">
           «