Polish Files UI and scope search to mobile-only transfers/files.

Remove desktop header search, wire mobile search to the transfers and files page, refine file icons and Shared badge, and align Transfers toolbar with Files. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-08 21:47:33 +00:00
parent f9b16f6b61
commit f458dccd49
9 changed files with 99 additions and 125 deletions
@@ -1,11 +1,4 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1545_8888)">
-<path d="M8.5 13.5H1.5C1.23478 13.5 0.98043 13.3946 0.792893 13.2071C0.605357 13.0196 0.5 12.7652 0.5 12.5V1.5C0.5 1.23478 0.605357 0.98043 0.792893 0.792893C0.98043 0.605357 1.23478 0.5 1.5 0.5H12.5C12.7652 0.5 13.0196 0.605357 13.2071 0.792893C13.3946 0.98043 13.5 1.23478 13.5 1.5V8.5L8.5 13.5Z" stroke="#000001" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8.5 9V13.5L13.5 8.5H9C8.86739 8.5 8.74021 8.55268 8.64645 8.64645C8.55268 8.74021 8.5 8.86739 8.5 9Z" stroke="#000001" stroke-linecap="round" stroke-linejoin="round"/>
-</g>
-<defs>
-<clipPath id="clip0_1545_8888">
-<rect width="14" height="14" fill="white"/>
-</clipPath>
-</defs>
+<path d="M8.5 13.5H1.5C1.23478 13.5 0.98043 13.3946 0.792893 13.2071C0.605357 13.0196 0.5 12.7652 0.5 12.5V1.5C0.5 1.23478 0.605357 0.98043 0.792893 0.792893C0.98043 0.605357 1.23478 0.5 1.5 0.5H12.5C12.7652 0.5 13.0196 0.605357 13.2071 0.792893C13.3946 0.98043 13.5 1.23478 13.5 1.5V8.5L8.5 13.5Z" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.5 9V13.5L13.5 8.5H9C8.86739 8.5 8.74021 8.55268 8.64645 8.64645C8.55268 8.74021 8.5 8.86739 8.5 9Z" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
@@ -1,6 +1,6 @@
 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_1545_8905)">
-<path d="M13.5 6C13.5 5.60218 13.342 5.22064 13.0607 4.93934C12.7794 4.65804 12.3978 4.5 12 4.5H7L5.56 1.5H2C1.60218 1.5 1.22064 1.65804 0.93934 1.93934C0.658035 2.22064 0.5 2.60218 0.5 3V11C0.5 11.3978 0.658035 11.7794 0.93934 12.0607C1.22064 12.342 1.60218 12.5 2 12.5H12C12.3978 12.5 12.7794 12.342 13.0607 12.0607C13.342 11.7794 13.5 11.3978 13.5 11V6Z" stroke="#000001" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.5 6C13.5 5.60218 13.342 5.22064 13.0607 4.93934C12.7794 4.65804 12.3978 4.5 12 4.5H7L5.56 1.5H2C1.60218 1.5 1.22064 1.65804 0.93934 1.93934C0.658035 2.22064 0.5 2.60218 0.5 3V11C0.5 11.3978 0.658035 11.7794 0.93934 12.0607C1.22064 12.342 1.60218 12.5 2 12.5H12C12.3978 12.5 12.7794 12.342 13.0607 12.0607C13.342 11.7794 13.5 11.3978 13.5 11V6Z" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 <defs>
 <clipPath id="clip0_1545_8905">
@@ -257,15 +257,6 @@ document.addEventListener('alpine:init', () => {
        },
    }));
 });
-
-// Global "/" shortcut to focus search
-document.addEventListener('keydown', (e) => {
-    if (e.key === '/' && !['INPUT','TEXTAREA','SELECT'].includes(document.activeElement.tagName) && !document.activeElement.isContentEditable) {
-        e.preventDefault();
-        const input = document.querySelector('[x-data*="topbarSearch"] input');
-        if (input) input.focus();
-    }
-});
 </script>
