@peers-app/peers-ui 0.0.14

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

@@ -0,0 +1,374 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsLayout = TabsLayout;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const command_palette_1 = require("../command-palette/command-palette");
+const command_palette_ui_1 = require("../command-palette/command-palette-ui");
+const group_switcher_1 = require("../components/group-switcher");
+const router_1 = require("../components/router");
+const globals_1 = require("../globals");
+const hooks_1 = require("../hooks");
+const color_mode_dropdown_1 = require("../screens/settings/color-mode-dropdown");
+const setup_user_1 = require("../screens/setup-user");
+const system_apps_1 = require("../system-apps");
+const routes_loader_1 = require("../ui-router/routes-loader");
+const ui_loader_1 = require("../ui-router/ui-loader");
+const tabs_state_1 = require("./tabs-state");
+function TabsLayout(props) {
+    const loaded = (0, hooks_1.usePromise)(async () => {
+        await (0, globals_1.loadGlobals)().then(() => console.log('Globals loaded'));
+        await (0, routes_loader_1.loadAllRoutes)().then(() => console.log('Routes loaded'));
+        // Wait for tab state to load from database
+        await Promise.all([
+            tabs_state_1.activeTabs.loadingPromise,
+            tabs_state_1.activeTabId.loadingPromise,
+            tabs_state_1.recentlyUsedApps.loadingPromise
+        ]);
+        return true;
+    });
+    if (!loaded)
+        return false;
+    document.getElementById('appLoadingDiv')?.remove();
+    if (globals_1.me.name === globals_1.me.userId) {
+        return react_1.default.createElement(setup_user_1.SetupUser, null);
+    }
+    (0, color_mode_dropdown_1.colorModePreference)(props.colorMode);
+    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)));
+}
+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)('');
+    (0, react_1.useEffect)(() => {
+        let sub;
+        (0, peers_sdk_1.getUserContext)().then(userContext => {
+            setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId());
+            sub = userContext.currentlyActiveGroupId.subscribe(async (groupId) => {
+                setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId());
+                // below reloading logic is a kludge to deal with different groups having different packages installed
+                await (0, peers_sdk_1.sleep)(100);
+                window.location.reload();
+            });
+        });
+        return () => {
+            if (sub) {
+                sub.dispose();
+            }
+        };
+    }, []);
+    (0, hooks_1.useObservable)(globals_1.isDesktop);
+    const isMobile = !(0, globals_1.isDesktop)();
+    const closeTab = (tabId) => {
+        const currentTabs = (0, tabs_state_1.activeTabs)();
+        const tabToClose = currentTabs.find(t => t.tabId === tabId);
+        if (!tabToClose || tabToClose.tabId === "launcher")
+            return;
+        const newTabs = currentTabs.filter(t => t.tabId !== tabId);
+        (0, tabs_state_1.activeTabs)(newTabs);
+        tabs_state_1.initializedTabs.delete(tabId);
+        // If closing active tab, switch to previous tab
+        if (activeTab === tabId) {
+            const newActiveTab = newTabs.length > 0 ? newTabs[newTabs.length - 1].tabId : 'launcher';
+            (0, tabs_state_1.activeTabId)(newActiveTab);
+        }
+    };
+    const switchTab = (tabId) => {
+        (0, tabs_state_1.activeTabId)(tabId);
+    };
+    return (react_1.default.createElement("div", { key: currentlyActiveGroupId, className: "d-flex flex-column", style: { height: '100vh', overflow: 'hidden' } },
+        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 }),
+            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(TabContent, { tab: tab, isMobile: isMobile, isActive: activeTab === tab.tabId })))))));
+}
+function MobileTabsHeader({ tabs, activeTab, onSwitch, onClose, colorMode }) {
+    const [showTabDropdown, setShowTabDropdown] = 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", 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 }),
+            react_1.default.createElement("button", { className: "btn btn-sm", onClick: command_palette_1.openCommandPalette, title: "Search everything", style: {
+                    minWidth: '36px',
+                    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" })),
+            react_1.default.createElement("button", { className: `btn btn-sm ${colorMode === 'light' ? 'btn-outline-primary' : 'btn-outline-light'}`, onClick: () => onSwitch('launcher'), style: { minWidth: '36px' } },
+                react_1.default.createElement("i", { className: "bi-grid-3x3-gap" }))),
+        react_1.default.createElement("div", { className: "d-flex align-items-center flex-grow-1 justify-content-center" },
+            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 me-2 small" }, currentTab?.title || 'Apps')),
+        react_1.default.createElement("div", { className: "d-flex align-items-center gap-2" }, nonLauncherTabs.length > 0 && (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: () => setShowTabDropdown(!showTabDropdown) },
+                react_1.default.createElement("i", { className: "bi-list" }),
+                react_1.default.createElement("span", { className: "ms-1" }, nonLauncherTabs.length)),
+            showTabDropdown && (react_1.default.createElement("div", { className: `dropdown-menu show position-absolute ${colorMode === 'light' ? '' : 'dropdown-menu-dark'}`, style: { right: 0, top: '100%', zIndex: 1000, minWidth: '250px' } }, 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' }, onClick: () => {
+                    onSwitch(tab.tabId);
+                    setShowTabDropdown(false);
+                } },
+                react_1.default.createElement("div", { className: "d-flex align-items-center" },
+                    tab.iconClassName && react_1.default.createElement("i", { className: `${tab.iconClassName} me-2` }),
+                    react_1.default.createElement("span", null, tab.title)),
+                tab.tabId !== "launcher" && (react_1.default.createElement("button", { className: "btn btn-sm p-0 ms-2", style: { width: '20px', height: '20px' }, onClick: (e) => {
+                        e.stopPropagation();
+                        onClose(tab.tabId);
+                    } },
+                    react_1.default.createElement("i", { className: "bi-x" }))))))))))),
+        showTabDropdown && (react_1.default.createElement("div", { className: "position-fixed w-100 h-100", style: { top: 0, left: 0, zIndex: 999 }, onClick: () => setShowTabDropdown(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',
+            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 && (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" })))));
+}
+function TabContent({ tab, isMobile, isActive }) {
+    // Only render content if this tab is active OR has been previously initialized
+    const shouldRender = isActive || tabs_state_1.initializedTabs.has(tab.tabId);
+    // Mark tab as initialized when it becomes active for the first time
+    react_1.default.useEffect(() => {
+        if (isActive) {
+            tabs_state_1.initializedTabs.add(tab.tabId);
+        }
+    }, [isActive, tab.tabId]);
+    if (!shouldRender) {
+        return null;
+    }
+    return react_1.default.createElement(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 });
+    }
+    // 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: {} }))));
+}, (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;
+});
+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('');
+    // 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('//', '/');
+            }
+        }
+        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);
+    const openApp = (appItem) => {
+        (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 }))));
+}
+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 }))))));
+}
+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("div", { className: "d-flex flex-column align-items-center text-center", style: {
+            cursor: 'pointer',
+            width: isMobile ? '80px' : '90px',
+            transition: 'all 0.15s ease'
+        }, title: appItem.name, onMouseEnter: (e) => {
+            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' // Keep primary blue for both themes
+                } })),
+        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)));
+}

