From 937033ea0744d7b72120cb2c6777cdc7c84fbc3c Mon Sep 17 00:00:00 2001
From: root <root>
Date: Fri, 27 Mar 2026 00:14:49 +0700
Subject: [PATCH] credit abis

---
 index.php               |   7 ++
 public/css/style.css    |  82 +++++++++++++++++++--
 views/layout_bottom.php |  36 ++++++++--
 views/layout_top.php    | 154 +++++++++++++++++++++++++++++-----------
 views/notes.php         |  34 +++++----
 views/passwords.php     |  27 ++++---
 6 files changed, 265 insertions(+), 75 deletions(-)

diff --git a/index.php b/index.php
index 19be948..c6b4ce5 100644
--- a/index.php
+++ b/index.php
@@ -122,6 +122,13 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && $user_id) {
         exit;
     }
 
+    // Mark all notifications as read
+    if (isset($_POST['mark_all_read'])) {
+        $pdo->prepare("UPDATE notifications SET is_read=1 WHERE user_id=?")->execute([$user_id]);
+        header('Location: ?action=' . ($_POST['redirect_to'] ?? 'dashboard'));
+        exit;
+    }
+
     // Change password
     if (isset($_POST['change_password'])) {
         $cur = trim($_POST['current_password'] ?? '');
diff --git a/public/css/style.css b/public/css/style.css
index 2bc6322..5a0c498 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -30,11 +30,62 @@ a { text-decoration: none; color: var(--primary); }
 a:hover { text-decoration: underline; }
 
 .app-container { display: flex; min-height: 100vh; }
-.sidebar { width: 240px; background: var(--surface); border-right: 1px solid var(--border); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
-.sidebar h2 { font-size: 1.15rem; margin-bottom: 1.5rem; color: var(--primary); }
-.nav-link { padding: 0.6rem 0.9rem; border-radius: 0.5rem; text-decoration: none !important; color: var(--text); font-weight: 500; transition: background 0.2s; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }
+
+/* ── Sidebar ─────────────────────────────────────────────────────────────── */
+.sidebar {
+    width: 240px; background: var(--surface); border-right: 1px solid var(--border);
+    padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.75rem;
+    position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
+    transition: width 0.25s cubic-bezier(.4,0,.2,1); flex-shrink: 0;
+    position: relative;
+}
+.sidebar-brand {
+    display: flex; align-items: center; gap: 8px; font-size: 1.1rem;
+    font-weight: 700; color: var(--primary); margin-bottom: 0.75rem;
+    white-space: nowrap; overflow: hidden;
+}
+
+/* Toggle button pinned to right edge */
+.sidebar-toggle-btn {
+    position: absolute; top: 1.5rem; right: -14px;
+    width: 28px; height: 28px; border-radius: 50%;
+    border: 1px solid var(--border); background: var(--surface);
+    color: var(--text-light); font-size: 0.65rem;
+    cursor: pointer; display: flex; align-items: center; justify-content: center;
+    z-index: 20; transition: background 0.15s, color 0.15s, border-color 0.15s;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
+}
+.sidebar-toggle-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
+
+/* Nav link: icon always visible, label collapses */
+.nav-link {
+    padding: 0.6rem 0.75rem; border-radius: 0.5rem;
+    text-decoration: none !important; color: var(--text); font-weight: 500;
+    transition: background 0.2s; display: flex; align-items: center;
+    gap: 0.65rem; font-size: 0.875rem; white-space: nowrap; overflow: hidden;
+    position: relative;
+}
 .nav-link:hover, .nav-link.active { background: rgba(var(--primary-rgb), 0.1); color: var(--primary); }
-.nav-link .badge { background: #EF4444; color: white; padding: 2px 6px; border-radius: 12px; font-size: 0.75rem; }
+.nav-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 0.95rem; }
+.sidebar-label { overflow: hidden; transition: opacity 0.2s; opacity: 1; flex: 1; }
+.nav-link .badge { background: #EF4444; color: white; padding: 2px 6px; border-radius: 12px; font-size: 0.72rem; margin-left: auto; }
+
+/* ── Collapsed State ────────────────────────────────────────────────────── */
+body.sidebar-collapsed .sidebar { width: 64px; }
+body.sidebar-collapsed .sidebar-label { opacity: 0; width: 0; pointer-events: none; }
+body.sidebar-collapsed .nav-link { justify-content: center; padding: 0.65rem; gap: 0; }
+body.sidebar-collapsed .nav-link .badge { position: absolute; top: 2px; right: 2px; padding: 1px 4px; font-size: 0.6rem; }
+body.sidebar-collapsed .sidebar-toggle-btn .fa-chevron-left { display: block; }
+
+/* Tooltip on collapsed nav links */
+body.sidebar-collapsed .nav-link { position: relative; }
+body.sidebar-collapsed .nav-link::after {
+    content: attr(title); position: absolute; left: calc(100% + 12px); top: 50%;
+    transform: translateY(-50%); background: var(--text); color: var(--surface);
+    padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; white-space: nowrap;
+    opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 100;
+}
+body.sidebar-collapsed .nav-link:hover::after { opacity: 1; }
 
 .main-content { flex: 1; padding: 1.5rem 2rem; overflow-y: auto; max-height: 100vh; }
 .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
@@ -97,6 +148,16 @@ body.dark-mode .project-item:hover { background: rgba(255,255,255,0.03); }
     flex-shrink: 0;
 }
 .user-avatar-btn:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.2); }
