Share page changes.

src/app/(main)/websites/[websiteId]/settings/ShareCreateForm.tsx

@@ -1,101 +0,0 @@
-import {
-  Button,
-  Checkbox,
-  Column,
-  Form,
-  FormField,
-  FormSubmitButton,
-  Row,
-  Text,
-  TextField,
-} from '@umami/react-zen';
-import { useState } from 'react';
-import { useApi, useMessages, useModified } from '@/components/hooks';
-import { SHARE_NAV_ITEMS } from './constants';
-
-export interface ShareCreateFormProps {
-  websiteId: string;
-  onSave?: () => void;
-  onClose?: () => void;
-}
-
-export function ShareCreateForm({ websiteId, onSave, onClose }: ShareCreateFormProps) {
-  const { formatMessage, labels } = useMessages();
-  const { post } = useApi();
-  const { touch } = useModified();
-  const [isPending, setIsPending] = useState(false);
-
-  // Build default values - only overview and events enabled by default
-  const defaultValues: Record<string, boolean> = {};
-  SHARE_NAV_ITEMS.forEach(section => {
-    section.items.forEach(item => {
-      defaultValues[item.id] = item.id === 'overview' || item.id === 'events';
-    });
-  });
-
-  // Get all item ids for validation
-  const allItemIds = SHARE_NAV_ITEMS.flatMap(section => section.items.map(item => item.id));
-
-  const handleSubmit = async (data: any) => {
-    setIsPending(true);
-    try {
-      const parameters: Record<string, boolean> = {};
-      SHARE_NAV_ITEMS.forEach(section => {
-        section.items.forEach(item => {
-          parameters[item.id] = data[item.id] ?? false;
-        });
-      });
-      await post(`/websites/${websiteId}/shares`, { name: data.name, parameters });
-      touch('shares');
-      onSave?.();
-      onClose?.();
-    } finally {
-      setIsPending(false);
-    }
-  };
-
-  return (
-    <Form onSubmit={handleSubmit} defaultValues={defaultValues}>
-      {({ watch }) => {
-        const values = watch();
-        const hasSelection = allItemIds.some(id => values[id]);
-
-        return (
-          <Column gap="3">
-            <FormField
-              label={formatMessage(labels.name)}
-              name="name"
-              rules={{ required: formatMessage(labels.required) }}
-            >
-              <TextField autoComplete="off" autoFocus />
-            </FormField>
-            {SHARE_NAV_ITEMS.map(section => (
-              <Column key={section.section} gap="1">
-                <Text size="2" weight="bold">
-                  {formatMessage((labels as any)[section.section])}
-                </Text>
-                <Column gap="1">
-                  {section.items.map(item => (
-                    <FormField key={item.id} name={item.id}>
-                      <Checkbox>{formatMessage((labels as any)[item.label])}</Checkbox>
-                    </FormField>
-                  ))}
-                </Column>
-              </Column>
-            ))}
-            <Row justifyContent="flex-end" paddingTop="3" gap="3">
-              {onClose && (
-                <Button isDisabled={isPending} onPress={onClose}>
-                  {formatMessage(labels.cancel)}
-                </Button>
-              )}
-              <FormSubmitButton isDisabled={isPending || !hasSelection}>
-                {formatMessage(labels.save)}
-              </FormSubmitButton>
-            </Row>
-          </Column>
-        );
-      }}
-    </Form>
-  );
-}

src/app/(main)/websites/[websiteId]/settings/ShareEditForm.tsx

@@ -14,25 +14,30 @@ import {
 } from '@umami/react-zen';
 import { useEffect, useState } from 'react';
 import { useApi, useConfig, useMessages, useModified } from '@/components/hooks';
