Phase 3 asset storage management

resources/views/components/attachments.blade.php

@@ -3,10 +3,33 @@
 @if ($attachments->count())
     <div class="mt-4 grid gap-3 md:grid-cols-2">
         @foreach ($attachments as $attachment)
-            <a href="{{ asset('storage/'.$attachment->path) }}" class="block rounded border p-3 text-sm" target="_blank">
-                <span class="font-semibold">{{ $attachment->original_name }}</span>
-                <span class="block text-gray-500">{{ $attachment->caption }}</span>
-            </a>
+            <div class="rounded-md border border-slate-200 bg-white p-3 text-sm dark:border-slate-800 dark:bg-slate-900">
+                @if ($attachment->isImage())
+                    <a href="{{ $attachment->publicUrl() }}" target="_blank" class="block overflow-hidden rounded-md border border-slate-200 dark:border-slate-800">
+                        <img src="{{ $attachment->publicUrl() }}" alt="{{ $attachment->caption ?: $attachment->original_name }}" class="h-36 w-full object-cover">
+                    </a>
+                @endif
+                <div class="{{ $attachment->isImage() ? 'mt-3' : '' }} flex items-start justify-between gap-3">
+                    <a href="{{ $attachment->publicUrl() }}" class="font-semibold text-sky-700 hover:text-sky-900 dark:text-sky-300 dark:hover:text-sky-200" target="_blank">
+                        {{ $attachment->original_name }}
+                    </a>
+                    @auth
+                        @if (auth()->id() === $attachment->user_id || auth()->user()->hasRole('admin'))
+                            <form method="POST" action="{{ route('attachments.destroy', $attachment) }}">
+                                @csrf
+                                @method('DELETE')
+                                <button type="submit" class="text-xs font-semibold text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300">Delete</button>
+                            </form>
+                        @endif
+                    @endauth
+                </div>
+                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
+                    {{ $attachment->kind }} | {{ $attachment->mime_type ?: 'unknown type' }} | {{ $attachment->formattedSize() }}
+                </p>
+                @if ($attachment->caption)
+                    <p class="mt-2 text-slate-600 dark:text-slate-400">{{ $attachment->caption }}</p>
+                @endif
+            </div>
         @endforeach
     </div>
 @endif