feat(app-store): enhance UI with search, pagination, and installed filter

- Add search functionality with real-time filtering by name, description, and author
- Implement pagination system with 6 apps per page and navigation controls
- Add category dropdown filter for app categories
- Create detailed app modal with comprehensive information and permissions
- Add "Installed Only" filter switch to show only installed apps
- Enhance app cards with hover animations and better visual design
- Improve loading states with animated spinner
- Add empty state handling with clear filters functionality
- Fix app uninstall to properly close running instances
- Fix taskbar maximize functionality for minimized apps

Author: dailker

orbit.schema.json

@@ -0,0 +1,65 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "OrbitOS App Manifest",
+  "type": "object",
+  "required": ["id", "name", "version", "permissions", "main"],
+  "properties": {
+    "id": {
+      "type": "string",
+      "pattern": "^[a-z0-9-]+$",
+      "description": "Unique app identifier (lowercase, numbers, hyphens only)"
+    },
+    "name": {
+      "type": "string",
+      "maxLength": 50,
+      "description": "Display name of the app"
+    },
+    "version": {
+      "type": "string",
+      "pattern": "^\\d+\\.\\d+\\.\\d+$",
+      "description": "Semantic version (e.g., 1.0.0)"
+    },
+    "description": {
+      "type": "string",
+      "maxLength": 200,
+      "description": "Brief description of the app"
+    },
+    "author": {
+      "type": "string",
+      "maxLength": 100,
+      "description": "App author name"
+    },
+    "icon": {
+      "type": "string",
+      "description": "App icon (emoji or base64 data URL)"
+    },
+    "main": {
+      "type": "string",
+      "description": "Entry point file (e.g., App.jsx)"
+    },
+    "permissions": {
+      "type": "array",
+      "items": {
+        "type": "string",
+        "enum": ["ui", "storage", "network", "files"]
+      },
+      "description": "Required permissions"
+    },
+    "size": {
+      "type": "integer",
+      "maximum": 1048576,
+      "description": "App size in bytes (max 1MB)"
+    },
+    "category": {
+      "type": "string",
+      "enum": [
+        "productivity",
+        "utility",
+        "entertainment",
+        "development",
+        "system"
+      ],
+      "description": "App category"
+    }
+  }
+}

package.json

