@peers-app/peers-ui 0.0.14

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

@@ -0,0 +1,297 @@
+import React, { useState, useEffect } from 'react';
+import { colorMode, colorModePreference, ColorModePreference } from '../screens/settings/color-mode-dropdown';
+import { Router } from '../components/router';
+import { useObservable, usePromise } from '../hooks';
+import { isDesktop, loadGlobals, me, windowWidth as windowWidthObs } from '../globals';
+import { loadAllRoutes } from '../ui-router/routes-loader';
+import { SetupUser } from '../screens/setup-user';
+import * as layoutVars from '../layout-vars';
+import { LeftBarContent } from './left-bar-content';
+import { RightBarContent } from './right-bar-content';
+
+
+export function ThreeBarLayout(props: { colorMode?: ColorModePreference }) {
+  const loaded = usePromise(async () => {
+    await loadGlobals().then(() => console.log('Globals loaded'));
+    await loadAllRoutes().then(() => console.log('Routes loaded'));
+    return true;
+  });
+  
+  if (!loaded) return false;
+  document.getElementById('appLoadingDiv')?.remove();
+
+  if (me.name === me.userId) {
+    return <SetupUser />
+  }
+
+  colorModePreference(props.colorMode);
+  // colorModePreference('auto');
+  return <_ThreeBarLayout />;
+}
+
+function _ThreeBarLayout() {
+
+  const [_colorMode] = useObservable(colorMode);
+  const sidebarColorClass = _colorMode === 'light' ? 'bg-dark-subtle' : 'bg-dark-subtle';
+  const collapseButtonClass = _colorMode === 'light' ? 'btn-outline-dark' : 'btn-outline-secondary';
+
+  const [windowWidth] = useObservable(windowWidthObs);
+  useObservable(isDesktop);
+  const isMobile = !isDesktop();
+
+  const [leftBarWidth, setLeftBarWidth] = useObservable(layoutVars.leftBarWidth);
+  const [rightBarWidth, setRightBarWidth] = useObservable(layoutVars.rightBarWidth);
+
+  const [leftBarCollapsed, setLeftBarCollapsed] = useObservable(layoutVars.leftBarCollapsed);
+  const [rightBarCollapsed, setRightBarCollapsed] = useObservable(layoutVars.rightBarCollapsed);
+
+  const [prevLeftWidth, setPrevLeftWidth] = useObservable(layoutVars.leftBarWidthPrev);
+  const [prevRightWidth, setPrevRightWidth] = useObservable(layoutVars.rightBarWidthPrev);
+
+  const [leftOffcanvasVisible, setLeftOffcanvasVisible] = useState(false);
+  const [rightOffcanvasVisible, setRightOffcanvasVisible] = useState(false);
+
+  const [isResizingLeft, setIsResizingLeft] = useState(false);
+  const [isResizingRight, setIsResizingRight] = useState(false);
+
+  // Mouse event handlers for resizing (desktop only).
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (isResizingLeft) {
+        const newWidth = e.clientX;
+        if (newWidth >= 200 && newWidth <= windowWidth - 80) {
+          setLeftBarWidth(newWidth);
+        }
+        // Prevent text selection while dragging.
+        e.preventDefault();
+      }
+      if (isResizingRight) {
+        const newWidth = window.innerWidth - e.clientX;
+        if (newWidth >= 200 && newWidth <= windowWidth - 80) {
+          setRightBarWidth(newWidth);
+        }
+        // Prevent text selection while dragging.
+        e.preventDefault();
+      }
+    };
+
+    const handleMouseUp = () => {
+      if (isResizingLeft) setIsResizingLeft(false);
+      if (isResizingRight) setIsResizingRight(false);
+      // Re-enable text selection once resizing is done.
+      document.body.style.userSelect = '';
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [isResizingLeft, isResizingRight, windowWidth]);
+
+  // Function to close both offcanvas panels.
+  const closeOffcanvas = () => {
+    setLeftOffcanvasVisible(false);
+    setRightOffcanvasVisible(false);
+  };
+
+  // Toggle function for collapsing/expanding the right sidebar (desktop only).
+  const toggleRightSidebarCollapse = () => {
+    if (!rightBarCollapsed) {
+      // Save the current width and collapse to 50px.
+      setPrevRightWidth(rightBarWidth);
+      setRightBarWidth(50);
+      setRightBarCollapsed(true);
+    } else {
+      // Restore the previous width.
+      setRightBarWidth(prevRightWidth);
+      setRightBarCollapsed(false);
+    }
+  };
+
+  // Toggle function for collapsing/expanding the left sidebar (desktop only).
+  const toggleLeftSidebarCollapse = () => {
+    if (!leftBarCollapsed) {
+      // Save the current width and collapse to 50px.
+      setPrevLeftWidth(leftBarWidth);
+      setLeftBarWidth(50);
+      setLeftBarCollapsed(true);
+    } else {
+      // Restore the previous width.
+      setLeftBarWidth(prevLeftWidth);
+      setLeftBarCollapsed(false);
+    }
+  };
+
+  return (
+    <>
+      <div className="d-flex" style={{ height: '100vh', overflow: 'hidden' }}>
+        {/* Left Sidebar (Desktop only) */}
+        {!isMobile && (
+          <div
+            className={`position-relative ${sidebarColorClass}`}
+            style={{
+              width: leftBarWidth,
+              transition: 'width 0.3s',
+            }}
+          >
+            {/* Sidebar Header with toggle button */}
+            <LeftBarContent collapsed={leftBarCollapsed} toggleCollapsed={toggleLeftSidebarCollapse} />
+            {/* <div className="p-2" hidden={leftBarCollapsed}>
+              <LeftBarExpandedContent />;
+            </div> */}
+            {/* Resizing handle for left sidebar: render only when not collapsed */}
+            {!leftBarCollapsed && (
+              <div
+                className="position-absolute top-0 end-0 h-100"
+                style={{
+                  width: '5px',
+                  cursor: 'col-resize',
+                  backgroundColor: 'rgba(0,0,0,0.2)',
+                }}
+                onMouseDown={(e) => {
+                  setIsResizingLeft(true);
+                  e.preventDefault();
+                  document.body.style.userSelect = 'none';
+                }}
+              ></div>
+            )}
+          </div>
+        )}
+
+        {/* Main Content Area with Top Bar */}
+        <div
+          className="flex-grow-1 d-flex flex-column position-relative"
+          style={{ minWidth: 0, width: `${windowWidth - leftBarWidth - rightBarWidth}px` }} // prevents content inside from changing the width
+        >
+          {/* Top Bar */}
+          <div className="d-flex align-items-center justify-content-between border-bottom p-2">
+            {isMobile && (
+              <button
+                className={`btn btn-sm ${collapseButtonClass}`}
+                onClick={() => setLeftOffcanvasVisible(true)}
+              >
+                <i
+                  className={`bi bi-chevron-double-right`}
+                  title={rightBarCollapsed ? 'Expand Left Sidebar' : 'Collapse Left Sidebar'}
+                ></i>
+              </button>
+            )}
+
+            <h4 className="m-0 mx-auto">
+              tabs up here
+            </h4>
+            
+          </div>
+          {/* Main content below the top bar */}
+          <div 
+            className="flex-grow-1 overflow-auto" 
+            style={{ maxHeight: 'calc(100vh - 160px)' }}
+          >
+            <Router />
+          </div>
+        </div>
+
+        {/* Right Sidebar open/close toggle */}
+        <button
+          className={`btn btn-sm ${collapseButtonClass} float-end`}
+          onClick={() => {
+            if (isMobile) setRightOffcanvasVisible(!rightOffcanvasVisible);
+            else toggleRightSidebarCollapse();
+          }}
+          style={{ zIndex: 20000, position: 'absolute', 
+            top: '8px', right: '8px', //marginLeft: '20px',
+            ...(!rightBarCollapsed || rightOffcanvasVisible ? { top: '10px', right: '20px' } : {}),
+          }}
+        >
+          <i
+            className={`bi ${!rightBarCollapsed || rightOffcanvasVisible ? 'bi-chevron-double-right' : 'bi-chevron-double-left'}`}
+            title={rightBarCollapsed ? 'Expand Right Sidebar' : 'Collapse Right Sidebar'}
+          ></i>
+        </button>
+
+        {/* Desktop Right Sidebar */}
+        {!isMobile && (
+          <div
+            className={`position-relative ${sidebarColorClass}`}
+            style={{
+              width: rightBarWidth,
+              transition: 'width 0.3s',
+            }}
+          >
+            <div className="ps-1" hidden={rightBarCollapsed}>
+              <RightBarContent />
+            </div>
+            {/* Resizing handle for right sidebar: render only when not collapsed */}
+            {!rightBarCollapsed && (
+              <div
+                className="position-absolute top-0 start-0 h-100"
+                style={{
+                  width: '5px',
+                  cursor: 'col-resize',
+                  backgroundColor: 'rgba(0,0,0,0.2)',
+                }}
+                onMouseDown={(e) => {
+                  setIsResizingRight(true);
+                  e.preventDefault();
+                  document.body.style.userSelect = 'none';
+                }}
+              ></div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Backdrop for Offcanvas */}
+      {(leftOffcanvasVisible || rightOffcanvasVisible) && (
+        <div
+          className="offcanvas-backdrop fade show"
+          onClick={closeOffcanvas}
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            zIndex: 1040,
+          }}
+        ></div>
+      )}
+
+      {/* Mobile Offcanvas Components */}
+      {isMobile && (
+        <>
+          {/* Left Offcanvas */}
+          <div
+            className={`offcanvas offcanvas-start ${leftOffcanvasVisible ? 'show' : ''
+              } ${sidebarColorClass}`}
+            tabIndex={-1}
+            style={{
+              // visibility: leftOffcanvasVisible ? 'visible' : 'hidden',
+              width: (windowWidth < 400 ? windowWidth - 50 : 300) + 'px',
+              zIndex: 1050,
+            }}
+          >
+            <LeftBarContent collapsed={leftBarCollapsed && !isMobile} toggleCollapsed={() => setLeftOffcanvasVisible(false)} />
+          </div>
+
+          {/* Right Offcanvas */}
+          <div
+            className={`offcanvas offcanvas-end ${rightOffcanvasVisible ? 'show' : ''
+              } ${sidebarColorClass}`}
+            tabIndex={-1}
+            style={{
+              visibility: rightOffcanvasVisible ? 'visible' : 'hidden',
+              width: '100%',
+              zIndex: 1050,
+            }}
+          >
+            <RightBarContent />
+          </div>
+        </>
+      )}
+    </>
+  );
+}

