+
+ {view !== 'minimized' && (
+ <>
+
+ {/* To: field with recipient chips and autocomplete */}
+
+
To
+
+ {recipients.map(email => (
+
+ {email}
+
+
+ ))}
+ setToQuery(e.target.value)}
+ onKeyDown={handleKeyDown}
+ />
+
+ {suggestions.length > 0 && (
+
+ {suggestions.map(u => (
+ - addRecipient(u.mail)}>
+ {u.mail}
+
+ ))}
+
+ )}
+
+
+ {/* Subject input */}
+
+ Subject
+ setSubject(e.target.value)}
+ />
+
+
+ {/* Rich text formatting toolbar */}
+
+
+
+
+
+
+
+
+ {/* Editable email body. Use onInput to track the text in state for persistence. */}
+
setEditorHtml(e.currentTarget.innerHTML)}
+ dir="ltr" // Force left-to-right typing only in the editor!
+ />
+
+ {/* Attachments (if any) */}
+ {attachments.length > 0 && (
+
+ {attachments.map((file, index) => (
+ -
+
+
+ {file.name}
+
+
+
+ ))}
+
+ )}
+
+
+ {/* Footer: attach, send, discard */}
+
+
+
handleFileAttachments(setAttachments, e)}
+ />
+
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/frontend/src/main_page/EmailSideMenu/EmailSideMenu.css b/frontend/src/main_page/EmailSideMenu/EmailSideMenu.css
new file mode 100644
index 00000000..e752976e
--- /dev/null
+++ b/frontend/src/main_page/EmailSideMenu/EmailSideMenu.css
@@ -0,0 +1,132 @@
+/* src/main_page/EmailSideMenu/EmailSideMenu.css */
+
+/* Layout and base colors for sidebar */
+.sidebar {
+ display: flex;
+ flex-direction: column;
+ padding: 1rem;
+ height: 100vh;
+ overflow-y: auto;
+}
+
+/* Light/dark color schemes */
+.sidebar.light {
+ background: #fff;
+ color: #000;
+ border-right: 1px solid #dee2e6;
+}
+.sidebar.dark {
+ background: #202124;
+ color: #e8eaed;
+ border-right: 1px solid #5f6368;
+}
+
+/* Compose button at top */
+.compose-button {
+ margin-bottom: 1rem;
+ width: 100%;
+}
+.compose-button.light {
+ background-color: #1a73e8;
+ color: #fff;
+ border: 1px solid #1a73e8;
+}
+.compose-button.dark {
+ background: transparent;
+ color: #e8eaed;
+ border: 1px solid #e8eaed;
+}
+
+/* Mail folder links (Inbox, Sent, etc.) */
+.nav-link {
+ display: flex;
+ align-items: center;
+ padding: 0.5rem 1rem;
+ border-radius: 0.5rem;
+ transition: background-color 0.2s, color 0.2s;
+}
+/* Hover state for mail links */
+.nav-link:hover {
+ background-color: rgba(0,0,0,0.05);
+}
+.sidebar.dark .nav-link:hover {
+ background-color: rgba(255,255,255,0.1);
+}
+/* Active tab coloring */
+.sidebar.light .nav-link.active-tab {
+ background-color: #1a73e8;
+ color: #fff;
+}
+.sidebar.dark .nav-link.active-tab {
+ background-color: #5f6368;
+ color: #fff;
+}
+
+/* Header for Labels section */
+.labels-header {
+ font-size: 0.85rem;
+ font-weight: 500;
+ margin-bottom: 0.5rem;
+ color: inherit;
+}
+
+/* Context menu for label actions */
+.label-context-menu {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+.label-context-menu li:hover {
+ background-color: rgba(0,0,0,0.05);
+}
+
+/* Expand/collapse button for parent labels (the caret) */
+.label-expand-btn {
+ width: 20px;
+ height: 20px;
+ padding: 0;
+ margin-left: -5px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: inherit;
+}
+
+/* Each label line: set consistent height and allow indentation */
+.label-li {
+ min-height: 32px;
+}
+
+/* Style for label text and ellipsis if long */
+.label-li .nav-link {
+ min-width: 0;
+ flex: 1 1 auto;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+ padding-left: 0.5rem;
+}
+
+/* Right-align three-dots menu for label */
+.label-li .bi-three-dots-vertical {
+ margin-left: auto;
+}
+
+/* Sidebar slide-in for mobile */
+@media (max-width: 768px) {
+ .sidebar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 260px;
+ transform: translateX(-100%);
+ transition: transform 0.3s ease-in-out;
+ z-index: 1050;
+ padding-top: 5rem;
+ overflow: visible;
+ }
+ .sidebar.show {
+ transform: translateX(0);
+ }
+
+}
diff --git a/frontend/src/main_page/EmailSideMenu/EmailSideMenu.jsx b/frontend/src/main_page/EmailSideMenu/EmailSideMenu.jsx
new file mode 100644
index 00000000..2200c1e9
--- /dev/null
+++ b/frontend/src/main_page/EmailSideMenu/EmailSideMenu.jsx
@@ -0,0 +1,270 @@
+import React, { useState, useEffect } from 'react';
+// Import Bootstrap and icon styles for consistent UI
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap-icons/font/bootstrap-icons.css';
+import './EmailSideMenu.css';
+import useIsMobile from "../../utils/useIsMobile";
+
+// Import API functions for label CRUD and sublabel
+import {
+ fetchLabels,
+ createLabel,
+ editLabel,
+ deleteLabel,
+ createLabelUnderParent,
+} from '../../api/labelsApi';
+
+// Define the static mailbox/folder items (Inbox, Sent, etc.)
+const mailboxItems = [
+ { id: 'all', label: 'All Mail', icon: 'bi-envelope' },
+ { id: 'incoming',label: 'Inbox', icon: 'bi-inbox' },
+ { id: 'sent', label: 'Sent', icon: 'bi-send-fill' },
+ { id: 'draft', label: 'Drafts', icon: 'bi-file-earmark-text' },
+ { id: 'star', label: 'Starred', icon: 'bi-star' },
+ { id: 'trash', label: 'Trash', icon: 'bi-trash-fill' },
+ { id: 'spam', label: 'Spam', icon: 'bi-exclamation-octagon' },
+];
+
+// Main sidebar component
+export default function EmailSidebar({
+ theme, // "light" or "dark"
+ currentTab, // Which tab/label is currently selected
+ setCurrentTab, // Callback to change tab
+ onComposeClick, // Callback for "Compose" button
+ showSidebar, // Boolean: is sidebar open (mobile)
+ setShowSidebar, // Callback to toggle sidebar (mobile)
+ clearSelection,
+ refreshMails
+ }) {
+ const isMobile = useIsMobile();
+ const [labels, setLabels] = useState([]); // Flat list of all labels (from backend)
+
+ // Object to track which parent labels are expanded: { [id]: true/false }
+ const [expandedLabels, setExpandedLabels] = useState({});
+
+ // State for context menu (edit/delete/add sublabel)
+ const [ctx, setCtx] = useState({ open: false, x: 0, y: 0, label: null });
+
+ // Fetch labels from API on mount
+ useEffect(() => {
+ fetchLabels().then(setLabels);
+ }, []);
+
+ // Helper to reload labels after changes
+ const reload = async () => setLabels(await fetchLabels());
+
+ // Add new label at root
+ const handleAddLabel = async () => {
+ const name = prompt("New label name:");
+ if (!name) return;
+
+ try {
+ await createLabel(name);
+ await reload();
+ } catch (err) {
+ if (err.message.includes("409")) {
+ alert(`A label named "${name}" already exists.`);
+ } else {
+ alert("An error occurred while creating the label.");
+ console.error(err);
+ }
+ }
+ };
+
+ // Rename label
+ const handleEditLabel = async lab => {
+ const name = prompt("Rename label:", lab.name);
+ if (!name || name === lab.name) return;
+ try {
+ await editLabel(lab.id, name);
+ await reload();
+ await refreshMails();
+ } catch (err) {
+ if (err.message.includes("409")) {
+ alert(`A label named "${name}" already exists.`);
+ } else {
+ alert("An error occurred while creating the label.");
+ console.error(err);
+ }
+ }
+ };
+
+ // Delete label with confirmation
+ const handleRemoveLabel = async lab => {
+ if (!window.confirm(`Delete "${lab.name}"?`)) return;
+ await deleteLabel(lab.id);
+ await reload();
+ await refreshMails();
+ };
+
+ // Add sublabel under parent
+ const handleAddSublabel = async lab => {
+ const name = prompt(`Sublabel name under "${lab.name}":`);
+ if (!name) return;
+ try {
+ await createLabelUnderParent(lab.id, name);
+ await reload();
+ } catch (err) {
+ if (err.message.includes("409")) {
+ alert(`A label named "${name}" already exists.`);
+ } else {
+ alert("An error occurred while creating the label.");
+ console.error(err);
+ }
+ }
+ };
+
+ // Open the context menu at the position of the clicked label
+ const openCtx = (e, lab) => {
+ e.stopPropagation();
+ const rect = e.currentTarget.getBoundingClientRect();
+ setCtx({ open: true, x: rect.right + 4, y: rect.top, label: lab });
+ };
+ // Close the context menu
+ const closeCtx = () => setCtx(c => ({ ...c, open: false }));
+
+ // Navigate to mailbox tab or label tab
+ const onClickTab = id => {
+ setCurrentTab(id);
+ clearSelection();
+ if (isMobile) setShowSidebar(false);
+ };
+
+ // Expand/collapse label for sublabels
+ const toggleLabel = id => {
+ setExpandedLabels(e => ({ ...e, [id]: !e[id] }));
+ };
+
+ /**
+ * Convert flat label list to tree structure:
+ * - Each label can have children (if sublabel)
+ * - Roots have parent == null/undefined/0
+ */
+ function buildLabelTree(labels) {
+ const map = {};
+ labels.forEach(lab => map[lab.id] = { ...lab, children: [] });
+ const roots = [];
+ labels.forEach(lab => {
+ if (lab.parent) map[lab.parent]?.children.push(map[lab.id]);
+ else roots.push(map[lab.id]);
+ });
+ return roots;
+ }
+
+ /**
+ * Render a single label and its children recursively
+ * @param {object} lab - label object
+ * @param {number} level - depth (indent)
+ */
+ function renderLabel(lab, level = 0) {
+ const isParent = lab.children && lab.children.length > 0;
+ const isExpanded = expandedLabels[lab.id];
+ const tabId = `label:${lab.id}`;
+
+ return (
+
+ {/* Compose button (desktop only) */}
+
+
+ {/* Folders (Inbox, Sent, etc.) */}
+
+
+ {/* Labels header and add button */}
+
+ Labels
+
+
+
+ {/* Labels tree, supports sublabels and indentation */}
+
+ {buildLabelTree(labels).map(lab => renderLabel(lab))}
+
+
+ {/* Context menu for editing/removing/adding sublabels */}
+ {ctx.open && (
+
+ - { handleEditLabel(ctx.label); closeCtx(); }}>
+ Edit
+
+ - { handleRemoveLabel(ctx.label); closeCtx(); }}>
+ Remove label
+
+ - { handleAddSublabel(ctx.label); closeCtx(); }}>
+ Add sublabel
+
+
+ )}
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/main_page/MainPage.css b/frontend/src/main_page/MainPage.css
new file mode 100644
index 00000000..a41f51af
--- /dev/null
+++ b/frontend/src/main_page/MainPage.css
@@ -0,0 +1,49 @@
+@import "../theme.css";
+
+/* ─── MAIN PAGE CONTAINER ───────────────────────────────── */
+.main-page {
+ height: 100%;
+ margin: 0;
+ padding: 1px;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+}
+.main-page.light {
+ background-color: var(--light-bg-page);
+ color: black;
+}
+.main-page.dark {
+ background-color: var(--dark-bg-page);
+ color: white;
+}
+
+/* ─── SIDE MENU + MAILS LIST ───────────────────────────────── */
+.main-content {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+ min-height: 0;
+}
+
+/* ─── MAILS LIST CONTAINER ───────────────────────────────── */
+.mail-list-container {
+ padding-top: 12px;
+}
+.mail-list-container.light {
+ /* Stronger drop shadow for Material feel: */
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12),
+ 0 1px 4px rgba(0, 0, 0, 0.08);
+ /* Ensure the card’s background is pure white: */
+ background-color: var(--light-bg-unread-mail-row);
+}
+.mail-list-container.dark {
+ box-shadow: 0 4px 12px #252525,
+ 0 1px 2px #555555;
+ background-color: var(--dark-bg-unread-mail-row);
+}
+@media (max-width: 768px) {
+ .mail-list-container {
+ padding: 8px;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/main_page/MainPage.js b/frontend/src/main_page/MainPage.js
new file mode 100644
index 00000000..58e5c80e
--- /dev/null
+++ b/frontend/src/main_page/MainPage.js
@@ -0,0 +1,165 @@
+import React, { useEffect, useState } from "react";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "./MainPage.css";
+import EmailSidebar from "./EmailSideMenu/EmailSideMenu";
+import MailRow from "./mail_row/MailRow";
+import ToolBar from "./toolbar/ToolBar";
+import TopMenu from "./top_menu/TopMenu";
+import ComposeEmail from "./ComposeEmail/ComposeEmail";
+import { useLocation } from "react-router-dom";
+import { useMailToolbarHandlers } from "./hooks/useMailToolbarHandlers";
+import { useMails } from "./hooks/useMails";
+import { useTheme } from "../utils/useTheme";
+import { useRequireAuth } from "../utils/useAutoLogin";
+import SkeletonEmail from "../components/loading/SkeletonEmail";
+import useIsMobile from "../utils/useIsMobile";
+
+const MainPage = () => {
+ useRequireAuth();
+
+ const isMobile = useIsMobile();
+ const { theme, toggleTheme } = useTheme("dark");
+ const location = useLocation();
+
+ const [inboxType, setInboxType] = useState(
+ location.state?.inboxType || "incoming"
+ );
+ const [composes, setComposes] = useState([]);
+
+ const handleOpenDraft = draftEmail => {
+ setComposes(cs => {
+ if (cs.length >= 2) return cs;
+ return [...cs, { id: draftEmail.id, offset: cs.length, draftMail: draftEmail }];
+ });
+ };
+
+ const handleComposeClick = () => {
+ setComposes(cs => {
+ if (cs.length >= 2) return cs;
+ return [...cs, { id: Date.now(), offset: cs.length }];
+ });
+ };
+
+ const handleCloseCompose = id => {
+ setComposes(cs =>
+ cs
+ .filter(c => c.id !== id)
+ .map((c, i) => ({ ...c, offset: i }))
+ );
+ };
+
+ const {
+ emails,
+ total,
+ page,
+ hasNextPage,
+ hasPrevPage,
+ goToNextPage,
+ goToPrevPage,
+ refreshMails,
+ loading
+ } = useMails(inboxType);
+
+ const [selectedMails, setSelectedMails] = useState(new Set());
+
+ const handlers = useMailToolbarHandlers(
+ selectedMails,
+ setSelectedMails,
+ emails,
+ refreshMails,
+ );
+
+ const handleSelect = (mail, checked) => {
+ setSelectedMails(prev => {
+ const copy = new Set(prev);
+ checked ? copy.add(mail) : copy.delete(mail);
+ return copy;
+ });
+ };
+
+ const [showSidebar, setShowSidebar] = useState(() => !isMobile);
+ useEffect(() => setShowSidebar(!isMobile), [isMobile]);
+
+ useEffect(() => {
+ if (location.state?.inboxType) {
+ setInboxType(location.state.inboxType);
+ setSelectedMails(new Set());
+ }
+ }, [location.state?.inboxType]);
+ return (
+
+ );
+};
+
+export default MainPage;
\ No newline at end of file
diff --git a/frontend/src/main_page/hooks/useMailSearch.js b/frontend/src/main_page/hooks/useMailSearch.js
new file mode 100644
index 00000000..25c9b377
--- /dev/null
+++ b/frontend/src/main_page/hooks/useMailSearch.js
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { searchMails } from '../../api/mailApi';
+
+export const useMailSearch = (userId, query) => {
+ const [results, setResults] = useState([]);
+ const [loading, setLoading] = useState(false);
+
+ useEffect(() => {
+ const delayDebounce = setTimeout(async () => {
+ if (!query.trim()) {
+ setResults([]);
+ return;
+ }
+ setLoading(true);
+ try {
+ const res = await searchMails(userId, query);
+ setResults(res);
+ } catch (err) {
+ console.error("Search failed:", err);
+ } finally {
+ setLoading(false);
+ }
+ }, 300); // debounce
+
+ return () => clearTimeout(delayDebounce);
+ }, [userId, query]);
+
+ return { results, loading };
+};
diff --git a/frontend/src/main_page/hooks/useMailToolbarHandlers.js b/frontend/src/main_page/hooks/useMailToolbarHandlers.js
new file mode 100644
index 00000000..34e778b4
--- /dev/null
+++ b/frontend/src/main_page/hooks/useMailToolbarHandlers.js
@@ -0,0 +1,109 @@
+import {useCallback} from "react";
+import {deleteMail, markAsRead, restoreMail, toggleSpamReport} from "../../api/mailApi";
+
+
+/**
+ * @param {Set
-
-
-
-
+
+
+
+
+
+