snice 4.9.0 → 4.11.0

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

@@ -1,20 +1,24 @@
 import { page } from '../router';
-import { render, styles, html, css, context } from 'snice';
+import { render, styles, html, css, context, observe, ready, dispose } from 'snice';
 import type { Placard, Context } from 'snice';
 import type { Principal } from '../types/auth';
-import { authGuard } from '../guards/auth';
+import { isAuthenticated } from '../guards/auth';
+import { getNotificationsDaemon } from '../daemons/notifications';
 
 const placard: Placard = {
   name: 'dashboard',
   title: 'Dashboard',
-  icon: '📊',
+  icon: '\ud83d\udcca',
   show: true,
   order: 1
 };
 
-@page({ tag: 'dashboard-page', routes: ['/', '/dashboard'], guards: [authGuard], placard })
+@page({ tag: 'dashboard-page', routes: ['/', '/dashboard'], guards: [isAuthenticated], placard })
 export class DashboardPage extends HTMLElement {
   userName = '';
+  notificationCount = 0;
+  isCompact = false;
+  private unsubscribe: (() => void) | null = null;
 
   @context()
   handleContext(ctx: Context) {
@@ -22,29 +26,72 @@ export class DashboardPage extends HTMLElement {
     this.userName = principal?.user?.name || 'User';
   }
 
+  @ready()
+  initialize() {
+    const daemon = getNotificationsDaemon();
+    this.unsubscribe = daemon.subscribe(() => {
+      this.notificationCount++;
+    });
+  }
+
+  @dispose()
+  cleanup() {
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = null;
+    }
+  }
+
+  @observe('media:(max-width: 768px)')
+  handleMediaChange(matches: boolean) {
+    this.isCompact = matches;
+  }
+
   @render()
   renderContent() {
     return html`
       <div class="container">
-        <h1>Welcome, ${this.userName}!</h1>
-        <p class="subtitle">This is your dashboard</p>
+        <div class="welcome">
+          <h1>Welcome, ${this.userName}!</h1>
+          <p class="subtitle">This is your dashboard</p>
+        </div>
+
+        <div class="stats">
+          <snice-card class="stat-card">
+            <span class="stat-value">4</span>
+            <span class="stat-label">Active Pages</span>
+          </snice-card>
+          <snice-card class="stat-card">
+            <span class="stat-value">${this.notificationCount}</span>
+            <span class="stat-label">Notifications</span>
+          </snice-card>
+          <snice-card class="stat-card">
+            <span class="stat-value">3</span>
+            <span class="stat-label">Middleware</span>
+          </snice-card>
+        </div>
 
         <div class="grid">
           <snice-card>
-            <h3>⚡ Features</h3>
+            <h3>Features</h3>
             <ul>
               <li>JWT Authentication</li>
-              <li>Protected Routes</li>
+              <li>Protected Routes with Guards</li>
               <li>Middleware Pattern</li>
-              <li>Service Worker</li>
+              <li>Service Worker (PWA)</li>
               <li>Live Notifications</li>
+              <li>Controllers + Request/Response</li>
+              <li>Theme Switching</li>
+              <li>Debounced Search</li>
             </ul>
           </snice-card>
 
           <snice-card>
-            <h3>🛠️ Architecture</h3>
+            <h3>Architecture</h3>
             <ul>
-              <li><strong>Utils:</strong> Pure functions</li>
+              <li><strong>Pages:</strong> Route orchestrators</li>
+              <li><strong>Components:</strong> Reusable UI</li>
+              <li><strong>Controllers:</strong> Behavior modules</li>
               <li><strong>Services:</strong> Business logic</li>
               <li><strong>Middleware:</strong> Fetch interceptors</li>
               <li><strong>Daemons:</strong> Lifecycle classes</li>
@@ -53,22 +100,28 @@ export class DashboardPage extends HTMLElement {
           </snice-card>
 
           <snice-card>
-            <h3>📦 What's Included</h3>
+            <h3>Decorators Used</h3>
             <ul>
-              <li>TypeScript configuration</li>
-              <li>Vite + SWC setup</li>
-              <li>PWA manifest</li>
-              <li>Mock authentication</li>
-              <li>WebSocket daemon example</li>
+              <li><code>@page</code> - Route pages</li>
+              <li><code>@element</code> - Custom elements</li>
+              <li><code>@controller</code> - Behavior modules</li>
+              <li><code>@context</code> - Global state</li>
+              <li><code>@observe</code> - DOM observers</li>
+              <li><code>@watch</code> - Property watchers</li>
+              <li><code>@on</code> / <code>@dispatch</code> - Events</li>
+              <li><code>@request</code> / <code>@respond</code> - Communication</li>
             </ul>
           </snice-card>
 
           <snice-card>
-            <h3>🚀 Get Started</h3>
+            <h3>Explore</h3>
             <p>Check out the other pages:</p>
             <div class="links">
-              <a href="#/profile">
-                <snice-button variant="secondary">View Profile</snice-button>
+              <a href="#/data">
+                <snice-button variant="secondary">Browse Data</snice-button>
+              </a>
+              <a href="#/settings">
+                <snice-button variant="secondary">Settings</snice-button>
               </a>
               <a href="#/notifications">
                 <snice-button variant="secondary">Notifications</snice-button>
@@ -89,6 +142,10 @@ export class DashboardPage extends HTMLElement {
         margin: 0 auto;
       }
 
+      .welcome {
+        margin-bottom: 2rem;
+      }
+
       h1 {
         color: var(--primary-color);
         margin: 0 0 0.5rem 0;
@@ -96,12 +153,38 @@ export class DashboardPage extends HTMLElement {
 
       .subtitle {
         color: var(--text-light);
-        margin: 0 0 2rem 0;
+        margin: 0;
+      }
+
+      .stats {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1rem;
+        margin-bottom: 2rem;
+      }
+
+      .stat-card {
+        padding: 1.25rem;
+        text-align: center;
+      }
+
+      .stat-value {
+        display: block;
+        font-size: 2rem;
+        font-weight: 700;
+        color: var(--primary-color);
+      }
+
+      .stat-label {
+        display: block;
+        font-size: 0.8125rem;
+        color: var(--text-light);
+        margin-top: 0.25rem;
       }
 
       .grid {
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 1.5rem;
       }
 
@@ -124,6 +207,18 @@ export class DashboardPage extends HTMLElement {
         color: var(--text-color);
       }
 
+      code {
+        background: var(--bg-secondary);
+        padding: 0.125rem 0.375rem;
+        border-radius: var(--radius-sm);
+        font-size: 0.8125rem;
+      }
+
+      p {
+        color: var(--text-light);
+        margin: 0 0 0.5rem 0;
+      }
+
       .links {
         display: flex;
         flex-direction: column;
@@ -135,9 +230,15 @@ export class DashboardPage extends HTMLElement {
         text-decoration: none;
       }
 
-      snice-button {
+      .links snice-button {
         width: 100%;
       }
+
+      @media (max-width: 640px) {
+        .stats {
+          grid-template-columns: 1fr;
+        }
+      }
     `;
   }
 }

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

