snice 4.9.0 → 4.11.0

package/bin/templates/pwa/src/pages/notifications.ts

@@ -1,21 +1,22 @@
 import { page } from '../router';
-import { render, styles, html, css, ready, dispose } from 'snice';
+import { render, styles, html, css, ready, dispose, watch, on } from 'snice';
 import type { Placard } from 'snice';
-import { authGuard } from '../guards/auth';
+import { isAuthenticated } from '../guards/auth';
 import { getNotificationsDaemon } from '../daemons/notifications';
-import type { Notification } from '../types/notifications';
+import type { Notification, NotificationType } from '../types/notifications';
 
 const placard: Placard = {
   name: 'notifications',
   title: 'Notifications',
-  icon: '🔔',
+  icon: '\ud83d\udd14',
   show: true,
   order: 3
 };
 
-@page({ tag: 'notifications-page', routes: ['/notifications'], guards: [authGuard], placard })
+@page({ tag: 'notifications-page', routes: ['/notifications'], guards: [isAuthenticated], placard })
 export class NotificationsPage extends HTMLElement {
   notifications: Notification[] = [];
+  filter: NotificationType | 'all' = 'all';
   private unsubscribe: (() => void) | null = null;
 
   @ready()
@@ -34,6 +35,16 @@ export class NotificationsPage extends HTMLElement {
     }
   }
 