package/dist/tabs-layout/tabs-state.d.ts

@@ -0,0 +1,26 @@
+import { IAppNav, IPackage } from "@peers-app/peers-sdk";
+export interface TabState {
+    tabId: string;
+    packageId?: string;
+    path: string;
+    title: string;
+    iconClassName?: string;
+}
+export declare const launcherApp: TabState;
+export declare const activeTabs: import("@peers-app/peers-sdk").PersistentVar<TabState[]>;
+export declare const activeTabId: import("@peers-app/peers-sdk").PersistentVar<string>;
+export declare const recentlyUsedApps: import("@peers-app/peers-sdk").PersistentVar<string[]>;
+export declare const initializedTabs: Set<string>;
+export declare function goToTabPath(path: string): void;
+export declare const handleMainPathChanged: (oldPath: string, newPath: string, setNewMainPath: ((path: string) => any)) => void;
+type AppInfo = {
+    navItem: IAppNav;
+    package: IPackage;
+};
+export declare function determineAppFromPath(path: string): AppInfo | undefined;
+export declare const updateActiveTabTitle: (newTitle: string) => void;
+export declare const openNewTab: (tab: Omit<TabState, "tabId">, forceNew?: boolean) => void;
+export declare const closeCurrentTab: () => void;
+export declare const switchToNextTab: () => void;
+export declare const switchToPreviousTab: () => void;
+export {};

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

