From 5361c00e7bbc9463a333bfba7a498a86d330503e Mon Sep 17 00:00:00 2001
From: Mekan1206 <myradow207@gmail.com>
Date: Sun, 21 Dec 2025 05:31:08 +0500
Subject: [PATCH] images better

---
 .../spatie-media-library-file-entry.blade.php | 60 +++++++++++++++----
 1 file changed, 47 insertions(+), 13 deletions(-)

diff --git a/resources/views/filament/infolists/components/spatie-media-library-file-entry.blade.php b/resources/views/filament/infolists/components/spatie-media-library-file-entry.blade.php
index 25b75a9..7497c12 100644
--- a/resources/views/filament/infolists/components/spatie-media-library-file-entry.blade.php
+++ b/resources/views/filament/infolists/components/spatie-media-library-file-entry.blade.php
@@ -16,19 +16,53 @@
         >
             @foreach ($media as $item)
                 @if (str_starts_with($item->mime_type, 'image/'))
-                    <div class="flex flex-col items-center gap-2">
-                        <img 
-                            src="{{ $entry->getMediaUrl($item, $media->count() > 1 ? 'thumb' : null) }}" 
-                            class="w-full rounded-lg"
-                        />
-                        <button 
-                            type="button"
-                            class="text-sm font-medium text-primary-600 decoration-2 center underline focus:outline-none dark:text-primary-500"
-                            @click="$dispatch('open-modal', { id: 'preview-image-{{ $item->id }}' })"
-                        >
-                            {{ __('Watch Full') }}
-                        </button>
-                    </div>  
+                    <div class="flex items-center gap-3 rounded-xl border border-gray-200 bg-white p-2 shadow-sm dark:border-white/10 dark:bg-white/5">
+                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-gray-100 dark:bg-white/10 overflow-hidden">
+                            <img 
+                                src="{{ $entry->getMediaUrl($item, $media->count() > 1 ? 'thumb' : null) }}" 
+                                class="w-full h-full object-cover"
+                            />
+                        </div>
+
+                        <div class="flex-grow overflow-hidden">
+                            <p class="truncate text-sm font-medium text-gray-950 dark:text-white" title="{{ $item->name }}">
+                                {{ $item->name }}
+                            </p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400">
+                                {{ $item->human_readable_size }} 
+                                <span class="text-gray-300 dark:text-gray-600 px-1">•</span> 
+                                <span class="uppercase">{{ $item->extension }}</span>
+                            </p>
+                        </div>
+
+                        <div class="flex shrink-0 items-center gap-2 pr-2">
+                            <button 
+                                type="button"
+                                class="flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-50 dark:hover:bg-white/10 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-500 transition-colors"
+                                @click="$dispatch('open-modal', { id: 'preview-image-{{ $item->id }}' })"
+                                title="{{ __('View') }}"
+                            >
+                                <x-filament::icon
+                                    icon="heroicon-m-eye"
+                                    class="h-5 w-5"
+                                />
+                            </button>
+
+                            @if ($entry->isDownloadable())
+                                <a 
+                                    href="{{ $entry->getMediaUrl($item) }}" 
+                                    download
+                                    class="flex items-center justify-center h-8 w-8 rounded-full hover:bg-gray-50 dark:hover:bg-white/10 text-gray-500 hover:text-primary-600 dark:text-gray-400 dark:hover:text-primary-500 transition-colors"
+                                    title="{{ __('Download') }}"
+                                >
+                                    <x-filament::icon
+                                        icon="heroicon-m-arrow-down-tray"
+                                        class="h-5 w-5"
+                                    />
+                                </a>
+                            @endif
+                        </div>
+                    </div>
 
                     <x-filament::modal id="preview-image-{{ $item->id }}" width="5xl" :close-button="true">
                         <x-slot name="heading">