+  @watch('filter')
+  onFilterChange() {
+    // Re-render triggers automatically via property change
+  }
+
+  get filteredNotifications(): Notification[] {
+    if (this.filter === 'all') return this.notifications;
+    return this.notifications.filter(n => n.type === this.filter);
+  }
+
   getVariant(type: string): string {
     const variants: Record<string, string> = {
       info: 'info',
@@ -44,55 +55,93 @@ export class NotificationsPage extends HTMLElement {
     return variants[type] || 'info';
   }
 
+  @on('keydown:ctrl+Backspace')
   clearAll() {
     this.notifications = [];
   }
 
+  setFilter(filter: NotificationType | 'all') {
+    this.filter = filter;
+  }
+
   removeNotification(id: string) {
     this.notifications = this.notifications.filter(n => n.id !== id);
   }
 
   @render()
   renderContent() {
+    const filtered = this.filteredNotifications;
+    const hasNotifications = filtered.length > 0;
+    const isEmpty = filtered.length === 0;
+
     return html`
       <div class="container">
         <div class="header">
-          <h1>Notifications</h1>
+          <div>
+            <h1>Notifications</h1>
+            <span class="count">${this.notifications.length} total</span>
+          </div>
           <if ${this.notifications.length > 0}>
             <snice-button
               variant="secondary"
               size="small"
               @click=${this.clearAll}
             >
-              Clear All
+              Clear All (Ctrl+Backspace)
             </snice-button>
           </if>
         </div>
 
-        <if ${this.notifications.length === 0}>
-          <snice-empty-state
-            icon="🔔"
-            title="No notifications"
-            description="You'll see live notifications here as they arrive"
-          ></snice-empty-state>
-        </if>
-
         <if ${this.notifications.length > 0}>
-          <div class="notifications">
-            ${this.notifications.map(notification => html`
-              <snice-alert
-                key=${notification.id}
-                variant="${this.getVariant(notification.type)}"
-                dismissible
-                @dismiss=${() => this.removeNotification(notification.id)}
-              >
-                <strong>${notification.title}</strong>
-                <p>${notification.message}</p>
-                <small>${new Date(notification.timestamp).toLocaleTimeString()}</small>
-              </snice-alert>
-            `)}
+          <div class="filters">
+            <button
+              class="filter-btn ${this.filter === 'all' ? 'active' : ''}"
+              @click=${() => this.setFilter('all')}
+            >All</button>
+            <button
+              class="filter-btn ${this.filter === 'info' ? 'active' : ''}"
+              @click=${() => this.setFilter('info')}
+            >Info</button>
+            <button
+              class="filter-btn ${this.filter === 'success' ? 'active' : ''}"
+              @click=${() => this.setFilter('success')}
+            >Success</button>
+            <button
+              class="filter-btn ${this.filter === 'warning' ? 'active' : ''}"
+              @click=${() => this.setFilter('warning')}
+            >Warning</button>
+            <button
+              class="filter-btn ${this.filter === 'error' ? 'active' : ''}"
+              @click=${() => this.setFilter('error')}
+            >Error</button>
           </div>
         </if>
+
+        <case ${isEmpty ? 'empty' : 'list'}>
+          <when value="empty">
+            <snice-empty-state
+              icon="\ud83d\udd14"
+              title="No notifications"
+              description="You'll see live notifications here as they arrive"
+            ></snice-empty-state>
+          </when>
+          <default>
+            <div class="notifications">
+              ${filtered.map(notification => html`
+                <snice-alert
+                  key=${notification.id}
+                  variant="${this.getVariant(notification.type)}"
+                  dismissible
+                  @dismiss=${() => this.removeNotification(notification.id)}
+                >
+                  <strong>${notification.title}</strong>
+                  <p>${notification.message}</p>
+                  <small>${new Date(notification.timestamp).toLocaleTimeString()}</small>
+                </snice-alert>
+              `)}
+            </div>
+          </default>
+        </case>
       </div>
     `;
   }
@@ -109,8 +158,8 @@ export class NotificationsPage extends HTMLElement {
       .header {
         display: flex;
         justify-content: space-between;
-        align-items: center;
-        margin-bottom: 2rem;
+        align-items: flex-start;
+        margin-bottom: 1.5rem;
       }
 
       h1 {
@@ -118,6 +167,39 @@ export class NotificationsPage extends HTMLElement {
         color: var(--primary-color);
       }
 
+      .count {
+        font-size: 0.8125rem;
+        color: var(--text-light);
+      }
+
+      .filters {
+        display: flex;
+        gap: 0.5rem;
+        margin-bottom: 1.5rem;
+      }
+
+      .filter-btn {
+        padding: 0.375rem 0.75rem;
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius-sm);
+        background: var(--bg-primary);
+        color: var(--text-light);
+        font-size: 0.8125rem;
+        cursor: pointer;
+        transition: all 0.15s;
+      }
+
+      .filter-btn:hover {
+        border-color: var(--primary-color);
+        color: var(--primary-color);
+      }
+
+      .filter-btn.active {
+        background: var(--primary-color);
+        border-color: var(--primary-color);
+        color: white;
+      }
+
       .notifications {
         display: flex;
         flex-direction: column;

package/bin/templates/pwa/src/pages/profile.ts

@@ -1,22 +1,23 @@
 import { page } from '../router';
-import { render, styles, html, css, context } from 'snice';
+import { render, styles, html, css, context, dispatch, observe } from 'snice';
 import type { Placard, Context } from 'snice';
 import type { Principal, User } from '../types/auth';
-import { authGuard } from '../guards/auth';
+import { isAuthenticated } from '../guards/auth';
 import { logout } from '../services/auth';
 
 const placard: Placard = {
   name: 'profile',
   title: 'Profile',
-  icon: '👤',
+  icon: '\ud83d\udc64',
   show: true,
   order: 2
 };
 
-@page({ tag: 'profile-page', routes: ['/profile'], guards: [authGuard], placard })
+@page({ tag: 'profile-page', routes: ['/profile'], guards: [isAuthenticated], placard })
 export class ProfilePage extends HTMLElement {
   user: User | null = null;
   private ctx?: Context;
+  isMobile = false;
 
   @context()
   handleContext(ctx: Context) {
@@ -25,67 +26,87 @@ export class ProfilePage extends HTMLElement {
     this.user = principal?.user || null;
   }
 
+  @observe('media:(max-width: 640px)')
+  handleMediaChange(matches: boolean) {
+    this.isMobile = matches;
+  }
+
+  @dispatch('user-logout')
   async handleLogout() {
     await logout();
 
-    // Update context to reflect logged out state
     if (this.ctx && this.ctx.application.principal) {
       const principal = this.ctx.application.principal as Principal;
       principal.user = null;
       principal.isAuthenticated = false;
     }
 
-    window.location.href = '#/login';
+    window.location.hash = '#/login';
+    return { loggedOut: true };
   }
 
   @render()
   renderContent() {
-    if (!this.user) {
-      return html`<div class="container"><snice-spinner></snice-spinner></div>`;
-    }
+    const hasUser = this.user !== null;
 
     return html`
       <div class="container">
-        <snice-card class="profile-card">
-          <div class="header">
-            <snice-avatar
-              src="${this.user.avatar}"
-              name="${this.user.name}"
-              size="large"
-            ></snice-avatar>
-            <h1>${this.user.name}</h1>
-            <p class="email">${this.user.email}</p>
-          </div>
-
-          <div class="section">
-            <h3>Account Information</h3>
-            <div class="info-grid">
-              <div class="info-item">
-                <span class="label">User ID:</span>
-                <span class="value">${this.user.id}</span>
+        <case ${hasUser ? 'loaded' : 'loading'}>
+          <when value="loading">
+            <div class="center"><snice-spinner></snice-spinner></div>
+          </when>
+          <default>
+            <snice-card class="profile-card">
+              <div class="profile-header">
+                <snice-avatar
+                  src="${this.user?.avatar || ''}"
+                  name="${this.user?.name || ''}"
+                  size="large"
+                ></snice-avatar>
+                <h1>${this.user?.name}</h1>
+                <p class="email">${this.user?.email}</p>
+                <div class="header-actions">
+                  <a href="#/settings">
+                    <snice-button variant="secondary" size="small">Edit Profile</snice-button>
+                  </a>
+                </div>
               </div>
-              <div class="info-item">
-                <span class="label">Email:</span>
-                <span class="value">${this.user.email}</span>
+
+              <snice-divider></snice-divider>
+
+              <div class="section">
+                <h3>Account Information</h3>
+                <div class="info-grid">
+                  <div class="info-item">
+                    <span class="label">User ID</span>
+                    <span class="value">${this.user?.id}</span>
+                  </div>
+                  <div class="info-item">
+                    <span class="label">Email</span>
+                    <span class="value">${this.user?.email}</span>
+                  </div>
+                  <div class="info-item">
+                    <span class="label">Name</span>
+                    <span class="value">${this.user?.name}</span>
+                  </div>
+                </div>
               </div>
-              <div class="info-item">
-                <span class="label">Name:</span>
-                <span class="value">${this.user.name}</span>
+
+              <snice-divider></snice-divider>
+
+              <div class="section">
+                <h3>Session</h3>
+                <p>You are currently logged in with JWT authentication.</p>
+                <snice-button
+                  variant="danger"
+                  @click=${this.handleLogout}
+                >
+                  Sign Out
+                </snice-button>
               </div>
-            </div>
-          </div>
-
-          <div class="section">
-            <h3>Session</h3>
-            <p>You are currently logged in with JWT authentication.</p>
-            <snice-button
-              variant="danger"
-              @click=${this.handleLogout}
-            >
-              Sign Out
-            </snice-button>
-          </div>
-        </snice-card>
+            </snice-card>
+          </default>
+        </case>
       </div>
     `;
   }
@@ -99,14 +120,19 @@ export class ProfilePage extends HTMLElement {
         margin: 0 auto;
       }
 
+      .center {
+        display: flex;
+        justify-content: center;
+        padding: 3rem;
+      }
+
       .profile-card {
         padding: 2rem;
       }
 
-      .header {
+      .profile-header {
         text-align: center;
-        padding-bottom: 2rem;
-        border-bottom: 1px solid var(--border-color);
+        padding-bottom: 1.5rem;
       }
 
       snice-avatar {
@@ -119,12 +145,20 @@ export class ProfilePage extends HTMLElement {
       }
 
       .email {
-        margin: 0;
+        margin: 0 0 1rem 0;
         color: var(--text-light);
       }
 
+      .header-actions a {
+        text-decoration: none;
+      }
+
+      snice-divider {
+        margin: 0.5rem 0;
+      }
+
       .section {
-        padding-top: 2rem;
+        padding-top: 1.5rem;
       }
 
       h3 {
@@ -135,7 +169,7 @@ export class ProfilePage extends HTMLElement {
       .info-grid {
         display: flex;
         flex-direction: column;
-        gap: 1rem;
+        gap: 0.75rem;
       }
 
       .info-item {