Add board share management UI

src/components/common/CopyButton.tsx

@@ -0,0 +1,45 @@
+import { Button, Icon } from '@umami/react-zen';
+import { useEffect, useRef, useState } from 'react';
+import { Check, Copy } from '@/components/icons';
+
+export function CopyButton({
+  value,
+  label = 'Copy',
+}: {
+  value: string;
+  label?: string;
+}) {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopy = async () => {
+    if (!navigator?.clipboard) {
+      return;
+    }
+
+    await navigator.clipboard.writeText(value);
+    setCopied(true);
+
+    if (timeoutRef.current) {
+      window.clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = window.setTimeout(() => {
+      setCopied(false);
+    }, 1500);
+  };
+
+  return (
+    <Button variant="quiet" onPress={handleCopy} title={label} aria-label={label}>
+      <Icon size="sm">{copied ? <Check /> : <Copy />}</Icon>
+    </Button>
+  );
+}

src/components/hooks/index.ts

@@ -12,6 +12,7 @@ export * from './context/useWebsite';
 // Query hooks
 export * from './queries/useActiveUsersQuery';
 export * from './queries/useBoardQuery';
+export * from './queries/useBoardSharesQuery';
 export * from './queries/useBoardsQuery';
 export * from './queries/useDashboardQuery';
 export * from './queries/useDateRangeQuery';

src/components/hooks/queries/useBoardSharesQuery.ts

@@ -0,0 +1,17 @@
+import type { ReactQueryOptions } from '@/lib/types';
+import { useApi } from '../useApi';
+import { useModified } from '../useModified';
+import { usePagedQuery } from '../usePagedQuery';
+
+export function useBoardSharesQuery({ boardId }: { boardId: string }, options?: ReactQueryOptions) {
+  const { modified } = useModified('shares');
+  const { get } = useApi();
+
+  return usePagedQuery({
+    queryKey: ['boardShares', { boardId, modified }],
+    queryFn: pageParams => {
+      return get(`/boards/${boardId}/shares`, pageParams);
+    },
+    ...options,
+  });
+}

src/components/input/DialogButton.tsx

@@ -55,7 +55,11 @@ export function DialogButton({
         <IconLabel icon={icon} label={label} />
       </Button>
       <Modal placement={isMobile ? 'fullscreen' : 'center'}>
-        <Dialog variant={isMobile ? 'sheet' : undefined} title={title || label} style={style}>
+        <Dialog
+          variant={isMobile ? 'sheet' : undefined}
+          title={title === undefined ? label : title}
+          style={style}
+        >
           {children}
         </Dialog>
       </Modal>