From 5fbef149d04991e4686c95e2ffd9491be54e4d8e Mon Sep 17 00:00:00 2001
From: RaenonX <raenonx0710@gmail.com>
Date: Wed, 10 Dec 2025 13:16:54 +0800
Subject: [PATCH] Added custom slug for links

---
 src/app/(main)/links/LinkEditForm.tsx | 65 +++++++++++++--------------
 1 file changed, 30 insertions(+), 35 deletions(-)

diff --git a/src/app/(main)/links/LinkEditForm.tsx b/src/app/(main)/links/LinkEditForm.tsx
index 6c10c7f0..e9ad18f4 100644
--- a/src/app/(main)/links/LinkEditForm.tsx
+++ b/src/app/(main)/links/LinkEditForm.tsx
@@ -4,13 +4,14 @@ import {
   Form,
   FormField,
   FormSubmitButton,
+  Grid,
   Icon,
   Label,
   Loading,
   Row,
   TextField,
 } from '@umami/react-zen';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useConfig, useLinkQuery, useMessages } from '@/components/hooks';
 import { useUpdateQuery } from '@/components/hooks/queries/useUpdateQuery';
 import { RefreshCw } from '@/components/icons';
@@ -42,7 +43,7 @@ export function LinkEditForm({
   const { linksUrl } = useConfig();
   const hostUrl = linksUrl || LINKS_URL;
   const { data, isLoading } = useLinkQuery(linkId);
-  const [slug, setSlug] = useState(generateId());
+  const [defaultSlug] = useState(generateId());
 
   const handleSubmit = async (data: any) => {
     await mutateAsync(data, {
@@ -55,14 +56,6 @@ export function LinkEditForm({
     });
   };
 
-  const handleSlug = () => {
-    const slug = generateId();
-
-    setSlug(slug);
-
-    return slug;
-  };
-
   const checkUrl = (url: string) => {
     if (!isValidUrl(url)) {
       return formatMessage(labels.invalidUrl);
@@ -70,19 +63,19 @@ export function LinkEditForm({
     return true;
   };
 
-  useEffect(() => {
-    if (data) {
-      setSlug(data.slug);
-    }
-  }, [data]);
-
   if (linkId && isLoading) {
     return <Loading placement="absolute" />;
   }
 
   return (
-    <Form onSubmit={handleSubmit} error={getErrorMessage(error)} defaultValues={{ slug, ...data }}>
-      {({ setValue }) => {
+    <Form
+      onSubmit={handleSubmit}
+      error={getErrorMessage(error)}
+      defaultValues={{ slug: defaultSlug, ...data }}
+    >
+      {({ setValue, watch }) => {
+        const slug = watch('slug');
+
         return (
           <>
             <FormField
@@ -101,15 +94,25 @@ export function LinkEditForm({
               <TextField placeholder="https://example.com" autoComplete="off" />
             </FormField>
 
-            <FormField
-              name="slug"
-              rules={{
-                required: formatMessage(labels.required),
-              }}
-              style={{ display: 'none' }}
-            >
-              <input type="hidden" />
-            </FormField>
+            <Grid columns="1fr auto" alignItems="end" gap>
+              <FormField
+                name="slug"
+                label={formatMessage({ id: 'label.slug', defaultMessage: 'Slug' })}
+                rules={{
+                  required: formatMessage(labels.required),
+                }}
+              >
+                <TextField autoComplete="off" />
+              </FormField>
+              <Button
+                variant="quiet"
+                onPress={() => setValue('slug', generateId(), { shouldDirty: true })}
+              >
+                <Icon>
+                  <RefreshCw />
+                </Icon>
+              </Button>
+            </Grid>
 
             <Column>
               <Label>{formatMessage(labels.link)}</Label>
@@ -121,14 +124,6 @@ export function LinkEditForm({
                   allowCopy
                   style={{ width: '100%' }}
                 />
-                <Button
-                  variant="quiet"
-                  onPress={() => setValue('slug', handleSlug(), { shouldDirty: true })}
-                >
-                  <Icon>
-                    <RefreshCw />
-                  </Icon>
-                </Button>
               </Row>
             </Column>