diff --git a/public/css/style.css b/public/css/style.css index 6aa783f..703bd30 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -30,13 +30,22 @@ body.no-scanlines::after { display: none !important; } /* Cards: geometry & shadow driven by design tokens */ .board-card { + --card-stack-shadow: 0 0 0 0 transparent; border-radius: var(--ui-radius-card); border-width: var(--ui-border-card); border-style: var(--ui-border-style); - box-shadow: var(--ui-shadow-card); + box-shadow: var(--ui-shadow-card), var(--card-stack-shadow); transition: border-color 0.12s, transform 0.15s, box-shadow 0.2s; overflow: hidden; /* clip card-bar (and other inner elements) to the rounded corners */ } +.board-card.card-group { + --card-stack-shadow: + 0 3px 0 -2px var(--t-border), + 0 3px 0 0 var(--t-bg), + 0 8px 0 -4px color-mix(in srgb, var(--t-border) 70%, transparent), + 0 6px 0 0 var(--t-bg), + 0 13px 0 -6px color-mix(in srgb, var(--t-border) 30%, transparent); +} .board-card:hover { transform: translateY(calc(0px - var(--ui-lift-card))); } .board-card > .p-4 { padding: var(--ui-pad-card); } .board-card .card-tags { flex-shrink: 0; min-height: 18px; } @@ -321,23 +330,9 @@ body::after { z-index: 0; } -/* Group stacking effect */ -.card-group { - position: relative; -} -.card-group::before, -.card-group::after { - content: ''; - position: absolute; - left: 4px; right: 4px; - height: 100%; - border: 1px solid var(--t-border); - background: var(--t-surface); - border-radius: inherit; - z-index: -1; -} -.card-group::before { top: 4px; opacity: 0.6; } -.card-group::after { top: 8px; opacity: 0.3; left: 8px; right: 8px; } +/* Group stacking effect — implemented via box-shadow on .board-card.card-group above + (pseudo-elements would be clipped by the card's overflow:hidden). */ +.card-group { position: relative; } .card-group-badge { position: absolute; top: 6px; @@ -389,7 +384,7 @@ body::after { box-shadow: 0 4px 16px rgba(0,0,0,0.4); z-index: 10; } -.card-glow:hover { box-shadow: var(--ui-shadow-card), 0 0 16px -3px var(--glow-color, rgba(56, 189, 248, 0.15)); } +.card-glow:hover { box-shadow: var(--ui-shadow-card), var(--card-stack-shadow), 0 0 16px -3px var(--glow-color, rgba(56, 189, 248, 0.15)); } .card-selected { outline: 2px solid var(--t-accent) !important; outline-offset: -2px; } .card-select-check { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; diff --git a/public/plugins/chat/chat.js b/public/plugins/chat/chat.js index ea29a10..6cef9f0 100644 --- a/public/plugins/chat/chat.js +++ b/public/plugins/chat/chat.js @@ -101,13 +101,32 @@ async function toggleFlyout() { async function openFlyout() { $('chat-flyout').classList.remove('hidden'); + // Capture blink state BEFORE we clear it — it tells us a peer wrote since last close + const wasBlinking = $('chat-footer-btn')?.classList.contains('blinking'); stopBlink(); - showListView(); pollIntervalMs = POLL_OPEN_MS; restartPoll(); await loadConversations(); await pollOnce(); // immediate refresh on open await loadConversations(); + + // Pick the right initial view: + // 1. If blinking → newest peer with unread (= someone wrote to us) + // 2. Else → last peer the user opened manually (persisted) + // 3. Else → list view + let target = null; + if (wasBlinking) { + const unread = conversations + .filter(c => parseInt(c.unread) > 0) + .sort((a, b) => String(b.last_at).localeCompare(String(a.last_at))); + if (unread.length) target = unread[0].peer; + } + if (!target) { + const lastPeer = localStorage.getItem('chat-last-peer'); + if (lastPeer && conversations.some(c => c.peer === lastPeer)) target = lastPeer; + } + if (target) await openConversation(target); + else showListView(); } function closeFlyout() { @@ -190,6 +209,7 @@ function renderConversations() { async function openConversation(peer) { showThreadView(peer); + localStorage.setItem('chat-last-peer', peer); await loadThread(peer); // Mark all incoming as read await hyprcrd.api('api/chat/read', { method: 'POST', body: { peer } }).catch(() => {}); diff --git a/public/plugins/slideshow/slideshow.css b/public/plugins/slideshow/slideshow.css index da1a6dc..e5d10ef 100644 --- a/public/plugins/slideshow/slideshow.css +++ b/public/plugins/slideshow/slideshow.css @@ -155,6 +155,7 @@ font-size: 10px; color: var(--t-muted); border: 1px solid var(--t-border); + border-radius: var(--ui-radius-button); background: transparent; cursor: pointer; transition: all 0.15s; @@ -174,6 +175,7 @@ margin-left: 4px; color: var(--t-muted); border: 1px solid var(--t-border); + border-radius: var(--ui-radius-button); background: transparent; cursor: pointer; transition: all 0.15s;