package/src/ui-defaults/index.ts

@@ -0,0 +1,3 @@
+
+import './notes-editor'
+import './list-screen'

package/src/ui-defaults/list-screen.tsx

@@ -0,0 +1,92 @@
+import { FieldType, newid, getAllTables, getIconClassName } from "@peers-app/peers-sdk";
+import React from "react";
+import { z } from "zod";
+import { ListScreen } from "../components/list-screen";
+import { mainContentPath } from "../globals";
+import { registerInternalPeersUI } from "../ui-router/ui-loader";
+
+const propsSchema = z.object({
+  // items: zodAnyObject.array().describe('Items to display in the list'),
+});
+
+type IProps = z.infer<typeof propsSchema>;
+
+export const DefaultListScreen = (props: IProps) => {
+  const path = mainContentPath().toLowerCase().trim().split('?')[0].split('#').pop()?.split('/')[0] || '';
+  const fuzzyTableName = ({
+    variables: 'persistent_vars',
+    "events": 'peer_event_types',
+  }[path] || path).replace(/[_-]/g, '').trim();
+  
+  const allTables = getAllTables();
+  const tableName = Object.keys(allTables).find(t => t.toLowerCase().replace(/[_-]/g, '').trim() === fuzzyTableName);
+  const table = allTables[tableName || ''];
+  if (!table) {
+    return (
+      <div className="m-4">
+        Table not found for path: "{path}"
+      </div>
+    );
+  }
+  const idField = table.metaData.fields.find(f => f.name === table.metaData.primaryKeyName);
+  if (!idField) {
+    throw new Error('No primary key field found for table');
+  }
+  const nameField = table.metaData.fields.find(f => f.name === 'name') ||
+    table.metaData.fields.find(f => f.name === 'title') ||
+    table.metaData.fields.find(f => f.type === FieldType.string);
+  if (!nameField) {
+    throw new Error('No name field found to create new record with');
+  }
+
+  return (
+    <ListScreen
+      key={path}
+      {...{
+        table,
+        sortBy: [`-${idField.name}`],
+        newRecord: async (text: string) => {
+          text = text.trim().replace(/\s+/g, '_');
+          let item = table.initRecord({
+            [idField.name]: newid(),
+            [nameField?.name]: text,        
+    
+          })
+          item = await table.insert(item);
+          mainContentPath(`${path}/${item[idField.name]}`);
+          return item;
+        },
+        renderItem: (item: Record<string, any>) => {
+          return (
+            <div
+              key={item[idField.name]}
+              className='container-fluid pb-4'
+            >
+              <i className={getIconClassName(table)}></i>&nbsp;
+              <a href={`#${path}/${item[idField.name]}`}>
+                {item.name || '<empty-name>'}
+              </a>
+              <div style={{ paddingLeft: '20px' }}>
+                {/* <MarkdownWithMentions content={item.description || ''} /> */}
+              </div>
+            </div>
+          )
+        },
+      }}
+    />
+  );
+}
+
+registerInternalPeersUI({
+  peersUIId: '00m5fql0x5v48vyrk5bllzdrr',
+  component: DefaultListScreen,
+  routes: [
+    {
+      // KnowledgeValue with PeerType: Note
+      isMatch: (props, context) => context.path.split('/').length === 1,
+      uiEditMode: 'view',
+      uiCategory: 'screen',
+      uiSubcategory: 'list',
+    }
+  ]
+});

