appclean 2.0.0 → 2.0.3

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

@@ -57,16 +57,20 @@ export class AppStore extends Store<AppStoreState> {
       const response = await fetch('/api/apps/list');
       if (!response.ok) throw new Error('Failed to load apps');
 
-      const data = await response.json();
+      const json = await response.json();
+      const data = json.data || json; // Handle wrapped { success, data } format
+
       this.setState({
-        apps: data.apps,
-        total: data.total,
-        page: data.page,
+        apps: data.apps || [],
+        total: data.total || 0,
+        page: data.page || 1,
         isLoading: false,
       });
     } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : 'Unknown error';
+      console.error('Failed to load apps:', errorMsg);
       this.setState({
-        error: (error as Error).message,
+        error: errorMsg,
         isLoading: false,
       });
     }
@@ -88,15 +92,19 @@ export class AppStore extends Store<AppStoreState> {
       const response = await fetch(`/api/apps/search?${params}`);
       if (!response.ok) throw new Error('Failed to search apps');
 
-      const data = await response.json();
+      const json = await response.json();
+      const data = json.data || json; // Handle wrapped { success, data } format
+
       this.setState({
-        apps: data.apps,
-        total: data.count,
+        apps: data.apps || [],
+        total: data.count || 0,
         isLoading: false,
       });
     } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : 'Unknown error';
+      console.error('Failed to search apps:', errorMsg);
       this.setState({
-        error: (error as Error).message,
+        error: errorMsg,
         isLoading: false,
       });
     }
@@ -145,15 +153,19 @@ export class AppStore extends Store<AppStoreState> {
       const response = await fetch(`/api/apps/search?${params}`);
       if (!response.ok) throw new Error('Failed to load more apps');
 
-      const data = await response.json();
+      const json = await response.json();
+      const data = json.data || json; // Handle wrapped { success, data } format
+
       this.setState({
-        apps: [...this.state.apps, ...data.apps],
+        apps: [...this.state.apps, ...(data.apps || [])],
         page: nextPage,
         isLoading: false,
       });
     } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : 'Unknown error';
+      console.error('Failed to load next page:', errorMsg);
       this.setState({
-        error: (error as Error).message,
+        error: errorMsg,
         isLoading: false,
       });
     }

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

@@ -44,17 +44,27 @@ export class DashboardStore extends Store<DashboardStoreState> {
     this.setState({ isLoading: true, error: null });
     try {
       const response = await fetch('/api/dashboard/stats');
-      if (!response.ok) throw new Error('Failed to load dashboard stats');
+      if (!response.ok) throw new Error(`Failed to load dashboard stats: ${response.status}`);
+
+      const data = await response.json();
+
+      // Extract stats from API response format { success: true, data: {...} }
+      const stats = data.data || data;
+
+      if (!stats) {
+        throw new Error('Invalid response format from server');
+      }
 
-      const stats = await response.json();
       this.setState({
         stats,
         isLoading: false,
         lastUpdated: Date.now(),
       });
     } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : 'Unknown error';
+      console.error('Failed to load dashboard stats:', errorMsg);
       this.setState({
-        error: (error as Error).message,
+        error: errorMsg,
         isLoading: false,
       });
     }

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

@@ -1,6 +1,11 @@
-/* Animations - Keyframes and Transition Effects */
+/* ============================================================================
+   Animations - Modern Keyframes and Transition Effects
+   ============================================================================ */
+
+/* ============================================================================
+   Fade Animations
+   ============================================================================ */
 
-/* Fade Animations */
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -19,6 +24,361 @@
   }
 }
 
+@keyframes fadeInScale {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* ============================================================================
+   Slide Animations
+   ============================================================================ */
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideRight {
+  from {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(1.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* ============================================================================
+   Zoom Animations
+   ============================================================================ */
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes zoomOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+/* ============================================================================
+   Bounce Animations
+   ============================================================================ */
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-0.5rem);
+  }
+}
+
+@keyframes bounceIn {
+  from {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+/* ============================================================================
+   Pulse Animations
+   ============================================================================ */
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes pulseShadow {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+  }
+}
+
+/* ============================================================================
+   Shake Animations
+   ============================================================================ */
+
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-2px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(2px);
+  }
+}
+
+/* ============================================================================
+   Rotate Animations
+   ============================================================================ */
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinReverse {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+/* ============================================================================
+   Loading Animations
+   ============================================================================ */
+
+@keyframes loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes skeletonLoading {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+/* ============================================================================
+   Text Animations
+   ============================================================================ */
+
+@keyframes typewriter {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes blink {
+  0%, 49%, 100% {
+    opacity: 1;
+  }
+  50%, 99% {
+    opacity: 0;
+  }
+}
+
+/* ============================================================================
+   Glow Animations
+   ============================================================================ */
+
+@keyframes glow {
+  0%, 100% {
+    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
+  }
+}
+
+/* ============================================================================
+   Float Animation
+   ============================================================================ */
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+/* ============================================================================
+   Flip Animations
+   ============================================================================ */
+
+@keyframes flipIn {
+  from {
+    opacity: 0;
+    transform: perspective(400px) rotateY(90deg);
+  }
+  to {
+    opacity: 1;
+    transform: perspective(400px) rotateY(0deg);
+  }
+}
+
+@keyframes flipOut {
+  from {
+    opacity: 1;
+    transform: perspective(400px) rotateY(0deg);
+  }
+  to {
+    opacity: 0;
+    transform: perspective(400px) rotateY(90deg);
+  }
+}
+
+/* ============================================================================
+   Wave Animation
+   ============================================================================ */
+
+@keyframes wave {
+  0%, 100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(20deg);
+  }
+  75% {
+    transform: rotate(-20deg);
+  }
+}
+
+/* ============================================================================
+   Utility Animation Classes
+   ============================================================================ */
+
+.animate-fade-in {
+  animation: fadeIn var(--transition-normal);
+}
+
+.animate-fade-out {
+  animation: fadeOut var(--transition-normal);
+}
+
+.animate-slide-up {
+  animation: slideUp var(--transition-normal);
+}
+
+.animate-slide-down {
+  animation: slideDown var(--transition-normal);
+}
+
+.animate-slide-left {
+  animation: slideLeft var(--transition-normal);
+}
+
+.animate-slide-right {
+  animation: slideRight var(--transition-normal);
+}
+
+.animate-zoom-in {
+  animation: zoomIn var(--transition-normal);
+}
+
+.animate-zoom-out {
+  animation: zoomOut var(--transition-normal);
+}
+
+.animate-bounce {
+  animation: bounce var(--transition-slow);
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.animate-shake {
+  animation: shake 0.5s ease-in-out;
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+.animate-wave {
+  animation: wave 0.5s ease-in-out;
+}
+
 .fade-in {
   animation: fadeIn var(--transition-normal) ease-out forwards;
 }
@@ -39,6 +399,28 @@
   }
 }
 
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 @keyframes slideOutDown {
   from {
     opacity: 1;