Polish Files UI and scope search to mobile-only transfers/files.
Deploy Ladill Transfer / deploy (push) Successful in 41s
Deploy Ladill Transfer / deploy (push) Successful in 41s
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>
This commit is contained in:
isaacclad
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user