package/src/ui-defaults/notes-editor.tsx

@@ -0,0 +1,51 @@
+import { computed, IDoc, IKnowledgeValue, knowledgeValueSchema, Observable } from "@peers-app/peers-sdk";
+import React from "react";
+import { z } from "zod";
+import { MarkdownEditorInline } from "../components/markdown-editor/editor-inline";
+import { registerInternalPeersUI } from "../ui-router/ui-loader";
+
+interface IProps {
+  markdown: Observable<string>,
+}
+
+export const FullScreenMarkdownEditor = (props: IProps) => {
+  return (
+    <MarkdownEditorInline
+      value={props.markdown}
+      maxHeight={'calc(100vh - 160px)'}
+      autoFocus
+    />
+  )
+}
+
+registerInternalPeersUI({
+  peersUIId: '00m4rof6uwka5kfi6t7rav8t3',
+  component: (props: { knowledgeValue: IDoc<IKnowledgeValue> }) => {
+    const doc = props.knowledgeValue;
+    const markdown = computed({
+      read: () => doc.value?.body || '',
+      write: (value: string) => {
+        doc.value.body = value;
+        doc.qs.value.notifySubscribers();
+        doc.q(doc.q() + 1);
+      }
+    })
+    return (
+      <FullScreenMarkdownEditor
+        key={doc.knowledgeValueId}
+        markdown={markdown as any}
+      />
+    );
+  },
+  propsSchema: z.object({
+    knowledgeValue: knowledgeValueSchema as any, // TODO fix this
+  }),
+  routes: [
+    {
+      // KnowledgeValue with PeerType: Note
+      isMatch: (props, context) => props.knowledgeValue?.peerTypeId === '00m3g0ntcop3mrh6ynuzgekiy',
+      uiEditMode: 'edit',
+      uiCategory: 'details',
+    }
+  ]
+});

