appclean 1.8.0 → 2.0.0

package/src/managers/npmManager.ts

@@ -1,9 +1,9 @@
 import { execSync } from 'child_process';
 import path from 'path';
-import { getHomeDir } from '../utils/platform';
-import { pathExists, listDirectory, readFile } from '../utils/filesystem';
+import { getHomeDir } from '../utils/platform.js';
+import { pathExists, listDirectory, readFile } from '../utils/filesystem.js';
 import { InstalledApp, ArtifactPath } from '../types';
-import { Logger } from '../utils/logger';
+import { Logger } from '../utils/logger.js';
 
 export class NpmManager {
   private globalNpmPath: string;

package/src/ui/client/api/client.ts

@@ -0,0 +1,163 @@
+/**
+ * API Client - Wrapper for HTTP requests to AppClean server
+ */
+
+export interface ApiResponse<T> {
+  success: boolean;
+  data?: T;
+  error?: string;
+  message?: string;
+}
+
+export class ApiClient {
+  private baseUrl = '';
+  private timeout = 30000; // 30 seconds
+
+  /**
+   * Make a GET request
+   */
+  async get<T = any>(endpoint: string, options?: RequestInit): Promise<T> {
+    return this.request<T>(endpoint, { ...options, method: 'GET' });
+  }
+
+  /**
+   * Make a POST request
+   */
+  async post<T = any>(
+    endpoint: string,
+    body?: any,
+    options?: RequestInit
+  ): Promise<T> {
+    return this.request<T>(endpoint, {
+      ...options,
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+      body: body ? JSON.stringify(body) : undefined,
+    });
+  }
+
+  /**
+   * Make a PUT request
+   */
+  async put<T = any>(
+    endpoint: string,
+    body?: any,
+    options?: RequestInit
+  ): Promise<T> {
+    return this.request<T>(endpoint, {
+      ...options,
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers,
+      },
+      body: body ? JSON.stringify(body) : undefined,
+    });
+  }
+
+  /**
+   * Make a DELETE request
+   */
+  async delete<T = any>(endpoint: string, options?: RequestInit): Promise<T> {
+    return this.request<T>(endpoint, { ...options, method: 'DELETE' });
+  }
+
+  /**
+   * Generic request method
+   */
+  private async request<T = any>(
+    endpoint: string,
+    options: RequestInit = {}
+  ): Promise<T> {
+    const url = `${this.baseUrl}${endpoint}`;
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), this.timeout);
+
+    try {
+      const response = await fetch(url, {
+        ...options,
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!response.ok) {
+        const errorData = await this.parseErrorResponse(response);
+        throw new ApiError(
+          errorData.message || `HTTP ${response.status}`,
+          response.status,
+          errorData
+        );
+      }
+
+      return await this.parseResponse<T>(response);
+    } catch (error) {
+      clearTimeout(timeoutId);
+
+      if (error instanceof ApiError) {
+        throw error;
+      }
+
+      if (error instanceof Error) {
+        if (error.name === 'AbortError') {
+          throw new ApiError('Request timeout', 408);
+        }
+        throw new ApiError(error.message, 0);
+      }
+
+      throw new ApiError('Unknown error occurred', 0);
+    }
+  }
+
+  /**
+   * Parse successful response
+   */
+  private async parseResponse<T>(response: Response): Promise<T> {
+    const contentType = response.headers.get('content-type');
+
+    if (contentType?.includes('application/json')) {
+      return response.json();
+    }
+
+    if (contentType?.includes('text/')) {
+      return (await response.text()) as any;
+    }
+
+    return undefined as any;
+  }
+
+  /**
+   * Parse error response
+   */
+  private async parseErrorResponse(response: Response): Promise<any> {
+    try {
+      const contentType = response.headers.get('content-type');
+      if (contentType?.includes('application/json')) {
+        return await response.json();
+      }
+      return { message: response.statusText };
+    } catch {
+      return { message: 'Unknown error' };
+    }
+  }
+}
+
+/**
+ * Custom API Error class
+ */
+export class ApiError extends Error {
+  constructor(
+    message: string,
+    public status: number,
+    public data?: any
+  ) {
+    super(message);
+    this.name = 'ApiError';
+  }
+}
+
+// Export singleton instance
+export const apiClient = new ApiClient();

package/src/ui/client/app.ts

