fix(database-studio): restore foreign key UI and stabilize table layout (#77)

* fix(database-studio): restore foreign key UI and stabilize table layout

* indexes

* import openapi types now we have them al;

Author: jamie-at-bunny

.changeset/dull-carrots-win.md

@@ -0,0 +1,5 @@
+---
+"@bunny.net/database-openapi": minor
+---
+
+add indexes

.changeset/great-ghosts-boil.md

@@ -0,0 +1,6 @@
+---
+"@bunny.net/database-openapi": minor
+"@bunny.net/database-studio": minor
+---
+
+Restore foreign key support in Database Studio. The OpenAPI generator now emits an `x-foreign-key` extension on column schemas, and the studio reads it to show `FK` badges in column headers and let you click a foreign key value to open the referenced row in a side sheet. Also fixes the sticky table header during vertical scroll and a small vertical shift in the Data/Schema toolbar when switching tabs.

bun.lock

@@ -81,6 +81,8 @@ export interface SchemaObject {
   oneOf?: SchemaObject[];
   nullable?: boolean;
   example?: unknown;
+  "x-foreign-key"?: { table: string; column: string };
+  "x-indexes"?: Array<{ name: string; columns: string[]; unique: boolean }>;
 }
 
 const NAME_EXAMPLES: [RegExp, unknown][] = [
@@ -199,8 +201,20 @@ const tableToSchema = (table: TableDefinition): SchemaObject => {
   const properties: Record<string, SchemaObject> = {};
   const required: string[] = [];
 
+  const fkByColumn = new Map(
+    table.foreignKeys.map((fk) => [fk.column, fk] as const),
+  );
+
   for (const column of table.columns) {
-    properties[column.name] = columnTypeToSchema(column);
+    const schema = columnTypeToSchema(column);
+    const fk = fkByColumn.get(column.name);
+    if (fk) {
+      schema["x-foreign-key"] = {
+        table: fk.referencesTable,
+        column: fk.referencesColumn,
+      };
+    }
+    properties[column.name] = schema;
     if (
       !column.nullable &&
       column.defaultValue === undefined &&
@@ -214,6 +228,7 @@ const tableToSchema = (table: TableDefinition): SchemaObject => {
     type: "object",
     properties,
     ...(required.length > 0 ? { required } : {}),
+    ...(table.indexes.length > 0 ? { "x-indexes": table.indexes } : {}),
   };
 };
 

packages/database-openapi/src/generate.ts

@@ -1,25 +1,4 @@
-// OpenAPI spec types (subset we use)
-interface OpenAPISpec {
-  paths: Record<string, unknown>;
-  components: {
-    schemas: Record<
-      string,
-      {
-        type?: string;
-        properties?: Record<
-          string,
-          {
-            type?: string;
-            format?: string;
-            nullable?: boolean;
-            example?: unknown;
-          }
-        >;
-        required?: string[];
-      }
-    >;
-  };
-}
+import type { OpenAPISpec } from "@bunny.net/database-openapi";
 
 export interface TableSummary {
   name: string;
@@ -108,12 +87,24 @@ export const fetchTableSchema = async (name: string): Promise<TableSchema> => {
     },
   );
 
-  // Foreign keys and indexes aren't in the OpenAPI spec - return empty for now
-  // The schema tab will show what's available from the spec
+  const foreignKeys: TableSchema["foreignKeys"] = [];
+  for (const [colName, colSchema] of Object.entries(tableSchema.properties)) {
+    const fk = colSchema["x-foreign-key"];
+    if (fk) {
+      foreignKeys.push({ from: colName, table: fk.table, to: fk.column });
+    }
+  }
+
+  const indexes: TableSchema["indexes"] =
+    tableSchema["x-indexes"]?.map((idx) => ({
+      name: idx.name,
+      unique: idx.unique,
+    })) ?? [];
+
   return {
     columns,
-    foreignKeys: [],
-    indexes: [],
+    foreignKeys,
+    indexes,
   };
 };
 

packages/database-studio/client/src/api.ts

@@ -190,7 +190,7 @@ export function DataTab({
 
   return (
     <>
-      <div className="flex-1 overflow-auto">
+      <div className="flex flex-1 min-h-0 flex-col">
         <DataTable
           columns={columns}
           data={data.rows as RowRecord[]}

packages/database-studio/client/src/components/DataTab.tsx

@@ -230,8 +230,8 @@ export function TableView({ tableName, onSelectTable }: TableViewProps) {
 
   return (
     <div className="flex h-full flex-col">
-      <div className="flex h-10 shrink-0 items-center gap-1 border-b px-4">
-        <div className="flex gap-1">
+      <div className="flex h-10 min-h-10 max-h-10 shrink-0 items-center gap-1 border-b px-4">
+        <div className="flex items-center gap-1">
           <Button
             variant={tab === "data" ? "secondary" : "ghost"}
             size="sm"

packages/database-studio/client/src/components/TableView.tsx

@@ -130,7 +130,10 @@ export function DataTable<TData, TValue>({
   const colCount = columns.length + (onInspectRow ? 1 : 0);
 
   return (
-    <Table style={{ minWidth: `${colCount * 150}px` }}>
+    <Table
+      containerClassName="h-full"
+      style={{ minWidth: `${colCount * 150}px` }}
+    >
       <TableHeader className="sticky top-0 z-10 bg-card">
         {table.getHeaderGroups().map((headerGroup) => (
           <TableRow key={headerGroup.id}>

packages/database-studio/client/src/components/ui/data-table.tsx

@@ -1,9 +1,16 @@
 import type * as React from "react";
 import { cn } from "@/lib/utils";
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
+function Table({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<"table"> & { containerClassName?: string }) {
   return (
-    <div data-slot="table-container" className="relative w-full overflow-auto">
+    <div
+      data-slot="table-container"
+      className={cn("relative w-full overflow-auto", containerClassName)}
+    >
       <table
         data-slot="table"
         className={cn("w-full caption-bottom text-sm", className)}

packages/database-studio/client/src/components/ui/table.tsx

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@bunny.net/database-adapter-libsql": "workspace:*",
+    "@bunny.net/database-openapi": "workspace:*",
     "@bunny.net/database-rest": "workspace:*",
     "@libsql/client": "^0.17.0"
   },