appclean 1.9.0 → 2.0.0

package/src/ui/client/pages/appSearch.ts

@@ -0,0 +1,270 @@
+/**
+ * App Search Page - Search, filter, and browse installed applications
+ */
+
+import { appStore, InstalledApp, SearchOptions } from '../state/appStore.js';
+import { uiStore } from '../state/uiStore.js';
+import { formatBytes, getMethodBadgeColor, formatInstallMethod, debounce } from '../utils/formatting.js';
+
+/**
+ * Render App Search Page
+ */
+export function renderAppSearch(): void {
+  const container = document.getElementById('page-container');
+  if (!container) return;
+
+  // Show loading state
+  container.innerHTML = `
+    <div class="loading-state" style="text-align: center; padding: 60px 20px;">
+      <div class="spinner-lg spinner"></div>
+      <p class="text-center text-muted mt-4">Loading apps...</p>
+    </div>
+  `;
+
+  // Load apps
+  appStore.loadApps().then(() => {
+    renderAppSearchContent(container);
+
+    // Subscribe to store updates
+    appStore.subscribe((state) => {
+      if (!state.isLoading) {
+        renderAppSearchContent(container);
+      }
+    });
+  });
+}
+
+/**
+ * Render app search page content
+ */
+function renderAppSearchContent(container: HTMLElement): void {
+  const state = appStore.getState();
+
+  container.innerHTML = `
+    <div class="app-search-page">
+      <!-- Header -->
+      <div class="page-header mb-8">
+        <h1 class="text-3xl font-bold">📦 Applications</h1>
+        <p class="text-secondary mt-2">Search and manage installed apps</p>
+      </div>
+
+      <!-- Search and Filters -->
+      <div class="card mb-6">
+        <div class="card-body">
+          <!-- Search Input -->
+          <div class="form-group">
+            <input
+              type="text"
+              id="search-input"
+              class="form-input"
+              placeholder="Search apps by name..."
+              value="${escapeHtml(state.searchOptions.query)}"
+              autocomplete="off"
+            >
+          </div>
+
+          <!-- Filters Row -->
+          <div class="flex flex-wrap gap-2 items-center">
+            <span class="text-sm font-medium text-muted">Method:</span>
+            ${renderMethodFilter(state.searchOptions.installMethod || '')}
+
+            <span class="text-sm font-medium text-muted ml-4">Sort:</span>
+            ${renderSortFilter(state.searchOptions.sortBy || 'name')}
+          </div>
+
+          <!-- Results Count -->
+          <p class="text-sm text-muted mt-4">
+            ${state.isLoading ? 'Loading...' : `${state.total} app${state.total !== 1 ? 's' : ''} found`}
+          </p>
+        </div>
+      </div>
+
+      <!-- Apps Grid -->
+      <div class="apps-grid">
+        ${
+          state.apps.length > 0
+            ? `
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            ${state.apps.map((app) => renderAppCard(app)).join('')}
+          </div>
+        `
+            : `
+          <div class="card">
+            <div class="card-body text-center py-12">
+              <p class="text-2xl mb-2">🔍</p>
+              <p class="text-lg font-medium">No apps found</p>
+              <p class="text-muted mt-2">
+                ${state.searchOptions.query ? 'Try a different search query' : 'No applications detected'}
+              </p>
+            </div>
+          </div>
+        `
+        }
+      </div>
+
+      <!-- Load More Button -->
+      ${
+        state.apps.length < state.total
+          ? `
+        <div class="text-center mt-8">
+          <button class="btn btn-secondary" id="load-more-btn">
+            Load More (${state.apps.length} of ${state.total})
+          </button>
+        </div>
+      `
+          : ''
+      }
+    </div>
+  `;
+
+  // Setup event listeners
+  setupSearchListeners();
+  setupLoadMoreListener();
+
+  // Scroll to top
+  window.scrollTo(0, 0);
+}
+
+/**
+ * Render app card
+ */
+function renderAppCard(app: InstalledApp): string {
+  return `
+    <div class="card app-card hover-lift cursor-pointer" onclick="window.location.hash = '#/apps/${encodeURIComponent(app.name)}'">
+      <div class="card-body">
+        <div class="flex-between mb-2">
+          <h3 class="text-lg font-bold">${escapeHtml(app.name)}</h3>
+          <span class="badge ${getMethodBadgeColor(app.installMethod)}">
+            ${formatInstallMethod(app.installMethod)}
+          </span>
+        </div>
+
+        <p class="text-sm text-muted mb-3">
+          ${app.version ? `v${escapeHtml(app.version)}` : 'Version unknown'}
+        </p>
+
+        <div class="flex-between pt-3 border-t border-color">
+          <span class="text-sm text-muted">
+            ${app.size ? formatBytes(app.size) : 'Size unknown'}
+          </span>
+          <button
+            class="btn btn-sm btn-ghost-primary"
+            onclick="
+              event.stopPropagation();
+              window.location.hash = '#/apps/${encodeURIComponent(app.name)}';
+            "
+          >
+            Details →
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Render method filter buttons
+ */
+function renderMethodFilter(selected: string): string {
+  const methods = ['', 'npm', 'yarn', 'pnpm', 'brew', 'apt', 'yum', 'dnf', 'custom'];
+  const labels: Record<string, string> = {
+    '': 'All',
+    'npm': 'npm',
+    'yarn': 'Yarn',
+    'pnpm': 'pnpm',
+    'brew': 'Homebrew',
+    'apt': 'apt',
+    'yum': 'yum',
+    'dnf': 'dnf',
+    'custom': 'Custom',
+  };
+
+  return methods
+    .map(
+      (method) => `
+    <button
+      class="btn btn-sm ${method === selected ? 'btn-primary' : 'btn-ghost'} method-filter"
+      data-method="${method}"
+    >
+      ${labels[method]}
+    </button>
+  `
+    )
+    .join('');
+}
+
+/**
+ * Render sort filter dropdown
+ */
+function renderSortFilter(selected: string): string {
+  return `
+    <select id="sort-select" class="form-input" style="width: auto;">
+      <option value="name" ${selected === 'name' ? 'selected' : ''}>Name (A-Z)</option>
+      <option value="size" ${selected === 'size' ? 'selected' : ''}>Size (Largest)</option>
+      <option value="date" ${selected === 'date' ? 'selected' : ''}>Date (Newest)</option>
+    </select>
+  `;
+}
+
+/**
+ * Setup search input listener with debounce
+ */
+function setupSearchListeners(): void {
+  const searchInput = document.getElementById('search-input') as HTMLInputElement;
+  const methodButtons = document.querySelectorAll('.method-filter');
+  const sortSelect = document.getElementById('sort-select') as HTMLSelectElement;
+
+  // Debounced search
+  const debouncedSearch = debounce((query: string) => {
+    appStore.setSearchQuery(query);
+  }, 300);
+
+  if (searchInput) {
+    searchInput.addEventListener('input', (e) => {
+      const query = (e.target as HTMLInputElement).value;
+      debouncedSearch(query);
+    });
+  }
+
+  // Method filter buttons
+  methodButtons.forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const method = btn.getAttribute('data-method');
+      appStore.setInstallMethodFilter(method || undefined);
+    });
+  });
+
+  // Sort dropdown
+  if (sortSelect) {
+    sortSelect.addEventListener('change', (e) => {
+      const sort = (e.target as HTMLSelectElement).value as any;
+      appStore.setSortBy(sort);
+    });
+  }
+}
+
+/**
+ * Setup load more button
+ */
+function setupLoadMoreListener(): void {
+  const loadMoreBtn = document.getElementById('load-more-btn');
+  if (loadMoreBtn) {
+    loadMoreBtn.addEventListener('click', () => {
+      appStore.loadNextPage();
+    });
+  }
+}
+
+/**
+ * Escape HTML
+ */
+function escapeHtml(text: string): string {
+  const map: Record<string, string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;',
+  };
+  return text.replace(/[&<>"']/g, (m) => map[m]);
+}

package/src/ui/client/pages/dashboard.ts

@@ -0,0 +1,189 @@
+/**
+ * Dashboard Page - Overview of system health and app statistics
+ */
+
+import { dashboardStore, DashboardStats } from '../state/dashboardStore.js';
+import { uiStore } from '../state/uiStore.js';
+import { formatBytes, formatPercent, formatRelativeTime } from '../utils/formatting.js';
+
+/**
+ * Render Dashboard Page
+ */
+export function renderDashboard(): void {
+  const container = document.getElementById('page-container');
+  if (!container) return;
+
+  // Show loading state
+  container.innerHTML = `
+    <div class="loading-state" style="text-align: center; padding: 60px 20px;">
+      <div class="spinner-lg spinner"></div>
+      <p class="text-center text-muted mt-4">Loading dashboard...</p>
+    </div>
+  `;
+
+  // Load stats
+  dashboardStore.refreshStats(true).then(() => {
+    const state = dashboardStore.getState();
+    const stats = state.stats;
+
+    if (!stats) {
+      container.innerHTML = `
+        <div class="alert alert-danger">
+          <span>Failed to load dashboard stats</span>
+        </div>
+      `;
+      return;
+    }
+
+    renderDashboardContent(container, stats);
+
+    // Subscribe to updates
+    dashboardStore.subscribe((newState) => {
+      if (newState.stats) {
+        renderDashboardContent(container, newState.stats);
+      }
+    });
+  });
+}
+
+/**
+ * Render dashboard content
+ */
+function renderDashboardContent(container: HTMLElement, stats: DashboardStats): void {
+  container.innerHTML = `
+    <div class="dashboard-page">
+      <!-- Header -->
+      <div class="page-header mb-8">
+        <h1 class="text-3xl font-bold">📊 Dashboard</h1>
+        <p class="text-secondary mt-2">System overview and app management</p>
+      </div>
+
+      <!-- Stats Grid -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+        ${renderStatCard('📦 Installed Apps', stats.totalApps.toString(), 'Total applications detected')}
+        ${renderStatCard('💾 Total Space Used', formatBytes(stats.totalSpaceUsed), 'Size of all app files')}
+        ${renderStatCard('🗑️ Removed (Session)', stats.sessionAppsRemoved.toString(), 'Apps removed this session')}
+        ${renderStatCard('📉 Space Freed', formatBytes(stats.sessionSpaceFreed), 'Total space recovered')}
+      </div>
+
+      <!-- System Health -->
+      <div class="card mb-8">
+        <div class="card-header">
+          <h2 class="text-xl font-bold">💻 System Health</h2>
+        </div>
+        <div class="card-body">
+          <div class="health-gauge mb-4">
+            <div class="flex-between mb-2">
+              <span class="text-sm font-medium">Disk Usage</span>
+              <span class="text-sm font-bold">${formatPercent(stats.diskUsagePercent)}</span>
+            </div>
+            <div class="progress-bar" style="height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden;">
+              <div style="
+                height: 100%;
+                width: ${stats.diskUsagePercent}%;
+                background: ${getDiskUsageColor(stats.diskUsagePercent)};
+                transition: width 0.3s ease;
+              "></div>
+            </div>
+          </div>
+          <p class="text-sm text-muted">
+            ${stats.diskUsagePercent < 80
+              ? '✓ Disk usage is healthy'
+              : stats.diskUsagePercent < 90
+              ? '⚠️ Disk usage is getting high'
+              : '❌ Disk usage is critical'}
+          </p>
+        </div>
+      </div>
+
+      <!-- Recent Activity -->
+      <div class="card">
+        <div class="card-header">
+          <h2 class="text-xl font-bold">📜 Recent Activity</h2>
+        </div>
+        <div class="card-body">
+          ${
+            stats.recentlyRemoved.length > 0
+              ? `
+            <div class="activity-list">
+              ${stats.recentlyRemoved
+                .slice(0, 10)
+                .map(
+                  (removal) => `
+                <div class="activity-item flex-between p-3 border-b border-color last:border-0" style="padding: 12px 0;">
+                  <div class="activity-info">
+                    <p class="text-sm font-medium">${escapeHtml(removal.appName)}</p>
+                    <p class="text-xs text-muted">Removed ${formatRelativeTime(removal.timestamp)}</p>
+                  </div>
+                  <div class="activity-stats text-right">
+                    <p class="text-sm font-bold text-success">${formatBytes(removal.freedSpace)}</p>
+                    <p class="text-xs text-muted">${removal.filesRemoved} files</p>
+                  </div>
+                </div>
+              `
+                )
+                .join('')}
+            </div>
+          `
+              : `
+            <p class="text-muted text-center py-8">
+              No apps removed yet. Start by searching for apps to remove.
+            </p>
+          `
+          }
+        </div>
+      </div>
+
+      <!-- Quick Actions -->
+      <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-4">
+        <button class="btn btn-primary btn-lg w-full" onclick="window.location.hash = '#/apps'">
+          <span>🔍 Find & Remove Apps</span>
+        </button>
+        <button class="btn btn-secondary btn-lg w-full" onclick="window.location.hash = '#/settings'">
+          <span>⚙️ Settings</span>
+        </button>
+      </div>
+    </div>
+  `;
+
+  // Scroll to top
+  window.scrollTo(0, 0);
+}
+
+/**
+ * Render stat card
+ */
+function renderStatCard(label: string, value: string, description: string): string {
+  return `
+    <div class="card">
+      <div class="card-body">
+        <p class="text-muted text-sm mb-2">${escapeHtml(label)}</p>
+        <p class="text-2xl font-bold text-primary mb-1">${escapeHtml(value)}</p>
+        <p class="text-xs text-muted">${escapeHtml(description)}</p>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Get disk usage color
+ */
+function getDiskUsageColor(percent: number): string {
+  if (percent < 50) return '#10b981'; // Green
+  if (percent < 80) return '#f59e0b'; // Amber
+  return '#ef4444'; // Red
+}
+
+/**
+ * Escape HTML to prevent XSS
+ */
+function escapeHtml(text: string): string {
+  const map: Record<string, string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;',
+  };
+  return text.replace(/[&<>"']/g, (m) => map[m]);
+}