-import { useUpdateQuery } from '@/components/hooks/queries/useUpdateQuery';
 import { SHARE_NAV_ITEMS } from './constants';
 
 export function ShareEditForm({
   shareId,
+  websiteId,
   onSave,
   onClose,
 }: {
-  shareId: string;
+  shareId?: string;
+  websiteId?: string;
   onSave?: () => void;
   onClose?: () => void;
 }) {
-  const { formatMessage, labels, messages, getErrorMessage } = useMessages();
-  const { mutateAsync, error, isPending, touch, toast } = useUpdateQuery(`/share/id/${shareId}`);
+  const { formatMessage, labels, getErrorMessage } = useMessages();
   const { cloudMode } = useConfig();
-  const { get } = useApi();
+  const { get, post } = useApi();
+  const { touch } = useModified();
   const { modified } = useModified('shares');
   const [share, setShare] = useState<any>(null);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(!!shareId);
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState<any>(null);
+
+  const isEditing = !!shareId;
 
   const getUrl = (slug: string) => {
     if (cloudMode) {
@@ -42,6 +47,8 @@ export function ShareEditForm({
   };
 
   useEffect(() => {
+    if (!shareId) return;
+
     const loadShare = async () => {
       setIsLoading(true);
       try {
@@ -62,24 +69,30 @@ export function ShareEditForm({
       });
     });
 
-    await mutateAsync(
-      { name: data.name, slug: share.slug, parameters },
-      {
-        onSuccess: async () => {
-          toast(formatMessage(messages.saved));
-          touch('shares');
-          onSave?.();
-          onClose?.();
-        },
-      },
-    );
+    setIsPending(true);
+    setError(null);
+
+    try {
+      if (isEditing) {
+        await post(`/share/id/${shareId}`, { name: data.name, slug: share.slug, parameters });
+      } else {
+        await post(`/websites/${websiteId}/shares`, { name: data.name, parameters });
+      }
+      touch('shares');
+      onSave?.();
+      onClose?.();
+    } catch (e) {
+      setError(e);
+    } finally {
+      setIsPending(false);
+    }
   };
 
   if (isLoading) {
     return <Loading placement="absolute" />;
   }
 
-  const url = getUrl(share?.slug || '');
+  const url = isEditing ? getUrl(share?.slug || '') : null;
 
   // Build default values from share parameters
   const defaultValues: Record<string, any> = {
@@ -103,16 +116,18 @@ export function ShareEditForm({
 
         return (
           <Column gap="6">
-            <Column>
-              <Label>{formatMessage(labels.shareUrl)}</Label>
-              <TextField value={url} isReadOnly allowCopy />
-            </Column>
+            {url && (
+              <Column>
+                <Label>{formatMessage(labels.shareUrl)}</Label>
+                <TextField value={url} isReadOnly allowCopy />
+              </Column>
+            )}
             <FormField
               label={formatMessage(labels.name)}
               name="name"
               rules={{ required: formatMessage(labels.required) }}
             >
-              <TextField autoComplete="off" />
+              <TextField autoComplete="off" autoFocus={!isEditing} />
             </FormField>
             <Grid columns="repeat(auto-fit, minmax(150px, 1fr))" gap="3">
               {SHARE_NAV_ITEMS.map(section => (
@@ -134,7 +149,10 @@ export function ShareEditForm({
                   {formatMessage(labels.cancel)}
                 </Button>
               )}
-              <FormSubmitButton variant="primary" isDisabled={!hasSelection || !values.name}>
+              <FormSubmitButton
+                variant="primary"
+                isDisabled={isPending || !hasSelection || !values.name}
+              >
                 {formatMessage(labels.save)}
               </FormSubmitButton>
             </Row>

src/app/(main)/websites/[websiteId]/settings/WebsiteShareForm.tsx

@@ -2,7 +2,7 @@ import { Column, Heading, Row, Text } from '@umami/react-zen';
 import { Plus } from 'lucide-react';
 import { useMessages, useWebsiteSharesQuery } from '@/components/hooks';
 import { DialogButton } from '@/components/input/DialogButton';
-import { ShareCreateForm } from './ShareCreateForm';
+import { ShareEditForm } from './ShareEditForm';
 import { SharesTable } from './SharesTable';
 
 export interface WebsiteShareFormProps {
@@ -25,9 +25,9 @@ export function WebsiteShareForm({ websiteId }: WebsiteShareFormProps) {
           label={formatMessage(labels.add)}
           title={formatMessage(labels.share)}
           variant="primary"
-          width="400px"
+          width="600px"
         >
-          {({ close }) => <ShareCreateForm websiteId={websiteId} onClose={close} />}
+          {({ close }) => <ShareEditForm websiteId={websiteId} onClose={close} />}
         </DialogButton>
       </Row>
       {hasShares ? (