appclean 1.9.0 → 2.0.0

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

@@ -0,0 +1,166 @@
+/**
+ * UIStore - Manages UI state: active view, modals, notifications, theme
+ */
+
+import { Store } from '../utils/events.js';
+
+export type ViewType = 'dashboard' | 'apps' | 'app-details' | 'settings';
+export type NotificationType = 'success' | 'error' | 'warning' | 'info';
+export type ThemeType = 'light' | 'dark';
+
+export interface Notification {
+  id: string;
+  type: NotificationType;
+  message: string;
+  duration?: number; // ms, 0 = persistent
+}
+
+export interface UIStoreState {
+  currentView: ViewType;
+  theme: ThemeType;
+  sidebarVisible: boolean;
+  isModalOpen: boolean;
+  modalType: string | null;
+  modalData: any;
+  notifications: Notification[];
+  isProcessing: boolean;
+}
+
+const INITIAL_STATE: UIStoreState = {
+  currentView: 'dashboard',
+  theme: (localStorage.getItem('theme') as ThemeType) || 'light',
+  sidebarVisible: true,
+  isModalOpen: false,
+  modalType: null,
+  modalData: null,
+  notifications: [],
+  isProcessing: false,
+};
+
+export class UIStore extends Store<UIStoreState> {
+  private notificationTimers: Map<string, number> = new Map();
+
+  constructor() {
+    super(INITIAL_STATE);
+    this.applyTheme(this.state.theme);
+  }
+
+  // Navigation
+  navigateTo(view: ViewType): void {
+    this.setState({ currentView: view });
+    window.location.hash = `#/${view === 'dashboard' ? '' : view}`;
+  }
+
+  // Sidebar
+  toggleSidebar(): void {
+    this.setState({ sidebarVisible: !this.state.sidebarVisible });
+  }
+
+  showSidebar(): void {
+    this.setState({ sidebarVisible: true });
+  }
+
+  hideSidebar(): void {
+    this.setState({ sidebarVisible: false });
+  }
+
+  // Modals
+  openModal(type: string, data?: any): void {
+    this.setState({
+      isModalOpen: true,
+      modalType: type,
+      modalData: data,
+    });
+  }
+
+  closeModal(): void {
+    this.setState({
+      isModalOpen: false,
+      modalType: null,
+      modalData: null,
+    });
+  }
+
+  // Theme
+  setTheme(theme: ThemeType): void {
+    this.setState({ theme });
+    this.applyTheme(theme);
+    localStorage.setItem('theme', theme);
+  }
+
+  toggleTheme(): void {
+    const newTheme = this.state.theme === 'light' ? 'dark' : 'light';
+    this.setTheme(newTheme);
+  }
+
+  private applyTheme(theme: ThemeType): void {
+    const root = document.documentElement;
+    if (theme === 'dark') {
+      document.body.classList.add('dark-mode');
+    } else {
+      document.body.classList.remove('dark-mode');
+    }
+  }
+
+  // Notifications
+  addNotification(notification: Omit<Notification, 'id'>): string {
+    const id = `notif-${Date.now()}-${Math.random()}`;
+    const fullNotification: Notification = { ...notification, id };
+
+    this.setState({
+      notifications: [...this.state.notifications, fullNotification],
+    });
+
+    if (notification.duration && notification.duration > 0) {
+      const timer = window.setTimeout(() => {
+        this.removeNotification(id);
+      }, notification.duration);
+      this.notificationTimers.set(id, timer);
+    }
+
+    return id;
+  }
+
+  removeNotification(id: string): void {
+    const timer = this.notificationTimers.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      this.notificationTimers.delete(id);
+    }
+
+    this.setState({
+      notifications: this.state.notifications.filter((n) => n.id !== id),
+    });
+  }
+
+  // Shortcuts
+  showSuccess(message: string, duration = 4000): void {
+    this.addNotification({ type: 'success', message, duration });
+  }
+
+  showError(message: string, duration = 5000): void {
+    this.addNotification({ type: 'error', message, duration });
+  }
+
+  showWarning(message: string, duration = 4000): void {
+    this.addNotification({ type: 'warning', message, duration });
+  }
+
+  showInfo(message: string, duration = 3000): void {
+    this.addNotification({ type: 'info', message, duration });
+  }
+
+  // Processing state
+  setProcessing(isProcessing: boolean): void {
+    this.setState({ isProcessing });
+  }
+
+  clearNotifications(): void {
+    this.notificationTimers.forEach((timer) => clearTimeout(timer));
+    this.notificationTimers.clear();
+    this.setState({ notifications: [] });
+  }
+}
+
+// Export singleton instance
+export const uiStore = new UIStore();

