@peers-app/peers-ui 0.0.14

package/src/tabs-layout/tabs-state.ts

@@ -0,0 +1,269 @@
+import { groupUserVar, IAppNav, IPackage, newid } from "@peers-app/peers-sdk";
+import { _mainContentPath } from "../globals";
+import { systemPackage } from "../system-apps";
+import { allPackages } from "../ui-router/routes-loader";
+
+export interface TabState {
+  tabId: string;
+  packageId?: string; // 'launcher' for app launcher tab
+  path: string;
+  title: string;
+  iconClassName?: string;
+}
+
+export const launcherApp: TabState = {
+  tabId: 'launcher',
+  packageId: 'launcher',
+  path: '',
+  title: 'Apps',
+  iconClassName: 'bi-grid-3x3-gap',
+};
+
+// Global persistent variables for tab state
+export const activeTabs = groupUserVar<TabState[]>('activeTabs', {
+  defaultValue: [launcherApp],
+});
+
+export const activeTabId = groupUserVar<string>('activeTabId', {
+  defaultValue: 'launcher',
+});
+
+export const recentlyUsedApps = groupUserVar<string[]>('recentlyUsedApps', {
+  defaultValue: [],
+});
+
+export const initializedTabs = new Set<string>();
+
+export function goToTabPath(path: string) {
+  const tab = activeTabs().find(t => t.path === path);
+  if (tab) {
+    activeTabId(tab.tabId);
+  } else {
+    const appInfo = determineAppFromPath(path);
+    if (appInfo) {
+      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 = activeTabId();
+      const currentTabs = activeTabs();
+      const currentTab = currentTabs.find(t => t.tabId === currentTabId);
+      if (currentTab && currentTab.path !== '') {
+        currentTab.path = path;
+        activeTabs([...currentTabs]);
+      } else {
+        openNewTab({
+          path: path,
+          title: "New Tab",
+          packageId: 'system-apps',
+          iconClassName: 'bi-question-circle'
+        });
+      }
+    }
+  }
+}
+
+export const handleMainPathChanged = (oldPath: string, newPath: string, setNewMainPath: ((path: string) => any)) => {
+  const oldPathPart = oldPath.toLowerCase().trim().split('?')[0];
+  const newPathPart = newPath.toLowerCase().trim().split('?')[0];
+  const currentTab = activeTabs().find(t => t.tabId === activeTabId());
+  if (oldPathPart === newPathPart || (currentTab && currentTab.path === newPath)) {
+    // nothing to do
+    setNewMainPath(newPath);
+    return;
+  }
+
+  const appInfo = determineAppFromPath(newPath);
+  if (appInfo && oldPath !== '') {
+    openNewTab({
+      path: newPath,
+      title: appInfo.navItem.displayName || appInfo.navItem.name,
+      packageId: appInfo.package.packageId,
+      iconClassName: appInfo.navItem.iconClassName
+    });
+  } else {
+    setNewMainPath(newPath);
+  }
+
+}
+
+type AppInfo = { navItem: IAppNav, package: IPackage };
+
+export function determineAppFromPath(path: string): AppInfo | undefined {
+  const launcherInfo = {
+    navItem: {
+      name: 'Apps',
+      navigationPath: '',
+      iconClassName: launcherApp.iconClassName || 'bi-grid-3x3-gap',
+    },
+    package: 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 = [systemPackage, ...allPackages()]; // WARNING allPackages might not be loaded yet
+
+
+  const allAppInfos: AppInfo[] = _allPackages
+    .filter(pkg => (pkg.appNavs?.length ?? 0) > 0)
+    .flatMap(pkg =>
+      pkg.appNavs!.map(navItem => ({ navItem, package: pkg as IPackage }))
+    );
+
+  // 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
+export const updateActiveTabTitle = (newTitle: string) => {
+  // 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 = activeTabs();
+    const activeTab = currentTabs.find(t => t.tabId === activeTabId());
+    if (activeTab) {
+      activeTab.title = newTitle;
+      activeTabs([...currentTabs]);
+    }
+  }, 100);
+};
+
+// Global function to open content in new tab
+export const openNewTab = (tab: Omit<TabState, 'tabId'>, forceNew = false) => {
+  const newTab: TabState = {
+    ...tab,
+    tabId: newid(),
+  };
+
+  const currentTabs = activeTabs();
+  const existingTabIndex = currentTabs.findIndex(t =>
+    t.packageId === tab.packageId && t.path === tab.path
+  );
+
+  if (existingTabIndex >= 0 && !forceNew) {
+    // Switch to existing tab
+    activeTabId(currentTabs[existingTabIndex].tabId);
+  } else {
+    // Always add new tab (for app launcher or when forceNew is true)
+    activeTabs([...currentTabs, newTab]);
+    activeTabId(newTab.tabId);
+  }
+
+  // Update recently used (track by path instead of packageId)
+  if (tab.path && tab.packageId !== 'launcher') {
+    const recent = recentlyUsedApps();
+    const filtered = recent.filter(path => path !== tab.path);
+    recentlyUsedApps([tab.path, ...filtered].slice(0, 8));
+  }
+};
+
+// Close the current active tab (but not launcher)
+export const closeCurrentTab = () => {
+  const currentTabs = activeTabs();
+  const _activeTabId = activeTabId();
+  const tabToClose = currentTabs.find(t => t.tabId === _activeTabId);
+
+  if (!tabToClose || tabToClose.tabId === "launcher") return;
+
+  const newTabs = currentTabs.filter(t => t.tabId !== _activeTabId);
+  activeTabs(newTabs);
+
+  initializedTabs.delete(_activeTabId);
+  
+  // If closing active tab, switch to previous tab
+  if (newTabs.length > 0) {
+    const newActiveTab = newTabs[newTabs.length - 1].tabId;
+    activeTabId(newActiveTab);
+  } else {
+    activeTabId('launcher');
+  }
+};
+
+// Navigate to next tab
+export const switchToNextTab = () => {
+  const currentTabs = activeTabs();
+  const activeTab = activeTabId();
+  const currentIndex = currentTabs.findIndex(tab => tab.tabId === activeTab);
+
+  if (currentIndex === -1) return;
+
+  const nextIndex = currentIndex === currentTabs.length - 1 ? 0 : currentIndex + 1;
+  activeTabId(currentTabs[nextIndex].tabId);
+};
+
+// Navigate to previous tab
+export const switchToPreviousTab = () => {
+  const currentTabs = activeTabs();
+  const activeTab = activeTabId();
+  const currentIndex = currentTabs.findIndex(tab => tab.tabId === activeTab);
+
+  if (currentIndex === -1) return;
+
+  const prevIndex = currentIndex === 0 ? currentTabs.length - 1 : currentIndex - 1;
+  activeTabId(currentTabs[prevIndex].tabId);
+};
+
+// Keyboard shortcuts are now handled by the command palette system
+
+activeTabId.subscribe(newActiveTab => {
+  const currentTabs = 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') {
+    _mainContentPath(activeTab.path);
+  } else {
+    _mainContentPath(''); // Launcher or fallback
+  }
+});

