new emails page

core/scss/_variables.scss

@@ -285,15 +285,15 @@ $gray-colors: (
 $theme-colors: map-merge($theme-colors, map-merge($extra-colors, ()));
 
 // BACKDROPS
-$backdrop-opacity: 24% !default;
+$backdrop-opacity: .32 !default;
 $backdrop-blur: 4px !default;
-$backdrop-bg: var(--#{$prefix}gray-800) !default;
+$backdrop-bg: light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}black)) !default;
 $backdrops: (
   dark: color-mix(in srgb, var(--#{$prefix}color-dark), transparent var(--#{$prefix}backdrop-opacity)),
   light: color-mix(in srgb, var(--#{$prefix}color-light), transparent var(--#{$prefix}backdrop-opacity)),
 ) !default;
 
-// Borders
+// Borders 
 $border-width: 1px !default;
 $border-width-wide: 2px !default;
 
@@ -749,9 +749,9 @@ $list-group-item-padding-y: $card-cap-padding-y !default;
 $list-group-item-padding-x: $card-cap-padding-x !default;
 
 // Modals
-$modal-backdrop-opacity: 0.24 !default;
+$modal-backdrop-opacity: $backdrop-opacity !default;
 $modal-backdrop-bg: $backdrop-bg !default;
-$modal-backdrop-blur: 4px !default;
+$modal-backdrop-blur: $backdrop-blur !default;
 
 $modal-fade-transform: translate(0, -1rem) !default;
 

preview/pages/email-inbox.html

@@ -0,0 +1,193 @@
+---
+title: Email inbox
+page-header: Inbox
+page-menu: extra.email-inbox
+layout: default
+permalink: email-inbox.html
+page-libs: [ hugerte]
+---
+
+<div class="card">
+	<div class="row g-0">
+		<div class="col-xxl-3 email-border border-end">
+			<div class="offcanvas-xxl offcanvas-start h-100 file-offcanvas" tabindex="-1" id="emailSidebaroffcanvas">
+				<div class="card-body h-100">
+					<div>
+						{% include "ui/button.html" icon="pencil" text="Compose" color="primary" class="d-none d-sm-block"
+						modal-id="new-email" %}
+					</div>
+
+					<div class="mt-3 nav nav-vertical">
+						<a href="#" class="nav-link text-danger fw-bold">
+							{% include "ui/icon.html" icon="inbox" class="me-2" %}
+							Inbox<span class="badge badge-danger ms-auto">{{ mails | size }}</span>
+						</a>
+						<a href="#" class="nav-link">{% include "ui/icon.html" icon="star" class="me-2" %}Starred</a>
+						<a href="#" class="nav-link">{% include "ui/icon.html" icon="clock" class="me-2" %}Snoozed</a>
+						<a href="#" class="nav-link ">{% include "ui/icon.html" icon="file" class="me-2" %}Draft<span class="badge badge-info ms-auto">32</span></a>
+						<a href="#" class="nav-link">{% include "ui/icon.html" icon="mail-up" class="me-2" %}Sent Mail</a>
+						<a href="#" class="nav-link">{% include "ui/icon.html" icon="trash" class="me-2" %}Trash</a>
+						<a href="#" class="nav-link">{% include "ui/icon.html" icon="tag" class="me-2" %}Important</a>
+						<a href="#" class="nav-link">{% include "ui/icon.html" icon="alert-octagon" class="me-2" %}Spam</a>
+					</div>
+
+					<div class="mt-4">
+						<h6 class="subheader">Labels</h6>
+						<div class="mt-2 nav nav-vertical">
+							<a href="#" class="nav-link">
+								<div class="badge bg-info me-2"></div> Updates
+							</a>
+							<a href="#" class="nav-link">
+								<div class="badge bg-warning me-2"></div> Friends
+							</a>
+							<a href="#" class="nav-link">
+								<div class="badge bg-success me-2"></div> Family
+							</a>
+							<a href="#" class="nav-link">
+								<div class="badge bg-primary me-2"></div> Social
+							</a>
+							<a href="#" class="nav-link">
+								<div class="badge bg-danger me-2"></div> Important
+							</a>
+							<a href="#" class="nav-link">
+								<div class="badge bg-purple me-2"></div> Promotions
+							</a>
+						</div>
+					</div>
+
+					<div class="mt-5">
+						<h6 class="subheader">Storage</h6>
+						{% include "ui/progress.html" value=46 max=100 class="my-2" %}
+
+						<p class="text-muted font-13 mb-0">7.02 GB (46%) of 15 GB used</p>
+					</div>
+
+
+				</div>
+			</div>
+		</div>
+
+		<div class="col-xxl-9">
+			<div class="card-body">
+				<div class="d-flex flex-wrap align-items-center gap-2">
+					<div class="d-xxl-none d-inline-flex">
+						<button class="btn btn-icon" type="button" data-bs-toggle="offcanvas"
+							data-bs-target="#emailSidebaroffcanvas" aria-controls="emailSidebaroffcanvas">
+							{% include "ui/icon.html" icon="menu-2" %}
+						</button>
+					</div>
+
+					<div class="btn-group">
+						{% include "ui/button.html" icon="archive" icon-only=true %}
+						{% include "ui/button.html" icon="alert-octagon" icon-only=true %}
+						{% include "ui/button.html" icon="trash" icon-only=true %}
+					</div>
+
+					<div class="btn-group">
+						<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+							{% include "ui/icon.html" icon="folder" %}
+						</button>
+						<div class="dropdown-menu">
+							<span class="dropdown-header">Move to</span>
+							<a class="dropdown-item" href="#">Social</a>
+							<a class="dropdown-item" href="#">Promotions</a>
+							<a class="dropdown-item" href="#">Updates</a>
+							<a class="dropdown-item" href="#">Forums</a>
+						</div>
+					</div>
+
+					<div class="btn-group">
+						<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+							{% include "ui/icon.html" icon="tag" %}
+						</button>
+						<div class="dropdown-menu">
+							<span class="dropdown-header">Label as:</span>
+							<a class="dropdown-item" href="#">Updates</a>
+							<a class="dropdown-item" href="#">Social</a>
+							<a class="dropdown-item" href="#">Promotions</a>
+							<a class="dropdown-item" href="#">Forums</a>
+						</div>
+					</div>
+
+					<div class="btn-group">
+						<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+							{% include "ui/icon.html" icon="dots" %} More
+						</button>
+						<div class="dropdown-menu">
+							<span class="dropdown-header">More Options :</span>
+							<a class="dropdown-item" href="#">Mark as Unread</a>
+							<a class="dropdown-item" href="#">Add to Tasks</a>
+							<a class="dropdown-item" href="#">Add Star</a>
+							<a class="dropdown-item" href="#">Mute</a>
+						</div>
+					</div>
+				</div>
+
+				<div class="mt-3">
+					<ul class="email-list">
+						{% if mails and mails.size > 0 %}
+						{% for mail in mails %}
+						<li>
+							<div class="email-sender-info">
+								<div class="checkbox-wrapper-mail">
+									<div class="form-check">
+										<input type="checkbox" class="form-check-input" id="mail-{{ mail.id }}">
+										<label class="form-check-label" for="mail-{{ mail.id }}"></label>
+									</div>
+								</div>
+								<span class="star-toggle">{% include "ui/icon.html" icon="star" %}</span>
+								<a href="#" class="email-title">{{ mail.sender }}</a>
+							</div>
+
+							<div class="email-content">
+								<a href="#" class="email-subject">{{ mail.subject }} &nbsp;–&nbsp;
+									<span>{{ mail.preview }}</span>
+								</a>
+								<div class="email-date">{{ mail.date }}</div>
+							</div>
+
+							<div class="email-action-icons">
+								<ul class="list-inline">
+									<li class="list-inline-item">
+										<a href="#">{% include "ui/icon.html" icon="archive" %}</a>
+									</li>
+									<li class="list-inline-item">
+										<a href="#">{% include "ui/icon.html" icon="trash" %}</a>
+									</li>
+									<li class="list-inline-item">
+										<a href="#">
+											{% include "ui/icon.html" icon="mail-opened" class="email-action-icons-item" %}
+										</a>
+									</li>
+									<li class="list-inline-item">
+										<a href="#">{% include "ui/icon.html" icon="clock" %}</a>
+									</li>
+								</ul>
+							</div>
+						</li>
+						{% endfor %}
+						{% else %}
+						<li class="text-muted">No emails</li>
+						{% endif %}
+					</ul>
+				</div>
+
+				<div class="row">
+					<div class="col-7 mt-1">
+						Showing 1 - {{ mails | size }} of {{ mails | size }}
+					</div> <!-- end col-->
+					<div class="col-5">
+						<div class="btn-group float-end">
+							<button type="button" class="btn btn-icon">{% include "ui/icon.html" icon="chevron-left"
+								%}</button>
+							<button type="button" class="btn btn-icon">{% include "ui/icon.html" icon="chevron-right"
+								%}</button>
+						</div>
+					</div> <!-- end col-->
+				</div> <!-- end row-->
+			</div>
+		</div>
+	</div>
+</div>
+
+{% include "ui/modal.html" modal-id="new-email" %}

preview/pages/modals.html

@@ -4,7 +4,7 @@ page-header: Modals
 page-menu: base.modals
 layout: default
 permalink: modals.html
-page-libs: [signature_pad]
+page-libs: [signature_pad, hugerte]
 ---
 
 <div class="card">
@@ -22,49 +22,54 @@ page-libs: [signature_pad]
 					<a href="#modal-danger" class="nav-link">Danger modal</a>
 					<a href="#modal-team" class="nav-link">Modal with simple form</a>
 					<a href="#modal-signature" class="nav-link">Modal with signature form</a>
+					<a href="#modal-new-email" class="nav-link">New email modal</a>
 				</div>
 			</div>
 			<div class="col">
 				<div class="space-y-6">
 					<div>
 						<h3>Simple modal</h3>
-						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="simple" inline %}
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="simple" inline %}
 					</div>
 					<div>
 						<h3>Large modal</h3>
-						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="large" size="lg" inline %}
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="large" size="lg" inline %}
 					</div>
 					<div>
 						<h3>Small modal</h3>
