fix

app/dashboard/deep-links/categories/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { apiFetch, ApiError, toFormData } from "@/lib/api";
 import { useList } from "@/lib/useResource";
 import { useToast } from "@/components/toast";
@@ -15,7 +15,7 @@ import {
   Select,
   Textarea,
 } from "@/components/ui";
-import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons";
+import { EditIcon, EyeIcon, PlusIcon, TrashIcon } from "@/components/icons";
 import { MediaPreview } from "@/components/MediaPreview";
 import { pickUrl } from "@/lib/media";
 import { toFa } from "@/lib/utils";
@@ -36,19 +36,40 @@ interface Category {
 const ICON_KEYS = ["icon", "icon_url"];
 
 export default function CategoryDeepLinksPage() {
-  const { data, loading, error, reload } = useList<Category>("/categories", {
-    deeplink_only: 1,
-  });
-  const { data: allCategories, loading: allLoading } =
-    useList<Category>("/categories");
+  const { data, loading, error, reload: reloadHidden } = useList<Category>(
+    "/categories",
+    { deeplink_only: 1 },
+  );
+  // The "use an existing category" picker. /categories only lists visible ones,
+  // so it must be refetched on every toggle — otherwise a just-unhidden
+  // category is missing from the picker until a full page reload.
+  const {
+    data: allSelectable,
+    loading: allLoading,
+    reload: reloadAll,
+  } = useList<Category>("/categories");
   const toast = useToast();
 
+  // Only rows from the `categories` table can be toggled — /categories with no
+  // type also folds in music (playlist) categories, whose IDs belong to another
+  // table and which have no deep-link column.
+  const allCategories = allSelectable.filter((c) => c.type !== "playlist");
+
+  // Both lists change together on every toggle.
+  const reload = useCallback(() => {
+    reloadHidden();
+    reloadAll();
+  }, [reloadHidden, reloadAll]);
+
+  // Non-null while the modal edits an existing row (null = create).
   const [editing, setEditing] = useState<Category | null>(null);
   const [open, setOpen] = useState(false);
   const [saving, setSaving] = useState(false);
 
-  // Source: 'new' (create a hidden category) or 'existing' (pick existing to hide).
-  const [source, setSource] = useState<"new" | "existing">("new");
+  // Source: 'existing' (pick an existing category to hide — the common case,
+  // and it avoids the "name already taken" error you get from re-creating one)
+  // or 'new' (create a fresh hidden category).
+  const [source, setSource] = useState<"new" | "existing">("existing");
   const [existingId, setExistingId] = useState<string>("");
 
   // Fields for creating a new hidden category.
@@ -62,7 +83,7 @@ export default function CategoryDeepLinksPage() {
   const [removing, setRemoving] = useState(false);
 
   function resetForm() {
-    setSource("new");
+    setSource("existing");
     setExistingId("");
     setName("");
     setType("media");
@@ -77,19 +98,26 @@ export default function CategoryDeepLinksPage() {
     setOpen(true);
   }
 
-  async function toggleHidden(row: Category) {
+  function openEdit(row: Category) {
+    setEditing(row);
+    setSource("new"); // the edit form always shows the category fields
+    setExistingId("");
+    setName(row.name ?? "");
+    setType(row.type ?? "media");
+    setOrder(row.order != null ? String(row.order) : "0");
+    setDescription(row.description ?? "");
+    setIcon(null);
+    setOpen(true);
+  }
+
+  // Take a category back out of deep-link-only mode (it returns to the lists).
+  async function unhide(row: Category) {
     try {
       await apiFetch(`/categories/${row.id}`, {
         method: "POST",
-        body: toFormData({
-          is_deeplink_only: !row.is_deeplink_only ? 1 : 0,
-        }),
+        body: toFormData({ is_deeplink_only: 0 }),
       });
-      toast.success(
-        row.is_deeplink_only
-          ? "از لینک مستقیم خارج شد."
-          : "به لینک مستقیم تبدیل شد.",
-      );
+      toast.success("از لینک مستقیم خارج شد.");
       reload();
     } catch (err) {
       toast.error(err instanceof ApiError ? err.message : "خطا در ذخیره‌سازی");
@@ -101,13 +129,13 @@ export default function CategoryDeepLinksPage() {
     setSaving(true);
     try {
       if (editing) {
-        setOpen(false);
-        reload();
+        // Edit an existing deep-link category. It stays deeplink-only.
+        await apiFetch(`/categories/${editing.id}`, {
+          method: "POST",
+          body: toFormData({ name, type, order, description, icon }),
+        });
         toast.success("لینک مستقیم بهروزرسانی شد.");
-        return;
-      }
-
-      if (source === "existing") {
+      } else if (source === "existing") {
         if (!existingId) {
           toast.error("دسته‌بندی را انتخاب کنید.");
           return;
@@ -228,12 +256,16 @@ export default function CategoryDeepLinksPage() {
         }
         actions={(row) => (
           <>
+            <Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
+              <EditIcon className="h-4 w-4" />
+            </Button>
             <Button
               variant="ghost"
-              onClick={() => toggleHidden(row)}
+              onClick={() => unhide(row)}
               aria-label="نمایش در فهرست"
+              title="نمایش در فهرست"
             >
-              <EditIcon className="h-4 w-4" />
+              <EyeIcon className="h-4 w-4" />
             </Button>
             <Button
               variant="ghost"
@@ -250,7 +282,9 @@ export default function CategoryDeepLinksPage() {
       <Modal
         open={open}
         onClose={() => setOpen(false)}
-        title="لینک مستقیم دسته‌بندی جدید"
+        title={
+          editing ? "ویرایش لینک مستقیم دسته‌بندی" : "لینک مستقیم دسته‌بندی جدید"
+        }
         footer={
           <>
             <Button variant="secondary" onClick={() => setOpen(false)}>
@@ -267,15 +301,17 @@ export default function CategoryDeepLinksPage() {
           onSubmit={save}
           className="flex flex-col gap-4"
         >
-          <Field label="منبع دسته‌بندی" required>
-            <Select
-              value={source}
-              onChange={(e) => setSource(e.target.value as "new" | "existing")}
-            >
-              <option value="new">ساخت دسته‌بندی جدید</option>
-              <option value="existing">استفاده از دسته‌بندی موجود</option>
-            </Select>
-          </Field>
+          {!editing && (
+            <Field label="منبع دسته‌بندی" required>
+              <Select
+                value={source}
+                onChange={(e) => setSource(e.target.value as "new" | "existing")}
+              >
+                <option value="new">ساخت دسته‌بندی جدید</option>
+                <option value="existing">استفاده از دسته‌بندی موجود</option>
+              </Select>
+            </Field>
+          )}
 
           {source === "existing" ? (
             <Field label="انتخاب دسته‌بندی" required>
@@ -309,13 +345,14 @@ export default function CategoryDeepLinksPage() {
                 />
               </Field>
 
+              {/* No playlist option: playlist categories live in the
+                  music_categories table, which has no deep-link column. */}
               <Field label="نوع">
                 <Select
                   value={type}
                   onChange={(e) => setType(e.target.value)}
                 >
                   <option value="media">رسانه</option>
-                  <option value="playlist">پلی‌لیست</option>
                   <option value="breathing_template">قالب تنفس</option>
                 </Select>
               </Field>
@@ -337,7 +374,7 @@ export default function CategoryDeepLinksPage() {
                 />
               </Field>
 
-              <Field label="آیکن">
+              <Field label={editing ? "آیکن (در صورت تغییر)" : "آیکن"}>
                 <Input
                   type="file"
                   accept="image/*"
@@ -348,8 +385,18 @@ export default function CategoryDeepLinksPage() {
           )}
 
           <p className="rounded-xl border border-border bg-surface-muted p-3 text-xs text-muted">
-            پس از ذخیره، این دسته‌بندی در فهرست نمایش داده نمیشود و فقط با لینک
-            مستقیم قابل دسترسی است.
+            {editing ? (
+              <>
+                این دسته‌بندی در فهرست نمایش داده نمیشود و فقط با لینک مستقیم قابل
+                دسترسی است. برای بازگرداندن آن به فهرست، از دکمه «نمایش در فهرست»
+                استفاده کنید.
+              </>
+            ) : (
+              <>
+                پس از ذخیره، این دسته‌بندی در فهرست نمایش داده نمیشود و فقط با لینک
+                مستقیم قابل دسترسی است.
+              </>
+            )}
           </p>
         </form>
       </Modal>