Allow custom display title and description

Author: cklei-carly

resources/dist/filament-tree.css

@@ -0,0 +1,41 @@
+@props(['title', 'icon', 'description', 'record'])
+@php
+    use Illuminate\Support\HtmlString;
+@endphp
+
+<div 
+{{
+    $attributes->merge([
+        'class' => 'flex items-center flex-1 gap-1'
+    ])
+}}>
+    @if ($icon)
+        <div class="w-4">
+            <x-dynamic-component :component="$icon" class="w-4 h-4"/>
+        </div>
+    @endif
+
+    <div @class([
+        'ml-4 rtl:mr-4' => !$icon,
+        'flex-1',
+    ])>
+        <span @class([
+            'font-semibold',
+        ])>
+            {{ str($title)->sanitizeHtml()->toHtmlString() }}
+        </span>
+    
+        @if ($description && (is_string($description) || $description instanceof HtmlString))
+            @if (is_string($description))
+                <span class="text-gray-500 dark:text-gray-400 text-sm truncate">
+                    {{ str($description)->sanitizeHtml()->toHtmlString() }}
+                </span>
+                
+            @else
+                {!! $description->toHtml() !!}
+            @endif
+            
+        @endif
+    </div>
+    
+</div>

resources/views/components/tree/item-display.blade.php

@@ -1,7 +1,7 @@
 @php use Illuminate\Database\Eloquent\Model; @endphp
 @php use Filament\Facades\Filament; @endphp
 @php use SolutionForest\FilamentTree\Components\Tree; @endphp
-@props(['record', 'containerKey', 'tree', 'title' => null, 'icon' => null])
+@props(['record', 'containerKey', 'tree', 'title' => null, 'icon' => null, 'description' => null])
 @php
     /** @var $record Model */
     /** @var $containerKey string */
@@ -36,18 +36,11 @@
         </button>
 
         <div class="dd-content dd-nodrag flex gap-1">
-            @if ($icon)
-                <div class="w-4">
-                    <x-dynamic-component :component="$icon" class="w-4 h-4"/>
-                </div>
-            @endif
 
-            <span @class([
-                'ml-4 rtl:mr-4' => !$icon,
-                'font-semibold'
-            ])>
-                {{ $title }}
-            </span>
+            <x-filament-tree::tree.item-display 
+                class="ml-1 rtl:mr-1"
+                :record="$record" :title="$title" :icon="$icon" :description="$description"
+            />
 
             <div @class(['dd-item-btns', 'hidden' => !count($children), 'flex items-center justify-center pl-3'])>
                 <button data-action="expand" @class(['hidden' => !$collapsed])>

resources/views/components/tree/item.blade.php

@@ -19,6 +19,7 @@
             :containerKey="$containerKey"
             :tree="$tree"
             :title="$title"
+            :description="$this->getTreeRecordDescription($record)"
             :icon="$icon"
         />
     @endforeach

resources/views/components/tree/list.blade.php

@@ -5,6 +5,7 @@
 use Closure;
 use Filament\Notifications\Notification;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Support\HtmlString;
 use SolutionForest\FilamentTree\Components\Tree;
 use SolutionForest\FilamentTree\Concern\HasActions;
 use SolutionForest\FilamentTree\Concern\HasRecords;
@@ -65,6 +66,11 @@ public function getTreeRecordTitle(?Model $record = null): string
         return $record->{(method_exists($record, 'determineTitleColumnName') ? $record->determineTitleColumnName() : 'title')};
     }
 
+    public function getTreeRecordDescription(?Model $record = null): string|HtmlString|null
+    {
+        return null;
+    }
+
     public function getTreeRecordIcon(?Model $record = null): ?string
     {
         if (! $record) {