admin/imail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance privacy email viewer, dynamic pagination, and cinematic loading states

Browse Source
This commit is contained in:
idevakk
2026-03-04 22:31:32 +05:30
parent 011ca2a408
commit 22e2b2457a
3 changed files with 387 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
resources/views/livewire/mailbox.blade.php
View File

@@ -46,9 +46,9 @@
'xl:w-20': !sidebarOpen && window.innerWidth >= 1280
}">
<div class="h-16 flex items-center justify-between px-6 border-b border-white/5">
<div class="flex items-center gap-3">
<a href="/" class="flex items-center gap-3 hover:opacity-80 transition-opacity">
<x-bento.logo size="sm" x-data="{ showText: sidebarOpen }" />
</div>
</a>
<!-- Mobile Close Button -->
<button @click="sidebarOpen = false" class="xl:hidden p-1.5 rounded-lg hover:bg-white/5 text-zinc-500 hover:text-white transition-all">
@@ -213,13 +213,13 @@
</div>
<!-- List Content -->
<div class="flex-1 overflow-y-auto divide-y divide-white/5 scrollbar-hide">
<div class="flex-1 overflow-y-auto divide-y divide-white/5 scrollbar-hide" x-ref="listContainer">
@foreach($emails as $email)
<div @click="$wire.selectEmail({{ $email['id'] }}); mobileView = 'detail'"
<div wire:key="email-{{ $email['id'] }}"
@click="$wire.selectEmail({{ $email['id'] }}); mobileView = 'detail'"
class="p-5 cursor-pointer transition-all relative group"
:class="selectedId === {{ $email['id'] }} ? 'bg-pink-500/5' : 'hover:bg-white/[0.02]'">
<!-- Active Indicator -->
<div class="absolute left-0 top-0 bottom-0 w-1 bg-pink-500 transition-transform duration-300"
<div class="absolute left-0 top-0 bottom-0 w-1 bg-pink-500 scale-y-0 transition-transform duration-300"
:class="selectedId === {{ $email['id'] }} ? 'scale-y-100' : 'scale-y-0'"></div>
<div class="flex items-start justify-between gap-4 mb-2">
@@ -257,6 +257,7 @@
<!-- Sticky Pagination -->
<div class="h-14 flex items-center justify-between px-4 border-t border-white/5 bg-zinc-950/40 backdrop-blur-xl shrink-0">
<button wire:click="previousPage"
@click="$refs.listContainer.scrollTop = 0"
class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 border border-white/5 text-[10px] font-bold text-zinc-400 hover:text-white hover:bg-white/10 transition-all disabled:opacity-30 disabled:pointer-events-none uppercase tracking-widest"
{{ $page <= 1 ? 'disabled' : '' }}>
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
@@ -270,6 +271,7 @@
</div>
<button wire:click="nextPage"
@click="$refs.listContainer.scrollTop = 0"
class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/5 border border-white/5 text-[10px] font-bold text-zinc-400 hover:text-white hover:bg-white/10 transition-all disabled:opacity-30 disabled:pointer-events-none uppercase tracking-widest"
{{ $page >= $totalPages ? 'disabled' : '' }}>
Next
@@ -328,9 +330,33 @@
</div>
<!-- Email Detail Column -->
<main class="flex-1 flex flex-col min-w-0 bg-zinc-950/50 backdrop-blur-md relative z-10 transition-all duration-300"
<main class="flex-1 flex flex-col min-w-0 bg-zinc-950/50 backdrop-blur-md relative z-10 transition-all duration-300 h-full overflow-hidden"
:class="{'hidden lg:flex': mobileView === 'list' || !selectedId}">
<!-- Cinematic Loading Overlay -->
<div wire:loading.flex wire:target="selectEmail" class="absolute inset-0 z-[100] bg-zinc-950/60 backdrop-blur-xl items-center justify-center">
<div class="flex flex-col items-center justify-center">
<div class="w-20 h-20 relative mb-8">
<div class="absolute inset-0 border-4 border-pink-500/10 rounded-full"></div>
<div class="absolute inset-0 border-4 border-pink-500 border-t-transparent animate-spin rounded-full shadow-[0_0_20px_rgba(236,72,153,0.2)]"></div>
<div class="absolute inset-4 bg-pink-500/20 rounded-full blur-2xl animate-pulse"></div>
<div class="absolute inset-0 flex items-center justify-center">
<svg class="w-8 h-8 text-pink-500 animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
</div>
<div class="flex flex-col items-center">
<span class="text-[10px] font-black text-white uppercase tracking-[0.4em] mb-2 animate-pulse">Establishing Secure Channel</span>
<div class="flex gap-1">
<div class="w-1 h-1 rounded-full bg-pink-500 animate-bounce [animation-delay:-0.3s]"></div>
<div class="w-1 h-1 rounded-full bg-pink-500 animate-bounce [animation-delay:-0.15s]"></div>
<div class="w-1 h-1 rounded-full bg-pink-500 animate-bounce"></div>
</div>
</div>
</div>
</div>
@php $currentEmail = $selectedEmailId ? collect($emails)->firstWhere('id', $selectedEmailId) : null; @endphp
@if($currentEmail)
@@ -362,11 +388,26 @@
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
</button>
</div>
<!-- Privacy Toggles -->
<div class="ml-auto flex items-center p-1 bg-white/5 border border-white/5 rounded-xl">
<button wire:click="$set('viewMode', 'text')"
class="px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all"
:class="$wire.viewMode === 'text' ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'">
Text
</button>
<button wire:click="$set('viewMode', 'html')"
class="px-3 py-1.5 rounded-lg text-[10px] font-bold uppercase tracking-widest transition-all"
:class="$wire.viewMode === 'html' ? 'bg-zinc-800 text-white shadow-lg' : 'text-zinc-500 hover:text-zinc-300'">
HTML
</button>
</div>
</div>
<!-- Detail Content -->
<div class="flex-1 overflow-y-auto p-8 lg:p-12 scrollbar-hide">
<div class="max-w-3xl">
<div class="flex-1 relative overflow-hidden">
<div class="h-full overflow-y-auto p-8 lg:p-12 scrollbar-hide" wire:loading.remove wire:target="selectEmail">
<div class="max-w-3xl">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12">
<div class="flex items-center gap-4">
<div class="w-14 h-14 rounded-2xl bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center text-xl font-bold text-white shadow-xl">
@@ -386,9 +427,57 @@
{{ $currentEmail['subject'] }}
</h1>
<div class="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4 font-medium mb-12">
{!! $currentEmail['content'] !!}
</div>
@if($viewMode === 'html')
<div class="mb-8 p-4 rounded-2xl border transition-all duration-500 @if(!$allowRemoteContent) bg-amber-500/5 border-amber-500/20 @else bg-emerald-500/5 border-emerald-500/20 @endif flex flex-col sm:flex-row items-center justify-between gap-4 group">
<div class="flex items-center gap-3">
@if(!$allowRemoteContent)
<div class="w-10 h-10 rounded-xl bg-amber-500/10 text-amber-500 flex items-center justify-center shrink-0">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
</div>
<div>
<div class="text-xs font-bold text-amber-500 uppercase tracking-widest leading-none mb-1">Remote assets blocked</div>
<p class="text-[10px] text-zinc-500 font-medium">For your privacy, Zemail has disabled automatic loading of remote images.</p>
</div>
@else
<div class="w-10 h-10 rounded-xl bg-emerald-500/10 text-emerald-500 flex items-center justify-center shrink-0">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
</div>
<div>
<div class="text-xs font-bold text-emerald-500 uppercase tracking-widest leading-none mb-1">Remote content enabled</div>
<p class="text-[10px] text-zinc-500 font-medium">Images and remote resources are currently active for this email.</p>
</div>
@endif
</div>
@if(!$allowRemoteContent)
<button wire:click="$set('allowRemoteContent', true)"
class="px-4 py-2 rounded-xl bg-amber-500 text-zinc-950 font-black text-[10px] uppercase tracking-wider hover:bg-amber-400 transition-all flex items-center gap-2">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
Load Content
</button>
@else
<button wire:click="$set('allowRemoteContent', false)"
class="px-4 py-2 rounded-xl bg-zinc-800 text-zinc-400 font-bold text-[10px] uppercase tracking-wider hover:text-white transition-all flex items-center gap-2 border border-white/5">
<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /></svg>
Re-Block
</button>
@endif
</div>
@endif
@if($viewMode === 'text' && empty($currentEmail['body_text']))
<div class="mb-8 p-4 rounded-2xl bg-zinc-900 border border-white/5 flex items-center gap-4">
<div class="w-10 h-10 rounded-xl bg-white/5 text-zinc-400 flex items-center justify-center shrink-0">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
</div>
<div>
<div class="text-[10px] font-bold text-zinc-300 uppercase tracking-widest leading-none mb-1">Plain text version missing</div>
<p class="text-[9px] text-zinc-500 font-medium">Viewing sanitized HTML version instead.</p>
</div>
</div>
@endif
<div class="prose prose-invert max-w-none text-zinc-400 leading-relaxed font-medium mb-12 {{ $viewMode === 'text' ? 'whitespace-pre-wrap font-mono text-[13px] shadow-[inset_0_20px_50px_rgba(0,0,0,0.1)] p-8 bg-zinc-900/30 rounded-3xl border border-white/5 tracking-tight' : 'space-y-4' }}">{!! $this->getProcessedContent($currentEmail) !!}</div>
@if(count($currentEmail['attachments']) > 0)
<div class="mt-12 pt-8 border-t border-white/5">
@@ -430,10 +519,11 @@
</div>
@endif
</div>
</div>
</div>
@else
<!-- Empty State -->
<div class="flex-1 flex flex-col items-center justify-center p-12 text-center">
<div class="flex-1 flex flex-col items-center justify-center p-12 text-center" wire:loading.remove wire:target="selectEmail">
<div class="w-24 h-24 rounded-3xl bg-zinc-900 border border-white/5 flex items-center justify-center text-zinc-700 mb-8 relative">
<div class="absolute inset-0 bg-pink-500/5 rounded-3xl blur-2xl"></div>
<svg class="w-12 h-12 relative z-10" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>