From 16acac55300ee656ecf31835cd1012b94fc71b45 Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Tue, 8 Sep 2026 10:28:54 -0700
Subject: [PATCH] fix website select error and delete board website errors.

---
 .../boards/[boardId]/BoardEditColumn.tsx      | 15 +++++++++++--
 .../boards/[boardId]/BoardViewColumn.tsx      | 14 ++++++++++++-
 .../boards/useBoardEntityAvailability.ts      | 21 +++++++++++++++++++
 src/components/input/WebsiteSelect.tsx        |  2 +-
 4 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 src/app/(main)/boards/useBoardEntityAvailability.ts

diff --git a/src/app/(main)/boards/[boardId]/BoardEditColumn.tsx b/src/app/(main)/boards/[boardId]/BoardEditColumn.tsx
index 852e1660b..ccc569ca8 100644
--- a/src/app/(main)/boards/[boardId]/BoardEditColumn.tsx
+++ b/src/app/(main)/boards/[boardId]/BoardEditColumn.tsx
@@ -11,12 +11,14 @@ import {
 } from '@umami/react-zen';
 import { useMemo, useState } from 'react';
 import { ControlledDialog } from '@/components/common/ControlledDialog';
+import { Empty } from '@/components/common/Empty';
 import { Panel } from '@/components/common/Panel';
 import { useBoard, useMessages, useNavigation } from '@/components/hooks';
 import { Pencil, Plus, X } from '@/components/icons';
 import { getBoardEntity, getBoardType, getResolvedComponentEntity } from '@/lib/boards';
 import type { BoardComponentConfig } from '@/lib/types';
 import { getComponentDefinition } from '../boardComponentRegistry';
+import { useBoardEntityAvailability } from '../useBoardEntityAvailability';
 import { BoardComponentRenderer } from './BoardComponentRenderer';
 import { BoardComponentSelect } from './BoardComponentSelect';
 
@@ -44,15 +46,21 @@ export function BoardEditColumn({
   const { entityType: boardEntityType, entityId: boardEntityId } = getBoardEntity(board);
   const definition = component ? getComponentDefinition(component.type) : undefined;
   const { entityType, entityId } = getResolvedComponentEntity(board, component);
+  const { isLoading, isUnavailable } = useBoardEntityAvailability(entityType, entityId);
   const renderedComponent = useMemo(() => {
-    if (!component || (!entityId && definition?.requiresWebsite !== false)) {
+    if (
+      !component ||
+      (!entityId && definition?.requiresWebsite !== false) ||
+      isLoading ||
+      isUnavailable
+    ) {
       return null;
     }
 
     return (
       <BoardComponentRenderer config={component} websiteId={entityId} entityType={entityType} />
     );
-  }, [component, definition?.requiresWebsite, entityId, entityType]);
+  }, [component, definition?.requiresWebsite, entityId, entityType, isLoading, isUnavailable]);
 
   const handleSelect = (config: BoardComponentConfig) => {
     onSetComponent(id, config);
@@ -122,6 +130,9 @@ export function BoardEditColumn({
           </Box>
         </Column>
       )}
+      {!isLoading && component && entityId && isUnavailable && (
+        <Empty message="Selected item is no longer available." />
+      )}
       <ControlledDialog>
         <Modal isOpen={showSelect} onOpenChange={setShowSelect}>
           <Dialog
diff --git a/src/app/(main)/boards/[boardId]/BoardViewColumn.tsx b/src/app/(main)/boards/[boardId]/BoardViewColumn.tsx
index 5bb2f8b65..22ebfdfb8 100644
--- a/src/app/(main)/boards/[boardId]/BoardViewColumn.tsx
+++ b/src/app/(main)/boards/[boardId]/BoardViewColumn.tsx
@@ -1,10 +1,12 @@
 import { Column, Heading, Row, Text } from '@umami/react-zen';
+import { Empty } from '@/components/common/Empty';
 import { Panel } from '@/components/common/Panel';
 import { useBoard } from '@/components/hooks';
 import { getBoardType, getResolvedComponentEntity, isOpenBoardType } from '@/lib/boards';
 import type { BoardComponentConfig } from '@/lib/types';
 import { BoardEntityBadge } from '../BoardEntityBadge';
 import { getComponentDefinition } from '../boardComponentRegistry';
+import { useBoardEntityAvailability } from '../useBoardEntityAvailability';
 import { useBoardEntityBadgeProps } from '../useBoardEntityBadgeProps';
 import { BoardComponentRenderer } from './BoardComponentRenderer';
 
@@ -20,6 +22,7 @@ export function BoardViewColumn({
   const definition = component ? getComponentDefinition(component.type) : undefined;
   const { entityType, entityId } = getResolvedComponentEntity(board, component);
   const entityBadge = useBoardEntityBadgeProps(entityType, entityId, showEntityBadge);
+  const { isLoading, isUnavailable } = useBoardEntityAvailability(entityType, entityId);
 
   if (!component || (!entityId && definition?.requiresWebsite !== false)) {
     return null;
@@ -43,7 +46,16 @@ export function BoardViewColumn({
       {description && <Text color="muted">{description}</Text>}
       <Column width="100%" height="100%" style={{ minHeight: 0 }}>
         <Column width="100%" flexGrow={1} style={{ minHeight: 0 }}>
-          <BoardComponentRenderer config={component} websiteId={entityId} entityType={entityType} />
+          {!isLoading &&
+            (isUnavailable ? (
+              <Empty message="Selected item is no longer available." />
+            ) : (
+              <BoardComponentRenderer
+                config={component}
+                websiteId={entityId}
+                entityType={entityType}
+              />
+            ))}
         </Column>
       </Column>
     </Panel>
diff --git a/src/app/(main)/boards/useBoardEntityAvailability.ts b/src/app/(main)/boards/useBoardEntityAvailability.ts
new file mode 100644
index 000000000..b73ea2569
--- /dev/null
+++ b/src/app/(main)/boards/useBoardEntityAvailability.ts
@@ -0,0 +1,21 @@
+import { useLinkQuery, usePixelQuery, useWebsiteQuery } from '@/components/hooks';
+import type { BoardEntityType } from '@/lib/boards';
+
+export function useBoardEntityAvailability(entityType?: BoardEntityType, entityId?: string) {
+  const websiteQuery = useWebsiteQuery(entityType === 'website' ? entityId : undefined);
+  const pixelQuery = usePixelQuery(entityType === 'pixel' ? entityId : undefined);
+  const linkQuery = useLinkQuery(entityType === 'link' ? entityId : undefined);
+  const query =
+    entityType === 'website' ? websiteQuery : entityType === 'pixel' ? pixelQuery : linkQuery;
+
+  if (!entityId) {
+    return { isLoading: false, isUnavailable: false };
+  }
+
+  const status = (query.error as { status?: number } | null)?.status;
+
+  return {
+    isLoading: query.isLoading,
+    isUnavailable: status === 401 || status === 404,
+  };
+}
diff --git a/src/components/input/WebsiteSelect.tsx b/src/components/input/WebsiteSelect.tsx
index 265cda037..9f11f7915 100644
--- a/src/components/input/WebsiteSelect.tsx
+++ b/src/components/input/WebsiteSelect.tsx
@@ -74,7 +74,7 @@ export function WebsiteSelect({
   return (
     <Select
       {...props}
-      value={websiteId}
+      value={websiteId ?? null}
       isLoading={isLoading}
       allowSearch={true}
       searchValue={search}