@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/tabs-layout/tabs-layout.js

@@ -35,6 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabsLayoutApp = TabsLayoutApp;
 exports.TabsLayout = TabsLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = __importStar(require("react"));
 const command_palette_1 = require("../command-palette/command-palette");
@@ -63,13 +64,12 @@ class TabErrorBoundary extends react_1.Component {
     }
     render() {
         if (this.state.hasError) {
-            return (react_1.default.createElement("div", { style: { padding: '24px', textAlign: 'center' } },
-                react_1.default.createElement("h4", { style: { marginBottom: '12px' } },
-                    "Something went wrong in \"",
-                    this.props.tabTitle,
-                    "\""),
-                react_1.default.createElement("p", { style: { opacity: 0.7, marginBottom: '16px', fontFamily: 'monospace', fontSize: '13px' } }, this.state.error?.message || 'Unknown error'),
-                react_1.default.createElement("button", { className: "btn btn-outline-primary btn-sm", onClick: () => this.setState({ hasError: false, error: null }) }, "Try Again")));
+            return ((0, jsx_runtime_1.jsxs)("div", { style: { padding: "24px", textAlign: "center" }, children: [(0, jsx_runtime_1.jsxs)("h4", { style: { marginBottom: "12px" }, children: ["Something went wrong in \"", this.props.tabTitle, "\""] }), (0, jsx_runtime_1.jsx)("p", { style: {
+                            opacity: 0.7,
+                            marginBottom: "16px",
+                            fontFamily: "monospace",
+                            fontSize: "13px",
+                        }, children: this.state.error?.message || "Unknown error" }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-outline-primary btn-sm", onClick: () => this.setState({ hasError: false, error: null }), children: "Try Again" })] }));
         }
         return this.props.children;
     }
@@ -83,11 +83,11 @@ function TabsLayoutApp() {
         return;
     }
     if (!userId) {
-        document.getElementById('appLoadingDiv')?.remove();
-        return react_1.default.createElement(setup_user_1.SetupUser, null);
+        document.getElementById("appLoadingDiv")?.remove();
+        return (0, jsx_runtime_1.jsx)(setup_user_1.SetupUser, {});
     }
     else {
-        return react_1.default.createElement(TabsLayout, { userId: userId });
+        return (0, jsx_runtime_1.jsx)(TabsLayout, { userId: userId });
     }
 }
 let userContextInitialized = false;
@@ -117,23 +117,20 @@ function TabsLayout(props) {
     }, [loaded]);
     if (!loaded)
         return false;
-    document.getElementById('appLoadingDiv')?.remove();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(TabsLayoutInternal, null),
-        react_1.default.createElement(command_palette_ui_1.CommandPaletteOverlay, null),
-        showWelcomeModal && (react_1.default.createElement(welcome_modal_1.WelcomeModal, { colorMode: _colorMode, onClose: () => setShowWelcomeModal(false) }))));
+    document.getElementById("appLoadingDiv")?.remove();
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TabsLayoutInternal, {}), (0, jsx_runtime_1.jsx)(command_palette_ui_1.CommandPaletteOverlay, {}), showWelcomeModal && ((0, jsx_runtime_1.jsx)(welcome_modal_1.WelcomeModal, { colorMode: _colorMode, onClose: () => setShowWelcomeModal(false) }))] }));
 }
 function TabsLayoutInternal() {
     const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
     const [tabs] = (0, hooks_1.useObservable)(tabs_state_1.activeTabs);
     const [activeTab] = (0, hooks_1.useObservable)(tabs_state_1.activeTabId);
-    const [currentlyActiveGroupId, setCurrentlyActiveGroupId] = (0, react_1.useState)('');
+    const [currentlyActiveGroupId, setCurrentlyActiveGroupId] = (0, react_1.useState)("");
     const [switchingGroup, setSwitchingGroup] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
         let sub;
-        (0, peers_sdk_1.getUserContext)().then(userContext => {
+        (0, peers_sdk_1.getUserContext)().then((userContext) => {
             setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId);
-            sub = userContext.currentlyActiveGroupId.subscribe(async (groupId) => {
+            sub = userContext.currentlyActiveGroupId.subscribe(async (_groupId) => {
                 setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId);
                 setSwitchingGroup(true);
                 await userContext.waitForActiveGroupPersistence();
@@ -151,16 +148,16 @@ function TabsLayoutInternal() {
     const isMobile = !(0, globals_1.isDesktop)();
     const closeTab = (tabId) => {
         const currentTabs = (0, tabs_state_1.activeTabs)();
-        const tabToClose = currentTabs.find(t => t.tabId === tabId);
+        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);
+        const closedIndex = currentTabs.findIndex((t) => t.tabId === tabId);
+        const newTabs = currentTabs.filter((t) => t.tabId !== tabId);
         (0, tabs_state_1.activeTabs)(newTabs);
         tabs_state_1.initializedTabs.delete(tabId);
         if (activeTab === tabId) {
             if (newTabs.length === 0) {
-                (0, tabs_state_1.activeTabId)('launcher');
+                (0, tabs_state_1.activeTabId)("launcher");
             }
             else if (closedIndex < newTabs.length) {
                 (0, tabs_state_1.activeTabId)(newTabs[closedIndex].tabId);
@@ -173,133 +170,119 @@ function TabsLayoutInternal() {
     const switchTab = (tabId) => {
         (0, tabs_state_1.activeTabId)(tabId);
     };
-    return (react_1.default.createElement("div", { key: currentlyActiveGroupId, className: "d-flex flex-column", style: { height: 'calc(100vh - 25px)', overflow: 'hidden' } },
-        switchingGroup && (react_1.default.createElement("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)',
-            } },
-            react_1.default.createElement("div", { className: "text-center" },
-                react_1.default.createElement("div", { className: "spinner-border text-secondary mb-3", role: "status" }),
-                react_1.default.createElement("div", { className: `small ${_colorMode === 'light' ? 'text-muted' : 'text-secondary'}` }, "Switching group...")))),
-        react_1.default.createElement("div", { className: `border-bottom ${_colorMode === 'light' ? 'bg-light' : 'bg-dark'}`, style: {
-                borderBottomWidth: '1px',
-                borderBottomColor: _colorMode === 'light' ? '#dee2e6' : '#495057'
-            } }, isMobile ? (react_1.default.createElement(MobileTabsHeader, { tabs: tabs, activeTab: activeTab, onSwitch: switchTab, onClose: closeTab, colorMode: _colorMode })) : (react_1.default.createElement("div", { className: "d-flex align-items-center px-1", style: { height: '36px' } },
-            react_1.default.createElement(group_switcher_1.GroupSwitcher, { colorMode: _colorMode, isMobile: false }),
-            react_1.default.createElement("button", { className: "btn btn-sm me-2 d-flex align-items-center", onClick: command_palette_1.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';
-                } },
-                react_1.default.createElement("i", { className: "bi-search", style: { fontSize: '14px' } })),
-            react_1.default.createElement("div", { className: "d-flex flex-grow-1 overflow-auto", style: {
-                    scrollbarWidth: 'none',
-                    msOverflowStyle: 'none'
-                } }, tabs.map(tab => (react_1.default.createElement(TabHeader, { key: tab.tabId, tab: tab, isActive: activeTab === tab.tabId, onSwitch: switchTab, onClose: closeTab, colorMode: _colorMode }))))))),
-        react_1.default.createElement("div", { className: "flex-grow-1 overflow-hidden" }, tabs.map(tab => (react_1.default.createElement("div", { key: tab.tabId, className: `h-100 ${activeTab === tab.tabId ? 'd-block' : 'd-none'}`, style: { display: activeTab === tab.tabId ? 'block' : 'none' } },
-            react_1.default.createElement(TabErrorBoundary, { tabTitle: tab.title, tabId: tab.tabId },
-                react_1.default.createElement(TabContent, { tab: tab, isMobile: isMobile, isActive: activeTab === tab.tabId }))))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex flex-column", style: { height: "calc(100vh - 25px)", overflow: "hidden" }, children: [switchingGroup && ((0, jsx_runtime_1.jsx)("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)",
+                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "spinner-border text-secondary mb-3", role: "status" }), (0, jsx_runtime_1.jsx)("div", { className: `small ${_colorMode === "light" ? "text-muted" : "text-secondary"}`, children: "Switching group..." })] }) })), (0, jsx_runtime_1.jsx)("div", { className: `border-bottom ${_colorMode === "light" ? "bg-light" : "bg-dark"}`, style: {
+                    borderBottomWidth: "1px",
+                    borderBottomColor: _colorMode === "light" ? "#dee2e6" : "#495057",
+                }, children: isMobile ? ((0, jsx_runtime_1.jsx)(MobileTabsHeader, { tabs: tabs, activeTab: activeTab, onSwitch: switchTab, onClose: closeTab, colorMode: _colorMode })) : ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center px-1", style: { height: "36px" }, children: [(0, jsx_runtime_1.jsx)(group_switcher_1.GroupSwitcher, { colorMode: _colorMode, isMobile: false }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm me-2 d-flex align-items-center", onClick: command_palette_1.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";
+                            }, children: (0, jsx_runtime_1.jsx)("i", { className: "bi-search", style: { fontSize: "14px" } }) }), (0, jsx_runtime_1.jsx)("div", { className: "d-flex flex-grow-1 overflow-auto", style: {
+                                scrollbarWidth: "none",
+                                msOverflowStyle: "none",
+                            }, children: tabs.map((tab) => ((0, jsx_runtime_1.jsx)(TabHeader, { tab: tab, isActive: activeTab === tab.tabId, onSwitch: switchTab, onClose: closeTab, colorMode: _colorMode }, tab.tabId))) })] })) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-grow-1 overflow-hidden", children: tabs.map((tab) => ((0, jsx_runtime_1.jsx)("div", { className: `h-100 ${activeTab === tab.tabId ? "d-block" : "d-none"}`, style: { display: activeTab === tab.tabId ? "block" : "none" }, children: (0, jsx_runtime_1.jsx)(TabErrorBoundary, { tabTitle: tab.title, tabId: tab.tabId, children: (0, jsx_runtime_1.jsx)(TabContent, { tab: tab, isMobile: isMobile, isActive: activeTab === tab.tabId }) }) }, tab.tabId))) })] }, currentlyActiveGroupId));
 }