-						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="small" size="sm" inline %}
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="small" size="sm" inline %}
 					</div>
 					<div>
 						<h3>Full width modal</h3>
-						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="full-width" size="full-width" inline %}
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="full-width" size="full-width" inline %}
 					</div>
 					<div>
 						<h3>Scrollable modal</h3>
-						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="scrollable" scrollable=true style="max-height: 30rem" inline %}
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="scrollable" scrollable=true style="max-height: 30rem" inline %}
 					</div>
 					<div>
 						<h3>Modal with form</h3>
-						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="report" size="lg" inline %}
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="report" size="lg" inline %}
 					</div>
 					<div>
 						<h3>Success modal</h3>
-						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="success" size="sm" inline %}
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="success" size="sm" inline %}
 					</div>
 					<div>
 						<h3>Danger modal</h3>
-						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="danger" size="sm" inline %}
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="danger" size="sm" inline %}
 					</div>
 					<div>
 						<h3>Modal with simple form</h3>
-						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="team" inline %}
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="team" inline %}
 					</div>
 					<div>
 						<h3>Modal with signature form</h3>
-						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="signature" inline %}
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="signature" inline %}
+					</div>
+					<div>
+						<h3>New email modal</h3>
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto z-0" modal-id="new-email" inline %}
 					</div>
 				</div>
 			</div>