@include('partials.afia')
@include('partials.sso-keepalive')
@@ -11,6 +11,7 @@
    if ($profileMenuItems === [] && $profileUrl !== '#') {
        $profileMenuItems = [['type' => 'link', 'label' => 'Profile', 'href' => $profileUrl]];
    }
+    $searchLabel = $searchLabel ?? 'Search';
    $navActive = fn (bool $active) => $active ? 'text-indigo-600' : 'text-slate-600';
@endphp
 <div x-data="{ profileOpen: false }" class="lg:hidden">
@@ -26,7 +27,7 @@
            <a href="{{ $searchUrl }}"
               class="flex flex-col items-center justify-center gap-1 px-2 py-2 transition hover:text-slate-900 {{ $navActive($searchActive ?? false) }}">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
-                <span class="text-[10px] font-medium">Search</span>
+                <span class="text-[10px] font-medium">{{ $searchLabel }}</span>
            </a>

            @if (!empty($centerCompose))
@@ -13,58 +13,6 @@
            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
        </button>
        @include('partials.mobile-topbar-title')
-        {{-- Search --}}
-        <div class="relative hidden w-full max-w-md lg:block" x-data="topbarSearch({ searchUrl: @js(route('transfer.search')) })" @click.outside="open = false" @keydown.escape.window="open = false">
-            <div class="relative">
-                <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
-                <input type="text"
-                       x-model="query"
-                       @focus="onFocus()"
-                       @input.debounce.200ms="search()"
-                       @keydown.arrow-down.prevent="moveDown()"
-                       @keydown.arrow-up.prevent="moveUp()"
-                       @keydown.enter.prevent="go()"
-                       placeholder="Search transfers and files…"
-                       class="w-full rounded-xl border border-slate-200 bg-slate-50 py-2 pl-9 pr-10 text-sm text-slate-700 placeholder-slate-400 transition focus:border-indigo-300 focus:bg-white focus:ring-2 focus:ring-indigo-100 focus:outline-none">
-                <kbd class="pointer-events-none absolute right-3 top-1/2 hidden -translate-y-1/2 rounded-md border border-slate-200 bg-white px-1.5 py-0.5 text-[10px] font-medium text-slate-400 sm:inline-block">/</kbd>
-            </div>
-            <div x-show="open && (results.length > 0 || (query.length >= 2 && !loading))"
-                 x-cloak
-                 x-transition.opacity.duration.150ms
-                 class="absolute left-0 top-full z-30 mt-1.5 w-full overflow-hidden rounded-xl border border-slate-200 bg-white shadow-lg">
-                <template x-if="loading">
-                    <div class="px-4 py-3 text-center text-xs text-slate-400">Searching…</div>
-                </template>
-                <template x-if="!loading && results.length === 0 && query.length >= 2">
-                    <div class="px-4 py-3 text-center text-xs text-slate-500">No results for "<span x-text="query" class="font-medium"></span>"</div>
-                </template>
-                <template x-if="!loading && results.length > 0">
-                    <ul class="max-h-72 overflow-y-auto py-1">
-                        <template x-for="(item, idx) in results" :key="item.url">
-                            <li>
-                                <a :href="item.url"
-                                   @mouseenter="active = idx"
-                                   :class="idx === active ? 'bg-indigo-50 text-indigo-700' : 'text-slate-700 hover:bg-slate-50'"
-                                   class="flex items-start gap-3 px-4 py-2.5 text-sm transition">
-                                    <span class="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg"
-                                          :class="item.type === 'transfer' ? 'bg-indigo-100 text-indigo-600' : 'bg-violet-100 text-violet-600'">
-                                        <svg x-show="item.type === 'transfer'" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 7.5 12 3m0 0L7.5 7.5M12 3v13.5"/></svg>
-                                        <svg x-show="item.type !== 'transfer'" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
-                                    </span>
-                                    <span class="min-w-0 flex-1">
-                                        <span class="block truncate font-medium" x-text="item.title"></span>
-                                        <span class="block truncate text-xs text-slate-500" x-text="item.subtitle"></span>
-                                    </span>
-                                </a>
-                            </li>
-                        </template>
-                    </ul>
-                </template>
-                <div class="border-t border-slate-100 px-4 py-2">
-                    <a :href="`{{ route('transfer.search') }}?q=${encodeURIComponent(query)}`" class="text-xs font-medium text-indigo-600 hover:text-indigo-700">View all results</a>
-                </div>
-            </div>
-        </div>
    </div>

    <div class="flex items-center gap-3">