+/* Notification count badge overlaid on avatar */
+.avatar-notif-badge {
+    position: absolute; top: -3px; right: -3px;
+    background: #EF4444; color: #fff; font-size: 0.6rem; font-weight: 700;
+    min-width: 17px; height: 17px; border-radius: 10px; border: 2px solid var(--bg);
+    display: flex; align-items: center; justify-content: center;
+    cursor: pointer; z-index: 10; padding: 0 3px; line-height: 1;
+    animation: badge-pop 0.3s cubic-bezier(.17,.67,.83,.67);
+}
+@keyframes badge-pop { 0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)} }
 .user-dropdown-menu {
     display: none; position: absolute; top: calc(100% + 8px); right: 0;
     background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem;
@@ -123,6 +184,19 @@ body.dark-mode .project-item:hover { background: rgba(255,255,255,0.03); }
 .user-dropdown-logout:hover { background: rgba(239,68,68,0.07) !important; }
 .user-dropdown-logout i { color: #EF4444 !important; }
 
+/* ── Activity log scrollbar fix ────────────────────────────────────────── */
+.log-list {
+    display: flex; flex-direction: column; gap: 0.5rem;
+    overflow-y: auto; flex: 1; max-height: 360px;
+    padding-right: 8px;       /* prevent scrollbar from eating time */
+    scrollbar-gutter: stable; /* modern browsers reserve scrollbar space */
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+}
+.log-list::-webkit-scrollbar { width: 4px; }
+.log-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+.log-list::-webkit-scrollbar-track { background: transparent; }
+
 /* ── Notes / Google Keep Style ───────────────────────────────────────────── */
 .notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
 .note-card {
diff --git a/views/layout_bottom.php b/views/layout_bottom.php
index 5abb834..baf12c9 100644
--- a/views/layout_bottom.php
+++ b/views/layout_bottom.php
@@ -2,7 +2,7 @@
         </main>
     </div>
     <script>
-        // Dark Mode Toggle
+        // ── Dark Mode Toggle ──────────────────────────────────────────────────
         const themeBtn = document.getElementById('theme-toggle');
         const iconLight = document.getElementById('theme-icon-light');
         const iconDark = document.getElementById('theme-icon-dark');
@@ -16,7 +16,6 @@
                 iconDark.style.display = 'block';
             }
         }
-
         if(themeBtn) {
             updateThemeIcon();
             themeBtn.addEventListener('click', () => {
@@ -26,8 +25,8 @@
                 updateThemeIcon();
             });
         }
-        
-        // Toast Notifier
+
+        // ── Toast ─────────────────────────────────────────────────────────────
         function showToast(msg) {
             const t = document.getElementById('toast');
             t.textContent = msg;
@@ -35,7 +34,24 @@
             setTimeout(() => t.classList.remove('show'), 3000);
         }
 
-        // User dropdown
+        // ── Sidebar Collapse ──────────────────────────────────────────────────
+        function toggleSidebar() {
+            const collapsed = document.body.classList.toggle('sidebar-collapsed');
+            localStorage.setItem('sidebar_collapsed', collapsed ? '1' : '0');
+            updateSidebarIcon();
+        }
+        function updateSidebarIcon() {
+            const icon = document.getElementById('sidebar-toggle-icon');
+            if(!icon) return;
+            if(document.body.classList.contains('sidebar-collapsed')) {
+                icon.className = 'fa fa-chevron-right';
+            } else {
+                icon.className = 'fa fa-chevron-left';
+            }
+        }
+        updateSidebarIcon();
+
+        // ── User Dropdown ─────────────────────────────────────────────────────
         function toggleUserDropdown() {
             const menu = document.getElementById('user-dropdown-menu');
             menu.classList.toggle('open');
@@ -49,14 +65,20 @@
             if (wrap && !wrap.contains(e.target)) closeUserDropdown();
         });
 
