@peers-app/peers-ui 0.0.14

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

@@ -0,0 +1,672 @@
+import { getUserContext, IAppNav, sleep, Subscription } from "@peers-app/peers-sdk";
+import React, { useEffect, useState } from 'react';
+import { openCommandPalette } from '../command-palette/command-palette';
+import { CommandPaletteOverlay } from '../command-palette/command-palette-ui';
+import { GroupSwitcher } from '../components/group-switcher';
+import { Router } from '../components/router';
+import { isDesktop, loadGlobals, me } from '../globals';
+import { useObservable, usePromise } from '../hooks';
+import { colorMode, colorModePreference, ColorModePreference } from '../screens/settings/color-mode-dropdown';
+import { SetupUser } from '../screens/setup-user';
+import { systemPackage } from '../system-apps';
+import { allPackages, loadAllRoutes } from '../ui-router/routes-loader';
+import { UIRouter } from '../ui-router/ui-loader';
+import { activeTabId, activeTabs, goToTabPath, initializedTabs, recentlyUsedApps, TabState } from './tabs-state';
+
+
+export function TabsLayout(props: { colorMode?: ColorModePreference }) {
+  const loaded = usePromise(async () => {
+    await loadGlobals().then(() => console.log('Globals loaded'));
+    await loadAllRoutes().then(() => console.log('Routes loaded'));
+    // Wait for tab state to load from database
+    await Promise.all([
+      activeTabs.loadingPromise,
+      activeTabId.loadingPromise,
+      recentlyUsedApps.loadingPromise
+    ]);
+    return true;
+  });
+
+  if (!loaded) return false;
+  document.getElementById('appLoadingDiv')?.remove();
+
+  if (me.name === me.userId) {
+    return <SetupUser />
+  }
+
+  colorModePreference(props.colorMode);
+  return (
+    <>
+      <TabsLayoutInternal />
+      <CommandPaletteOverlay />
+    </>
+  );
+}
+
+function TabsLayoutInternal() {
+  const [_colorMode] = useObservable(colorMode);
+  const [tabs] = useObservable(activeTabs);
+  const [activeTab] = useObservable(activeTabId);
+  const [currentlyActiveGroupId, setCurrentlyActiveGroupId] = useState('');
+  
+  useEffect(() => {
+    let sub: Subscription;
+    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 sleep(100);
+        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 newTabs = currentTabs.filter(t => t.tabId !== tabId);
+    activeTabs(newTabs);
+
+    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';
+      activeTabId(newActiveTab);
+    }
+  };
+
+  const switchTab = (tabId: string) => {
+    activeTabId(tabId);
+  };
+
+  return (
+    <div 
+      key={currentlyActiveGroupId}
+      className="d-flex flex-column" style={{ height: '100vh', overflow: 'hidden' }}>
+      {/* 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} />
+            
+            {/* Search Button */}
+            <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>
+          </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' }}
+          >
+            <TabContent tab={tab} isMobile={isMobile} isActive={activeTab === tab.tabId} />
+          </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 [showTabDropdown, setShowTabDropdown] = 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" style={{ height: '36px' }}>
+      {/* Left Side - Group Switcher, Search & App Launcher Buttons */}
+      <div className="d-flex align-items-center gap-1">
+        <GroupSwitcher colorMode={colorMode} />
+        <button
+          className="btn btn-sm"
+          onClick={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';
+          }}
+        >
+          <i className="bi-search" />
+        </button>
+        <button
+          className={`btn btn-sm ${colorMode === 'light' ? 'btn-outline-primary' : 'btn-outline-light'}`}
+          onClick={() => onSwitch('launcher')}
+          style={{ minWidth: '36px' }}
+        >
+          <i className="bi-grid-3x3-gap" />
+        </button>
+      </div>
+
+      {/* Center - Current Tab Display */}
+      <div className="d-flex align-items-center flex-grow-1 justify-content-center">
+        {currentTab?.iconClassName && currentTab.packageId !== 'launcher' && (
+          <i className={`${currentTab.iconClassName} me-2`} />
+        )}
+        <span className="fw-medium text-truncate me-2 small">
+          {currentTab?.title || 'Apps'}
+        </span>
+      </div>
+
+      {/* Right Side - Tab Actions */}
+      <div className="d-flex align-items-center gap-2">
+        {/* Tab Switcher Dropdown (excluding launcher) */}
+        {nonLauncherTabs.length > 0 && (
+          <div className="dropdown">
+            <button
+              className={`btn btn-sm ${colorMode === 'light' ? 'btn-outline-dark' : 'btn-outline-light'}`}
+              onClick={() => setShowTabDropdown(!showTabDropdown)}
+            >
+              <i className="bi-list" />
+              <span className="ms-1">{nonLauncherTabs.length}</span>
+            </button>
+            {showTabDropdown && (
+              <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 => (
+                  <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);
+                    }}
+                  >
+                    <div className="d-flex align-items-center">
+                      {tab.iconClassName && <i className={`${tab.iconClassName} me-2`} />}
+                      <span>{tab.title}</span>
+                    </div>
+                    {tab.tabId !== "launcher" && (
+                      <button
+                        className="btn btn-sm p-0 ms-2"
+                        style={{ width: '20px', height: '20px' }}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onClose(tab.tabId);
+                        }}
+                      >
+                        <i className="bi-x" />
+                      </button>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Backdrop to close dropdown */}
+      {showTabDropdown && (
+        <div
+          className="position-fixed w-100 h-100"
+          style={{ top: 0, left: 0, zIndex: 999 }}
+          onClick={() => setShowTabDropdown(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
+          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;
+}
+
+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';
+
+  return (
+    <div className={`h-100 overflow-auto ${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 =>
+      pkg.appNavs!.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) => {
+    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
+              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 (
+    <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)}
+    >
+      {/* Icon Container */}
+      <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' // Keep primary blue for both themes
+          }}
+        />
+      </div>
+
+      {/* Title */}
+      <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>
+    </div>
+  );
+}