package/src/three-bar-layout/left-bar-content.tsx

@@ -0,0 +1,202 @@
+import { IPackage, Packages } from "@peers-app/peers-sdk";
+import React from 'react';
+import { isDesktop, mainContentPath } from '../globals';
+import { useObservable, usePromise } from '../hooks';
+import * as color from '../screens/settings/color-mode-dropdown';
+
+interface IProps {
+  collapsed?: boolean
+  toggleCollapsed: () => void
+}
+
+let toggleCollapsed = () => { };
+
+export const LeftBarContent = (props: IProps) => {
+  toggleCollapsed = props.toggleCollapsed;
+  const { collapsed } = props;
+  const [colorMode] = useObservable(color.colorMode);
+  const collapseButtonClass = colorMode === 'light' ? 'btn-outline-dark' : 'btn-outline-secondary';
+
+  const [_isDesktop] = useObservable(isDesktop);
+  const [contentPath] = useObservable(mainContentPath);
+
+  const packagesWithNavItems = usePromise(async () => {
+    const packages = await Packages().list();
+    return packages.filter(pkg => pkg.appNavs?.length);
+  }, []);
+
+  const knowledgeSublinks = [
+    { text: "Frames", icon: "bi bi-window-dock", path: "knowledge-frames", left: 15 },
+    { text: "Predicates", icon: "bi bi-node-plus-fill", left: 15 },
+    { text: "Graph", icon: "bi bi-diagram-3-fill", left: 15 },
+  ]
+
+  const knowledgeSublinkActive = contentPath.startsWith('knowledge-') || knowledgeSublinks.find(ks => contentPath.startsWith(ks.path || ks.text.toLowerCase()));
+
+  return (
+    <div>
+      <div
+        className="p-2 d-flex align-items-center"
+        style={{ minWidth: '50px' }}
+      >
+        {!collapsed && (
+          <h5 className="m-0 flex-grow-1">Peers</h5>
+        )}
+        <button
+          className={`btn btn-sm ${collapseButtonClass}`}
+          onClick={toggleCollapsed}
+          style={{ flexShrink: 0 }}
+        >
+          <i
+            className={`bi ${collapsed
+              ? 'bi-chevron-double-right'
+              : 'bi-chevron-double-left'
+              }`}
+            title={collapsed ? 'Expand Sidebar' : 'Collapse Sidebar'}
+          ></i>
+        </button>
+      </div>
+      <MenuSection
+        collapsed={collapsed}
+        menuItems={[
+          { text: "Variables", icon: "bi bi-braces" },
+          { text: "Types", icon: "bi bi-code-square", path: "peer-types" },
+          { text: "Assistants", icon: "bi bi-person-fill-gear" },
+          { text: "Tools", icon: "bi bi-tools" },
+          { text: "Workflows", icon: "bi bi-database-fill-gear" },
+          { text: "Events", icon: "bi bi-lightning-charge-fill" },
+          { text: "Packages", icon: "bi bi-box-fill" },
+        ]}
+      />
+
+      <hr />
+      <MenuSection
+        collapsed={collapsed}
+        menuItems={[
+          { text: "Threads", icon: "bi bi-cpu", path: "shell" },
+          { text: `Knowledge ${knowledgeSublinkActive ? '' : '+'}`, icon: "bi bi-journal-bookmark-fill", path: "knowledge-values" },
+          ...(knowledgeSublinkActive && knowledgeSublinks || []),
+        ]}
+      />
+
+      {(packagesWithNavItems?.length ?? 0) > 0 && 
+        packagesWithNavItems?.map(p => <PackageNavItems key={p.packageId} pkg={p} collapsed={collapsed} />)
+      }
+
+    </div>
+  )
+}
+
+interface IMenuSectionProps {
+  collapsed?: boolean
+  menuItems: IMenuItemProps[]
+}
+function MenuSection(props: IMenuSectionProps) {
+  return (
+    <div className="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
+      {props.menuItems.map(mi => <MenuItem key={mi.text + mi.path} {...mi} collapsed={props.collapsed}></MenuItem>)}
+    </div>
+  );
+}
+
+
+interface IMenuItemProps {
+  text: string
+  path?: string
+  icon: string
+  className?: string
+  left?: number
+  collapsed?: boolean
+}
+
+function MenuItem(props: IMenuItemProps) {
+  const divRef = React.useRef<HTMLDivElement>(null);
+  useObservable(mainContentPath);
+  const link = props.path ?? props.text.replace(/\s/g, '-').toLowerCase();
+  const href = window.location.href.split('#')[1]?.trim() ?? '';
+  let isActive = href.split('/')[0] === link || href.startsWith(link);
+  if (link === 'shell' && !href) {
+    isActive = true;
+  }
+  let marginLeft = props.left || 0;
+  if (props.collapsed && marginLeft) {
+    marginLeft = 0;
+  }
+  const [_isDesktop] = useObservable(isDesktop);
+  const toolTip = props.collapsed ? props.text : '';
+
+  // useEffect(() => {
+  //   if (divRef.current && _isDesktop && props.collapsed) {
+  //     new Tooltip(divRef.current as HTMLElement);
+  //   }
+  // }, [divRef, divRef?.current, props.collapsed]);
+
+  return (
+    <div
+      key={`${props.text}-${props.path}-${props.collapsed}`}
+      ref={divRef}
+      className={`nav-link text-reset ${isActive && 'active' || ''} ${props.className || ''}`}
+      data-bs-toggle="tooltip" data-bs-title={props.text} data-bs-placement="right"
+      style={{ cursor: "pointer", marginLeft: `${marginLeft}px` }}
+      onClick={() => {
+        mainContentPath(link);
+        if (!_isDesktop) {
+          toggleCollapsed();
+        }
+      }}
+    >
+      <a
+        style={{ textDecoration: 'none', textWrap: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}
+      >
+        <i className={props.icon}></i>
+        {props.collapsed ? '' :
+          <>
+            &nbsp;
+            &nbsp;
+            {props.text}
+          </>
+        }
+      </a>
+    </div>
+  );
+}
+
+function PackageNavItems(props: { pkg: IPackage, collapsed?: boolean }) {
+  const pkg = props.pkg;
+  if (!pkg.appNavs || pkg.appNavs.length === 0) {
+    return null;
+  }
+
+  // if (pkg.appNavs?.length === 1 && pkg.appNavs[0].name === pkg.name) {
+  //   const iconClassName = pkg.appNavs[0].iconClassName || "bi bi-question-square";
+  //   // this package only has one nav item and it's named the same as the package so just show it as a top level item
+  //   return <MenuItem
+  //     text={pkg.name}
+  //     icon={iconClassName}
+  //   />
+  // }
+
+  return (
+    <>
+      {pkg.appNavs.length !== 1 || pkg.appNavs[0].name !== pkg.name && (
+        <label style={{ color: 'silver' }}>{pkg.name}</label>
+      )}
+      <MenuSection
+        collapsed={props.collapsed}
+        menuItems={
+          pkg.appNavs.map(ni => {
+            let path = `package-nav/${pkg.packageId}/${(ni.navigationPath ?? ni.name).replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()}`;
+            while (path.includes('//')) {
+              path = path.replace('//', '/');
+            }
+            return {
+              text: ni.name,
+              icon: ni.iconClassName || "bi bi-box-seam",
+              path,
+            }
+          })
+        }
+      />
+    </>
+  )
+}

package/src/three-bar-layout/right-bar-content.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { ThreadContainer } from '../components/messages/thread-view';
+import { useObservable } from '../hooks';
+import { colorMode } from '../screens/settings/color-mode-dropdown';
+
+
+
+export const RightBarContent = () => {
+  const [_colorMode] = useObservable(colorMode);
+  return (
+    <div 
+      className={`right-bar-content p-0 m-0 ${_colorMode === 'light' ? 'bg-white' : ''}`}
+      style={{ height: '100vh', overflowY: 'scroll' }}
+    >
+      <ThreadContainer closeThreadBtn={<span style={{ marginLeft: '40px'}}></span>} />
+    </div>
+  );
+};
+
+// // I liked this layout so leaving it here in case it's useful later
+// const TabsContainer = () => {
+//   const [activeTab, setActiveTab] = useState('threads');
+//   return (
+//     <div>
+//       {/* Tab Headers */}
+//       <ul className="nav nav-tabs">
+//         <li className="nav-item">
+//           <a
+//             href="#"
+//             className={`nav-link ${activeTab === 'threads' ? 'active' : ''}`}
+//             onClick={(e) => {
+//               e.preventDefault(); // Prevents page jump
+//               setActiveTab('threads');
+//             }}
+//           >
+//             Threads
+//           </a>
+//         </li>
+//         <li className="nav-item">
+//           <a
+//             href="#"
+//             className={`nav-link ${activeTab === 'notifications' ? 'active' : ''}`}
+//             onClick={(e) => {
+//               e.preventDefault();
+//               setActiveTab('notifications');
+//             }}
+//           >
+//             Notifications
+//           </a>
+//         </li>
+//       </ul>
+//       {/* Tab Content */}
+//       <div className="tab-content p-3">
+//         <div className={`tab-pane fade ${activeTab === 'threads' ? 'show active' : ''}`}>
+//           {/* Replace with your Threads content */}
+//           <h5>Threads</h5>
+//           <p>This is where your threads content goes.</p>
+//         </div>
+//         <div className={`tab-pane fade ${activeTab === 'notifications' ? 'show active' : ''}`}>
+//           {/* Replace with your Notifications content */}
+//           <h5>Notifications</h5>
+//           <p>This is where your notifications content goes.</p>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// }