-        // Close modals on overlay click
+        // ── Notifications ─────────────────────────────────────────────────────
+        function openNotifications() {
+            closeUserDropdown();
+            document.getElementById('notifications-modal').classList.add('active');
+        }
+
+        // ── Close modals on overlay click ─────────────────────────────────────
         document.querySelectorAll('.modal-overlay').forEach(mo => {
             mo.addEventListener('click', (e) => {
                 if (e.target === mo) mo.classList.remove('active');
             });
         });
 
-        // Auto open change-pw modal if there was a pw msg
+        // ── Auto open change-pw modal if error ────────────────────────────────
         <?php
         $pw_msg_bottom = $_SESSION['pw_change_msg_bottom'] ?? null;
         if($pw_msg_bottom):
diff --git a/views/layout_top.php b/views/layout_top.php
index 483a92b..32e40c2 100644
--- a/views/layout_top.php
+++ b/views/layout_top.php
@@ -9,7 +9,10 @@
     <link rel="stylesheet" href="public/css/style.css">
 </head>
 <body>
-    <script>if(localStorage.getItem('theme') === 'dark') document.body.classList.add('dark-mode');</script>
+    <script>
+        if(localStorage.getItem('theme') === 'dark') document.body.classList.add('dark-mode');
+        if(localStorage.getItem('sidebar_collapsed') === '1') document.body.classList.add('sidebar-collapsed');
+    </script>
     <div id="toast"></div>
 
     <!-- Profile Picture Modal -->
@@ -82,41 +85,97 @@
         </div>
     </div>
 
