From 996ae20bbb5ef45eebadd1f2028e77342ac44fa1 Mon Sep 17 00:00:00 2001
From: idevakk <219866223+idevakk@users.noreply.github.com>
Date: Wed, 4 Mar 2026 00:10:50 +0530
Subject: [PATCH] feat: implement adaptive multi-pane mailbox with utilities
and security gates
- Added fully responsive 3-pane layout for Mailbox
- Integrated global cinematic Toast system in app shell
- Implemented Copy to Clipboard and QR Code modal utilities
- Added diverse mock email data for premium demonstration
- Implemented security gates for custom mailboxes and attachments
- Fixed critical 500 error for orphaned email selection
- Refined landing page hero CTA text
---
app/Livewire/Mailbox.php | 255 ++++++++
.../views/components/bento/hero.blade.php | 6 +-
.../views/components/bento/nav.blade.php | 2 +-
.../views/components/layouts/app.blade.php | 98 ++-
resources/views/livewire/mailbox.blade.php | 600 ++++++++++++++++++
routes/web.php | 1 +
6 files changed, 954 insertions(+), 8 deletions(-)
create mode 100644 app/Livewire/Mailbox.php
create mode 100644 resources/views/livewire/mailbox.blade.php
diff --git a/app/Livewire/Mailbox.php b/app/Livewire/Mailbox.php
new file mode 100644
index 0000000..9a02873
--- /dev/null
+++ b/app/Livewire/Mailbox.php
@@ -0,0 +1,255 @@
+ 1, 'address' => 'idevakk@imail.com', 'expires_at' => '23:59:12', 'progress' => 90],
+ ['id' => 2, 'address' => 'tester_99@devmail.ai', 'expires_at' => '45:12:05', 'progress' => 40],
+ ];
+
+ public $currentMailboxId = 1;
+
+ public $activeFolder = 'inbox';
+
+ public $selectedEmailId = null;
+
+ public $search = '';
+
+ public $page = 1;
+
+ public $totalPages = 5;
+
+ // Create State
+ public $showCreateModal = false;
+
+ public $createType = 'random'; // random | custom
+
+ public $customUsername = '';
+
+ public $customDomain = 'imail.com';
+
+ public $availableDomains = ['imail.com', 'devmail.ai', 'temp-inbox.net'];
+
+ public function getEmailsProperty()
+ {
+ // Mock emails based on mailbox ID for demonstration
+ $emails = [
+ 1 => [
+ [
+ 'id' => 1,
+ 'from_name' => 'GitHub Security',
+ 'from_email' => 'noreply@github.com',
+ 'subject' => '[GitHub] A new personal access token was created',
+ 'preview' => 'A new personal access token (classic) was recently added to your account.',
+ 'content' => 'Hi @idevakk,
A new personal access token (classic) was recently added to your account IDEVAKK.
If this was you, you can safely ignore this email.
If this was not you, please visit https://github.com/settings/tokens to revoke the token.
',
+ 'time' => '10:24 AM',
+ 'unread' => true,
+ 'flagged' => true,
+ 'attachments' => [],
+ ],
+ [
+ 'id' => 101,
+ 'from_name' => 'Linear',
+ 'from_email' => 'updates@linear.app',
+ 'subject' => 'New issue assigned: [UI-124] Fix sidebar overflow',
+ 'preview' => 'You have been assigned to a new issue in the UI project. Please review the details...',
+ 'content' => 'Hello,
You have been assigned to [UI-124] Fix sidebar overflow in mobile view.
Priority: High
Project: Imail Revamp
View details at https://linear.app/imail/issue/UI-124
',
+ 'time' => '11:45 AM',
+ 'unread' => true,
+ 'flagged' => false,
+ 'attachments' => [],
+ ],
+ [
+ 'id' => 102,
+ 'from_name' => 'Canva',
+ 'from_email' => 'design@canva.com',
+ 'subject' => 'Your design "Imail Presentation" is ready',
+ 'preview' => 'Collaborate with your team on your latest design for the Imail product launch.',
+ 'content' => 'Hey there!
Your team is waiting for your feedback on the Imail Presentation design.
Check the latest comments and approve the final version.
',
+ 'time' => '9:12 AM',
+ 'unread' => false,
+ 'flagged' => false,
+ 'attachments' => [
+ ['name' => 'presentation_v1.pdf', 'size' => '4.2 MB'],
+ ],
+ ],
+ [
+ 'id' => 103,
+ 'from_name' => 'Figma',
+ 'from_email' => 'notifications@figma.com',
+ 'subject' => 'Atul Kumar mentioned you in "Mobile App (Draft)"',
+ 'preview' => '"@idevakk take a look at the revised QR modal design, let me know if..."',
+ 'content' => 'Atul Kumar mentioned you in a comment on Mobile App (Draft):
"@idevakk take a look at the revised QR modal design, let me know if the proportions look right to you."
Reply in Figma or view the comment online.
',
+ 'time' => '8:30 AM',
+ 'unread' => false,
+ 'flagged' => true,
+ 'attachments' => [],
+ ],
+ ],
+ 2 => [
+ [
+ 'id' => 2,
+ 'from_name' => 'Stripe',
+ 'from_email' => 'support@stripe.com',
+ 'subject' => 'Your weekly payment report',
+ 'preview' => 'Your weekly report for the period of Feb 24 - Mar 2 is now available.',
+ 'content' => 'Hello,
Your weekly report for the period of Feb 24 - Mar 2 is now available in your dashboard.
Total Volume: $12,450.00
View the full report details online.
',
+ 'time' => 'Yesterday',
+ 'unread' => false,
+ 'flagged' => false,
+ 'attachments' => [
+ ['name' => 'report_mar_02.pdf', 'size' => '1.2 MB'],
+ ],
+ ],
+ [
+ 'id' => 201,
+ 'from_name' => 'Postmark',
+ 'from_email' => 'alerts@postmarkapp.com',
+ 'subject' => 'Outbound volume spike detected',
+ 'preview' => 'We noticed a sudden increase in outbound emails from your "Production" server.',
+ 'content' => 'Alert: Outbound volume spike.
Server: Production
We detected 5,000+ emails sent in the last hour. Please ensure this is expected activity.
',
+ 'time' => 'Yesterday',
+ 'unread' => true,
+ 'flagged' => false,
+ 'attachments' => [],
+ ],
+ [
+ 'id' => 202,
+ 'from_name' => 'Vercel',
+ 'from_email' => 'deployments@vercel.com',
+ 'subject' => 'Team "idevakk" deployment successful',
+ 'preview' => 'Production deployment for the imail-frontend project has completed.',
+ 'content' => 'Your deployment is live!
Project: imail-frontend
Command: npm run build
View your deployment here: https://imail.app
',
+ 'time' => 'Mar 2',
+ 'unread' => false,
+ 'flagged' => false,
+ 'attachments' => [],
+ ],
+ ],
+ ];
+
+ return $emails[$this->currentMailboxId] ?? [
+ [
+ 'id' => 3,
+ 'from_name' => 'Slack',
+ 'from_email' => 'notifications@slack.com',
+ 'subject' => 'You have 12 unread messages from your team',
+ 'preview' => 'Atul Kumar: "Did you check the new API endpoints? We need them for..."',
+ 'content' => 'You have new activity in Slack.
- #dev-chat: 8 new messages
- #announcements: 4 new messages
',
+ 'time' => 'Mar 1',
+ 'unread' => true,
+ 'flagged' => false,
+ 'attachments' => [],
+ ],
+ [
+ 'id' => 301,
+ 'from_name' => 'Zoom',
+ 'from_email' => 'no-reply@zoom.us',
+ 'subject' => 'Meeting Reminder: "Sprint Planning"',
+ 'preview' => 'Your Sprint Planning meeting is scheduled to start in 15 minutes.',
+ 'content' => 'Friendly reminder that your Sprint Planning call starts soon.
Link: https://zoom.us/j/123456789
',
+ 'time' => 'Feb 28',
+ 'unread' => false,
+ 'flagged' => false,
+ 'attachments' => [],
+ ],
+ ];
+ }
+
+ public function selectEmail($id)
+ {
+ $this->selectedEmailId = $id;
+ }
+
+ public function switchMailbox($id)
+ {
+ $this->currentMailboxId = $id;
+ $this->selectedEmailId = null;
+ $this->search = '';
+ }
+
+ public function createMailbox()
+ {
+ $newAddress = $this->createType === 'random'
+ ? fake()->userName().'_'.rand(10, 99).'@'.$this->availableDomains[array_rand($this->availableDomains)]
+ : $this->customUsername.'@'.$this->customDomain;
+
+ $newId = count($this->activeMailboxes) + 1;
+ $this->activeMailboxes[] = [
+ 'id' => $newId,
+ 'address' => $newAddress,
+ 'expires_at' => '24:00:00',
+ 'progress' => 100,
+ ];
+
+ $this->currentMailboxId = $newId;
+ $this->showCreateModal = false;
+ $this->customUsername = '';
+ }
+
+ public function deleteMailbox($id)
+ {
+ $this->activeMailboxes = array_filter($this->activeMailboxes, fn ($m) => $m['id'] !== $id);
+
+ if ($this->currentMailboxId === $id) {
+ $this->currentMailboxId = count($this->activeMailboxes) > 0 ? reset($this->activeMailboxes)['id'] : null;
+ $this->selectedEmailId = null;
+ }
+ }
+
+ public function downloadEmail($id)
+ {
+ // Mock download logic
+ $this->js("alert('Downloading email #{$id}... (Mock Action)')");
+ }
+
+ public function printEmail($id)
+ {
+ // Mock print logic
+ $this->js('window.print()');
+ }
+
+ public function deleteEmail($id)
+ {
+ // Mock delete logic
+ $this->js("alert('Email #{$id} deleted successfully! (Mock Action)')");
+ $this->selectedEmailId = null;
+ }
+
+ public function nextPage()
+ {
+ if ($this->page < $this->totalPages) {
+ $this->page++;
+ }
+ }
+
+ public function previousPage()
+ {
+ if ($this->page > 1) {
+ $this->page--;
+ }
+ }
+
+ public function generateQrCode($address)
+ {
+ // Mock QR generation with a slight delay
+ usleep(800000); // 800ms
+ $this->dispatch('qrCodeGenerated', address: $address);
+ }
+
+ public function render()
+ {
+ $currentMailbox = collect($this->activeMailboxes)->firstWhere('id', $this->currentMailboxId);
+
+ return view('livewire.mailbox', [
+ 'emails' => $this->getEmailsProperty(),
+ 'currentMailbox' => $currentMailbox,
+ ]);
+ }
+}
diff --git a/resources/views/components/bento/hero.blade.php b/resources/views/components/bento/hero.blade.php
index aa1d39f..47aa40b 100644
--- a/resources/views/components/bento/hero.blade.php
+++ b/resources/views/components/bento/hero.blade.php
@@ -25,14 +25,14 @@