@@ -166,7 +166,7 @@
                                    <td class="px-4 py-3"></td>
                                    <td class="px-4 py-3" colspan="4">
                                        <a href="{{ route('transfer.files.index', ['folder' => $folder->id]) }}" class="flex items-center gap-3">
-                                            <img src="{{ $iconBase }}/folder.svg" alt="" class="h-8 w-8">
+                                            @include('transfer.files.partials.folder-list-icon', ['size' => 'xs'])
                                            <div>
                                                <p class="font-medium text-slate-900">{{ $folder->title }}</p>
                                                <p class="text-xs text-slate-500">{{ $folder->files_count }} item{{ $folder->files_count === 1 ? '' : 's' }}</p>
@@ -185,7 +185,7 @@
                                </td>
                                <td class="px-4 py-3">
                                    <div class="flex items-center gap-3">
-                                        <img src="{{ $iconBase }}/file.svg" alt="" class="h-8 w-8 shrink-0">
+                                        @include('transfer.files.partials.file-list-icon', ['size' => 'xs'])
                                        <div class="min-w-0">
                                            <p class="truncate font-medium text-slate-900">{{ $file->original_name }}</p>
                                        </div>
@@ -198,7 +198,10 @@
                                <td class="px-4 py-3 text-slate-600">{{ $file->humanSize() }}</td>
                                <td class="hidden px-4 py-3 md:table-cell">
                                    @if($file->transfer->recipient_email || $file->downloads_total > 0)
-                                        <span class="inline-flex items-center gap-1 text-xs text-slate-600">Shared</span>
+                                        <span class="inline-flex items-center gap-1 text-xs text-slate-600">
+                                            <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/></svg>
+                                            Shared
+                                        </span>
                                    @else
                                        <span class="text-xs text-slate-400">Private</span>
                                    @endif
@@ -0,0 +1,17 @@
+@php
+    $size = $size ?? 'sm';
+    $classes = match ($size) {
+        'xs' => 'h-7 w-7 rounded-md',
+        default => 'h-8 w-8 rounded-lg',
+    };
+    $iconClasses = match ($size) {
+        'xs' => 'h-3.5 w-3.5',
+        default => 'h-4 w-4',
+    };
+@endphp
+<span @class([
+    'inline-flex shrink-0 items-center justify-center bg-gradient-to-br from-slate-50 to-indigo-50 text-indigo-500 ring-1 ring-slate-200/80',
+    $classes,
+])>
+    <img src="{{ asset('images/ladill-icons/file.svg') }}" alt="" @class([$iconClasses, 'opacity-90'])>
+</span>
@@ -0,0 +1,17 @@
+@php
+    $size = $size ?? 'sm';
+    $classes = match ($size) {
+        'xs' => 'h-7 w-7 rounded-md',
+        default => 'h-8 w-8 rounded-lg',
+    };
+    $iconClasses = match ($size) {
+        'xs' => 'h-3.5 w-3.5',
+        default => 'h-4 w-4',
+    };
+@endphp
+<span @class([
+    'inline-flex shrink-0 items-center justify-center bg-gradient-to-br from-amber-50 to-orange-50 text-amber-600 ring-1 ring-amber-100',
+    $classes,
+])>
+    <img src="{{ asset('images/ladill-icons/folder.svg') }}" alt="" @class([$iconClasses, 'opacity-90'])>
+</span>
@@ -1,6 +1,6 @@
 <x-user-layout>
    <x-slot name="title">Transfers</x-slot>
-    <div class="space-y-6">
+    <div class="space-y-4">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div>
                <h1 class="text-xl font-semibold text-slate-900">Transfers</h1>