-    <div class="app-container">
-        <aside class="sidebar">
-            <h2 style="display:flex; align-items:center; gap:8px;">
-                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
-                TaskManager
-            </h2>
-            <nav style="display:flex; flex-direction:column; gap:0.5rem;">
-                <a href="?action=dashboard" class="nav-link <?= $action=='dashboard'?'active':'' ?>">
-                    <span style="display:flex;align-items:center;gap:0.6rem;"><i class="fa fa-gauge-high" style="width:16px;"></i> Dashboard</span>
-                </a>
-                <a href="?action=tasks" class="nav-link <?= $action=='tasks'?'active':'' ?>">
-                    <span style="display:flex;align-items:center;gap:0.6rem;"><i class="fa fa-list-check" style="width:16px;"></i> Tasks</span>
-                </a>
-                <a href="?action=notes" class="nav-link <?= $action=='notes'?'active':'' ?>">
-                    <span style="display:flex;align-items:center;gap:0.6rem;"><i class="fa fa-note-sticky" style="width:16px;"></i> Notes</span>
-                </a>
-                <a href="?action=passwords" class="nav-link <?= $action=='passwords'?'active':'' ?>">
-                    <span style="display:flex;align-items:center;gap:0.6rem;"><i class="fa fa-lock" style="width:16px;"></i> Passwords</span>
-                </a>
-                <a href="?action=projects" class="nav-link <?= $action=='projects'?'active':'' ?>">
-                    <span style="display:flex;align-items:center;gap:0.6rem;"><i class="fa fa-folder-open" style="width:16px;"></i> Projects</span>
-                </a>
-                <a href="?action=notifications" class="nav-link <?= $action=='notifications'?'active':'' ?>">
-                    <span style="display:flex;align-items:center;gap:0.6rem;"><i class="fa fa-bell" style="width:16px;"></i> Notifications</span>
+    <!-- Notifications Modal -->
+    <?php
+    // Fetch notifications for popup
+    $notif_list = [];
+    try {
+        $stmt_n = $pdo->prepare("SELECT * FROM notifications WHERE user_id=? ORDER BY created_at DESC LIMIT 30");
+        $stmt_n->execute([$user_id]);
+        $notif_list = $stmt_n->fetchAll();
+    } catch(Exception $e) {}
+    ?>
+    <div class="modal-overlay" id="notifications-modal">
+        <div class="modal-content" style="max-width:460px; max-height:80vh; display:flex; flex-direction:column; padding:0; overflow:hidden;">
+            <div style="display:flex; justify-content:space-between; align-items:center; padding:1.25rem 1.5rem; border-bottom:1px solid var(--border);">
+                <h3 style="font-size:1.05rem; font-weight:700;"><i class="fa fa-bell" style="color:var(--primary);"></i> Notifications</h3>
+                <div style="display:flex; gap:0.5rem; align-items:center;">
                     <?php if($unread_notifications > 0): ?>
-                        <span class="badge"><?= $unread_notifications ?></span>
+                    <form method="POST" id="mark-all-read-form" style="display:inline;">
+                        <input type="hidden" name="mark_all_read" value="1">
+                        <input type="hidden" name="redirect_to" value="<?= htmlspecialchars($action) ?>">
+                        <button type="submit" class="btn btn-sm btn-secondary" style="font-size:0.75rem;">Mark all read</button>
+                    </form>
                     <?php endif; ?>
