From 63aa7894d131c37c6bc9082e7b9fce0e5856ffd0 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Mon, 24 Aug 2026 22:12:43 +0600
Subject: [PATCH 1/3] feat: add optional slug input for node create and edit

---
 app/Http/Controllers/Admin/NodeController.php | 16 ++++++---
 app/Http/Requests/Node/StoreNodeRequest.php   |  1 +
 app/Http/Requests/Node/UpdateNodeRequest.php  |  2 +-
 resources/js/pages/admin/NodeCreateOrEdit.vue | 34 +++++++++++++++++++
 4 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/app/Http/Controllers/Admin/NodeController.php b/app/Http/Controllers/Admin/NodeController.php
index a2391e6..85e59c6 100644
--- a/app/Http/Controllers/Admin/NodeController.php
+++ b/app/Http/Controllers/Admin/NodeController.php
@@ -94,7 +94,9 @@ public function store(StoreNodeRequest $request, Subject $subject)
                 ->firstOrFail();
         }
 
-        $slug = Str::slug($validated['name']);
+        $slug = !empty($validated['slug'])
+            ? Str::slug($validated['slug'])
+            : Str::slug($validated['name']);
 
         $exists = Node::where('subject_id', $subject->id)
             ->where('parent_id', $parent?->id)
@@ -104,7 +106,7 @@ public function store(StoreNodeRequest $request, Subject $subject)
         if ($exists) {
             return back()
                 ->withErrors([
-                    'name' => 'Folder already exists in this location.',
+                    'slug' => 'Folder with this slug already exists in this location.',
                 ])
                 ->withInput();
         }