package/src/ui-router/routes-loader.ts

@@ -0,0 +1,98 @@
+import { debounceByArgs, IPackage, IPeersPackageRoutes, observable, Packages, rpcServerCalls } from "@peers-app/peers-sdk";
+import "../ui-defaults";
+
+export const allPackages = observable<IPackage[]>([]);
+export const allRoutesLoaded = observable(false);
+
+Packages().dataChanged.subscribe(async evt => {
+  if (!allRoutesLoaded()) return;
+  const _allPackages = allPackages();
+  if (evt.op === 'insert') {
+    _allPackages.push(evt.dataObject);
+  } else if (evt.op === 'delete') {
+    let idx = allPackages().findIndex(p => p.packageId === evt.dataObject.packageId);
+    if (idx >= 0) {
+      _allPackages.splice(idx, 1);
+    }
+  } else {
+    let idx = allPackages().findIndex(p => p.packageId === evt.dataObject.packageId);
+    if (idx >= 0) {
+      _allPackages[idx] = evt.dataObject;
+    }
+  }
+  allPackages([..._allPackages]);
+});
+
+export const loadAllRoutes = async () => {
+  if (allRoutesLoaded()) return;
+  // Filter packages that have UI bundles (routesBundleFileId or uiBundleFileId)
+  let packagesWithUI = await Packages().list({
+    disabled: { $ne: true },
+    routesBundleFileId: { $exists: true },
+  });
+  allPackages(packagesWithUI);
+  await Promise.all(
+    packagesWithUI.map(pkg => loadRoutesBundle(pkg))
+  );
+  allRoutesLoaded(true);
+  return true;
+}
+
+const routeLoadingPromises: Record<string, Promise<any>> = {};
+function loadRoutesBundle(pkg: IPackage, forceRefresh?: boolean): Promise<any> {
+  // Dynamically import the bundle
+  let importPromise: Promise<any> = routeLoadingPromises[pkg.packageId];
+  if (!importPromise || forceRefresh) {
+    console.log(`loading routes bundle for ${pkg.name}`);
+    // just importing the module (running it) should be registering all of the package UIs with the Peers App runtime
+
+    importPromise = (async () => {
+      try {
+        while (!(window as any).registerPeersUIRoute) {
+          console.log(`waiting for registerPeersUIRoute to be defined on the window object`);
+          await new Promise((resolve) => setTimeout(resolve, 20));
+        }
+        let bundleCode = '';
+        if (pkg.routesBundleFileId) {
+          bundleCode = await rpcServerCalls.getFileContents(pkg.routesBundleFileId);
+        }
+        if (bundleCode) {
+          const exportRoutes = (peerRoutes: IPeersPackageRoutes) => {
+            peerRoutes.routes.forEach(route => {
+              // TODO maybe add package that this came from
+              (window as any).registerPeersUIRoute(route);
+            });
+          }
+
+          const bundleFunction = new Function('exportRoutes', bundleCode);
+          bundleFunction(exportRoutes);
+
+          return {};
+        } else {
+          console.warn(`Routes bundle file not found for ${pkg.name} (fileId: ${pkg.routesBundleFileId})`);
+        }
+        return null;
+      } catch (err) {
+        console.error(`Error while loading routes bundle for ${pkg.name}`, err);
+        return null;
+      }
+    })();
+
+    routeLoadingPromises[pkg.packageId] = importPromise;
+  }
+  return importPromise;
+}
+
+const reloadPackage = debounceByArgs(async (packageId: string) => {
+  const pkg = await Packages().get(packageId);
+  if (pkg) {
+    await loadRoutesBundle(pkg, true);
+  }
+}, 200)
+
+Packages().dataChanged.subscribe(evt => {
+  const pkg = evt.dataObject;
+  const loadingPromise = routeLoadingPromises[pkg.packageId];
+  if (!loadingPromise) return;
+  reloadPackage(pkg.packageId);
+})