+                    <button onclick="document.getElementById('notifications-modal').classList.remove('active')" style="background:none;border:none;color:var(--text-light);cursor:pointer;font-size:1.2rem;padding:4px;">×</button>
+                </div>
+            </div>
+            <div style="overflow-y:auto; flex:1; padding:0.75rem 0;">
+                <?php if(empty($notif_list)): ?>
+                <div style="text-align:center; padding:2.5rem 1rem; color:var(--text-light);">
+                    <i class="fa fa-bell-slash" style="font-size:2rem; display:block; margin-bottom:0.75rem;"></i>
+                    No notifications yet.
+                </div>
+                <?php else: foreach($notif_list as $n):
+                    $t = strtotime($n['created_at']);
+                    $diff = time()-$t;
+                    $ago = $diff<60?'just now':($diff<3600?floor($diff/60).'m ago':($diff<86400?floor($diff/3600).'h ago':floor($diff/86400).'d ago'));
+                ?>
+                <div style="display:flex; align-items:flex-start; gap:0.75rem; padding:0.65rem 1.5rem; border-bottom:1px solid var(--border); transition:background 0.15s; <?= !$n['is_read']?'background:rgba(var(--primary-rgb),0.04);':'' ?>">
+                    <div style="width:8px; height:8px; border-radius:50%; background:<?= !$n['is_read']?'var(--primary)':'transparent' ?>; margin-top:6px; flex-shrink:0;"></div>
+                    <div style="flex:1; min-width:0;">
+                        <div style="font-size:0.875rem; color:var(--text); <?= !$n['is_read']?'font-weight:500;':'' ?>"><?= htmlspecialchars($n['message']) ?></div>
+                        <div style="font-size:0.72rem; color:var(--text-light); margin-top:3px;"><?= $ago ?></div>
+                    </div>
+                </div>
+                <?php endforeach; endif; ?>
+            </div>
+        </div>
+    </div>
+
+    <div class="app-container">
+        <!-- Sidebar -->
+        <aside class="sidebar" id="sidebar">
+            <!-- Toggle button on the edge -->
+            <button class="sidebar-toggle-btn" id="sidebar-toggle-btn" onclick="toggleSidebar()" title="Collapse / Expand">
+                <i class="fa fa-chevron-left" id="sidebar-toggle-icon"></i>
+            </button>
+
+            <h2 class="sidebar-brand">
+                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
+                <span class="sidebar-label sidebar-brand-text">TaskManager</span>
+            </h2>
+
+            <nav style="display:flex; flex-direction:column; gap:0.25rem;">
+                <a href="?action=dashboard" class="nav-link <?= $action=='dashboard'?'active':'' ?>" title="Dashboard">
+                    <i class="fa fa-gauge-high nav-icon"></i>
+                    <span class="sidebar-label">Dashboard</span>
+                </a>
+                <a href="?action=tasks" class="nav-link <?= $action=='tasks'?'active':'' ?>" title="Tasks">
+                    <i class="fa fa-list-check nav-icon"></i>
+                    <span class="sidebar-label">Tasks</span>
+                </a>
+                <a href="?action=notes" class="nav-link <?= $action=='notes'?'active':'' ?>" title="Notes">
+                    <i class="fa fa-note-sticky nav-icon"></i>
+                    <span class="sidebar-label">Notes</span>
+                </a>
+                <a href="?action=passwords" class="nav-link <?= $action=='passwords'?'active':'' ?>" title="Passwords">
+                    <i class="fa fa-lock nav-icon"></i>
+                    <span class="sidebar-label">Passwords</span>
+                </a>
+                <a href="?action=projects" class="nav-link <?= $action=='projects'?'active':'' ?>" title="Projects">
+                    <i class="fa fa-folder-open nav-icon"></i>
+                    <span class="sidebar-label">Projects</span>
                 </a>
                 <?php if(!empty($_SESSION['is_admin'])): ?>
-                    <a href="?action=admin" class="nav-link <?= $action=='admin'?'active':'' ?>">
-                        <span style="display:flex;align-items:center;gap:0.6rem;"><i class="fa fa-shield-halved" style="width:16px;"></i> Admin Panel</span>
+                    <a href="?action=admin" class="nav-link <?= $action=='admin'?'active':'' ?>" title="Admin Panel">
+                        <i class="fa fa-shield-halved nav-icon"></i>
+                        <span class="sidebar-label">Admin Panel</span>
                     </a>
                 <?php endif; ?>
             </nav>
         </aside>
+
         <main class="main-content">
             <!-- Top Bar -->
             <div style="display:flex; justify-content:flex-end; align-items:center; gap:0.75rem; margin-bottom:1.5rem;">
@@ -128,17 +187,24 @@
 
                 <!-- User Avatar Dropdown -->
                 <div class="user-dropdown-wrap" id="user-dropdown-wrap">