@@ -9,56 +9,57 @@
            <a href="{{ route('transfer.transfers.create') }}" class="inline-flex rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">New transfer</a>
        </div>

-        <form method="get" action="{{ route('transfer.transfers.index') }}" class="flex flex-wrap items-center gap-3">
-            <div class="relative min-w-[220px] flex-1">
-                <svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
-                <input type="search" name="q" value="{{ $search }}" placeholder="Search transfers, recipients, files…"
-                       class="w-full rounded-xl border border-slate-200 bg-white py-2 pl-9 pr-3 text-sm text-slate-700 placeholder-slate-400 focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100">
-            </div>
-            <select name="status" class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100">
-                <option value="all" @selected($status === 'all')>All statuses</option>
-                <option value="active" @selected($status === 'active')>Active</option>
-                <option value="grace" @selected($status === 'grace')>Payment due</option>
-                <option value="expired" @selected($status === 'expired')>Expired</option>
-            </select>
-            <select name="sort" class="rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100">
-                <option value="newest" @selected($sort === 'newest')>Newest first</option>
-                <option value="oldest" @selected($sort === 'oldest')>Oldest first</option>
-                <option value="title" @selected($sort === 'title')>Title A–Z</option>
-                <option value="downloads" @selected($sort === 'downloads')>Most downloads</option>
-            </select>
-            <button type="submit" class="rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Apply</button>
-            @if($search !== '' || $status !== 'all' || $sort !== 'newest')
-                <a href="{{ route('transfer.transfers.index') }}" class="text-sm font-medium text-slate-500 hover:text-slate-700">Clear</a>
-            @endif
-        </form>
-
-        @if($transfers->isEmpty())
-            <div class="rounded-2xl border border-dashed border-slate-200 bg-white px-6 py-12 text-center">
-                <p class="text-sm text-slate-500">
-                    @if($search !== '' || $status !== 'all')
-                        No transfers match your filters.
-                    @else
-                        No transfers yet.
+        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
+            <div class="flex flex-wrap items-center gap-2 border-b border-slate-100 px-4 py-2.5">
+                <form method="get" action="{{ route('transfer.transfers.index') }}" class="ml-auto flex w-full flex-wrap items-center gap-2 sm:w-auto">
+                    <div class="relative min-w-0 flex-1 sm:min-w-[200px]">
+                        <svg class="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/></svg>
+                        <input type="search" name="q" value="{{ $search }}" placeholder="Search transfers…"
+                               class="w-full rounded-lg border border-slate-200 py-1.5 pl-8 pr-2.5 text-xs text-slate-700 placeholder-slate-400 focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100 sm:w-52">
+                    </div>
+                    <select name="status" onchange="this.form.submit()" class="rounded-lg border border-slate-200 px-2 py-1.5 text-xs text-slate-700">
+                        <option value="all" @selected($status === 'all')>All statuses</option>
+                        <option value="active" @selected($status === 'active')>Active</option>
+                        <option value="grace" @selected($status === 'grace')>Payment due</option>
+                        <option value="expired" @selected($status === 'expired')>Expired</option>
+                    </select>
+                    <select name="sort" onchange="this.form.submit()" class="rounded-lg border border-slate-200 px-2 py-1.5 text-xs text-slate-700">
+                        <option value="newest" @selected($sort === 'newest')>Newest</option>
+                        <option value="oldest" @selected($sort === 'oldest')>Oldest</option>
+                        <option value="title" @selected($sort === 'title')>Title</option>
+                        <option value="downloads" @selected($sort === 'downloads')>Downloads</option>
+                    </select>
+                    @if($search !== '' || $status !== 'all' || $sort !== 'newest')
+                        <a href="{{ route('transfer.transfers.index') }}" class="text-xs font-medium text-slate-500 hover:text-slate-700">Clear</a>
                    @endif
-                </p>
-                <a href="{{ route('transfer.transfers.create') }}" class="mt-3 inline-block text-sm font-semibold text-indigo-600 hover:text-indigo-800">Create your first transfer</a>
+                </form>
            </div>