package/src/ui/client/styles/animations.css

@@ -0,0 +1,327 @@
+/* Animations - Keyframes and Transition Effects */
+
+/* Fade Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.fade-in {
+  animation: fadeIn var(--transition-normal) ease-out forwards;
+}
+
+.fade-out {
+  animation: fadeOut var(--transition-normal) ease-out forwards;
+}
+
+/* Slide Animations */
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOutDown {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+}
+
+@keyframes slideInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.slide-in-up {
+  animation: slideInUp var(--transition-normal) ease-out forwards;
+}
+
+.slide-in-down {
+  animation: slideInDown var(--transition-normal) ease-out forwards;
+}
+
+.slide-in-left {
+  animation: slideInLeft var(--transition-normal) ease-out forwards;
+}
+
+.slide-in-right {
+  animation: slideInRight var(--transition-normal) ease-out forwards;
+}
+
+/* Spin Animation */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spin {
+  animation: spin 1s linear infinite;
+}
+
+/* Pulse Animation */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Scale Animation */
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes scaleOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+.scale-in {
+  animation: scaleIn var(--transition-normal) ease-out forwards;
+}
+
+.scale-out {
+  animation: scaleOut var(--transition-normal) ease-out forwards;
+}
+
+/* Bounce Animation */
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.bounce {
+  animation: bounce 1s ease-in-out infinite;
+}
+
+/* Wiggle Animation */
+@keyframes wiggle {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(-2px);
+  }
+  75% {
+    transform: translateX(2px);
+  }
+}
+
+.wiggle {
+  animation: wiggle 0.5s ease-in-out;
+}
+
+/* Skeleton Loading */
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--bg-secondary) 0%,
+    var(--bg-hover) 50%,
+    var(--bg-secondary) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 2s infinite;
+  border-radius: var(--radius-md);
+}
+
+/* Page Transitions */
+.page-enter {
+  animation: slideInUp var(--transition-normal) ease-out;
+}
+
+.page-exit {
+  animation: slideOutDown var(--transition-normal) ease-out;
+}
+
+/* Loading Spinner Variants */
+.spinner {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 3px solid var(--bg-secondary);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.spinner-sm {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+
+.spinner-lg {
+  width: 32px;
+  height: 32px;
+  border-width: 4px;
+}
+
+.spinner-white {
+  border-color: rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+}
+
+/* Transition Utilities */
+.transition-all {
+  transition: all var(--transition-normal);
+}
+
+.transition-colors {
+  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
+}
+
+.transition-transform {
+  transition: transform var(--transition-fast);
+}
+
+.transition-opacity {
+  transition: opacity var(--transition-fast);
+}
+
+/* Hover Effects */
+.hover-lift:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow-lg);
+}
+
+.hover-scale:hover {
+  transform: scale(1.05);
+}
+
+.hover-glow:hover {
+  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
+}
+
+/* Focus Visible */
+:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+button:focus-visible {
+  outline-offset: -2px;
+}
+
+/* Disabled State */
+[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Active State */
+.active {
+  opacity: 1;
+}
+
+/* Error Shake */
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-4px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(4px);
+  }
+}
+
+.shake {
+  animation: shake 0.5s ease-in-out;
+}
+
+/* Smooth Transitions for Theme Toggle */
+body {
+  transition: background-color var(--transition-normal), color var(--transition-normal);
+}
+
+* {
+  transition: background-color var(--transition-normal), border-color var(--transition-normal);
+}