-                    <button class="user-avatar-btn" id="user-avatar-btn" onclick="toggleUserDropdown()" title="<?= htmlspecialchars($current_user['username']) ?>">
-                        <?php
-                        try { $pdo->exec("ALTER TABLE users ADD COLUMN profile_pic TEXT DEFAULT NULL"); } catch(Exception $e) {}
-                        $pic_top = $current_user['profile_pic'] ?? null;
-                        ?>
-                        <?php if($pic_top && file_exists($pic_top)): ?>
-                            <img src="<?= htmlspecialchars($pic_top) ?>?v=<?= time() ?>" alt="avatar" style="width:100%; height:100%; object-fit:cover; border-radius:50%;">
-                        <?php else: ?>
-                            <?= strtoupper(mb_substr($current_user['username'],0,1)) ?>
+                    <!-- Avatar with notification badge -->
+                    <div style="position:relative; display:inline-flex;">
+                        <button class="user-avatar-btn" id="user-avatar-btn" onclick="toggleUserDropdown()" title="<?= htmlspecialchars($current_user['username']) ?>">
+                            <?php
+                            try { $pdo->exec("ALTER TABLE users ADD COLUMN profile_pic TEXT DEFAULT NULL"); } catch(Exception $e) {}
+                            $pic_top = $current_user['profile_pic'] ?? null;
+                            ?>
+                            <?php if($pic_top && file_exists($pic_top)): ?>
+                                <img src="<?= htmlspecialchars($pic_top) ?>?v=<?= time() ?>" alt="avatar" style="width:100%; height:100%; object-fit:cover; border-radius:50%;">
+                            <?php else: ?>
+                                <?= strtoupper(mb_substr($current_user['username'],0,1)) ?>
+                            <?php endif; ?>
+                        </button>
+                        <?php if($unread_notifications > 0): ?>
+                        <span class="avatar-notif-badge" onclick="openNotifications()"><?= $unread_notifications > 9 ? '9+' : $unread_notifications ?></span>
                         <?php endif; ?>
-                    </button>
+                    </div>
+
                     <div class="user-dropdown-menu" id="user-dropdown-menu">
                         <div class="user-dropdown-header">
                             <div class="user-dropdown-name"><?= htmlspecialchars($current_user['username']) ?></div>
@@ -149,6 +215,14 @@
                             <?php endif; ?>
                         </div>
                         <div class="user-dropdown-divider"></div>
+                        <button class="user-dropdown-item" onclick="openNotifications()">
+                            <i class="fa fa-bell"></i>
+                            Notifications
+                            <?php if($unread_notifications > 0): ?>
+                                <span class="badge" style="margin-left:auto; font-size:0.65rem;"><?= $unread_notifications ?></span>
+                            <?php endif; ?>
+                        </button>
+                        <div class="user-dropdown-divider"></div>
                         <button class="user-dropdown-item" onclick="document.getElementById('profile-pic-modal').classList.add('active'); closeUserDropdown();">
                             <i class="fa fa-image"></i> Set Profile Picture
                         </button>
@@ -162,8 +236,6 @@
                     </div>
                 </div>
             </div>
-            <?php if (isset($pw_msg) && $pw_msg === 'success'): ?>
-            <script>document.addEventListener('DOMContentLoaded',()=>{ document.getElementById('change-pw-modal').classList.add('active'); });</script>
-            <?php elseif(isset($pw_msg) && $pw_msg): ?>
+            <?php if (isset($pw_msg) && $pw_msg): ?>
             <script>document.addEventListener('DOMContentLoaded',()=>{ document.getElementById('change-pw-modal').classList.add('active'); });</script>
             <?php endif; ?>
diff --git a/views/notes.php b/views/notes.php
index a459f4f..a630f45 100644
--- a/views/notes.php
+++ b/views/notes.php
@@ -112,22 +112,25 @@ $notes = $stmt->fetchAll();
 $all_users = query("SELECT id, username FROM users WHERE id != ?", [$user_id])->fetchAll();
 $all_groups = query("SELECT * FROM groups")->fetchAll();
 