@@ -4,6 +4,7 @@
   "description": "A Web OS-style project for group collaboration",
   "scripts": {
     "dev": "next dev",
+    "dev:test-unapproved": "ORBIT_DEV_MODE=true next dev",
     "build": "next build",
     "start": "next start",
     "dev:all": "npm test && npm run dev",
@@ -26,12 +27,13 @@
     "helmet": "^8.1.0",
     "idb": "^8.0.3",
     "jsonwebtoken": "^9.0.2",
+    "lucide-react": "^0.545.0",
     "mongoose": "^8.18.2",
     "multer": "2.0.2",
     "next": "^14.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-quill": "^2.0.0"
+    "react-quill": "^0.0.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",

src/components/Desktop.js

@@ -1,6 +1,6 @@
 // src/components/Desktop.js
 
-import { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useApp } from '@/context/AppContext';
 import { useTheme } from '@/context/ThemeContext';
 import { useSettings } from '@/context/SettingsContext';
@@ -24,6 +24,7 @@ import SettingsApp from '@/pages/apps/settings';
 import MonitorApp from '@/pages/apps/monitor';
 import FilemanagerApp from '@/pages/apps/filemanager';
 import Calculator from '@/pages/apps/calculator';
+import AppStoreApp from '@/pages/apps/appstore';
 import TabManager from './TabManager';
 
 const appComponents = {
@@ -33,9 +34,68 @@ const appComponents = {
   monitor: MonitorApp,
   filemanager: FilemanagerApp,
   calculator: Calculator,
+  appstore: AppStoreApp,
   'tab-manager': TabManager,
 };
 
+// Dynamic app component for installed apps
+const DynamicApp = ({ appId }) => {
+  const [AppComponent, setAppComponent] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const loadApp = async () => {
+      try {
+        // Get app code from GitHub
+        const response = await fetch(
+          `https://raw.githubusercontent.com/codehubbers/OrbitOSPackages/main/${appId}/App.jsx`,
+        );
+        const appCode = await response.text();
+
+        // Create sandboxed component
+        const componentFactory = new Function(
+          'React',
+          `
+          ${appCode}
+          return App;
+        `,
+        );
+
+        const Component = componentFactory(React);
+        setAppComponent(() => Component);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadApp();
+  }, [appId]);
+
+  if (loading)
+    return React.createElement(
+      'div',
+      { style: { padding: '20px' } },
+      'Loading app...',
+    );
+  if (error)
+    return React.createElement(
+      'div',
+      { style: { padding: '20px', color: 'red' } },
+      `Error: ${error}`,
+    );
+  if (!AppComponent)
+    return React.createElement(
+      'div',
+      { style: { padding: '20px' } },
+      'App not found',
+    );
+
+  return React.createElement(AppComponent);
+};
+
 export default function Desktop() {
   const { state } = useApp();
   const { theme } = useTheme();
@@ -135,6 +195,15 @@ export default function Desktop() {
     const services = createAppServices(app);
     const AppComponent = appComponents[app.component];
 
+    // Handle dynamic installed apps
+    if (!AppComponent && app.component) {
+      return (
+        <Window key={app.id} app={app}>
+          <DynamicApp appId={app.component} />
+        </Window>
+      );
+    }
+
     if (!AppComponent)
       return (
         <div key={app.id}>App component not found for: {app.component}</div>

src/components/Taskbar.js

@@ -116,17 +116,17 @@ const StartButtonAndMenu = ({ apps, onAppClick, theme }) => {
 const OpenAppsTray = ({ openApps, activeApp, onAppClick, theme, dispatch }) => (
   <div className="flex items-center space-x-1">
     {openApps.map((app) => {
-      const isActive = activeApp === app.id && !app.isMinimized; // ✅ Use isMinimized
-      const isMinimized = app.isMinimized; // ✅ Use isMinimized
+      const isActive = activeApp === app.id && !app.isMinimized;
+      const isMinimized = app.isMinimized;
       return (
         <motion.button
           key={app.id}
           onClick={() => {
             if (app.isMinimized) {
-              // ✅ Add restore logic
               dispatch({ type: 'RESTORE_APP', payload: { appId: app.id } });
+            } else {
+              onAppClick(app.id);
             }
-            onAppClick(app.id);
           }}
           className={`w-12 h-12 flex items-center justify-center ${theme.glass} rounded-xl shadow-lg hover:bg-white/20 transition-all ${isMinimized ? 'opacity-60' : ''}`}
           whileHover={{ scale: 1.2, y: -5 }}
@@ -139,7 +139,7 @@ const OpenAppsTray = ({ openApps, activeApp, onAppClick, theme, dispatch }) => (
               isActive
                 ? 'bg-white'
                 : isMinimized
-                  ? 'bg-yellow-400' // ✅ Use yellow for minimize indicator
+                  ? 'bg-yellow-400'
                   : 'bg-gray-400'
             }`}
           />
@@ -438,7 +438,7 @@ export default function Taskbar({ onAvatarEdit }) {
           activeApp={state.activeApp}
           onAppClick={toggleApp}
           theme={theme}
-          dispatch={dispatch} // ✅ Add dispatch prop for restore functionality
+          dispatch={dispatch}
         />
       </div>
       <div className="flex items-center space-x-4">

src/components/Window.js

@@ -29,7 +29,10 @@ export default function Window({ app, children }) {
     x: 100 + Math.random() * 200,
     y: 100 + Math.random() * 100,
   };
-  const initialSize = { width: 600, height: 400 };
+  const initialSize = {
+    width: 600,
+    height: app.id === 'settings' ? 350 : 400,
+  };
 
   const {
     size,
@@ -178,12 +181,11 @@ export default function Window({ app, children }) {
             />
 
             {/* Window Content */}
-            <div className="flex-1 overflow-hidden">
-              <div
-                className={`p-4 h-full overflow-auto ${theme.window.content}`}
-              >
-                {children}
-              </div>
+            <div
+              className={`flex-1 ${theme.window.content} ${theme.window.scrollbar}`}
+              style={{ height: 'calc(100% - 40px)', overflow: 'hidden' }}
+            >
+              {children}
             </div>
 
             {/* Resize Handles */}

src/context/AppContext.js

@@ -74,15 +74,16 @@ function appReducer(state, action) {
           state.activeApp === action.payload.appId ? null : state.activeApp,
       };
 
-    case 'RESTORE_APP': // ✅ Add missing action
+    case 'RESTORE_APP':
       return {
         ...state,
         openApps: state.openApps.map((app) =>
           app.id === action.payload.appId
-            ? { ...app, isMinimized: false }
+            ? { ...app, isMinimized: false, zIndex: state.nextZIndex }
             : app,
         ),
         activeApp: action.payload.appId,
+        nextZIndex: state.nextZIndex + 1,
       };
 
     case 'TOGGLE_APP':
@@ -263,6 +264,9 @@ function appReducer(state, action) {
         ...state,
         theme: action.payload,
       };
+    case 'INSTALL_APP':
+      // Add installed app to registry (runtime installation)
+      return state;
     default:
       return state;
   }

src/models/User.js

@@ -8,61 +8,71 @@ const userSchema = new mongoose.Schema({
     unique: true,
     trim: true,
     minlength: 3,
-    maxlength: 30
+    maxlength: 30,
   },
   email: {
     type: String,
     required: true,
     unique: true,
     lowercase: true,
-    trim: true
+    trim: true,
   },
   passwordHash: {
     type: String,
     required: true,
-    minlength: 6
+    minlength: 6,
   },
   displayName: {
     type: String,
     trim: true,
-    maxlength: 50
+    maxlength: 50,
   },
   avatar: {
     type: String,
-    default: null
+    default: null,
   },
-  roles: [{
-    type: String,
-    enum: ['user', 'admin'],
-    default: 'user'
-  }],
+  roles: [
+    {
+      type: String,
+      enum: ['user', 'admin'],
+      default: 'user',
+    },
+  ],
   preferences: {
     theme: { type: String, default: 'light' },
     wallpaper: { type: String, default: '/backgrounds/orbitos-default.jpg' },
-    notifications: { type: Boolean, default: true }
+    notifications: { type: Boolean, default: true },
   },
+  installedApps: [
+    {
+      appId: { type: String, required: true },
+      manifest: { type: Object, required: true },
+      downloadUrl: { type: String, required: true },
+      installedAt: { type: Date, default: Date.now },
+    },
+  ],
   createdAt: {
     type: Date,
-    default: Date.now
+    default: Date.now,
   },
   lastLogin: {
     type: Date,
-    default: Date.now
+    default: Date.now,
   },
   isActive: {
     type: Boolean,
-    default: true
-  }
+    default: true,
+  },
 });
 
-userSchema.pre('save', async function(next) {
+userSchema.pre('save', async function (next) {
   if (!this.isModified('passwordHash')) return next();
   this.passwordHash = await bcrypt.hash(this.passwordHash, 12);
   next();
 });
 
-userSchema.methods.comparePassword = async function(password) {
+userSchema.methods.comparePassword = async function (password) {
   return bcrypt.compare(password, this.passwordHash);
 };
 
-export default mongoose.models.User || mongoose.model('User', userSchema);
+export default mongoose.models.User || mongoose.model('User', userSchema);