package/src/ui/client/styles/base.css

@@ -0,0 +1,214 @@
+/* Base Styles - Typography, Reset, Global Styles */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-family);
+  font-size: var(--font-base);
+  line-height: var(--lh-normal);
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  transition: background-color var(--transition-normal), color var(--transition-normal);
+  overflow-x: hidden;
+}
+
+/* Typography */
+h1 {
+  font-size: var(--font-3xl);
+  font-weight: var(--fw-bold);
+  line-height: var(--lh-tight);
+  margin-bottom: var(--space-4);
+  letter-spacing: -0.5px;
+}
+
+h2 {
+  font-size: var(--font-2xl);
+  font-weight: var(--fw-bold);
+  line-height: var(--lh-tight);
+  margin-bottom: var(--space-3);
+  letter-spacing: -0.3px;
+}
+
+h3 {
+  font-size: var(--font-xl);
+  font-weight: var(--fw-semibold);
+  line-height: var(--lh-normal);
+  margin-bottom: var(--space-2);
+}
+
+h4 {
+  font-size: var(--font-lg);
+  font-weight: var(--fw-semibold);
+  line-height: var(--lh-normal);
+  margin-bottom: var(--space-2);
+}
+
+h5 {
+  font-size: var(--font-base);
+  font-weight: var(--fw-semibold);
+  line-height: var(--lh-normal);
+  margin-bottom: var(--space-1);
+}
+
+h6 {
+  font-size: var(--font-sm);
+  font-weight: var(--fw-semibold);
+  line-height: var(--lh-normal);
+  margin-bottom: var(--space-1);
+}
+
+p {
+  margin-bottom: var(--space-4);
+  color: var(--text-secondary);
+  line-height: var(--lh-relaxed);
+}
+
+p:last-child {
+  margin-bottom: 0;
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color var(--transition-fast);
+}
+
+a:hover {
+  color: var(--color-primary-hover);
+  text-decoration: underline;
+}
+
+code {
+  font-family: var(--font-family-mono);
+  font-size: 0.9em;
+  background-color: var(--bg-secondary);
+  border-radius: var(--radius-sm);
+  padding: var(--space-1) var(--space-2);
+  color: var(--color-danger);
+}
+
+pre {
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  overflow-x: auto;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-sm);
+  line-height: var(--lh-normal);
+  margin-bottom: var(--space-4);
+}
+
+pre code {
+  background-color: transparent;
+  border-radius: 0;
+  padding: 0;
+  color: var(--text-primary);
+}
+
+/* Lists */
+ul,
+ol {
+  margin-bottom: var(--space-4);
+  margin-left: var(--space-6);
+}
+
+li {
+  margin-bottom: var(--space-2);
+}
+
+/* Tables */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: var(--space-4);
+}
+
+thead {
+  background-color: var(--bg-secondary);
+  border-bottom: 2px solid var(--border-color);
+}
+
+th {
+  padding: var(--space-3) var(--space-4);
+  text-align: left;
+  font-weight: var(--fw-semibold);
+  color: var(--text-primary);
+}
+
+td {
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-secondary);
+}
+
+tbody tr:hover {
+  background-color: var(--bg-secondary);
+}
+
+/* Forms */
+input,
+textarea,
+select {
+  font-family: var(--font-family);
+  font-size: var(--font-base);
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+input:disabled,
+textarea:disabled,
+select:disabled {
+  background-color: var(--bg-secondary);
+  color: var(--text-muted);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+label {
+  display: block;
+  margin-bottom: var(--space-2);
+  font-weight: var(--fw-medium);
+  color: var(--text-primary);
+  font-size: var(--font-sm);
+}
+
+/* Utilities */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.no-scroll {
+  overflow: hidden;
+}