@peers-app/peers-ui 0.27.3 → 0.27.4

package/src/tabs-layout/tabs-layout.tsx

@@ -1,857 +0,0 @@
-import {
-  getUserContext,
-  type IAppNav,
-  rpcServerCalls,
-  type Subscription,
-} from "@peers-app/peers-sdk";
-import React, { Component, useEffect, useState } from "react";
-import { openCommandPalette } from "../command-palette/command-palette";
-import { GroupSwitcher } from "../components/group-switcher";
-import { Router } from "../components/router";
-import { isDesktop } from "../globals";
-import { useObservable } from "../hooks";
-import { isIdentityPath } from "../screens/identity/identity-routes";
-import { colorMode } from "../screens/settings/color-mode-dropdown";
-import { systemPackage } from "../system-apps";
-import { allPackages } from "../ui-router/routes-loader";
-import { UIRouter } from "../ui-router/ui-loader";
-import { TabsStripIndicators } from "./network-status-indicator";
-import {
-  activeTabId,
-  activeTabs,
-  goToTabPath,
-  initializedTabs,
-  recentlyUsedApps,
-  type TabState,
-} from "./tabs-state";
-
-// Error boundary that wraps each tab's content so a crash in one tab
-// doesn't take down the entire app.
-interface TabErrorBoundaryProps {
-  tabTitle: string;
-  tabId: string;
-  children: React.ReactNode;
-}
-
-interface TabErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
-}
-
-/**
- * Wraps a single tab's content so a crash in one tab doesn't take down the whole app.
- * Exported so other root layouts (e.g. the full-screen layout) can render a tab body with
- * the same crash isolation. Reset it across screens by giving it a `key`.
- */
-export class TabErrorBoundary extends Component<TabErrorBoundaryProps, TabErrorBoundaryState> {
-  constructor(props: TabErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): TabErrorBoundaryState {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.error(
-      `TabErrorBoundary caught error in tab "${this.props.tabTitle}":`,
-      error,
-      errorInfo,
-    );
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <div style={{ padding: "24px", textAlign: "center" }}>
-          <h4 style={{ marginBottom: "12px" }}>Something went wrong in "{this.props.tabTitle}"</h4>
-          <p
-            style={{
-              opacity: 0.7,
-              marginBottom: "16px",
-              fontFamily: "monospace",
-              fontSize: "13px",
-            }}
-          >
-            {this.state.error?.message || "Unknown error"}
-          </p>
-          <button
-            type="button"
-            className="btn btn-outline-primary btn-sm"
-            onClick={() => this.setState({ hasError: false, error: null })}
-          >
-            Try Again
-          </button>
-        </div>
-      );
-    }
-    return this.props.children;
-  }
-}
-
-/**
- * The tab UI body: the tab strip plus the active tab's content. Rendered as the body of
- * the default `tabs` root layout inside `RootLayoutHost` (which owns bootstrapping, the
- * command palette, and the welcome modal). Branches on `isDesktop` for mobile vs. desktop
- * chrome.
- *
- * @param fillContainer When `true`, the body fills its parent (`height: 100%`) instead of
- *   sizing itself to the viewport. Set this when embedding the tabs UI inside another
- *   layout that owns the vertical space (e.g. the `tabs-with-console` split layout);
- *   leave it `false`/unset for the standalone `tabs` layout, which sizes to the viewport.
- */
-export function TabsLayoutInternal({ fillContainer = false }: { fillContainer?: boolean } = {}) {
-  const [_colorMode] = useObservable(colorMode);
-  const [tabs] = useObservable(activeTabs);
-  const [activeTab] = useObservable(activeTabId);
-  const [currentlyActiveGroupId, setCurrentlyActiveGroupId] = useState("");
-  const [switchingGroup, setSwitchingGroup] = useState(false);
-
-  useEffect(() => {
-    let sub: Subscription;
-    getUserContext().then((userContext) => {
-      setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId);
-      sub = userContext.currentlyActiveGroupId.subscribe(async (_groupId) => {
-        setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId);
-        setSwitchingGroup(true);
-        await userContext.waitForActiveGroupPersistence();
-        await rpcServerCalls.flushDatabases();
-        window.location.reload();
-      });
-    });
-    return () => {
-      if (sub) {
-        sub.dispose();
-      }
-    };
-  }, []);
-
-  useObservable(isDesktop);
-  const isMobile = !isDesktop();
-
-  const closeTab = (tabId: string) => {
-    const currentTabs = activeTabs();
-    const tabToClose = currentTabs.find((t) => t.tabId === tabId);
-
-    if (!tabToClose || tabToClose.tabId === "launcher") return;
-
-    const closedIndex = currentTabs.findIndex((t) => t.tabId === tabId);
-    const newTabs = currentTabs.filter((t) => t.tabId !== tabId);
-    activeTabs(newTabs);
-    initializedTabs.delete(tabId);
-
-    if (activeTab === tabId) {
-      if (newTabs.length === 0) {
-        activeTabId("launcher");
-      } else if (closedIndex < newTabs.length) {
-        activeTabId(newTabs[closedIndex].tabId);
-      } else {
-        activeTabId(newTabs[newTabs.length - 1].tabId);
-      }
-    }
-  };
-
-  const switchTab = (tabId: string) => {
-    activeTabId(tabId);
-  };
-
-  return (
-    <div
-      key={currentlyActiveGroupId}
-      className="d-flex flex-column"
-      style={{ height: fillContainer ? "100%" : "calc(100vh - 25px)", overflow: "hidden" }}
-    >
-      {switchingGroup && (
-        <div
-          style={{
-            position: "fixed",
-            inset: 0,
-            zIndex: 9999,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            backgroundColor: _colorMode === "light" ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.85)",
-          }}
-        >
-          <div className="text-center">
-            <div className="spinner-border text-secondary mb-3" role="status" />
-            <div className={`small ${_colorMode === "light" ? "text-muted" : "text-secondary"}`}>
-              Switching group...
-            </div>
-          </div>
-        </div>
-      )}
-      {/* Tabs Header */}
-      <div
-        className={`border-bottom ${_colorMode === "light" ? "bg-light" : "bg-dark"}`}
-        style={{
-          borderBottomWidth: "1px",
-          borderBottomColor: _colorMode === "light" ? "#dee2e6" : "#495057",
-        }}
-      >
-        {isMobile ? (
-          <MobileTabsHeader
-            tabs={tabs}
-            activeTab={activeTab}
-            onSwitch={switchTab}
-            onClose={closeTab}
-            colorMode={_colorMode}
-          />
-        ) : (
-          <div className="d-flex align-items-center px-1" style={{ height: "36px" }}>
-            {/* Group Switcher */}
-            <GroupSwitcher colorMode={_colorMode} isMobile={false} />
-
-            {/* Search Button */}
-            <button
-              type="button"
-              className="btn btn-sm me-2 d-flex align-items-center"
-              onClick={openCommandPalette}
-              title="Search everything (Cmd+K)"
-              style={{
-                padding: "4px 8px",
-                fontSize: "12px",
-                borderRadius: "6px",
-                border: "none",
-                background: "transparent",
-                color: _colorMode === "light" ? "#6c757d" : "#adb5bd",
-              }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.backgroundColor =
-                  _colorMode === "light" ? "#f8f9fa" : "#495057";
-                e.currentTarget.style.color = _colorMode === "light" ? "#0d6efd" : "#ffffff";
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.backgroundColor = "transparent";
-                e.currentTarget.style.color = _colorMode === "light" ? "#6c757d" : "#adb5bd";
-              }}
-            >
-              <i className="bi-search" style={{ fontSize: "14px" }} />
-            </button>
-
-            <div
-              className="d-flex flex-grow-1 overflow-auto"
-              style={{
-                scrollbarWidth: "none",
-                msOverflowStyle: "none",
-              }}
-            >
-              {tabs.map((tab) => (
-                <TabHeader
-                  key={tab.tabId}
-                  tab={tab}
-                  isActive={activeTab === tab.tabId}
-                  onSwitch={switchTab}
-                  onClose={closeTab}
-                  colorMode={_colorMode}
-                />
-              ))}
-            </div>
-            <TabsStripIndicators />
-          </div>
-        )}
-      </div>
-
-      {/* Tab Content */}
-      <div className="flex-grow-1 overflow-hidden">
-        {tabs.map((tab) => (
-          <div
-            key={tab.tabId}
-            className={`h-100 ${activeTab === tab.tabId ? "d-block" : "d-none"}`}
-            style={{ display: activeTab === tab.tabId ? "block" : "none" }}
-          >
-            <TabErrorBoundary tabTitle={tab.title} tabId={tab.tabId}>
-              <TabContent tab={tab} isMobile={isMobile} isActive={activeTab === tab.tabId} />
-            </TabErrorBoundary>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-interface MobileTabsHeaderProps {
-  tabs: TabState[];
-  activeTab: string;
-  onSwitch: (tabId: string) => void;
-  onClose: (tabId: string) => void;
-  colorMode: string;
-}
-
-function MobileTabsHeader({
-  tabs,
-  activeTab,
-  onSwitch,
-  onClose,
-  colorMode,
-}: MobileTabsHeaderProps) {
-  const [showMenuDropdown, setShowMenuDropdown] = React.useState(false);
-  const currentTab = tabs.find((t) => t.tabId === activeTab);
-  const nonLauncherTabs = tabs.filter((t) => t.packageId !== "launcher");
-
-  return (
-    <div
-      className="d-flex align-items-center justify-content-between px-2 position-relative"
-      style={{ height: "36px" }}
-    >
-      {/* Left Side - Group Switcher */}
-      <div className="d-flex align-items-center gap-1">
-        <GroupSwitcher colorMode={colorMode} isMobile={true} />
-      </div>
-
-      {/* Center - Current Tab Display (absolutely positioned to center on screen) */}
-      <div
-        className="d-flex align-items-center justify-content-center position-absolute"
-        style={{
-          left: "50%",
-          transform: "translateX(-50%)",
-          pointerEvents: "none",
-          maxWidth: "calc(100% - 140px)",
-        }}
-      >
-        {currentTab?.iconClassName && currentTab.packageId !== "launcher" && (
-          <i className={`${currentTab.iconClassName} me-2`} />
-        )}
-        <span className="fw-medium text-truncate small">{currentTab?.title || "Apps"}</span>
-      </div>
-
-      {/* Right Side - Hamburger Menu */}
-      <div className="d-flex align-items-center gap-1">
-        <TabsStripIndicators compact />
-        <div className="dropdown">
-          <button
-            type="button"
-            className={`btn btn-sm ${colorMode === "light" ? "btn-outline-dark" : "btn-outline-light"}`}
-            onClick={() => setShowMenuDropdown(!showMenuDropdown)}
-            style={{ minWidth: "36px" }}
-          >
-            <i className="bi-list" />
-            {nonLauncherTabs.length > 0 && <span className="ms-1">{nonLauncherTabs.length}</span>}
-          </button>
-          {showMenuDropdown && (
-            <div
-              className={`dropdown-menu show position-absolute ${colorMode === "light" ? "" : "dropdown-menu-dark"}`}
-              style={{
-                right: 0,
-                top: "100%",
-                zIndex: 1000,
-                minWidth: "280px",
-                maxHeight: "calc(100vh - 60px)",
-                overflowY: "auto",
-              }}
-            >
-              {/* Apps Option */}
-              <div
-                className={`dropdown-item d-flex align-items-center ${activeTab === "launcher" ? "active" : ""}`}
-                style={{ cursor: "pointer", padding: "14px 18px", fontSize: "17px" }}
-                onClick={() => {
-                  onSwitch("launcher");
-                  setShowMenuDropdown(false);
-                }}
-              >
-                <i className="bi-grid-3x3-gap me-3" style={{ fontSize: "20px" }} />
-                <span>Apps</span>
-              </div>
-
-              {/* Search Option */}
-              <div
-                className="dropdown-item d-flex align-items-center"
-                style={{ cursor: "pointer", padding: "14px 18px", fontSize: "17px" }}
-                onClick={() => {
-                  openCommandPalette();
-                  setShowMenuDropdown(false);
-                }}
-              >
-                <i className="bi-search me-3" style={{ fontSize: "20px" }} />
-                <span>Search</span>
-              </div>
-
-              {/* Divider if there are open tabs */}
-              {nonLauncherTabs.length > 0 && (
-                <div className="dropdown-divider" style={{ margin: "8px 0" }} />
-              )}
-
-              {/* Open Tabs */}
-              {nonLauncherTabs
-                .slice()
-                .reverse()
-                .map((tab) => (
-                  <div
-                    key={tab.tabId}
-                    className={`dropdown-item d-flex align-items-center justify-content-between ${activeTab === tab.tabId ? "active" : ""}`}
-                    style={{ cursor: "pointer", padding: "14px 18px", fontSize: "17px" }}
-                    onClick={() => {
-                      onSwitch(tab.tabId);
-                      setShowMenuDropdown(false);
-                    }}
-                  >
-                    <div className="d-flex align-items-center">
-                      {tab.iconClassName && (
-                        <i className={`${tab.iconClassName} me-3`} style={{ fontSize: "20px" }} />
-                      )}
-                      <span>{tab.title}</span>
-                    </div>
-                    <button
-                      type="button"
-                      className="btn btn-sm p-0 ms-3"
-                      style={{ width: "32px", height: "32px", fontSize: "20px" }}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onClose(tab.tabId);
-                      }}
-                    >
-                      <i className="bi-x" />
-                    </button>
-                  </div>
-                ))}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Backdrop to close dropdown */}
-      {showMenuDropdown && (
-        <div
-          className="position-fixed w-100 h-100"
-          style={{ top: 0, left: 0, zIndex: 999 }}
-          onClick={() => setShowMenuDropdown(false)}
-        />
-      )}
-    </div>
-  );
-}
-
-interface TabHeaderProps {
-  tab: TabState;
-  isActive: boolean;
-  onSwitch: (tabId: string) => void;
-  onClose: (tabId: string) => void;
-  colorMode: string;
-}
-
-function TabHeader({ tab, isActive, onSwitch, onClose, colorMode }: TabHeaderProps) {
-  const activeClass = isActive
-    ? colorMode === "light"
-      ? "bg-white"
-      : "bg-secondary"
-    : colorMode === "light"
-      ? "bg-light"
-      : "bg-dark";
-
-  return (
-    <div
-      className={`d-flex align-items-center px-2 py-1 user-select-none ${activeClass}`}
-      style={{
-        cursor: "pointer",
-        minWidth: "100px",
-        maxWidth: "180px",
-        height: "34px",
-        fontSize: "13px",
-        borderTop: isActive ? "2px solid #0d6efd" : "2px solid transparent",
-        borderLeft: "1px solid transparent",
-        borderRight: `1px solid ${colorMode === "light" ? "#dee2e6" : "#495057"}`,
-        borderBottom: isActive
-          ? colorMode === "light"
-            ? "1px solid white"
-            : "1px solid #343a40"
-          : "none",
-        marginBottom: isActive ? "-1px" : "0",
-        borderRadius: isActive ? "6px 6px 0 0" : "0",
-        transition: "all 0.15s ease",
-        zIndex: isActive ? 1 : 0,
-        boxShadow: isActive ? "0 2px 4px rgba(0,0,0,0.1)" : "none",
-      }}
-      onMouseEnter={(e) => {
-        if (!isActive) {
-          e.currentTarget.style.backgroundColor = colorMode === "light" ? "#f8f9fa" : "#495057";
-        }
-      }}
-      onMouseLeave={(e) => {
-        if (!isActive) {
-          e.currentTarget.style.backgroundColor = colorMode === "light" ? "#f1f3f4" : "#343a40";
-        }
-      }}
-      onClick={() => onSwitch(tab.tabId)}
-    >
-      {tab.iconClassName && <i className={`${tab.iconClassName} me-2`} />}
-      <span className="text-truncate" style={{ maxWidth: "120px", fontSize: "12px" }}>
-        {tab.title}
-      </span>
-      {tab.tabId !== "launcher" && (
-        <button
-          type="button"
-          className="btn p-0 ms-1 opacity-75 hover-opacity-100"
-          style={{
-            width: "14px",
-            height: "14px",
-            fontSize: "11px",
-            border: "none",
-            background: "none",
-            borderRadius: "2px",
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.backgroundColor = "rgba(0,0,0,0.1)";
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.backgroundColor = "transparent";
-          }}
-          onClick={(e) => {
-            e.stopPropagation();
-            onClose(tab.tabId);
-          }}
-        >
-          <i className="bi-x" />
-        </button>
-      )}
-    </div>
-  );
-}
-
-interface TabContentProps {
-  tab: TabState;
-  isMobile: boolean;
-  isActive: boolean;
-}
-
-/**
- * Renders a single tab's body, lazily initializing it on first activation and keeping it
- * mounted thereafter (`initializedTabs`). Exported so other root layouts (e.g. full-screen)
- * can render the active screen through the same routing/launcher path.
- */
-export function TabContent({ tab, isMobile, isActive }: TabContentProps) {
-  // Only render content if this tab is active OR has been previously initialized
-  const shouldRender = isActive || initializedTabs.has(tab.tabId);
-
-  // Mark tab as initialized when it becomes active for the first time
-  React.useEffect(() => {
-    if (isActive) {
-      initializedTabs.add(tab.tabId);
-    }
-  }, [isActive, tab.tabId]);
-
-  if (!shouldRender) {
-    return null;
-  }
-
-  return <TabContentRenderer tab={tab} isMobile={isMobile} />;
-}
-
-// Create individual tab content components that don't re-render
-const TabContentRenderer = React.memo(
-  ({ tab, isMobile }: { tab: TabState; isMobile: boolean }) => {
-    if (tab.packageId === "launcher") {
-      return <AppLauncherTab isMobile={isMobile} />;
-    }
-
-    // System apps use the main Router (which reads from mainContentPath)
-    // Package apps use UIRouter with explicit path
-    const isSystemApp = tab.packageId === "system-apps";
-    const identityApp = isSystemApp && isIdentityPath(tab.path);
-
-    return (
-      <div
-        className={`h-100 ${identityApp ? "overflow-hidden" : "overflow-auto"} ${
-          identityApp ? "" : isMobile ? "p-2" : "p-3"
-        }`}
-      >
-        {isSystemApp ? (
-          <Router path={tab.path} />
-        ) : (
-          <UIRouter path={tab.path} uiCategory="screen" props={{}} />
-        )}
-      </div>
-    );
-  },
-  (prevProps, nextProps) => {
-    // Only re-render if the tab or isMobile changed
-    return (
-      prevProps.tab.tabId === nextProps.tab.tabId &&
-      prevProps.tab.path === nextProps.tab.path &&
-      prevProps.isMobile === nextProps.isMobile
-    );
-  },
-);
-
-interface AppLauncherTabProps {
-  isMobile: boolean;
-}
-
-// Interface for app items (nav items)
-interface AppItem {
-  packageId: string;
-  packageName: string;
-  navItem: IAppNav;
-  path: string;
-  name: string;
-  displayName: string;
-  iconClassName: string;
-}
-
-function AppLauncherTab({ isMobile }: AppLauncherTabProps) {
-  const [packages] = useObservable(allPackages);
-  const [recentApps] = useObservable(recentlyUsedApps);
-  const [searchTerm, setSearchTerm] = React.useState("");
-
-  // Combine regular packages with system apps package
-  const allPackages_ = [...packages, systemPackage];
-
-  // Create app items from nav items in packages
-  const allApps: AppItem[] = allPackages_
-    .filter((p) => !p.disabled && p.appNavs && p.appNavs.length > 0)
-    .flatMap((pkg) => {
-      const navs = pkg.appNavs;
-      if (!navs) return [];
-      return navs.map((navItem) => {
-        // Construct path - use direct path for system apps, package-nav for others
-        let path: string;
-        if (pkg.packageId === "system-apps") {
-          // System apps use direct routing (like the original left bar)
-          path = navItem.navigationPath ?? navItem.name.replace(/\s/g, "-").toLowerCase();
-        } else {
-          // Regular packages use package-nav format
-          path = `package-nav/${pkg.packageId}/${(navItem.navigationPath ?? navItem.name).replace(/[^a-zA-Z0-9]/g, "-").toLowerCase()}`;
-          while (path.includes("//")) {
-            path = path.replace("//", "/");
-          }
-        }
-
-        return {
-          packageId: pkg.packageId,
-          packageName: pkg.name,
-          navItem,
-          path,
-          name: navItem.name,
-          displayName: navItem.displayName || navItem.name,
-          iconClassName: navItem.iconClassName || "bi-box-seam",
-        };
-      });
-    });
-
-  // Filter apps based on search term
-  const filteredApps = searchTerm.trim()
-    ? allApps.filter(
-        (app) =>
-          app.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          app.displayName.toLowerCase().includes(searchTerm.toLowerCase()),
-      )
-    : allApps;
-
-  // Categorize filtered apps by package ID
-  const systemApps = filteredApps.filter((app) => app.packageId === "system-apps");
-  const userApps = filteredApps.filter((app) => app.packageId !== "system-apps");
-
-  // Get recently used apps by matching paths (only show if they match search)
-  const recentAppItems = recentApps
-    .map((path) => filteredApps.find((app) => app.path === path))
-    .filter(Boolean) as AppItem[];
-
-  const openApp = (appItem: AppItem) => {
-    // Check if this is the mobile-settings app and we're in React Native
-    const w = window as Window & {
-      __NATIVE_THEME?: unknown;
-      ReactNativeWebView?: { postMessage: (message: string) => void };
-    };
-    if (appItem.path === "mobile-settings" && typeof w.__NATIVE_THEME !== "undefined") {
-      if (w.ReactNativeWebView) {
-        w.ReactNativeWebView.postMessage(
-          JSON.stringify({
-            type: "navigate",
-            path: "mobile-settings",
-          }),
-        );
-      } else {
-        window.location.href = "peers://mobile-settings";
-      }
-      return;
-    }
-    goToTabPath(appItem.path);
-  };
-
-  return (
-    <div
-      className={`container-fluid ${isMobile ? "p-2" : "p-4"}`}
-      style={{ maxHeight: "100%", overflowY: "auto" }}
-    >
-      {/* Search Bar */}
-      <div className={isMobile ? "mb-3" : "mb-4"}>
-        <div className="position-relative">
-          <i
-            className="bi-search position-absolute"
-            style={{
-              left: "12px",
-              top: "50%",
-              transform: "translateY(-50%)",
-              color: "#6c757d",
-              zIndex: 1,
-            }}
-          />
-          <input
-            type="text"
-            className="form-control"
-            placeholder="Search apps..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            style={{
-              paddingLeft: "40px",
-              fontSize: isMobile ? "14px" : "15px",
-            }}
-          />
-          {searchTerm && (
-            <button
-              type="button"
-              className="btn btn-sm position-absolute"
-              style={{
-                right: "8px",
-                top: "50%",
-                transform: "translateY(-50%)",
-                border: "none",
-                background: "none",
-                color: "#6c757d",
-              }}
-              onClick={() => setSearchTerm("")}
-            >
-              <i className="bi-x" />
-            </button>
-          )}
-        </div>
-      </div>
-
-      {/* Recently Used */}
-      {recentAppItems.length > 0 && (
-        <AppSection
-          title="Recently Used"
-          iconClassName="bi-clock"
-          apps={recentAppItems}
-          onOpenApp={openApp}
-          isMobile={isMobile}
-        />
-      )}
-
-      {/* User Apps */}
-      {userApps.length > 0 && (
-        <AppSection
-          title="User Apps"
-          iconClassName="bi-person"
-          apps={userApps}
-          onOpenApp={openApp}
-          isMobile={isMobile}
-        />
-      )}
-
-      {/* System Apps */}
-      {systemApps.length > 0 && (
-        <AppSection
-          title="System Apps"
-          iconClassName="bi-gear"
-          apps={systemApps}
-          onOpenApp={openApp}
-          isMobile={isMobile}
-        />
-      )}
-    </div>
-  );
-}
-
-interface AppSectionProps {
-  title: string;
-  iconClassName: string;
-  apps: AppItem[];
-  onOpenApp: (appItem: AppItem) => void;
-  isMobile: boolean;
-}
-
-function AppSection({ title, iconClassName, apps, onOpenApp, isMobile }: AppSectionProps) {
-  return (
-    <div className="mb-5">
-      <h4 className={`${isMobile ? "mb-3 h5" : "mb-3"}`}>
-        <i className={`${iconClassName} me-2`} />
-        {title}
-      </h4>
-      <div
-        className={`d-flex flex-wrap ${isMobile ? "gap-3" : "gap-4"}`}
-        style={{ gap: isMobile ? "16px" : "20px" }}
-      >
-        {apps.map((app) => (
-          <AppCard
-            key={`${app.packageId}-${app.path}`}
-            appItem={app}
-            onOpenApp={onOpenApp}
-            isMobile={isMobile}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-interface AppCardProps {
-  appItem: AppItem;
-  onOpenApp: (appItem: AppItem) => void;
-  isMobile: boolean;
-}
-
-function AppCard({ appItem, onOpenApp, isMobile }: AppCardProps) {
-  const [_colorMode] = useObservable(colorMode);
-
-  const isDark = _colorMode === "dark";
-
-  return (
-    <button
-      type="button"
-      className="d-flex flex-column align-items-center text-center"
-      style={{
-        cursor: "pointer",
-        width: isMobile ? "80px" : "90px",
-        transition: "all 0.15s ease",
-        background: "none",
-        border: "none",
-        padding: 0,
-      }}
-      title={appItem.name}
-      onMouseEnter={(e) => {
-        e.currentTarget.style.transform = "scale(1.05)";
-      }}
-      onMouseLeave={(e) => {
-        e.currentTarget.style.transform = "scale(1)";
-      }}
-      onClick={() => onOpenApp(appItem)}
-    >
-      <div
-        className="d-flex align-items-center justify-content-center mb-2"
-        style={{
-          width: isMobile ? "64px" : "72px",
-          height: isMobile ? "64px" : "72px",
-          backgroundColor: isDark ? "#343a40" : "#f8f9fa",
-          borderRadius: "12px",
-          border: `1px solid ${isDark ? "#495057" : "#e9ecef"}`,
-          boxShadow: isDark ? "0 2px 4px rgba(0,0,0,0.3)" : "0 2px 4px rgba(0,0,0,0.08)",
-          transition: "all 0.15s ease",
-        }}
-      >
-        <i
-          className={appItem.iconClassName}
-          style={{
-            fontSize: isMobile ? "28px" : "32px",
-            color: isDark ? "#0d6efd" : "#0d6efd",
-          }}
-        />
-      </div>
-
-      <span
-        className={isDark ? "text-light" : "text-dark"}
-        style={{
-          fontSize: isMobile ? "11px" : "12px",
-          fontWeight: "500",
-          lineHeight: "1.2",
-          maxWidth: "100%",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-        }}
-      >
-        {appItem.displayName}
-      </span>
-    </button>
-  );
-}