-// Define note colors
+// Define note colors — Google Keep inspired
 $note_colors = [
-    null      => ['bg'=>'var(--surface)',     'label'=>'Default'],
-    '#fff9c4' => ['bg'=>'#fff9c4',            'label'=>'Yellow'],
-    '#d4edda' => ['bg'=>'#d4edda',            'label'=>'Green'],
-    '#cce5ff' => ['bg'=>'#cce5ff',            'label'=>'Blue'],
-    '#f8d7da' => ['bg'=>'#f8d7da',            'label'=>'Pink'],
-    '#e2d9f3' => ['bg'=>'#e2d9f3',            'label'=>'Purple'],
-    '#fde8d8' => ['bg'=>'#fde8d8',            'label'=>'Orange'],
-    '#f5f5f5' => ['bg'=>'#f5f5f5',            'label'=>'Gray'],
+    ''        => ['bg'=>'var(--surface)', 'label'=>'Default',    'hex'=>'#ffffff'],
+    '#fff9c4' => ['bg'=>'#fff9c4',        'label'=>'Yellow',     'hex'=>'#fff9c4'],
+    '#ccff90' => ['bg'=>'#ccff90',        'label'=>'Lime',       'hex'=>'#ccff90'],
+    '#d4edda' => ['bg'=>'#d4edda',        'label'=>'Sage',       'hex'=>'#d4edda'],
+    '#80cbc4' => ['bg'=>'#80cbc4',        'label'=>'Teal',       'hex'=>'#80cbc4'],
+    '#b3e5fc' => ['bg'=>'#b3e5fc',        'label'=>'Sky',        'hex'=>'#b3e5fc'],
+    '#cce5ff' => ['bg'=>'#cce5ff',        'label'=>'Blue',       'hex'=>'#cce5ff'],
+    '#e2d9f3' => ['bg'=>'#e2d9f3',        'label'=>'Lavender',   'hex'=>'#e2d9f3'],
+    '#f8d7da' => ['bg'=>'#f8d7da',        'label'=>'Rose',       'hex'=>'#f8d7da'],
+    '#ef9a9a' => ['bg'=>'#ef9a9a',        'label'=>'Red',        'hex'=>'#ef9a9a'],
+    '#ffcc80' => ['bg'=>'#ffcc80',        'label'=>'Peach',      'hex'=>'#ffcc80'],
+    '#fde8d8' => ['bg'=>'#fde8d8',        'label'=>'Orange',     'hex'=>'#fde8d8'],
+    '#d7ccc8' => ['bg'=>'#d7ccc8',        'label'=>'Sand',       'hex'=>'#d7ccc8'],
 ];
-// dark mode color overrides handled via JS
 ?>
 
-<div class="header" style="margin-bottom:1rem;">
-    <h1 style="font-size:1.5rem; font-weight:700;">📝 Notes</h1>
+<div style="display:flex; justify-content:flex-end; align-items:center; margin-bottom:1rem;">
     <button class="btn" onclick="document.getElementById('new-note-modal').classList.add('active')">
         <i class="fa fa-plus"></i> New Note
     </button>
@@ -135,8 +138,11 @@ $note_colors = [
 
 <!-- ── New Note Modal ─────────────────────────────────────────────────────── -->
 <div class="modal-overlay" id="new-note-modal">
-    <div class="modal-content" style="max-width:600px; max-height:90vh; overflow-y:auto;">
-        <h3 style="margin-bottom:1rem;">New Note</h3>
+    <div class="modal-content" style="max-width:580px; max-height:92vh; overflow-y:auto; padding:1.5rem;">
+        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
+            <h3 style="font-size:1rem; font-weight:700;">New Note</h3>
+            <button type="button" style="background:none;border:none;color:var(--text-light);cursor:pointer;font-size:1.2rem;" onclick="document.getElementById('new-note-modal').classList.remove('active')">×</button>
+        </div>
         <form method="POST" enctype="multipart/form-data" id="new-note-form">
             <input type="hidden" name="create_note" value="1">
             <div class="form-group">
diff --git a/views/passwords.php b/views/passwords.php
index 2baa899..1c83599 100644
--- a/views/passwords.php
+++ b/views/passwords.php
@@ -44,6 +44,13 @@ if($_SERVER['REQUEST_METHOD'] === 'POST') {
         }
     }
 