@@ -143,8 +145,14 @@ public function update(UpdateNodeRequest $request, Subject $subject, Node $node)
 
         if (array_key_exists('name', $validated)) {
             $node->name = $validated['name'];
+        }
+
+        if (array_key_exists('name', $validated) || array_key_exists('slug', $validated) || array_key_exists('parent_id', $validated)) {
+            $rawSlug = !empty($validated['slug'])
+                ? $validated['slug']
+                : ($validated['name'] ?? $node->name);
 
-            $slug = Str::slug($validated['name']);
+            $slug = Str::slug($rawSlug);
 
             $parentId = array_key_exists('parent_id', $validated)
                 ? $validated['parent_id']
@@ -158,7 +166,7 @@ public function update(UpdateNodeRequest $request, Subject $subject, Node $node)
 
             if ($exists) {
                 return back()->withErrors([
-                    'name' => 'Folder already exists in this location.',
+                    'slug' => 'Folder with this slug already exists in this location.',
                 ])->withInput();
             }
 
diff --git a/app/Http/Requests/Node/StoreNodeRequest.php b/app/Http/Requests/Node/StoreNodeRequest.php
index 3e2e85e..e0c50b1 100644
--- a/app/Http/Requests/Node/StoreNodeRequest.php
+++ b/app/Http/Requests/Node/StoreNodeRequest.php
@@ -24,6 +24,7 @@ public function rules(): array
     {
         return [
             'name' => ['required', 'string', 'max:200', 'min:2'],
+            'slug' => ['nullable', 'string', 'max:200'],
             'parent_id' => ['nullable', 'integer'],
             'sort_order' => ['sometimes', 'integer'],
             'redirect' => ['nullable', 'string'],
diff --git a/app/Http/Requests/Node/UpdateNodeRequest.php b/app/Http/Requests/Node/UpdateNodeRequest.php
index 6a5fe4b..7322a5b 100644
--- a/app/Http/Requests/Node/UpdateNodeRequest.php
+++ b/app/Http/Requests/Node/UpdateNodeRequest.php
@@ -23,8 +23,8 @@ public function authorize(): bool
     public function rules(): array
     {
         return [
-
             'name'       => ['sometimes', 'required', 'string', 'max:200', 'min:2'],
+            'slug'       => ['sometimes', 'nullable', 'string', 'max:200'],
             'parent_id'  => ['sometimes', 'nullable', 'integer'],
             'sort_order' => ['sometimes', 'nullable', 'integer'],
             'redirect'   => ['nullable', 'string'],
diff --git a/resources/js/pages/admin/NodeCreateOrEdit.vue b/resources/js/pages/admin/NodeCreateOrEdit.vue
index 454e2ee..0770036 100644
--- a/resources/js/pages/admin/NodeCreateOrEdit.vue
+++ b/resources/js/pages/admin/NodeCreateOrEdit.vue
@@ -11,6 +11,7 @@ const props = defineProps({
 
 const form = useForm({
     name: props.node?.name || '',
+    slug: props.node?.slug || '',
     parent_id: props.node?.parent_id || props.parent?.id || null,
     sort_order: props.node?.sort_order ?? 0,
     redirect: props.redirect,
@@ -160,6 +161,39 @@ const goBack = () => {
                             Lower numbers will appear first in the list.
                         </p>
                     </div>
+
+                    <div class="md:col-span-3">
+                        <label
+                            for="slug"
+                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                        >
+                            Custom URL Slug
+                            <span
+                                class="text-xs font-normal text-slate-400 dark:text-gray-500"
+                                >(Optional)</span
+                            >
+                        </label>
+                        <input
+                            v-model="form.slug"
+                            type="text"
+                            id="slug"
+                            placeholder="e.g., chapter-1-intro (leave blank to auto-generate from name)"
+                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none"
+                            :class="getInputClass(form.errors.slug)"
+                        />
+                        <p
+                            v-if="form.errors.slug"
+                            class="mt-1 text-sm text-rose-600"
+                        >
+                            {{ form.errors.slug }}
+                        </p>
+                        <p
+                            class="mt-1.5 text-xs text-slate-400 dark:text-gray-500"
+                        >
+                            Leave empty to automatically generate from the
+                            folder name.
+                        </p>
+                    </div>
                 </div>
 
                 <div

From c57e5cda80c21998b669648a38ef69b1e24d0f5c Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Mon, 24 Aug 2026 22:24:51 +0600
Subject: [PATCH 2/3] feat: collapse custom slug field behind advanced toggle

---
 resources/js/pages/admin/NodeCreateOrEdit.vue | 86 +++++++++++++------
 1 file changed, 58 insertions(+), 28 deletions(-)

diff --git a/resources/js/pages/admin/NodeCreateOrEdit.vue b/resources/js/pages/admin/NodeCreateOrEdit.vue
index 0770036..4a3c79e 100644
--- a/resources/js/pages/admin/NodeCreateOrEdit.vue
+++ b/resources/js/pages/admin/NodeCreateOrEdit.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useForm } from '@inertiajs/vue3';
-import { FolderOpen } from 'lucide-vue-next';
+import { FolderOpen, ChevronDown, ChevronRight } from 'lucide-vue-next';
+import { ref } from 'vue';
 
 const props = defineProps({
     subject: Object,
@@ -9,6 +10,8 @@ const props = defineProps({
     node: Object,
 });
 
+const showSlug = ref(false);
+
 const form = useForm({
     name: props.node?.name || '',
     slug: props.node?.slug || '',
@@ -162,37 +165,64 @@ const goBack = () => {
                         </p>
                     </div>
 
-                    <div class="md:col-span-3">
-                        <label
-                            for="slug"
-                            class="mb-1.5 block text-sm font-semibold text-slate-700 dark:text-gray-300"
+                    <div class="pt-1 md:col-span-3">
+                        <button
+                            type="button"
+                            @click="showSlug = !showSlug"
+                            class="inline-flex items-center gap-1 text-xs font-semibold text-slate-500 transition hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
                         >
-                            Custom URL Slug
+                            <component
+                                :is="
+                                    showSlug || form.errors.slug
+                                        ? ChevronDown
+                                        : ChevronRight
+                                "
+                                class="h-3.5 w-3.5"
+                            />
                             <span
-                                class="text-xs font-normal text-slate-400 dark:text-gray-500"
-                                >(Optional)</span
+                                >Change slug?
+                                <span
+                                    class="font-normal text-slate-400 dark:text-gray-500"
+                                    >(advanced)</span
+                                ></span
                             >
-                        </label>
-                        <input
-                            v-model="form.slug"
-                            type="text"
-                            id="slug"
-                            placeholder="e.g., chapter-1-intro (leave blank to auto-generate from name)"
-                            class="w-full rounded-lg border px-4 py-2.5 transition outline-none"
-                            :class="getInputClass(form.errors.slug)"
-                        />
-                        <p
-                            v-if="form.errors.slug"
-                            class="mt-1 text-sm text-rose-600"
-                        >
-                            {{ form.errors.slug }}
-                        </p>
-                        <p
-                            class="mt-1.5 text-xs text-slate-400 dark:text-gray-500"
+                        </button>
+
+                        <div
+                            v-if="showSlug || form.errors.slug"
+                            class="dark:bg-gray-850 mt-3 space-y-1.5 rounded-xl border border-slate-200/80 bg-slate-50/50 p-4 dark:border-gray-700"
                         >
-                            Leave empty to automatically generate from the
-                            folder name.
-                        </p>
+                            <label
+                                for="slug"
+                                class="block text-xs font-semibold text-slate-700 dark:text-gray-300"
+                            >
+                                Custom URL Slug
+                                <span
+                                    class="text-[11px] font-normal text-slate-400 dark:text-gray-500"
+                                    >(Optional)</span
+                                >
+                            </label>
+                            <input
+                                v-model="form.slug"
+                                type="text"
+                                id="slug"
+                                placeholder="e.g., chapter-1-intro (leave blank to auto-generate from name)"
+                                class="w-full rounded-lg border bg-white px-3.5 py-2 text-sm transition outline-none dark:bg-gray-900"
+                                :class="getInputClass(form.errors.slug)"
+                            />
+                            <p
+                                v-if="form.errors.slug"
+                                class="mt-1 text-xs text-rose-600"
+                            >
+                                {{ form.errors.slug }}
+                            </p>
+                            <p
+                                class="text-[11px] text-slate-400 dark:text-gray-500"
+                            >
+                                Leave empty to automatically generate from the
+                                folder name.
+                            </p>
+                        </div>
                     </div>
                 </div>
 

From 798ad6c9cd72486155cda497a9d71af0561409b6 Mon Sep 17 00:00:00 2001
From: Tajim <com.tajim@gmail.com>
Date: Mon, 24 Aug 2026 22:28:34 +0600
Subject: [PATCH 3/3] style: fix dark mode background and input styles in
 NodeCreateOrEdit

---
 resources/js/pages/admin/NodeCreateOrEdit.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/js/pages/admin/NodeCreateOrEdit.vue b/resources/js/pages/admin/NodeCreateOrEdit.vue
index 4a3c79e..b25081d 100644
--- a/resources/js/pages/admin/NodeCreateOrEdit.vue
+++ b/resources/js/pages/admin/NodeCreateOrEdit.vue
@@ -22,8 +22,8 @@ const form = useForm({
 
 function getInputClass(hasError) {
     return hasError
-        ? 'border-rose-500 focus:ring-rose-500/20'
-        : 'border-slate-300 dark:border-gray-600 focus:ring-blue-500/20 focus:border-blue-500';
+        ? 'border-rose-500 focus:ring-rose-500/20 bg-white dark:bg-gray-900 text-slate-900 dark:text-gray-100 placeholder:text-slate-400 dark:placeholder:text-gray-500'
+        : 'border-slate-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-slate-900 dark:text-gray-100 placeholder:text-slate-400 dark:placeholder:text-gray-500 focus:ring-blue-500/20 focus:border-blue-500';
 }
 
 const submitForm = () => {
@@ -190,7 +190,7 @@ const goBack = () => {
 
                         <div
                             v-if="showSlug || form.errors.slug"
-                            class="dark:bg-gray-850 mt-3 space-y-1.5 rounded-xl border border-slate-200/80 bg-slate-50/50 p-4 dark:border-gray-700"
+                            class="mt-3 space-y-1.5 rounded-xl border border-slate-200/80 bg-slate-50/50 p-4 dark:border-gray-700 dark:bg-gray-800/50"
                         >
                             <label
                                 for="slug"
@@ -207,7 +207,7 @@ const goBack = () => {
                                 type="text"
                                 id="slug"
                                 placeholder="e.g., chapter-1-intro (leave blank to auto-generate from name)"
-                                class="w-full rounded-lg border bg-white px-3.5 py-2 text-sm transition outline-none dark:bg-gray-900"
+                                class="w-full rounded-lg border px-3.5 py-2 text-sm transition outline-none"
                                 :class="getInputClass(form.errors.slug)"
                             />
                             <p