shared/data/mails.json

@@ -0,0 +1,202 @@
+[
+  {
+    "id": "e1",
+    "sender": "Lucas, me (4)",
+    "senderEmail": "[email protected]",
+    "subject": "Direct message on Twitter",
+    "preview": "@LucasKriebel - Very cool :) You have a new direct message. Open Twitter to read and reply now.",
+    "labels": ["Social"],
+    "starred": true,
+    "date": "2025-08-27T11:49:00Z"
+  },
+  {
+    "id": "e2",
+    "sender": "Acme Support",
+    "senderEmail": "[email protected]",
+    "subject": "Your ticket #48213 has been updated",
+    "preview": "Hi, we've added a detailed note to your request regarding billing. Please review the update and let us know if anything looks off.",
+    "labels": ["Updates"],
+    "starred": false,
+    "date": "2025-08-26T09:15:00Z"
+  },
+  {
+    "id": "e3",
+    "sender": "Marketing Weekly",
+    "senderEmail": "[email protected]",
+    "subject": "10 growth tactics you can try today",
+    "preview": "We curated a list of actionable ideas from top marketers to boost acquisition, retention, and activation this quarter.",
+    "labels": ["Promotions"],
+    "starred": false,
+    "date": "2025-08-25T17:02:00Z"
+  },
+  {
+    "id": "e4",
+    "sender": "GitHub",
+    "senderEmail": "[email protected]",
+    "subject": "[tabler] New issue assigned to you",
+    "preview": "Issue #3294: Update email inbox page to use data file. Please triage, add labels, and provide an estimate.",
+    "labels": ["Important", "Updates"],
+    "starred": true,
+    "date": "2025-08-25T08:41:00Z"
+  },
+  {
+    "id": "e5",
+    "sender": "me (2), Stripe",
+    "senderEmail": "[email protected]",
+    "subject": "Payout scheduled",
+    "preview": "A payout of $1,248.32 is scheduled for tomorrow. Funds typically arrive within 2 business days.",
+    "labels": ["Updates"],
+    "starred": false,
+    "date": "2025-08-24T12:30:00Z"
+  },
+  {
+    "id": "e6",
+    "sender": "Figma",
+    "senderEmail": "[email protected]",
+    "subject": "You were invited to a file",
+    "preview": "Anna shared ‘Inbox redesign v3’ with you. Review the latest components and leave feedback in comments.",
+    "labels": ["Social"],
+    "starred": false,
+    "date": "2025-08-24T07:58:00Z"
+  },
+  {
+    "id": "e7",
+    "sender": "Calendly",
+    "senderEmail": "[email protected]",
+    "subject": "Event confirmed for Fri 3 PM",
+    "preview": "Your meeting with Chris is confirmed for this Friday at 3 PM. A calendar invite with the video link was attached.",
+    "labels": ["Updates"],
+    "starred": false,
+    "date": "2025-08-23T14:21:00Z"
+  },
+  {
+    "id": "e8",
+    "sender": "Twitter",
+    "senderEmail": "[email protected]",
+    "subject": "New followers this week",
+    "preview": "You gained 27 new followers. See who followed you and engage with their posts to grow reach.",
+    "labels": ["Social"],
+    "starred": false,
+    "date": "2025-08-23T06:12:00Z"
+  },
+  {
+    "id": "e9",
+    "sender": "Product Hunt",
+    "senderEmail": "[email protected]",
+    "subject": "Today's top launches",
+    "preview": "Catch up on trending products you might like. Today's list features tools for design and developer productivity.",
+    "labels": ["Promotions"],
+    "starred": false,
+    "date": "2025-08-22T19:33:00Z"
+  },
+  {
+    "id": "e10",
+    "sender": "Notion",
+    "senderEmail": "[email protected]",
+    "subject": "Weekly summary: Inbox project",
+    "preview": "3 tasks completed, 2 comments, 1 new page added. Click through to see highlights and next steps.",
+    "labels": ["Updates"],
+    "starred": false,
+    "date": "2025-08-22T08:00:00Z"
+  },
+  {
+    "id": "e11",
+    "sender": "AWS",
+    "senderEmail": "[email protected]",
+    "subject": "Billing alert threshold reached",
+    "preview": "Your usage exceeded the alert threshold for this month. Consider upgrading your plan or adjusting limits.",
+    "labels": ["Important"],
+    "starred": true,
+    "date": "2025-08-21T18:45:00Z"
+  },
+  {
+    "id": "e12",
+    "sender": "LinkedIn",
+    "senderEmail": "[email protected]",
+    "subject": "Someone viewed your profile",
+    "preview": "See who looked at your profile this week. Strengthen your network by following up with recent viewers.",
+    "labels": ["Social"],
+    "starred": false,
+    "date": "2025-08-21T10:27:00Z"
+  },
+  {
+    "id": "e13",
+    "sender": "Google Alerts",
+    "senderEmail": "[email protected]",
+    "subject": "Alert for: Tabler UI",
+    "preview": "New articles mentioning Tabler UI were found. Skim the summaries and set alerts for related keywords.",
+    "labels": ["Updates"],
+    "starred": false,
+    "date": "2025-08-20T16:14:00Z"
+  },
+  {
+    "id": "e14",
+    "sender": "Medium",
+    "senderEmail": "[email protected]",
+    "subject": "Stories you might like",
+    "preview": "Handpicked stories based on your reading history. Discover deep dives on design systems and UX workflows.",
+    "labels": ["Promotions"],
+    "starred": false,
+    "date": "2025-08-20T07:05:00Z"
+  },
+  {
+    "id": "e15",
+    "sender": "Slack",
+    "senderEmail": "[email protected]",
+    "subject": "Missed messages in #design",
+    "preview": "You have 14 unread messages across 3 channels. Catch up now to keep the conversation moving.",
+    "labels": ["Updates"],
+    "starred": false,
+    "date": "2025-08-19T21:43:00Z"
+  },
+  {
+    "id": "e16",
+    "sender": "Sentry",
+    "senderEmail": "[email protected]",
+    "subject": "New error: TypeError in preview",
+    "preview": "Tabler preview threw TypeError: cannot read properties of undefined. Investigate stack trace and recent commits.",
+    "labels": ["Important", "Updates"],
+    "starred": true,
+    "date": "2025-08-19T11:20:00Z"
+  },
+  {
+    "id": "e17",
+    "sender": "Dribbble",
+    "senderEmail": "[email protected]",
+    "subject": "New shots from designers you follow",
+    "preview": "A fresh batch of inspiration is here. Explore new shots and save your favorites to collections.",
+    "labels": ["Social"],
+    "starred": false,
+    "date": "2025-08-18T15:37:00Z"
+  },
+  {
+    "id": "e18",
+    "sender": "Airbnb",
+    "senderEmail": "[email protected]",
+    "subject": "Plan your next getaway",
+    "preview": "Deals on stays you'll love this fall. Flexible dates and free cancellation on many options.",
+    "labels": ["Promotions"],
+    "starred": false,
+    "date": "2025-08-18T06:50:00Z"
+  },
+  {
+    "id": "e19",
+    "sender": "Google Calendar",
+    "senderEmail": "[email protected]",
+    "subject": "Reminder: Standup in 10 minutes",
+    "preview": "Daily standup starts at 9:30 AM. Share yesterday's progress, today's plan, and blockers.",
+    "labels": ["Updates"],
+    "starred": false,
+    "date": "2025-08-17T09:20:00Z"
+  },
+  {
+    "id": "e20",
+    "sender": "Superstore",
+    "senderEmail": "[email protected]",
+    "subject": "Exclusive 25% off for you",
+    "preview": "Save big on electronics this weekend only. Limited quantities—use code WEEKEND25 at checkout.",
+    "labels": ["Promotions"],
+    "starred": false,
+    "date": "2025-08-16T13:00:00Z"
+  }
+]

