appclean 1.8.0 → 2.0.0

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]);
+}

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

@@ -0,0 +1,342 @@
+/**
+ * Settings Page - Version management, theme, and uninstall
+ */
+
+import { apiClient } from '../api/client.js';
+import { uiStore } from '../state/uiStore.js';
+
+export interface VersionInfo {
+  current: string;
+  latest: string;
+  isUpdateAvailable: boolean;
+}
+
+/**
+ * Render Settings Page
+ */
+export function renderSettings(): 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 settings...</p>
+    </div>
+  `;
+
+  // Load version info
+  loadVersionInfo().then((versionInfo) => {
+    renderSettingsContent(container, versionInfo);
+  });
+}
+
+/**
+ * Load version information
+ */
+async function loadVersionInfo(): Promise<VersionInfo> {
+  try {
+    return await apiClient.get<VersionInfo>('/api/version');
+  } catch (error) {
+    return {
+      current: 'unknown',
+      latest: 'unknown',
+      isUpdateAvailable: false,
+    };
+  }
+}
+
+/**
+ * Render settings content
+ */
+function renderSettingsContent(container: HTMLElement, versionInfo: VersionInfo): void {
+  const currentTheme = uiStore.getState().theme;
+
+  container.innerHTML = `
+    <div class="settings-page">
+      <!-- Header -->
+      <div class="page-header mb-8">
+        <h1 class="text-3xl font-bold">⚙️ Settings</h1>
+        <p class="text-secondary mt-2">Configure AppClean</p>
+      </div>
+
+      <!-- Version & Updates Section -->
+      <div class="card mb-6">
+        <div class="card-header">
+          <h2 class="text-xl font-bold">📦 Version & Updates</h2>
+        </div>
+        <div class="card-body">
+          <div class="version-info p-4 bg-secondary rounded mb-4">
+            <div class="flex-between mb-3">
+              <span class="text-sm font-medium">Current Version</span>
+              <span class="text-lg font-bold text-primary">v${escapeHtml(versionInfo.current)}</span>
+            </div>
+            <div class="flex-between">
+              <span class="text-sm font-medium">Latest Version</span>
+              <span class="text-lg font-bold ${versionInfo.isUpdateAvailable ? 'text-warning' : 'text-success'}">
+                v${escapeHtml(versionInfo.latest)}
+              </span>
+            </div>
+          </div>
+
+          ${
+            versionInfo.isUpdateAvailable
+              ? `
+            <div class="alert alert-warning mb-4">
+              <span>A new version of AppClean is available!</span>
+            </div>
+            <div class="flex gap-2">
+              <button class="btn btn-primary flex-1" id="upgrade-btn">
+                🚀 Upgrade Now
+              </button>
+              <button class="btn btn-secondary flex-1" id="check-update-btn">
+                🔄 Check Again
+              </button>
+            </div>
+          `
+              : `
+            <div class="alert alert-success mb-4">
+              <span>✓ You're running the latest version!</span>
+            </div>
+            <button class="btn btn-secondary w-full" id="check-update-btn">
+              🔄 Check for Updates
+            </button>
+          `
+          }
+        </div>
+      </div>
+
+      <!-- Theme Section -->
+      <div class="card mb-6">
+        <div class="card-header">
+          <h2 class="text-xl font-bold">🎨 Appearance</h2>
+        </div>
+        <div class="card-body">
+          <div class="flex-between items-center p-3 border border-color rounded mb-4">
+            <div>
+              <p class="font-medium">Dark Mode</p>
+              <p class="text-sm text-muted">Switch between light and dark themes</p>
+            </div>
+            <button
+              class="btn btn-sm ${currentTheme === 'dark' ? 'btn-primary' : 'btn-secondary'}"
+              id="theme-toggle-btn"
+            >
+              ${currentTheme === 'dark' ? '🌙 Dark' : '☀️ Light'}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- About Section -->
+      <div class="card mb-6">
+        <div class="card-header">
+          <h2 class="text-xl font-bold">ℹ️ About</h2>
+        </div>
+        <div class="card-body">
+          <div class="space-y-4">
+            <div>
+              <p class="text-sm font-medium mb-2">AppClean</p>
+              <p class="text-sm text-muted">
+                Intelligently find and safely remove applications with all their artifacts.
+              </p>
+            </div>
+
+            <div>
+              <p class="text-sm font-medium mb-2">Links</p>
+              <div class="flex gap-2">
+                <a
+                  href="https://github.com/praveenkay/AppClean"
+                  target="_blank"
+                  rel="noopener"
+                  class="btn btn-sm btn-ghost"
+                >
+                  💻 GitHub
+                </a>
+                <a
+                  href="https://github.com/praveenkay/AppClean/issues"
+                  target="_blank"
+                  rel="noopener"
+                  class="btn btn-sm btn-ghost"
+                >
+                  🐛 Report Issue
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Danger Zone -->
+      <div class="card" style="border-color: var(--color-danger);">
+        <div class="card-header" style="background: var(--color-danger-light);">
+          <h2 class="text-xl font-bold text-danger">⚠️ Danger Zone</h2>
+        </div>
+        <div class="card-body">
+          <p class="text-sm text-muted mb-4">
+            Uninstall AppClean from your system. This action cannot be undone.
+          </p>
+          <button class="btn btn-danger w-full" id="uninstall-btn">
+            🗑️ Uninstall AppClean
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+
+  // Setup event listeners
+  setupSettingsListeners();
+
+  // Scroll to top
+  window.scrollTo(0, 0);
+}
+
+/**
+ * Setup event listeners
+ */
+function setupSettingsListeners(): void {
+  const upgradeBtn = document.getElementById('upgrade-btn');
+  const checkUpdateBtn = document.getElementById('check-update-btn');
+  const themeToggleBtn = document.getElementById('theme-toggle-btn');
+  const uninstallBtn = document.getElementById('uninstall-btn');
+
+  // Upgrade button
+  if (upgradeBtn) {
+    upgradeBtn.addEventListener('click', async () => {
+      (upgradeBtn as HTMLButtonElement).disabled = true;
+      upgradeBtn.textContent = '⏳ Upgrading...';
+
+      try {
+        const result = await apiClient.post('/api/upgrade', {});
+
+        if (result.success) {
+          uiStore.showSuccess(result.message);
+          setTimeout(() => {
+            window.location.reload();
+          }, 2000);
+        } else {
+          uiStore.showError(result.message);
+          (upgradeBtn as HTMLButtonElement).disabled = false;
+          upgradeBtn.textContent = '🚀 Upgrade Now';
+        }
+      } catch (error) {
+        uiStore.showError(`Upgrade failed: ${(error as Error).message}`);
+        (upgradeBtn as HTMLButtonElement).disabled = false;
+        upgradeBtn.textContent = '🚀 Upgrade Now';
+      }
+    });
+  }
+
+  // Check update button
+  if (checkUpdateBtn) {
+    checkUpdateBtn.addEventListener('click', async () => {
+      (checkUpdateBtn as HTMLButtonElement).disabled = true;
+      checkUpdateBtn.textContent = '⏳ Checking...';
+
+      try {
+        const versionInfo = await apiClient.get<VersionInfo>('/api/version');
+
+        if (versionInfo.isUpdateAvailable) {
+          uiStore.showWarning(
+            `Update available: v${versionInfo.latest} (current: v${versionInfo.current})`
+          );
+        } else {
+          uiStore.showSuccess('You are running the latest version!');
+        }
+
+        // Refresh page to update UI
+        setTimeout(() => {
+          window.location.reload();
+        }, 1500);
+      } catch (error) {
+        uiStore.showError(`Failed to check updates: ${(error as Error).message}`);
+        (checkUpdateBtn as HTMLButtonElement).disabled = false;
+        checkUpdateBtn.textContent = '🔄 Check Again';
+      }
+    });
+  }
+
+  // Theme toggle button
+  if (themeToggleBtn) {
+    themeToggleBtn.addEventListener('click', () => {
+      uiStore.toggleTheme();
+
+      // Update button appearance
+      const newTheme = uiStore.getState().theme;
+      themeToggleBtn.className = `btn btn-sm ${newTheme === 'dark' ? 'btn-primary' : 'btn-secondary'}`;
+      themeToggleBtn.textContent = newTheme === 'dark' ? '🌙 Dark' : '☀️ Light';
+    });
+  }
+
+  // Uninstall button
+  if (uninstallBtn) {
+    uninstallBtn.addEventListener('click', () => {
+      const confirmed = confirm(
+        'Are you sure you want to uninstall AppClean?\n\nThis action cannot be undone.'
+      );
+
+      if (!confirmed) return;
+
+      const doubleConfirmed = confirm(
+        'This will permanently remove AppClean from your system.\n\nType "YES" in the next dialog to confirm.'
+      );
+
+      if (!doubleConfirmed) return;
+
+      uninstall();
+    });
+  }
+}
+
+/**
+ * Execute uninstall
+ */
+async function uninstall(): Promise<void> {
+  const uninstallBtn = document.getElementById('uninstall-btn');
+  if (uninstallBtn) {
+    (uninstallBtn as HTMLButtonElement).disabled = true;
+    uninstallBtn.textContent = '⏳ Uninstalling...';
+  }
+
+  uiStore.setProcessing(true);
+
+  try {
+    const result = await apiClient.post('/api/uninstall', {});
+
+    if (result.success) {
+      uiStore.showSuccess(result.message);
+      setTimeout(() => {
+        // Redirect or close window
+        window.close();
+      }, 2000);
+    } else {
+      uiStore.showError(result.message);
+      if (uninstallBtn) {
+        (uninstallBtn as HTMLButtonElement).disabled = false;
+        uninstallBtn.textContent = '🗑️ Uninstall AppClean';
+      }
+    }
+  } catch (error) {
+    uiStore.showError(`Uninstall failed: ${(error as Error).message}`);
+    if (uninstallBtn) {
+      (uninstallBtn as HTMLButtonElement).disabled = false;
+      uninstallBtn.textContent = '🗑️ Uninstall AppClean';
+    }
+  } finally {
+    uiStore.setProcessing(false);
+  }
+}
+
+/**
+ * Escape HTML
+ */
+function escapeHtml(text: string): string {
+  const map: Record<string, string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;',
+  };
+  return String(text).replace(/[&<>"']/g, (m) => map[m]);
+}

package/src/ui/client/state/appStore.ts

@@ -0,0 +1,169 @@
+/**
+ * AppStore - Manages installed applications list and search/filter state
+ */
+
+import { Store } from '../utils/events.js';
+
+export interface InstalledApp {
+  name: string;
+  version: string;
+  installMethod: string;
+  mainPath: string;
+  installedDate?: string;
+  size?: number;
+}
+
+export interface SearchOptions {
+  query: string;
+  installMethod?: string;
+  sortBy?: 'name' | 'size' | 'date';
+}
+
+export interface AppStoreState {
+  apps: InstalledApp[];
+  searchOptions: SearchOptions;
+  selectedApp: InstalledApp | null;
+  isLoading: boolean;
+  error: string | null;
+  total: number;
+  page: number;
+  pageSize: number;
+}
+
+const INITIAL_STATE: AppStoreState = {
+  apps: [],
+  searchOptions: {
+    query: '',
+    installMethod: undefined,
+    sortBy: 'name',
+  },
+  selectedApp: null,
+  isLoading: false,
+  error: null,
+  total: 0,
+  page: 1,
+  pageSize: 50,
+};
+
+export class AppStore extends Store<AppStoreState> {
+  constructor() {
+    super(INITIAL_STATE);
+  }
+
+  // Load all apps
+  async loadApps(): Promise<void> {
+    this.setState({ isLoading: true, error: null });
+    try {
+      const response = await fetch('/api/apps/list');
+      if (!response.ok) throw new Error('Failed to load apps');
+
+      const data = await response.json();
+      this.setState({
+        apps: data.apps,
+        total: data.total,
+        page: data.page,
+        isLoading: false,
+      });
+    } catch (error) {
+      this.setState({
+        error: (error as Error).message,
+        isLoading: false,
+      });
+    }
+  }
+
+  // Search apps
+  async searchApps(options: Partial<SearchOptions>): Promise<void> {
+    const searchOptions = { ...this.state.searchOptions, ...options };
+    this.setState({ searchOptions, isLoading: true, error: null, page: 1 });
+
+    try {
+      const params = new URLSearchParams();
+      if (searchOptions.query) params.append('q', searchOptions.query);
+      if (searchOptions.installMethod) params.append('method', searchOptions.installMethod);
+      if (searchOptions.sortBy) params.append('sort', searchOptions.sortBy);
+      params.append('limit', String(this.state.pageSize));
+      params.append('offset', '0');
+
+      const response = await fetch(`/api/apps/search?${params}`);
+      if (!response.ok) throw new Error('Failed to search apps');
+
+      const data = await response.json();
+      this.setState({
+        apps: data.apps,
+        total: data.count,
+        isLoading: false,
+      });
+    } catch (error) {
+      this.setState({
+        error: (error as Error).message,
+        isLoading: false,
+      });
+    }
+  }
+
+  // Set search query
+  setSearchQuery(query: string): void {
+    this.searchApps({ query });
+  }
+
+  // Set install method filter
+  setInstallMethodFilter(method?: string): void {
+    this.searchApps({ installMethod: method });
+  }
+
+  // Set sort option
+  setSortBy(sortBy: 'name' | 'size' | 'date'): void {
+    this.searchApps({ sortBy });
+  }
+
+  // Select an app
+  selectApp(app: InstalledApp): void {
+    this.setState({ selectedApp: app });
+  }
+
+  // Clear selection
+  clearSelection(): void {
+    this.setState({ selectedApp: null });
+  }
+
+  // Load next page
+  async loadNextPage(): Promise<void> {
+    const nextPage = this.state.page + 1;
+    const offset = (nextPage - 1) * this.state.pageSize;
+
+    this.setState({ isLoading: true });
+    try {
+      const params = new URLSearchParams();
+      if (this.state.searchOptions.query) params.append('q', this.state.searchOptions.query);
+      if (this.state.searchOptions.installMethod) {
+        params.append('method', this.state.searchOptions.installMethod);
+      }
+      params.append('limit', String(this.state.pageSize));
+      params.append('offset', String(offset));
+
+      const response = await fetch(`/api/apps/search?${params}`);
+      if (!response.ok) throw new Error('Failed to load more apps');
+
+      const data = await response.json();
+      this.setState({
+        apps: [...this.state.apps, ...data.apps],
+        page: nextPage,
+        isLoading: false,
+      });
+    } catch (error) {
+      this.setState({
+        error: (error as Error).message,
+        isLoading: false,
+      });
+    }
+  }
+
+  // Clear error
+  clearError(): void {
+    this.setState({ error: null });
+  }
+}
+
+// Export singleton instance
+export const appStore = new AppStore();