@@ -0,0 +1,329 @@
+import { page } from '../router';
+import { render, styles, context, observe, property, html, css } from 'snice';
+import type { Placard, Context } from 'snice';
+import { isAuthenticated } from '../guards/auth';
+
+interface DataItem {
+  id: string;
+  title: string;
+  description: string;
+  status: 'active' | 'pending' | 'archived';
+  createdAt: string;
+}
+
+const placard: Placard = {
+  name: 'data',
+  title: 'Data',
+  icon: '\ud83d\udcca',
+  show: true,
+  order: 5
+};
+
+// Mock data
+const MOCK_ITEMS: DataItem[] = [
+  { id: '1', title: 'API Integration', description: 'Connect external payment gateway', status: 'active', createdAt: '2025-01-15' },
+  { id: '2', title: 'User Analytics', description: 'Implement tracking dashboard', status: 'pending', createdAt: '2025-01-20' },
+  { id: '3', title: 'Email Templates', description: 'Design transactional email set', status: 'active', createdAt: '2025-02-01' },
+  { id: '4', title: 'Legacy Migration', description: 'Migrate v1 database schema', status: 'archived', createdAt: '2024-12-10' },
+  { id: '5', title: 'Mobile App', description: 'React Native companion app', status: 'pending', createdAt: '2025-02-15' },
+  { id: '6', title: 'CI/CD Pipeline', description: 'GitHub Actions deployment workflow', status: 'active', createdAt: '2025-01-05' },
+  { id: '7', title: 'Documentation', description: 'API reference and developer guides', status: 'active', createdAt: '2025-02-10' },
+  { id: '8', title: 'Performance Audit', description: 'Lighthouse and Core Web Vitals', status: 'archived', createdAt: '2024-11-20' },
+];
+
+@page({ tag: 'data-page', routes: ['/data'], guards: [isAuthenticated], placard })
+export class DataPage extends HTMLElement {
+  private ctx?: Context;
+  allItems: DataItem[] = [];
+  filteredItems: DataItem[] = [];
+  searchQuery = '';
+  statusFilter: 'all' | 'active' | 'pending' | 'archived' = 'all';
+  @property({ type: Boolean }) loading = true;
+
+  @context()
+  handleContext(ctx: Context) {
+    this.ctx = ctx;
+  }
+
+  @observe('resize')
+  handleResize(entries: ResizeObserverEntry[]) {
+    const width = entries[0].contentRect.width;
+    const table = this.shadowRoot?.querySelector('.data-table');
+    if (table) {
+      table.classList.toggle('compact', width < 600);
+    }
+  }
+
+  connectedCallback() {
+    // Simulate loading data
+    setTimeout(() => {
+      this.allItems = [...MOCK_ITEMS];
+      this.filteredItems = this.allItems;
+      this.loading = false;
+    }, 500);
+  }
+
+  handleSearch(e: CustomEvent) {
+    this.searchQuery = e.detail.query || '';
+    this.applyFilters();
+  }
+
+  setStatusFilter(status: 'all' | 'active' | 'pending' | 'archived') {
+    this.statusFilter = status;
+    this.applyFilters();
+  }
+
+  private applyFilters() {
+    let items = this.allItems;
+
+    if (this.statusFilter !== 'all') {
+      items = items.filter(i => i.status === this.statusFilter);
+    }
+
+    if (this.searchQuery) {
+      const q = this.searchQuery.toLowerCase();
+      items = items.filter(i =>
+        i.title.toLowerCase().includes(q) ||
+        i.description.toLowerCase().includes(q)
+      );
+    }
+
+    this.filteredItems = items;
+  }
+
+  getStatusColor(status: string): string {
+    const colors: Record<string, string> = {
+      active: 'var(--success-color)',
+      pending: 'var(--warning-color)',
+      archived: 'var(--text-light)'
+    };
+    return colors[status] || 'var(--text-light)';
+  }
+
+  @render()
+  renderContent() {
+    return html`
+      <div class="container">
+        <div class="header">
+          <h1>Data</h1>
+          <span class="count">${this.filteredItems.length} items</span>
+        </div>
+
+        <div class="toolbar">
+          <search-bar
+            placeholder="Search items..."
+            @search=${this.handleSearch}
+          ></search-bar>
+
+          <div class="filters">
+            <button
+              class="filter-btn ${this.statusFilter === 'all' ? 'active' : ''}"
+              @click=${() => this.setStatusFilter('all')}
+            >All</button>
+            <button
+              class="filter-btn ${this.statusFilter === 'active' ? 'active' : ''}"
+              @click=${() => this.setStatusFilter('active')}
+            >Active</button>
+            <button
+              class="filter-btn ${this.statusFilter === 'pending' ? 'active' : ''}"
+              @click=${() => this.setStatusFilter('pending')}
+            >Pending</button>
+            <button
+              class="filter-btn ${this.statusFilter === 'archived' ? 'active' : ''}"
+              @click=${() => this.setStatusFilter('archived')}
+            >Archived</button>
+          </div>
+        </div>
+
+        <case ${this.loading ? 'loading' : this.filteredItems.length === 0 ? 'empty' : 'data'}>
+          <when value="loading">
+            <div class="center">
+              <snice-spinner></snice-spinner>
+            </div>
+          </when>
+          <when value="empty">
+            <snice-empty-state
+              icon="\ud83d\udd0d"
+              title="No results"
+              description="Try adjusting your search or filters"
+            ></snice-empty-state>
+          </when>
+          <default>
+            <div class="data-table">
+              <div class="table-header">
+                <span class="col-title">Title</span>
+                <span class="col-status">Status</span>
+                <span class="col-date">Created</span>
+              </div>
+              ${this.filteredItems.map(item => html`
+                <div class="table-row" key=${item.id}>
+                  <div class="col-title">
+                    <strong>${item.title}</strong>
+                    <span class="description">${item.description}</span>
+                  </div>
+                  <div class="col-status">
+                    <span class="status-dot" style="background: ${this.getStatusColor(item.status)}"></span>
+                    ${item.status}
+                  </div>
+                  <div class="col-date">${item.createdAt}</div>
+                </div>
+              `)}
+            </div>
+          </default>
+        </case>
+      </div>
+    `;
+  }
+
+  @styles()
+  componentStyles() {
+    return css`
+      .container {
+        padding: 2rem;
+        max-width: 1000px;
+        margin: 0 auto;
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        margin-bottom: 1.5rem;
+      }
+
+      h1 {
+        margin: 0;
+        color: var(--primary-color);
+      }
+
+      .count {
+        font-size: 0.875rem;
+        color: var(--text-light);
+      }
+
+      .toolbar {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+      }
+
+      search-bar {
+        width: 100%;
+      }
+
+      .filters {
+        display: flex;
+        gap: 0.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;
+      }
+
+      .center {
+        display: flex;
+        justify-content: center;
+        padding: 3rem;
+      }
+
+      .data-table {
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius-md);
+        overflow: hidden;
+      }
+
+      .table-header {
+        display: grid;
+        grid-template-columns: 1fr 120px 100px;
+        padding: 0.75rem 1rem;
+        background: var(--bg-secondary);
+        font-size: 0.75rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--text-light);
+      }
+
+      .table-row {
+        display: grid;
+        grid-template-columns: 1fr 120px 100px;
+        padding: 1rem;
+        border-top: 1px solid var(--border-color);
+        align-items: center;
+        transition: background 0.15s;
+      }
+
+      .table-row:hover {
+        background: var(--bg-secondary);
+      }
+
+      .col-title strong {
+        display: block;
+        color: var(--text-color);
+        font-size: 0.9375rem;
+      }
+
+      .description {
+        display: block;
+        font-size: 0.8125rem;
+        color: var(--text-light);
+        margin-top: 0.125rem;
+      }
+
+      .col-status {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        font-size: 0.8125rem;
+        color: var(--text-color);
+        text-transform: capitalize;
+      }
+
+      .status-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      .col-date {
+        font-size: 0.8125rem;
+        color: var(--text-light);
+      }
+
+      .data-table.compact .table-header {
+        display: none;
+      }
+
+      .data-table.compact .table-row {
+        grid-template-columns: 1fr;
+        gap: 0.5rem;
+      }
+
+      @media (max-width: 640px) {
+        .filters {
+          flex-wrap: wrap;
+        }
+      }
+    `;
+  }
+}