-        @else
-            <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
-                <div class="flex items-center justify-between border-b border-slate-100 px-6 py-3 text-xs text-slate-500">
+
+            @if($transfers->isEmpty())
+                <div class="px-6 py-12 text-center">
+                    <p class="text-sm text-slate-500">
+                        @if($search !== '' || $status !== 'all')
+                            No transfers match your filters.
+                        @else
+                            No transfers yet.
+                        @endif
+                    </p>
+                    <a href="{{ route('transfer.transfers.create') }}" class="mt-3 inline-block text-sm font-semibold text-indigo-600 hover:text-indigo-800">Create your first transfer</a>
+                </div>
+            @else
+                <div class="flex items-center justify-between border-b border-slate-100 px-4 py-3 text-xs text-slate-500">
                    <span>{{ $transfers->total() }} transfer{{ $transfers->total() === 1 ? '' : 's' }}</span>
                    <span>Showing {{ $transfers->firstItem() }}–{{ $transfers->lastItem() }}</span>
                </div>
                <table class="min-w-full divide-y divide-slate-100">
                    <thead class="bg-slate-50 text-left text-xs font-semibold uppercase tracking-wide text-slate-500">
                        <tr>
-                            <th class="px-6 py-3">Title</th>
-                            <th class="px-6 py-3">Status</th>
-                            <th class="px-6 py-3">Files</th>
-                            <th class="px-6 py-3">Downloads</th>
-                            <th class="px-6 py-3">Expires</th>
-                            <th class="px-6 py-3"></th>
+                            <th class="px-4 py-3 sm:px-6">Title</th>
+                            <th class="px-4 py-3 sm:px-6">Status</th>
+                            <th class="hidden px-4 py-3 sm:table-cell sm:px-6">Files</th>
+                            <th class="hidden px-4 py-3 md:table-cell sm:px-6">Downloads</th>
+                            <th class="hidden px-4 py-3 lg:table-cell sm:px-6">Expires</th>
+                            <th class="px-4 py-3 sm:px-6"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-sm">
@@ -71,29 +72,32 @@
                                };
                            @endphp
                            <tr class="hover:bg-slate-50/80">
-                                <td class="px-6 py-4">
+                                <td class="px-4 py-4 sm:px-6">
                                    <p class="font-medium text-slate-900">{{ $transfer->title }}</p>
                                    <p class="text-xs text-slate-500">{{ $transfer->created_at->format('M j, Y') }}</p>
                                    @if($transfer->recipient_email)
                                        <p class="mt-0.5 text-xs text-slate-400">To {{ $transfer->recipient_email }}</p>
                                    @endif
                                </td>
-                                <td class="px-6 py-4">
+                                <td class="px-4 py-4 sm:px-6">
                                    <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium {{ $statusClass }}">
                                        {{ $transfer->billingStatusLabel() }}
                                    </span>
                                </td>
-                                <td class="px-6 py-4 text-slate-600">{{ $transfer->files->count() }}</td>
-                                <td class="px-6 py-4 text-slate-600">{{ number_format($transfer->downloads_total) }}</td>
-                                <td class="px-6 py-4 text-slate-600">{{ $transfer->expires_at?->format('M j, Y') ?? '—' }}</td>
-                                <td class="px-6 py-4 text-right">
+                                <td class="hidden px-4 py-4 text-slate-600 sm:table-cell sm:px-6">{{ $transfer->files->count() }}</td>
+                                <td class="hidden px-4 py-4 text-slate-600 md:table-cell sm:px-6">{{ number_format($transfer->downloads_total) }}</td>
+                                <td class="hidden px-4 py-4 text-slate-600 lg:table-cell sm:px-6">{{ $transfer->expires_at?->format('M j, Y') ?? '—' }}</td>
+                                <td class="px-4 py-4 text-right sm:px-6">
                                    <a href="{{ route('transfer.transfers.show', $transfer) }}" class="font-medium text-indigo-600 hover:text-indigo-800">Open</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
-            </div>
+            @endif
+        </div>
+
+        @if($transfers->hasPages())
            <div>{{ $transfers->links() }}</div>
        @endif
    </div>