shared/data/menu.json

@@ -231,6 +231,11 @@
         "title": "Chat",
         "url": "chat.html"
       },
+      "email-inbox": {
+        "title": "Email inbox",
+        "url": "email-inbox.html",
+        "badge": "New"
+      },
       "cookie-banner": {
         "title": "Cookie banner",
         "url": "cookie-banner.html"

shared/includes/parts/modals/new-email.html

@@ -0,0 +1,27 @@
+<div class="modal-header">
+   <h4 class="modal-title">New Message</h4>
+   <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+</div>
+
+<div class="modal-body">
+   <form>
+      <div class="mb-3">
+         <label class="form-label">To</label>
+         <input type="text" class="form-control" placeholder="[email protected]">
+      </div>
+      <div class="mb-3">
+         <label class="form-label">Subject</label>
+         <input type="text" class="form-control" placeholder="Your subject">
+      </div>
+      <div>
+         <label class="form-label">Message</label>
+         {% include "ui/wysiwyg.html" id="email-message" %}
+      </div>
+   </form>
+</div>
+<div class="modal-footer">
+   <button type="button" class="btn" data-bs-dismiss="modal">Cancel</button>
+   <button type="button" class="btn btn-primary ms-auto" data-bs-dismiss="modal">
+      {% include "ui/icon.html" icon="send" %} Send Message
+   </button>
+</div>

shared/includes/ui/wysiwyg.html

@@ -25,7 +25,9 @@
       content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }'
     }
 
-    if (localStorage.getItem("tablerTheme") === 'dark') {
+    // check current theme is light or dark 
+    const theme = document.documentElement.getAttribute('data-bs-theme');
+    if (theme === 'dark') {
       options.skin = 'oxide-dark';
       options.content_css = 'dark';
     }