feat: add OS + in-app notification system
notify-rust for desktop notifications, NotificationCenter.svelte with bell icon, unread badge, history (max 100), 6 notification types. Extended notification store with history and type support.
This commit is contained in:
Hibryda
parent
7cb5cddc7c
commit
5dd7df03cb
6 changed files with 560 additions and 12 deletions
300
v2/src/lib/components/Notifications/NotificationCenter.svelte
Normal file
300
v2/src/lib/components/Notifications/NotificationCenter.svelte
Normal file
|
|
@ -0,0 +1,300 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
getNotificationHistory,
|
||||
getUnreadCount,
|
||||
markRead,
|
||||
markAllRead,
|
||||
clearHistory,
|
||||
type NotificationType,
|
||||
} from '../../stores/notifications.svelte';
|
||||
|
||||
let history = $derived(getNotificationHistory());
|
||||
let unreadCount = $derived(getUnreadCount());
|
||||
let open = $state(false);
|
||||
|
||||
function toggle() {
|
||||
open = !open;
|
||||
}
|
||||
|
||||
function close() {
|
||||
open = false;
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape' && open) {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
function handleClickNotification(id: string) {
|
||||
markRead(id);
|
||||
}
|
||||
|
||||
function typeIcon(type: NotificationType): string {
|
||||
switch (type) {
|
||||
case 'agent_complete': return '\u2713'; // checkmark
|
||||
case 'agent_error': return '\u2715'; // x
|
||||
case 'task_review': return '\u2691'; // flag
|
||||
case 'wake_event': return '\u23F0'; // alarm
|
||||
case 'conflict': return '\u26A0'; // warning
|
||||
case 'system': return '\u2139'; // info
|
||||
}
|
||||
}
|
||||
|
||||
function typeColor(type: NotificationType): string {
|
||||
switch (type) {
|
||||
case 'agent_complete': return 'var(--ctp-green)';
|
||||
case 'agent_error': return 'var(--ctp-red)';
|
||||
case 'task_review': return 'var(--ctp-blue)';
|
||||
case 'wake_event': return 'var(--ctp-teal)';
|
||||
case 'conflict': return 'var(--ctp-yellow)';
|
||||
case 'system': return 'var(--ctp-overlay1)';
|
||||
}
|
||||
}
|
||||
|
||||
function relativeTime(ts: number): string {
|
||||
const diff = Math.floor((Date.now() - ts) / 1000);
|
||||
if (diff < 60) return `${diff}s ago`;
|
||||
if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
|
||||
if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
|
||||
return `${Math.floor(diff / 86400)}d ago`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={handleKeydown} />
|
||||
|
||||
<div class="notification-center" data-testid="notification-center">
|
||||
<button
|
||||
class="bell-btn"
|
||||
class:has-unread={unreadCount > 0}
|
||||
onclick={toggle}
|
||||
title="Notifications"
|
||||
data-testid="notification-bell"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
|
||||
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
||||
</svg>
|
||||
{#if unreadCount > 0}
|
||||
<span class="badge">{unreadCount > 99 ? '99+' : unreadCount}</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
{#if open}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="backdrop" onclick={close}></div>
|
||||
<div class="panel" data-testid="notification-panel">
|
||||
<div class="panel-header">
|
||||
<span class="panel-title">Notifications</span>
|
||||
<div class="panel-actions">
|
||||
{#if unreadCount > 0}
|
||||
<button class="action-btn" onclick={() => markAllRead()}>Mark all read</button>
|
||||
{/if}
|
||||
{#if history.length > 0}
|
||||
<button class="action-btn" onclick={() => { clearHistory(); close(); }}>Clear</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-list">
|
||||
{#if history.length === 0}
|
||||
<div class="empty">No notifications</div>
|
||||
{:else}
|
||||
{#each [...history].reverse() as item (item.id)}
|
||||
<button
|
||||
class="notification-item"
|
||||
class:unread={!item.read}
|
||||
onclick={() => handleClickNotification(item.id)}
|
||||
>
|
||||
<span class="notif-icon" style="color: {typeColor(item.type)}">{typeIcon(item.type)}</span>
|
||||
<div class="notif-content">
|
||||
<span class="notif-title">{item.title}</span>
|
||||
<span class="notif-body">{item.body}</span>
|
||||
</div>
|
||||
<span class="notif-time">{relativeTime(item.timestamp)}</span>
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.notification-center {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bell-btn {
|
||||
position: relative;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--ctp-overlay1);
|
||||
cursor: pointer;
|
||||
padding: 0.125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bell-btn:hover {
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.bell-btn.has-unread {
|
||||
color: var(--ctp-peach);
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -0.25rem;
|
||||
right: -0.375rem;
|
||||
background: var(--ctp-red);
|
||||
color: var(--ctp-crust);
|
||||
font-size: 0.5rem;
|
||||
font-weight: 700;
|
||||
min-width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
border-radius: 0.4375rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 0.1875rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 199;
|
||||
}
|
||||
|
||||
.panel {
|
||||
position: absolute;
|
||||
bottom: 1.75rem;
|
||||
right: 0;
|
||||
width: 20rem;
|
||||
max-height: 25rem;
|
||||
background: var(--ctp-surface0);
|
||||
border: 1px solid var(--ctp-surface1);
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4);
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid var(--ctp-surface1);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--ctp-blue);
|
||||
font-size: 0.625rem;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
color: var(--ctp-sapphire);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.panel-list {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.6875rem;
|
||||
color: var(--ctp-overlay0);
|
||||
}
|
||||
|
||||
.notification-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: none;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--ctp-surface1) 50%, transparent);
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
color: var(--ctp-subtext0);
|
||||
transition: background 0.1s;
|
||||
}
|
||||
|
||||
.notification-item:hover {
|
||||
background: color-mix(in srgb, var(--ctp-surface1) 40%, transparent);
|
||||
}
|
||||
|
||||
.notification-item.unread {
|
||||
background: color-mix(in srgb, var(--ctp-blue) 5%, transparent);
|
||||
color: var(--ctp-text);
|
||||
}
|
||||
|
||||
.notif-icon {
|
||||
font-size: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
width: 1rem;
|
||||
text-align: center;
|
||||
padding-top: 0.0625rem;
|
||||
}
|
||||
|
||||
.notif-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.notif-title {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.notif-body {
|
||||
font-size: 0.625rem;
|
||||
color: var(--ctp-subtext0);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.unread .notif-body {
|
||||
color: var(--ctp-overlay1);
|
||||
}
|
||||
|
||||
.notif-time {
|
||||
font-size: 0.5625rem;
|
||||
color: var(--ctp-overlay0);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
padding-top: 0.0625rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,6 +3,10 @@
|
|||
import { getActiveGroup, getEnabledProjects, setActiveProject } from '../../stores/workspace.svelte';
|
||||
import { getHealthAggregates, getAttentionQueue, type ProjectHealth } from '../../stores/health.svelte';
|
||||
import { getTotalConflictCount } from '../../stores/conflicts.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { checkForUpdates, installUpdate, type UpdateInfo } from '../../utils/updater';
|
||||
import { message as dialogMessage, confirm } from '@tauri-apps/plugin-dialog';
|
||||
import NotificationCenter from '../Notifications/NotificationCenter.svelte';
|
||||
|
||||
let agentSessions = $derived(getAgentSessions());
|
||||
let activeGroup = $derived(getActiveGroup());
|
||||
|
|
@ -19,6 +23,35 @@
|
|||
let totalConflicts = $derived(getTotalConflictCount());
|
||||
let showAttention = $state(false);
|
||||
|
||||
// Auto-update state
|
||||
let updateInfo = $state<UpdateInfo | null>(null);
|
||||
let installing = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
// Check for updates 10s after startup
|
||||
const timer = setTimeout(async () => {
|
||||
const info = await checkForUpdates();
|
||||
if (info.available) updateInfo = info;
|
||||
}, 10_000);
|
||||
return () => clearTimeout(timer);
|
||||
});
|
||||
|
||||
async function handleUpdateClick() {
|
||||
if (!updateInfo) return;
|
||||
const notes = updateInfo.notes
|
||||
? `Release notes:\n\n${updateInfo.notes}\n\nInstall and restart?`
|
||||
: `Install v${updateInfo.version} and restart?`;
|
||||
const confirmed = await confirm(notes, { title: `Update available: v${updateInfo.version}`, kind: 'info' });
|
||||
if (confirmed) {
|
||||
installing = true;
|
||||
try {
|
||||
await installUpdate();
|
||||
} catch {
|
||||
installing = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function projectName(projectId: string): string {
|
||||
return enabledProjects.find(p => p.id === projectId)?.name ?? projectId.slice(0, 8);
|
||||
}
|
||||
|
|
@ -105,6 +138,23 @@
|
|||
<span class="item cost">${totalCost.toFixed(4)}</span>
|
||||
<span class="sep"></span>
|
||||
{/if}
|
||||
<NotificationCenter />
|
||||
<span class="sep"></span>
|
||||
{#if updateInfo?.available}
|
||||
<button
|
||||
class="item update-btn"
|
||||
onclick={handleUpdateClick}
|
||||
disabled={installing}
|
||||
title="Click to install v{updateInfo.version}"
|
||||
>
|
||||
{#if installing}
|
||||
Installing...
|
||||
{:else}
|
||||
Update v{updateInfo.version}
|
||||
{/if}
|
||||
</button>
|
||||
<span class="sep"></span>
|
||||
{/if}
|
||||
<span class="item version">BTerminal v3</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -244,6 +294,32 @@
|
|||
.cost { color: var(--ctp-yellow); }
|
||||
.version { color: var(--ctp-overlay0); }
|
||||
|
||||
/* Update badge */
|
||||
.update-btn {
|
||||
background: color-mix(in srgb, var(--ctp-green) 15%, transparent);
|
||||
border: 1px solid var(--ctp-green);
|
||||
border-radius: 0.25rem;
|
||||
color: var(--ctp-green);
|
||||
font: inherit;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
padding: 0 0.375rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.update-btn:hover {
|
||||
background: color-mix(in srgb, var(--ctp-green) 25%, transparent);
|
||||
}
|
||||
|
||||
.update-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Attention panel dropdown */
|
||||
.attention-panel {
|
||||
position: absolute;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue