Refine link and pixel edit controls

src/app/(main)/links/LinkEditButton.tsx

@@ -1,3 +1,4 @@
+import { Icon } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { useNavigation } from '@/components/hooks';
 import { useMessages } from '@/components/hooks';
@@ -8,8 +9,15 @@ export function LinkEditButton({ linkId }: { linkId: string }) {
   const { renderUrl } = useNavigation();
 
   return (
-    <LinkButton href={renderUrl(`/links/${linkId}/edit`, false)} variant="quiet" aria-label={t(labels.edit)}>
-      <Edit />
+    <LinkButton
+      href={renderUrl(`/links/${linkId}/edit`, false)}
+      title={t(labels.edit)}
+      aria-label={t(labels.edit)}
+      variant="quiet"
+    >
+      <Icon>
+        <Edit />
+      </Icon>
     </LinkButton>
   );
 }

src/app/(main)/links/LinkEditForm.tsx

@@ -41,6 +41,7 @@ export function LinkEditForm({
     },
   );
   const config = useConfig();
+  const cloudMode = config?.cloudMode;
   const linksUrl = config?.linksUrl;
   const hostUrl = linksUrl || LINKS_URL;
   const { data, isLoading } = useLinkQuery(linkId);
@@ -92,25 +93,37 @@ export function LinkEditForm({
               <TextField placeholder="https://example.com" autoComplete="off" />
             </FormField>
 
-            <Grid columns="1fr auto" alignItems="end" gap>
+            {cloudMode ? (
               <FormField
                 name="slug"
-                label={t(labels.slug)}
                 rules={{
                   required: t(labels.required),
                 }}
+                style={{ display: 'none' }}
               >
-                <TextField autoComplete="off" />
+                <input type="hidden" />
               </FormField>
-              <Button
-                variant="quiet"
-                onPress={() => setValue('slug', generateId(), { shouldDirty: true })}
-              >
-                <Icon>
-                  <RefreshCw />
-                </Icon>
-              </Button>
-            </Grid>
+            ) : (
+              <Grid columns="1fr auto" alignItems="end" gap>
+                <FormField
+                  name="slug"
+                  label={t(labels.slug)}
+                  rules={{
+                    required: t(labels.required),
+                  }}
+                >
+                  <TextField autoComplete="off" />
+                </FormField>
+                <Button
+                  variant="quiet"
+                  onPress={() => setValue('slug', generateId(), { shouldDirty: true })}
+                >
+                  <Icon>
+                    <RefreshCw />
+                  </Icon>
+                </Button>
+              </Grid>
+            )}
 
             <Column>
               <Label>{t(labels.link)}</Label>

src/app/(main)/pixels/PixelEditButton.tsx

@@ -1,3 +1,4 @@
+import { Icon } from '@umami/react-zen';
 import { LinkButton } from '@/components/common/LinkButton';
 import { useNavigation } from '@/components/hooks';
 import { useMessages } from '@/components/hooks';
@@ -8,8 +9,15 @@ export function PixelEditButton({ pixelId }: { pixelId: string }) {
   const { renderUrl } = useNavigation();
 
   return (
-    <LinkButton href={renderUrl(`/pixels/${pixelId}/edit`, false)} variant="quiet" aria-label={t(labels.edit)}>
-      <Edit />
+    <LinkButton
+      href={renderUrl(`/pixels/${pixelId}/edit`, false)}
+      title={t(labels.edit)}
+      aria-label={t(labels.edit)}
+      variant="quiet"
+    >
+      <Icon>
+        <Edit />
+      </Icon>
     </LinkButton>
   );
 }