+    // Unshare a specific share record
+    if(isset($_POST['remove_password_share'])) {
+        $share_id = (int)$_POST['share_id'];
+        $chk = query("SELECT ps.id FROM password_shares ps JOIN passwords p ON ps.password_id=p.id WHERE ps.id=? AND p.owner_id=?", [$share_id, $user_id])->fetch();
+        if($chk) query("DELETE FROM password_shares WHERE id=?", [$share_id]);
+    }
+
     if(isset($_POST['bulk_action']) && isset($_POST['selected_passwords'])) {
         $selected = $_POST['selected_passwords'];
         $action = $_POST['bulk_action'];
@@ -187,7 +194,12 @@ $active_folder = $_GET['vault_folder'] ?? 'all';
                 <label>Notes</label>
                 <textarea name="notes" id="pw-edit-notes" class="form-control" rows="2" placeholder="Optional notes..."></textarea>
             </div>
-            <div style="display:flex; justify-content:space-between; gap:0.5rem; flex-wrap:wrap; margin-top:0.5rem;">
+            <!-- Shares management section (populated by JS) -->
+            <div id="pw-shares-section" style="display:none; border-top:1px solid var(--border); padding-top:0.75rem; margin-top:0.5rem;">
+                <label style="font-size:0.8rem; color:var(--text-light); display:block; margin-bottom:0.4rem;">Shared with</label>
+                <div id="pw-shares-list" style="display:flex; flex-wrap:wrap; gap:0.35rem;"></div>
+            </div>
+            <div style="display:flex; justify-content:space-between; gap:0.5rem; flex-wrap:wrap; margin-top:0.75rem;">
                 <div id="pw-edit-delete-wrap" style="display:none;">
                     <button type="button" class="btn btn-danger btn-sm" onclick="deletePassword()"><i class="fa fa-trash"></i> Delete</button>
                 </div>
@@ -206,12 +218,9 @@ $active_folder = $_GET['vault_folder'] ?? 'all';
     <input type="hidden" name="password_id" id="delete-pw-id">
 </form>
 
-<div class="header" style="margin-bottom:1rem;">
-    <h1 style="font-size:1.5rem; font-weight:700;">🔐 Password Vault</h1>
-    <div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
-        <button class="btn btn-secondary" onclick="showAddFolderPrompt()"><i class="fa fa-folder-plus"></i> New Folder</button>
-        <button class="btn" onclick="openAddPassword()"><i class="fa fa-plus"></i> Add Entry</button>
-    </div>
+<div style="display:flex; justify-content:flex-end; gap:0.5rem; flex-wrap:wrap; margin-bottom:1rem;">
+    <button class="btn btn-secondary" onclick="showAddFolderPrompt()"><i class="fa fa-folder-plus"></i> New Folder</button>
+    <button class="btn" onclick="openAddPassword()"><i class="fa fa-plus"></i> Add Entry</button>
 </div>
 
 <!-- Add folder form (hidden) -->
@@ -224,8 +233,8 @@ $active_folder = $_GET['vault_folder'] ?? 'all';
     <input type="hidden" name="folder_id" id="del-folder-id">
 </form>
 
-<div class="card" style="padding:0; overflow:hidden;">
-    <div class="vault-layout">
+<div style="background:var(--surface); border-radius:1rem; box-shadow:0 4px 6px -1px rgba(0,0,0,0.07); border:1px solid var(--border); overflow:hidden;">
+    <div class="vault-layout" style="min-height:calc(100vh - 200px);">
         <!-- Vault Sidebar (Folders) -->
         <div class="vault-sidebar">
             <div style="font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-light); font-weight:700; padding:0.25rem 0.65rem; margin-bottom:0.25rem;">Folders</div>