-function MobileTabsHeader({ tabs, activeTab, onSwitch, onClose, colorMode }) {
+function MobileTabsHeader({ tabs, activeTab, onSwitch, onClose, colorMode, }) {
     const [showMenuDropdown, setShowMenuDropdown] = react_1.default.useState(false);
-    const currentTab = tabs.find(t => t.tabId === activeTab);
-    const nonLauncherTabs = tabs.filter(t => t.packageId !== 'launcher');
-    return (react_1.default.createElement("div", { className: "d-flex align-items-center justify-content-between px-2 position-relative", style: { height: '36px' } },
-        react_1.default.createElement("div", { className: "d-flex align-items-center gap-1" },
-            react_1.default.createElement(group_switcher_1.GroupSwitcher, { colorMode: colorMode, isMobile: true })),
-        react_1.default.createElement("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' && (react_1.default.createElement("i", { className: `${currentTab.iconClassName} me-2` })),
-            react_1.default.createElement("span", { className: "fw-medium text-truncate small" }, currentTab?.title || 'Apps')),
-        react_1.default.createElement("div", { className: "d-flex align-items-center" },
-            react_1.default.createElement("div", { className: "dropdown" },
-                react_1.default.createElement("button", { className: `btn btn-sm ${colorMode === 'light' ? 'btn-outline-dark' : 'btn-outline-light'}`, onClick: () => setShowMenuDropdown(!showMenuDropdown), style: { minWidth: '36px' } },
-                    react_1.default.createElement("i", { className: "bi-list" }),
-                    nonLauncherTabs.length > 0 && (react_1.default.createElement("span", { className: "ms-1" }, nonLauncherTabs.length))),
-                showMenuDropdown && (react_1.default.createElement("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' } },
-                    react_1.default.createElement("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);
-                        } },
-                        react_1.default.createElement("i", { className: "bi-grid-3x3-gap me-3", style: { fontSize: '20px' } }),
-                        react_1.default.createElement("span", null, "Apps")),
-                    react_1.default.createElement("div", { className: "dropdown-item d-flex align-items-center", style: { cursor: 'pointer', padding: '14px 18px', fontSize: '17px' }, onClick: () => {
-                            (0, command_palette_1.openCommandPalette)();
-                            setShowMenuDropdown(false);
-                        } },
-                        react_1.default.createElement("i", { className: "bi-search me-3", style: { fontSize: '20px' } }),
-                        react_1.default.createElement("span", null, "Search")),
-                    nonLauncherTabs.length > 0 && (react_1.default.createElement("div", { className: "dropdown-divider", style: { margin: '8px 0' } })),
-                    nonLauncherTabs.slice().reverse().map(tab => (react_1.default.createElement("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);
-                        } },
-                        react_1.default.createElement("div", { className: "d-flex align-items-center" },
-                            tab.iconClassName && react_1.default.createElement("i", { className: `${tab.iconClassName} me-3`, style: { fontSize: '20px' } }),
-                            react_1.default.createElement("span", null, tab.title)),
-                        react_1.default.createElement("button", { className: "btn btn-sm p-0 ms-3", style: { width: '32px', height: '32px', fontSize: '20px' }, onClick: (e) => {
-                                e.stopPropagation();
-                                onClose(tab.tabId);
-                            } },
-                            react_1.default.createElement("i", { className: "bi-x" }))))))))),
-        showMenuDropdown && (react_1.default.createElement("div", { className: "position-fixed w-100 h-100", style: { top: 0, left: 0, zIndex: 999 }, onClick: () => setShowMenuDropdown(false) }))));
+    const currentTab = tabs.find((t) => t.tabId === activeTab);
+    const nonLauncherTabs = tabs.filter((t) => t.packageId !== "launcher");
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-between px-2 position-relative", style: { height: "36px" }, children: [(0, jsx_runtime_1.jsx)("div", { className: "d-flex align-items-center gap-1", children: (0, jsx_runtime_1.jsx)(group_switcher_1.GroupSwitcher, { colorMode: colorMode, isMobile: true }) }), (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center justify-content-center position-absolute", style: {
+                    left: "50%",
+                    transform: "translateX(-50%)",
+                    pointerEvents: "none",
+                    maxWidth: "calc(100% - 140px)",
+                }, children: [currentTab?.iconClassName && currentTab.packageId !== "launcher" && ((0, jsx_runtime_1.jsx)("i", { className: `${currentTab.iconClassName} me-2` })), (0, jsx_runtime_1.jsx)("span", { className: "fw-medium text-truncate small", children: currentTab?.title || "Apps" })] }), (0, jsx_runtime_1.jsx)("div", { className: "d-flex align-items-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "dropdown", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: `btn btn-sm ${colorMode === "light" ? "btn-outline-dark" : "btn-outline-light"}`, onClick: () => setShowMenuDropdown(!showMenuDropdown), style: { minWidth: "36px" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-list" }), nonLauncherTabs.length > 0 && (0, jsx_runtime_1.jsx)("span", { className: "ms-1", children: nonLauncherTabs.length })] }), showMenuDropdown && ((0, jsx_runtime_1.jsxs)("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",
+                            }, children: [(0, jsx_runtime_1.jsxs)("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);
+                                    }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-grid-3x3-gap me-3", style: { fontSize: "20px" } }), (0, jsx_runtime_1.jsx)("span", { children: "Apps" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "dropdown-item d-flex align-items-center", style: { cursor: "pointer", padding: "14px 18px", fontSize: "17px" }, onClick: () => {
+                                        (0, command_palette_1.openCommandPalette)();
+                                        setShowMenuDropdown(false);
+                                    }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search me-3", style: { fontSize: "20px" } }), (0, jsx_runtime_1.jsx)("span", { children: "Search" })] }), nonLauncherTabs.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "dropdown-divider", style: { margin: "8px 0" } })), nonLauncherTabs
+                                    .slice()
+                                    .reverse()
+                                    .map((tab) => ((0, jsx_runtime_1.jsxs)("div", { 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);
+                                    }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center", children: [tab.iconClassName && ((0, jsx_runtime_1.jsx)("i", { className: `${tab.iconClassName} me-3`, style: { fontSize: "20px" } })), (0, jsx_runtime_1.jsx)("span", { children: tab.title })] }), (0, jsx_runtime_1.jsx)("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);
+                                            }, children: (0, jsx_runtime_1.jsx)("i", { className: "bi-x" }) })] }, tab.tabId)))] }))] }) }), showMenuDropdown && ((0, jsx_runtime_1.jsx)("div", { className: "position-fixed w-100 h-100", style: { top: 0, left: 0, zIndex: 999 }, onClick: () => setShowMenuDropdown(false) }))] }));
 }
 function TabHeader({ tab, isActive, onSwitch, onClose, colorMode }) {
     const activeClass = isActive
-        ? (colorMode === 'light' ? 'bg-white' : 'bg-secondary')
-        : (colorMode === 'light' ? 'bg-light' : 'bg-dark');
-    return (react_1.default.createElement("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',
+        ? colorMode === "light"
+            ? "bg-white"
+            : "bg-secondary"
+        : colorMode === "light"
+            ? "bg-light"
+            : "bg-dark";
+    return ((0, jsx_runtime_1.jsxs)("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'
+            boxShadow: isActive ? "0 2px 4px rgba(0,0,0,0.1)" : "none",
         }, onMouseEnter: (e) => {
             if (!isActive) {
-                e.currentTarget.style.backgroundColor = colorMode === 'light' ? '#f8f9fa' : '#495057';
+                e.currentTarget.style.backgroundColor = colorMode === "light" ? "#f8f9fa" : "#495057";
             }
         }, onMouseLeave: (e) => {
             if (!isActive) {
-                e.currentTarget.style.backgroundColor = colorMode === 'light' ? '#f1f3f4' : '#343a40';
+                e.currentTarget.style.backgroundColor = colorMode === "light" ? "#f1f3f4" : "#343a40";
             }
-        }, onClick: () => onSwitch(tab.tabId) },
-        tab.iconClassName && (react_1.default.createElement("i", { className: `${tab.iconClassName} me-2` })),
-        react_1.default.createElement("span", { className: "text-truncate", style: { maxWidth: '120px', fontSize: '12px' } }, tab.title),
-        tab.tabId !== "launcher" && (react_1.default.createElement("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);
-            } },
-            react_1.default.createElement("i", { className: "bi-x" })))));
+        }, onClick: () => onSwitch(tab.tabId), children: [tab.iconClassName && (0, jsx_runtime_1.jsx)("i", { className: `${tab.iconClassName} me-2` }), (0, jsx_runtime_1.jsx)("span", { className: "text-truncate", style: { maxWidth: "120px", fontSize: "12px" }, children: tab.title }), tab.tabId !== "launcher" && ((0, jsx_runtime_1.jsx)("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);
+                }, children: (0, jsx_runtime_1.jsx)("i", { className: "bi-x" }) }))] }));
 }
 function TabContent({ tab, isMobile, isActive }) {
     // Only render content if this tab is active OR has been previously initialized
@@ -313,157 +296,143 @@ function TabContent({ tab, isMobile, isActive }) {
     if (!shouldRender) {
         return null;
     }
-    return react_1.default.createElement(TabContentRenderer, { tab: tab, isMobile: isMobile });
+    return (0, jsx_runtime_1.jsx)(TabContentRenderer, { tab: tab, isMobile: isMobile });
 }
 // Create individual tab content components that don't re-render
 const TabContentRenderer = react_1.default.memo(({ tab, isMobile }) => {
-    if (tab.packageId === 'launcher') {
-        return react_1.default.createElement(AppLauncherTab, { isMobile: isMobile });
+    if (tab.packageId === "launcher") {
+        return (0, jsx_runtime_1.jsx)(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';
-    return (react_1.default.createElement("div", { className: `h-100 overflow-auto ${isMobile ? 'p-2' : 'p-3'}` }, isSystemApp ? (react_1.default.createElement(router_1.Router, { path: tab.path })) : (react_1.default.createElement(ui_loader_1.UIRouter, { path: tab.path, uiCategory: "screen", props: {} }))));
+    const isSystemApp = tab.packageId === "system-apps";
+    return ((0, jsx_runtime_1.jsx)("div", { className: `h-100 overflow-auto ${isMobile ? "p-2" : "p-3"}`, children: isSystemApp ? ((0, jsx_runtime_1.jsx)(router_1.Router, { path: tab.path })) : ((0, jsx_runtime_1.jsx)(ui_loader_1.UIRouter, { path: tab.path, uiCategory: "screen", props: {} })) }));
 }, (prevProps, nextProps) => {
     // Only re-render if the tab or isMobile changed
-    return prevProps.tab.tabId === nextProps.tab.tabId &&
+    return (prevProps.tab.tabId === nextProps.tab.tabId &&
         prevProps.tab.path === nextProps.tab.path &&
-        prevProps.isMobile === nextProps.isMobile;
+        prevProps.isMobile === nextProps.isMobile);
 });
 function AppLauncherTab({ isMobile }) {
     const [packages] = (0, hooks_1.useObservable)(routes_loader_1.allPackages);
     const [recentApps] = (0, hooks_1.useObservable)(tabs_state_1.recentlyUsedApps);
-    const [searchTerm, setSearchTerm] = react_1.default.useState('');
+    const [searchTerm, setSearchTerm] = react_1.default.useState("");
     // Combine regular packages with system apps package
     const allPackages_ = [...packages, system_apps_1.systemPackage];
     // Create app items from nav items in packages
     const allApps = allPackages_
-        .filter(p => !p.disabled && p.appNavs && p.appNavs.length > 0)
-        .flatMap(pkg => pkg.appNavs.map(navItem => {
-        // Construct path - use direct path for system apps, package-nav for others
-        let path;
-        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('//', '/');
+        .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;
+            if (pkg.packageId === "system-apps") {
+                // System apps use direct routing (like the original left bar)
+                path = navItem.navigationPath ?? navItem.name.replace(/\s/g, "-").toLowerCase();
             }
-        }
-        return {
-            packageId: pkg.packageId,
-            packageName: pkg.name,
-            navItem,
-            path,
-            name: navItem.name,
-            displayName: navItem.displayName || navItem.name,
-            iconClassName: navItem.iconClassName || 'bi-box-seam'
-        };
-    }));
+            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()) ||
+        ? 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');
+    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))
+        .map((path) => filteredApps.find((app) => app.path === path))
         .filter(Boolean);
     const openApp = (appItem) => {
         // Check if this is the mobile-settings app and we're in React Native
-        if (appItem.path === 'mobile-settings' && typeof window.__NATIVE_THEME !== 'undefined') {
-            // Use expo-linking to navigate to native screen
-            // @ts-ignore
-            if (window.ReactNativeWebView) {
-                // @ts-ignore
-                window.ReactNativeWebView.postMessage(JSON.stringify({
-                    type: 'navigate',
-                    path: 'mobile-settings'
+        const w = window;
+        if (appItem.path === "mobile-settings" && typeof w.__NATIVE_THEME !== "undefined") {
+            if (w.ReactNativeWebView) {
+                w.ReactNativeWebView.postMessage(JSON.stringify({
+                    type: "navigate",
+                    path: "mobile-settings",
                 }));
             }
             else {
-                // Fallback to deep link
-                window.location.href = 'peers://mobile-settings';
+                window.location.href = "peers://mobile-settings";
             }
             return;
         }
         (0, tabs_state_1.goToTabPath)(appItem.path);
     };
-    return (react_1.default.createElement("div", { className: `container-fluid ${isMobile ? 'p-2' : 'p-4'}`, style: { maxHeight: '100%', overflowY: 'auto' } },
-        react_1.default.createElement("div", { className: isMobile ? 'mb-3' : 'mb-4' },
-            react_1.default.createElement("div", { className: "position-relative" },
-                react_1.default.createElement("i", { className: "bi-search position-absolute", style: {
-                        left: '12px',
-                        top: '50%',
-                        transform: 'translateY(-50%)',
-                        color: '#6c757d',
-                        zIndex: 1
-                    } }),
-                react_1.default.createElement("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 && (react_1.default.createElement("button", { className: "btn btn-sm position-absolute", style: {
-                        right: '8px',
-                        top: '50%',
-                        transform: 'translateY(-50%)',
-                        border: 'none',
-                        background: 'none',
-                        color: '#6c757d'
-                    }, onClick: () => setSearchTerm('') },
-                    react_1.default.createElement("i", { className: "bi-x" }))))),
-        recentAppItems.length > 0 && (react_1.default.createElement(AppSection, { title: "Recently Used", iconClassName: "bi-clock", apps: recentAppItems, onOpenApp: openApp, isMobile: isMobile })),
-        userApps.length > 0 && (react_1.default.createElement(AppSection, { title: "User Apps", iconClassName: "bi-person", apps: userApps, onOpenApp: openApp, isMobile: isMobile })),
-        systemApps.length > 0 && (react_1.default.createElement(AppSection, { title: "System Apps", iconClassName: "bi-gear", apps: systemApps, onOpenApp: openApp, isMobile: isMobile }))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `container-fluid ${isMobile ? "p-2" : "p-4"}`, style: { maxHeight: "100%", overflowY: "auto" }, children: [(0, jsx_runtime_1.jsx)("div", { className: isMobile ? "mb-3" : "mb-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "position-relative", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search position-absolute", style: {
+                                left: "12px",
+                                top: "50%",
+                                transform: "translateY(-50%)",
+                                color: "#6c757d",
+                                zIndex: 1,
+                            } }), (0, jsx_runtime_1.jsx)("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 && ((0, jsx_runtime_1.jsx)("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(""), children: (0, jsx_runtime_1.jsx)("i", { className: "bi-x" }) }))] }) }), recentAppItems.length > 0 && ((0, jsx_runtime_1.jsx)(AppSection, { title: "Recently Used", iconClassName: "bi-clock", apps: recentAppItems, onOpenApp: openApp, isMobile: isMobile })), userApps.length > 0 && ((0, jsx_runtime_1.jsx)(AppSection, { title: "User Apps", iconClassName: "bi-person", apps: userApps, onOpenApp: openApp, isMobile: isMobile })), systemApps.length > 0 && ((0, jsx_runtime_1.jsx)(AppSection, { title: "System Apps", iconClassName: "bi-gear", apps: systemApps, onOpenApp: openApp, isMobile: isMobile }))] }));
 }
 function AppSection({ title, iconClassName, apps, onOpenApp, isMobile }) {
-    return (react_1.default.createElement("div", { className: 'mb-5' },
-        react_1.default.createElement("h4", { className: `${isMobile ? 'mb-3 h5' : 'mb-3'}` },
-            react_1.default.createElement("i", { className: `${iconClassName} me-2` }),
-            title),
-        react_1.default.createElement("div", { className: `d-flex flex-wrap ${isMobile ? 'gap-3' : 'gap-4'}`, style: { gap: isMobile ? '16px' : '20px' } }, apps.map(app => (react_1.default.createElement(AppCard, { key: `${app.packageId}-${app.path}`, appItem: app, onOpenApp: onOpenApp, isMobile: isMobile }))))));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "mb-5", children: [(0, jsx_runtime_1.jsxs)("h4", { className: `${isMobile ? "mb-3 h5" : "mb-3"}`, children: [(0, jsx_runtime_1.jsx)("i", { className: `${iconClassName} me-2` }), title] }), (0, jsx_runtime_1.jsx)("div", { className: `d-flex flex-wrap ${isMobile ? "gap-3" : "gap-4"}`, style: { gap: isMobile ? "16px" : "20px" }, children: apps.map((app) => ((0, jsx_runtime_1.jsx)(AppCard, { appItem: app, onOpenApp: onOpenApp, isMobile: isMobile }, `${app.packageId}-${app.path}`))) })] }));
 }
 function AppCard({ appItem, onOpenApp, isMobile }) {
     const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
-    const isDark = _colorMode === 'dark';
-    return (react_1.default.createElement("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',
+    const isDark = _colorMode === "dark";
+    return ((0, jsx_runtime_1.jsxs)("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)';
+            e.currentTarget.style.transform = "scale(1.05)";
         }, onMouseLeave: (e) => {
-            e.currentTarget.style.transform = 'scale(1)';
-        }, onClick: () => onOpenApp(appItem) },
-        react_1.default.createElement("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'
-            } },
-            react_1.default.createElement("i", { className: appItem.iconClassName, style: {
-                    fontSize: isMobile ? '28px' : '32px',
-                    color: isDark ? '#0d6efd' : '#0d6efd'
-                } })),
-        react_1.default.createElement("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)));
+            e.currentTarget.style.transform = "scale(1)";
+        }, onClick: () => onOpenApp(appItem), children: [(0, jsx_runtime_1.jsx)("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",
+                }, children: (0, jsx_runtime_1.jsx)("i", { className: appItem.iconClassName, style: {
+                        fontSize: isMobile ? "28px" : "32px",
+                        color: isDark ? "#0d6efd" : "#0d6efd",
+                    } }) }), (0, jsx_runtime_1.jsx)("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",
+                }, children: appItem.displayName })] }));
 }