@@ -0,0 +1,121 @@
+/**
+ * AppClean GUI - Main SPA Controller
+ * Initializes router, stores, and pages
+ */
+
+import { router } from './utils/router.js';
+import { appStore } from './state/appStore.js';
+import { dashboardStore } from './state/dashboardStore.js';
+import { uiStore } from './state/uiStore.js';
+
+// Import page modules
+import { renderDashboard } from './pages/dashboard.js';
+import { renderAppSearch } from './pages/appSearch.js';
+import { renderAppDetails } from './pages/appDetails.js';
+import { renderSettings } from './pages/settings.js';
+
+/**
+ * Initialize the SPA
+ */
+export function initApp(): void {
+  console.log('🧹 AppClean GUI v1.0.0 initializing...');
+
+  // Register routes
+  registerRoutes();
+
+  // Initialize stores
+  initializeStores();
+
+  // Setup UI listeners
+  setupUIListeners();
+
+  // Navigate to initial route
+  router.navigate('');
+
+  console.log('✓ AppClean GUI ready');
+}
+
+/**
+ * Register all routes
+ */
+function registerRoutes(): void {
+  router.register('', () => {
+    uiStore.navigateTo('dashboard');
+    renderDashboard();
+  }, 'AppClean - Dashboard');
+
+  router.register('apps', () => {
+    uiStore.navigateTo('apps');
+    renderAppSearch();
+  }, 'AppClean - Apps');
+
+  router.register('apps/:appName', (params) => {
+    uiStore.navigateTo('app-details');
+    renderAppDetails(params.appName);
+  }, 'AppClean - App Details');
+
+  router.register('settings', () => {
+    uiStore.navigateTo('settings');
+    renderSettings();
+  }, 'AppClean - Settings');
+}
+
+/**
+ * Initialize stores with data
+ */
+async function initializeStores(): Promise<void> {
+  try {
+    // Load dashboard stats
+    await dashboardStore.loadStats();
+
+    // Load initial app list
+    await appStore.loadApps();
+  } catch (error) {
+    console.error('Failed to initialize stores:', error);
+    uiStore.showError('Failed to load application data');
+  }
+}
+
+/**
+ * Setup UI event listeners
+ */
+function setupUIListeners(): void {
+  // Subscribe to UI store changes
+  uiStore.subscribe((state) => {
+    console.log('UI State changed:', state.currentView);
+  });
+
+  // Subscribe to app store changes
+  appStore.subscribe((state) => {
+    console.log(`Apps loaded: ${state.apps.length}`);
+  });
+
+  // Subscribe to dashboard store changes
+  dashboardStore.subscribe((state) => {
+    if (state.stats) {
+      console.log(`Dashboard stats: ${state.stats.totalApps} apps, ${state.stats.totalSpaceUsed} bytes`);
+    }
+  });
+
+  // Handle route changes
+  router.onchange((route) => {
+    console.log('Navigated to:', route.path);
+  });
+
+  // Theme toggle listener
+  document.addEventListener('theme-toggle', () => {
+    uiStore.toggleTheme();
+  });
+}
+
+/**
+ * Export for consumption in HTML
+ */
+export { appStore, dashboardStore, uiStore, router };
+
+// Initialize on DOM ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initApp);
+} else {
+  initApp();
+}

package/src/ui/client/index.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="AppClean - Intelligently remove applications and all their hidden files">
+  <meta name="theme-color" content="#3b82f6">
+  <title>AppClean - Application Remover</title>
+
+  <!-- Styles -->
+  <link rel="stylesheet" href="/static/styles/variables.css">
+  <link rel="stylesheet" href="/static/styles/base.css">
+  <link rel="stylesheet" href="/static/styles/layout.css">
+  <link rel="stylesheet" href="/static/styles/components.css">
+  <link rel="stylesheet" href="/static/styles/animations.css">
+</head>
+<body>
+  <!-- Root container for SPA -->
+  <div id="app" class="app-root">
+    <!-- Navbar -->
+    <nav class="navbar" id="navbar">
+      <div class="container-xl">
+        <div class="flex-between">
+          <div class="flex items-center gap-4">
+            <h1 class="navbar-brand" id="navbar-brand">🧹 AppClean</h1>
+            <button class="btn btn-ghost navbar-menu-toggle" id="navbar-menu-toggle" aria-label="Toggle navigation">
+              <span class="hamburger">☰</span>
+            </button>
+          </div>
+          <div class="flex items-center gap-2">
+            <button class="btn btn-ghost btn-sm" id="theme-toggle" aria-label="Toggle dark mode">
+              <span class="theme-icon">🌙</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Main layout -->
+    <div class="app-layout flex">
+      <!-- Sidebar -->
+      <aside class="sidebar" id="sidebar">
+        <div class="sidebar-nav">
+          <nav class="nav-links">
+            <a href="#/" class="nav-link active" data-view="dashboard">
+              <span class="nav-icon">📊</span>
+              <span class="nav-label">Dashboard</span>
+            </a>
+            <a href="#/apps" class="nav-link" data-view="apps">
+              <span class="nav-icon">📦</span>
+              <span class="nav-label">Apps</span>
+            </a>
+            <a href="#/settings" class="nav-link" data-view="settings">
+              <span class="nav-icon">⚙️</span>
+              <span class="nav-label">Settings</span>
+            </a>
+          </nav>
+        </div>
+        <div class="sidebar-footer">
+          <a href="https://github.com/praveenkay/AppClean" target="_blank" rel="noopener" class="sidebar-link">
+            <span class="nav-icon">💬</span>
+            <span class="nav-label">GitHub</span>
+          </a>
+        </div>
+      </aside>
+
+      <!-- Main content -->
+      <main class="main-content" id="main-content">
+        <div class="container-xl">
+          <!-- Pages will be rendered here -->
+          <div id="page-container" class="page-container">
+            <!-- Loading skeleton -->
+            <div class="loading-state" id="loading-state">
+              <div class="spinner-lg spinner"></div>
+              <p class="text-center text-muted mt-4">Loading AppClean...</p>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+
+    <!-- Modals -->
+    <div class="modal-backdrop" id="modal-backdrop">
+      <div class="modal" id="modal" role="dialog" aria-labelledby="modal-title">
+        <div class="modal-header">
+          <h2 class="modal-title" id="modal-title">Dialog</h2>
+          <button class="modal-close" id="modal-close" aria-label="Close dialog">&times;</button>
+        </div>
+        <div class="modal-body" id="modal-body">
+          <!-- Content will be rendered here -->
+        </div>
+        <div class="modal-footer" id="modal-footer">
+          <!-- Buttons will be rendered here -->
+        </div>
+      </div>
+    </div>
+
+    <!-- Notifications -->
+    <div class="notifications-container" id="notifications-container" role="region" aria-label="Notifications" aria-live="polite">
+      <!-- Notifications will be rendered here -->
+    </div>
+  </div>
+
+  <!-- Scripts -->
+  <script type="module" src="/static/app.js"></script>
+</body>
+</html>