Add website binding to boards with filter and date controls.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/(main)/boards/BoardAddForm.tsx

@@ -1,5 +1,7 @@
-import { Button, Form, FormField, FormSubmitButton, Row, TextField } from '@umami/react-zen';
+import { Button, Form, FormField, FormSubmitButton, Row, Text, TextField } from '@umami/react-zen';
+import { useState } from 'react';
 import { useMessages, useUpdateQuery } from '@/components/hooks';
+import { WebsiteSelect } from '@/components/input/WebsiteSelect';
 
 export function BoardAddForm({
   teamId,
@@ -12,10 +14,11 @@ export function BoardAddForm({
 }) {
   const { formatMessage, labels } = useMessages();
   const { mutateAsync, error, isPending } = useUpdateQuery('/boards', { teamId });
+  const [websiteId, setWebsiteId] = useState<string>();
 
   const handleSubmit = async (data: any) => {
     await mutateAsync(
-      { type: 'board', ...data },
+      { type: 'board', ...data, parameters: { websiteId } },
       {
         onSuccess: async () => {
           onSave?.();
@@ -43,6 +46,10 @@ export function BoardAddForm({
       >
         <TextField asTextArea autoComplete="off" />
       </FormField>
+      <Row alignItems="center" gap="3" paddingTop="3">
+        <Text>{formatMessage(labels.website)}</Text>
+        <WebsiteSelect websiteId={websiteId} teamId={teamId} onChange={setWebsiteId} />
+      </Row>
       <Row justifyContent="flex-end" paddingTop="3" gap="3">
         {onClose && (
           <Button isDisabled={isPending} onPress={onClose}>

src/app/(main)/boards/[boardId]/BoardHeader.tsx

@@ -1,9 +1,19 @@
-import { Button, Column, Grid, Heading, LoadingButton, Row, TextField } from '@umami/react-zen';
+import {
+  Button,
+  Column,
+  Grid,
+  Heading,
+  LoadingButton,
+  Row,
+  Text,
+  TextField,
+} from '@umami/react-zen';
 import { IconLabel } from '@/components/common/IconLabel';
 import { LinkButton } from '@/components/common/LinkButton';
 import { PageHeader } from '@/components/common/PageHeader';
-import { useBoard, useMessages, useNavigation } from '@/components/hooks';
+import { useBoard, useMessages, useNavigation, useWebsiteQuery } from '@/components/hooks';
 import { Edit } from '@/components/icons';
+import { WebsiteSelect } from '@/components/input/WebsiteSelect';
 
 export function BoardHeader() {
   const { board, editing } = useBoard();
@@ -19,9 +29,11 @@ function BoardViewHeader() {
   const { board } = useBoard();
   const { renderUrl } = useNavigation();
   const { formatMessage, labels } = useMessages();
+  const { data: website } = useWebsiteQuery(board?.parameters?.websiteId);
 
   return (
     <PageHeader title={board?.name} description={board?.description}>
+      {website?.name && <Text>{website.name}</Text>}
       <LinkButton href={renderUrl(`/boards/${board?.id}/edit`, false)}>
         <IconLabel icon={<Edit />}>{formatMessage(labels.edit)}</IconLabel>
       </LinkButton>
@@ -43,6 +55,10 @@ function BoardEditHeader() {
     updateBoard({ description: value });
   };
 
+  const handleWebsiteChange = (websiteId: string) => {
+    updateBoard({ parameters: { ...board.parameters, websiteId } });
+  };
+
   const handleSave = async () => {
     await saveBoard();
     if (board.id) {
@@ -93,6 +109,10 @@ function BoardEditHeader() {
             {board?.description}
           </TextField>
         </Row>
+        <Row alignItems="center" gap="3">
+          <Text>{formatMessage(labels.website)}</Text>
+          <WebsiteSelect websiteId={board?.parameters?.websiteId} onChange={handleWebsiteChange} />
+        </Row>
       </Column>
       <Column justifyContent="center" alignItems="flex-end">
         <Row gap="3">

src/app/(main)/boards/[boardId]/BoardPage.tsx

@@ -3,7 +3,9 @@ import { Column } from '@umami/react-zen';
 import { BoardBody } from '@/app/(main)/boards/[boardId]/BoardBody';
 import { BoardHeader } from '@/app/(main)/boards/[boardId]/BoardHeader';
 import { BoardProvider } from '@/app/(main)/boards/BoardProvider';
+import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
 import { PageBody } from '@/components/common/PageBody';
+import { useBoard } from '@/components/hooks';
 
 export function BoardPage({ boardId, editing = false }: { boardId?: string; editing?: boolean }) {
   return (
@@ -11,9 +13,21 @@ export function BoardPage({ boardId, editing = false }: { boardId?: string; edit
       <PageBody>
         <Column>
           <BoardHeader />
+          <BoardControls />
           <BoardBody />
         </Column>
       </PageBody>
     </BoardProvider>
   );
 }
+
+function BoardControls() {
+  const { board, editing } = useBoard();
+  const websiteId = board?.parameters?.websiteId;
+
+  if (editing || !websiteId) {
+    return null;
+  }
+
+  return <WebsiteControls websiteId={websiteId} allowCompare={true} />;
+}

src/app/api/boards/route.ts

@@ -33,6 +33,7 @@ export async function POST(request: Request) {
     slug: z.string().max(100),
     userId: z.uuid().nullable().optional(),
     teamId: z.uuid().nullable().optional(),
+    parameters: z.object({ websiteId: z.uuid().optional() }).passthrough().optional(),
   });
 
   const { auth, body, error } = await parseRequest(request, schema);
@@ -50,7 +51,7 @@ export async function POST(request: Request) {
   const data = {
     ...body,
     id: uuid(),
-    parameters: {},
+    parameters: body.parameters ?? {},
     slug: uuid(),
     userId: !teamId ? auth.user.id : undefined,
   };

src/lib/types.ts

@@ -164,6 +164,7 @@ export interface BoardRow {
 }
 
 export interface BoardParameters {
+  websiteId?: string;
   rows?: BoardRow[];
 }