@@ -0,0 +1,239 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.switchToPreviousTab = exports.switchToNextTab = exports.closeCurrentTab = exports.openNewTab = exports.updateActiveTabTitle = exports.handleMainPathChanged = exports.initializedTabs = exports.recentlyUsedApps = exports.activeTabId = exports.activeTabs = exports.launcherApp = void 0;
+exports.goToTabPath = goToTabPath;
+exports.determineAppFromPath = determineAppFromPath;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const globals_1 = require("../globals");
+const system_apps_1 = require("../system-apps");
+const routes_loader_1 = require("../ui-router/routes-loader");
+exports.launcherApp = {
+    tabId: 'launcher',
+    packageId: 'launcher',
+    path: '',
+    title: 'Apps',
+    iconClassName: 'bi-grid-3x3-gap',
+};
+// Global persistent variables for tab state
+exports.activeTabs = (0, peers_sdk_1.groupUserVar)('activeTabs', {
+    defaultValue: [exports.launcherApp],
+});
+exports.activeTabId = (0, peers_sdk_1.groupUserVar)('activeTabId', {
+    defaultValue: 'launcher',
+});
+exports.recentlyUsedApps = (0, peers_sdk_1.groupUserVar)('recentlyUsedApps', {
+    defaultValue: [],
+});
+exports.initializedTabs = new Set();
+function goToTabPath(path) {
+    const tab = (0, exports.activeTabs)().find(t => t.path === path);
+    if (tab) {
+        (0, exports.activeTabId)(tab.tabId);
+    }
+    else {
+        const appInfo = determineAppFromPath(path);
+        if (appInfo) {
+            (0, exports.openNewTab)({
+                path: path,
+                title: appInfo.navItem.displayName || appInfo.navItem.name,
+                packageId: appInfo.package.packageId,
+                iconClassName: appInfo.navItem.iconClassName
+            });
+        }
+        else {
+            // update current tab path if no app found
+            const currentTabId = (0, exports.activeTabId)();
+            const currentTabs = (0, exports.activeTabs)();
+            const currentTab = currentTabs.find(t => t.tabId === currentTabId);
+            if (currentTab && currentTab.path !== '') {
+                currentTab.path = path;
+                (0, exports.activeTabs)([...currentTabs]);
+            }
+            else {
+                (0, exports.openNewTab)({
+                    path: path,
+                    title: "New Tab",
+                    packageId: 'system-apps',
+                    iconClassName: 'bi-question-circle'
+                });
+            }
+        }
+    }
+}
+const handleMainPathChanged = (oldPath, newPath, setNewMainPath) => {
+    const oldPathPart = oldPath.toLowerCase().trim().split('?')[0];
+    const newPathPart = newPath.toLowerCase().trim().split('?')[0];
+    const currentTab = (0, exports.activeTabs)().find(t => t.tabId === (0, exports.activeTabId)());
+    if (oldPathPart === newPathPart || (currentTab && currentTab.path === newPath)) {
+        // nothing to do
+        setNewMainPath(newPath);
+        return;
+    }
+    const appInfo = determineAppFromPath(newPath);
+    if (appInfo && oldPath !== '') {
+        (0, exports.openNewTab)({
+            path: newPath,
+            title: appInfo.navItem.displayName || appInfo.navItem.name,
+            packageId: appInfo.package.packageId,
+            iconClassName: appInfo.navItem.iconClassName
+        });
+    }
+    else {
+        setNewMainPath(newPath);
+    }
+};
+exports.handleMainPathChanged = handleMainPathChanged;
+function determineAppFromPath(path) {
+    const launcherInfo = {
+        navItem: {
+            name: 'Apps',
+            navigationPath: '',
+            iconClassName: exports.launcherApp.iconClassName || 'bi-grid-3x3-gap',
+        },
+        package: system_apps_1.systemPackage
+    };
+    if (!path || path === '' || path === '/') {
+        return launcherInfo;
+    }
+    // Remove leading/trailing slashes and query params
+    path = path.toLowerCase().trim().split('?')[0];
+    if (path.startsWith('/')) {
+        path = path.substring(1);
+    }
+    const rootPath = path.split('/')[0];
+    const _allPackages = [system_apps_1.systemPackage, ...(0, routes_loader_1.allPackages)()]; // WARNING allPackages might not be loaded yet
+    const allAppInfos = _allPackages
+        .filter(pkg => (pkg.appNavs?.length ?? 0) > 0)
+        .flatMap(pkg => pkg.appNavs.map(navItem => ({ navItem, package: pkg })));
+    // Find the most relevant app based on path
+    for (const appInfo of allAppInfos) {
+        const navPath = appInfo.navItem.navigationPath || appInfo.navItem.name.toLowerCase();
+        // Check for exact match or path starting with nav path
+        if (rootPath === navPath || rootPath.startsWith(navPath + '/')) {
+            // Return the first matching app
+            return {
+                navItem: appInfo.navItem,
+                package: appInfo.package
+            };
+        }
+    }
+    // look for package-specific routes
+    // uri in format of "package-nav/{packageId}/{path}"
+    const packageNavPrefix = 'package-nav/';
+    if (path.startsWith(packageNavPrefix)) {
+        const parts = path.substring(packageNavPrefix.length).split('/');
+        if (parts.length > 0) {
+            const packageId = parts[0];
+            const pkg = _allPackages.find(p => p.packageId === packageId);
+            if (pkg) {
+                const subPath = parts.slice(1).join('/');
+                const navItem = pkg.appNavs?.find(n => n.navigationPath === subPath || n.name.toLowerCase() === subPath);
+                if (navItem) {
+                    return {
+                        navItem,
+                        package: pkg
+                    };
+                }
+            }
+        }
+    }
+    console.warn(`No app found for path: ${path}`);
+    return undefined;
+}
+// Utility function for detail screens to update the active tab's title
+const updateActiveTabTitle = (newTitle) => {
+    // TODO Fix this to use a more reliable update mechanism
+    //      using setTimeout to get around a race condition for setting title on new tabs
+    setTimeout(() => {
+        const currentTabs = (0, exports.activeTabs)();
+        const activeTab = currentTabs.find(t => t.tabId === (0, exports.activeTabId)());
+        if (activeTab) {
+            activeTab.title = newTitle;
+            (0, exports.activeTabs)([...currentTabs]);
+        }
+    }, 100);
+};
+exports.updateActiveTabTitle = updateActiveTabTitle;
+// Global function to open content in new tab
+const openNewTab = (tab, forceNew = false) => {
+    const newTab = {
+        ...tab,
+        tabId: (0, peers_sdk_1.newid)(),
+    };
+    const currentTabs = (0, exports.activeTabs)();
+    const existingTabIndex = currentTabs.findIndex(t => t.packageId === tab.packageId && t.path === tab.path);
+    if (existingTabIndex >= 0 && !forceNew) {
+        // Switch to existing tab
+        (0, exports.activeTabId)(currentTabs[existingTabIndex].tabId);
+    }
+    else {
+        // Always add new tab (for app launcher or when forceNew is true)
+        (0, exports.activeTabs)([...currentTabs, newTab]);
+        (0, exports.activeTabId)(newTab.tabId);
+    }
+    // Update recently used (track by path instead of packageId)
+    if (tab.path && tab.packageId !== 'launcher') {
+        const recent = (0, exports.recentlyUsedApps)();
+        const filtered = recent.filter(path => path !== tab.path);
+        (0, exports.recentlyUsedApps)([tab.path, ...filtered].slice(0, 8));
+    }
+};
+exports.openNewTab = openNewTab;
+// Close the current active tab (but not launcher)
+const closeCurrentTab = () => {
+    const currentTabs = (0, exports.activeTabs)();
+    const _activeTabId = (0, exports.activeTabId)();
+    const tabToClose = currentTabs.find(t => t.tabId === _activeTabId);
+    if (!tabToClose || tabToClose.tabId === "launcher")
+        return;
+    const newTabs = currentTabs.filter(t => t.tabId !== _activeTabId);
+    (0, exports.activeTabs)(newTabs);
+    exports.initializedTabs.delete(_activeTabId);
+    // If closing active tab, switch to previous tab
+    if (newTabs.length > 0) {
+        const newActiveTab = newTabs[newTabs.length - 1].tabId;
+        (0, exports.activeTabId)(newActiveTab);
+    }
+    else {
+        (0, exports.activeTabId)('launcher');
+    }
+};
+exports.closeCurrentTab = closeCurrentTab;
+// Navigate to next tab
+const switchToNextTab = () => {
+    const currentTabs = (0, exports.activeTabs)();
+    const activeTab = (0, exports.activeTabId)();
+    const currentIndex = currentTabs.findIndex(tab => tab.tabId === activeTab);
+    if (currentIndex === -1)
+        return;
+    const nextIndex = currentIndex === currentTabs.length - 1 ? 0 : currentIndex + 1;
+    (0, exports.activeTabId)(currentTabs[nextIndex].tabId);
+};
+exports.switchToNextTab = switchToNextTab;
+// Navigate to previous tab
+const switchToPreviousTab = () => {
+    const currentTabs = (0, exports.activeTabs)();
+    const activeTab = (0, exports.activeTabId)();
+    const currentIndex = currentTabs.findIndex(tab => tab.tabId === activeTab);
+    if (currentIndex === -1)
+        return;
+    const prevIndex = currentIndex === 0 ? currentTabs.length - 1 : currentIndex - 1;
+    (0, exports.activeTabId)(currentTabs[prevIndex].tabId);
+};
+exports.switchToPreviousTab = switchToPreviousTab;
+// Keyboard shortcuts are now handled by the command palette system
+exports.activeTabId.subscribe(newActiveTab => {
+    const currentTabs = (0, exports.activeTabs)();
+    const activeTab = currentTabs.find(t => t.tabId === newActiveTab);
+    if (!activeTab) {
+        console.warn('Active tab not found:', newActiveTab);
+        return;
+    }
+    // Update mainContentPath for the new active tab
+    if (activeTab.packageId !== 'launcher') {
+        (0, globals_1._mainContentPath)(activeTab.path);
+    }
+    else {
+        (0, globals_1._mainContentPath)(''); // Launcher or fallback
+    }
+});

package/dist/three-bar-layout/left-bar-content.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface IProps {
+    collapsed?: boolean;
+    toggleCollapsed: () => void;
+}
+export declare const LeftBarContent: (props: IProps) => React.JSX.Element;
+export {};