@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/components/left-bar.tsx

@@ -1,322 +0,0 @@
-import { IPackage, Packages } from "@peers-app/peers-sdk";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { isDesktop, mainContentPath } from '../globals';
-import { useObservable, usePromise } from '../hooks';
-import { OffCanvas } from './off-canvas';
-// import { useObservable } from 'peers-ui';
-
-const offCanvasEffects = { hide: () => {} };
-
-const LEFT_BAR_WIDTH_KEY = 'leftBarWidth';
-const DEFAULT_LEFT_BAR_WIDTH = 300;
-
-function getStoredLeftBarWidth(): number {
-  const stored = localStorage.getItem(LEFT_BAR_WIDTH_KEY);
-  return stored ? parseInt(stored, 10) : DEFAULT_LEFT_BAR_WIDTH;
-}
-
-function setStoredLeftBarWidth(width: number) {
-  localStorage.setItem(LEFT_BAR_WIDTH_KEY, String(width));
-  document.documentElement.style.setProperty('--left-bar-width', `${width}px`);
-}
-
-// Set initial CSS variable on load
-setStoredLeftBarWidth(getStoredLeftBarWidth());
-
-export const LeftBar = () => {
-  const [_isDesktop] = useObservable(isDesktop);
-  const [width, setWidth] = useState(() => getStoredLeftBarWidth());
-  const isDragging = useRef(false);
-  const startX = useRef(0);
-  const startWidth = useRef(0);
-
-  const onMouseMove = useCallback((e: MouseEvent) => {
-    if (!isDragging.current) return;
-    const delta = e.clientX - startX.current;
-    const newWidth = Math.max(150, Math.min(600, startWidth.current + delta));
-    setWidth(newWidth);
-    setStoredLeftBarWidth(newWidth);
-  }, []);
-
-  const onMouseUp = useCallback(() => {
-    isDragging.current = false;
-    document.removeEventListener('mousemove', onMouseMove);
-    document.removeEventListener('mouseup', onMouseUp);
-    document.body.style.cursor = '';
-    document.body.style.userSelect = '';
-  }, [onMouseMove]);
-
-  const onMouseDown = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    isDragging.current = true;
-    startX.current = e.clientX;
-    startWidth.current = width;
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-    document.body.style.cursor = 'col-resize';
-    document.body.style.userSelect = 'none';
-  }, [width, onMouseMove, onMouseUp]);
-
-  useEffect(() => {
-    return () => {
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-    };
-  }, [onMouseMove, onMouseUp]);
-
-  // const [usersAndGroups, setUsersAndGroups] = useState<(IUser | IGroup)[]>([]);
-  
-  if (_isDesktop) {
-    return (
-      <div  
-        className='left-bar-desktop'
-        style={{ position: 'fixed', top: 0, left: 0, width, display: 'flex', flexDirection: 'row' }}
-      >
-        <LeftBarContent width={width} />
-        <div
-          onMouseDown={onMouseDown}
-          title="Drag to resize"
-          style={{
-            position: 'absolute',
-            top: 0,
-            right: '-3px',
-            width: '6px',
-            height: '100%',
-            cursor: 'col-resize',
-            zIndex: 200,
-            backgroundColor: 'transparent',
-          }}
-          onMouseEnter={e => { (e.target as HTMLDivElement).style.backgroundColor = 'rgba(128,128,128,0.4)'; }}
-          onMouseLeave={e => { (e.target as HTMLDivElement).style.backgroundColor = 'transparent'; }}
-        />
-      </div>
-    )
-  } else {
-    return (
-      <OffCanvas id="leftBar" position="left" keepOpen={_isDesktop} effects={offCanvasEffects}>
-        <LeftBarContent width={DEFAULT_LEFT_BAR_WIDTH} />
-      </OffCanvas>
-    )
-  }
-}
-
-export const LeftBarContent = ({ width }: { width?: number } = {}) => {
-  const [_isDesktop] = useObservable(isDesktop);
-  const barWidth = width ?? DEFAULT_LEFT_BAR_WIDTH;
-
-  const packagesWithNavItems = usePromise(async () => {
-    const packages = await Packages().list();
-    return packages.filter(pkg => pkg.appNavs?.length);
-  }, []);  
-
-  const containerClassName = `d-flex flex-column flex-shrink-0 p-2 text-white ` + (_isDesktop ? 'bg-dark-subtle' : 'bg-dark');
-
-  const content = (
-    <div className={containerClassName} style={{ width: barWidth, height: "calc(100vh - 25px)" }} >
-      <div className="clearfix" 
-        // style={{ borderBottom: 'solid', borderColor: '#606365', borderWidth: '1px' }}
-      >
-        <div className="dropdown" style={{ display: 'inline-block', width: '200px' }}>
-          <a
-            id="dropdownUser1"
-            data-bs-toggle="dropdown"
-            aria-expanded="false"
-            className="d-flex align-items-center text-white text-decoration-none"
-            href="#"
-            tabIndex={-1}
-          >
-            <span className="fs-4">Peers</span>
-            &nbsp;&nbsp;&nbsp;
-            <i className="bi bi-three-dots-vertical" style={{ fontSize: '12pt' }}></i>
-          </a>
-          <ul
-            className="dropdown-menu dropdown-menu-end dropdown-menu-dark text-small shadow"
-            style={{ border: '1px grey solid' }}
-            aria-labelledby="dropdownUser1"
-          >
-            {/* <li><a className="dropdown-item" href="#groups/create">New Group</a></li>
-            <li><hr className="dropdown-divider" /></li> */}
-            <li><a className="dropdown-item" href="#settings">Profile & Settings</a></li>
-          </ul>
-        </div>
-      </div>
-
-      <hr className='p-0' />
-
-      <MenuSection
-        menuItems={[
-          // { text: "Shell", icon: "bi bi-robot" },
-          // { text: "Threads", icon: "bi bi-terminal", path: "shell" },
-          // { text: "Journal", icon: "bi bi-journal-text" },
-          // { text: "Journal", icon: "bi bi-journal-bookmark" },
-          // { text: "Tasks", icon: "bi bi-list-task" },
-          // { text: "Calendar", icon: "bi bi-calendar-week", link: "calendar" },
-          // { text: "AI Models", icon: "bi bi-cpu" },
-          { 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" },
-          // { text: "Notes", icon: "bi bi-collection" },
-        ]}
-      />
-
-      <hr />
-
-      <MenuSection
-        menuItems={[
-          { text: "Threads", icon: "bi bi-cpu", path: "shell" },
-        ]}
-      />
-
-      {(packagesWithNavItems?.length ?? 0) > 0 && packagesWithNavItems?.map(p => <PackageNavItems key={p.packageId} pkg={p} />)}
-
-
-      {/* <hr />
-      <label style={{ color: 'silver' }}>Feeds</label>
-      <MenuSection
-        menuItems={[
-          { text: "Public", icon: "bi bi-globe" },
-          { text: "Trusted", icon: "bi bi-person-fill-lock" },
-        ]}
-      /> */}
-
-      {/* <hr /> */}
-      {/* <label style={{ color: 'silver' }}>Channels & Groups</label>
-      coming soon... */}
-
-
-      {/* {MenuSection({
-        menuItems: usersAndGroups.map(ug => ({
-          text: ug.name,
-          icon: "bi bi-people-fill",
-          link: `/#${ug.id}`,
-          onClick: () => offCanvasEffects.hide?.(),
-          id: ug.id
-        }))
-      })} */}
-
-
-    </div>
-  )
-  return content;
-}
-
-interface IMenuItemProps {
-  text: string
-  path?: string
-  icon: string
-  className?: string
-  left?: number
-  // onClick?: (...args: any[]) => any
-  // id?: string
-}
-
-function MenuItem(props: IMenuItemProps) {
-  useObservable(mainContentPath);
-  const link = props.path ?? props.text.replace(/\s/g, '-').toLowerCase();
-  const href = window.location.href.split('#')[1]?.trim() ?? '';
-  // let isActive = href.endsWith(link);
-  let isActive = href.split('/')[0] === link || href.startsWith(link);
-  if (link === 'shell' && !href) {
-    isActive = true;    
-  }
-  return (
-    <div
-      className={`nav-link text-white ${isActive && 'active' || ''} ${props.className || ''}`}
-      // onClick={() => window.location = (window.origin + props.link) as any}
-      style={{ cursor: "pointer", marginLeft: `${props.left || 0}px` }}
-      onClick={() => {
-        offCanvasEffects.hide?.();
-        mainContentPath(link)
-      }}
-    >
-      <a
-        className={`text-white`}
-        style={{ textDecoration: 'none' }}
-      // onClick={props.onClick}
-      >
-        <i className={props.icon}></i>
-        &nbsp;
-        {props.text}
-      </a>
-      {/* 
-      {isActive && props.id && (
-        <span className="dropdown float-end">
-          <span
-            id="ddGroupSettings" data-bs-toggle="dropdown" aria-expanded="false"
-            className="d-flex align-items-center text-white text-decoration-none"
-            onClick={evt => evt.stopPropagation()}
-          >
-            <i className="bi bi-three-dots-vertical"></i>
-          </span>
-          <ul 
-            className="dropdown-menu dropdown-menu-dark text-small shadow" 
-            aria-labelledby="ddGroupSettings" 
-            // onClick={props.onClick}
-          >
-            <li>
-              <a className="dropdown-item" href={`/#groups/${props.id}`}>
-                Details
-              </a>
-            </li>
-          </ul>
-        </span>
-      )} */}
-    </div>
-  );
-}
-
-interface IMenuSectionProps {
-  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}></MenuItem>)}
-
-    </div>
-  );
-}
-
-function PackageNavItems(props: { pkg: IPackage }) {
-  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
-        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/components/main-content-container.tsx

@@ -1,79 +0,0 @@
-import React, { useState } from 'react';
-import SplitPane from 'react-split-pane';
-import { openThreads, threadViewOpen } from '../globals';
-import { ThreadContainer, startNewThread } from './messages/thread-view';
-import { Router } from './router';
-import { useObservable } from '../hooks';
-
-const LEFT_BAR_WIDTH_KEY = 'leftBarWidth';
-const DEFAULT_LEFT_BAR_WIDTH = 300;
-
-export const MainContentContainer = () => {
-
-  const splitPositionGlobalName = 'mainContentContainerSplitPos';
-  let [splitPos, setSplitPos] = useState(localStorage.getItem(splitPositionGlobalName) || '800');
-  useObservable(threadViewOpen);
-  
-  if (!threadViewOpen()) {
-    return (
-      <>
-        <button
-          className="btn small m-0 p-0 thread-view-open-button"
-          onClick={() => {
-            const lastThread = openThreads()[0];
-            if (!lastThread) {
-              startNewThread();
-            } else {
-              threadViewOpen(true);
-            }
-          }}
-          style={{
-            position: 'fixed',
-            // top: '3px',
-            // right: '16px',
-            top: '-5px',
-            right: '6px',
-            zIndex: 1000,
-            // backgroundColor: 'white',  
-            backgroundColor: 'transparent'          
-          }}
-        >
-          +
-          {/* <i className="bi bi-box-arrow-down-left"></i> */}
-        </button>
-
-        <Router />
-      </>
-    )
-  }
-
-  return (
-    // @ts-ignore
-    <SplitPane
-      split="vertical"
-      defaultSize={parseInt(splitPos)}
-      onChange={(size) => {
-        localStorage.setItem(splitPositionGlobalName, String(size));
-        setSplitPos(String(size));
-      }}
-      style={{
-        position: 'unset',
-        height: `calc(100vh - 25px)`,
-      }}
-    >
-      <div>
-        <Router />
-      </div>
-      <div
-        className='thread-view'
-        style={{
-          height: `calc(100vh - 25px)`,
-          overflowY: 'scroll',
-        width: `calc(100vw - ${splitPos}px - ${parseInt(localStorage.getItem(LEFT_BAR_WIDTH_KEY) || String(DEFAULT_LEFT_BAR_WIDTH), 10)}px)`,
-        }}
-      >
-        <ThreadContainer />
-      </div>
-    </SplitPane>
-  )
-}

package/src/components/messages/thread-view.tsx

@@ -1,214 +0,0 @@
-import { Subscription } from "@peers-app/peers-sdk";
-import { useObservable } from "../../hooks";
-import React, { useEffect, useState } from 'react';
-import { newid, IMessage, Messages } from "@peers-app/peers-sdk";
-import { me, openThread, openThreads, threadViewOpen } from '../../globals';
-import { MessageCompose, getContentPersistenceValue } from './message-compose';
-import { MessageDisplay } from './message-display';
-import { ThreadMessageList } from './thread-message-list';
-import { MarkdownWithMentions } from '../markdown-with-mentions';
-
-function closeThread(thread: string | IMessage) {
-  if (typeof thread === 'object') {
-    // Clear the draft content - this triggers auto-delete via the pvar subscription
-    getContentPersistenceValue(thread.channelId, thread.messageId)('');
-    thread = thread.messageId;
-  }
-  openThreads(openThreads().filter(t => (typeof t === 'string' && t !== thread) || (typeof t === 'object' && t.messageId !== thread)));
-  if (openThreads().length === 0) {
-    startNewThread();
-  }
-}
-
-export function startNewThread() {
-  const threadParent = Messages().initRecord({
-    messageId: newid(),
-    userId: me.userId,
-    channelId: me.userId,
-    message: '',
-  });
-  openThread(threadParent);
-}
-
-export interface IThreadContainerProps {
-  closeThreadBtn?: React.ReactNode
-}
-
-export const ThreadContainer = (props: IThreadContainerProps) => {
-
-  const [[thread]] = useObservable(openThreads);
-
-  if (!thread) {
-    setTimeout(startNewThread, 0);
-    return false;
-  }
-
-  return (
-    <div className="thread-container">
-      <div 
-        className='sticky-top container-fluid border shadow-sm thread-header'
-        style={{ height: '50px' }}
-      >
-        <div className='d-flex'>
-          <div>
-            <button
-              className="btn fs-4"
-              onClick={startNewThread}
-            >
-              <i className="bi bi-plus-lg"></i>
-            </button>
-          </div>
-          <div className='flex-grow-1'>
-            <div className='pt-1'>
-              <OpenThreads />
-            </div>
-          </div>
-          <div>
-            <button className="btn fs-4" onClick={() => {
-              let currentThreadId = openThreads()[0];
-              closeThread(currentThreadId);
-            }}>
-              <i className="bi bi-x-lg"></i>
-            </button>
-
-            {props.closeThreadBtn === undefined && (              
-              <button className="btn fs-4" onClick={() => threadViewOpen(false)}>
-                <i className="bi bi-box-arrow-in-up-right"></i>
-              </button>
-            )}
-            {!!props.closeThreadBtn && props.closeThreadBtn}
-          </div>
-        </div>
-
-      </div>
-
-
-      {thread && typeof thread === 'string' &&
-        <ThreadMessageList
-          threadId={thread}
-        />
-      }
-
-      {thread && typeof thread !== 'string' &&
-        <NewThreadView
-          message={thread}
-        />
-      }
-    </div>
-  );
-};
-
-const NewThreadView = (props: { message: IMessage }) => {
-  const message = Messages().initDoc(props.message);
-
-  // TODO let the user set the channel
-  message.channelId = me.userId;
-
-  return (
-    <div>
-      <p className='p-2 fs-4 text-center'>
-        New Thread
-      </p>
-
-      <div className='p-2'>
-        <MessageCompose
-          channelId={message.channelId}
-          threadId={message.messageId}
-          onMessageSubmit={async (messageData) => {
-            message.message = messageData.message;
-            message.createdAt = new Date();
-            message.userId = me.userId;
-            await message.save();
-            const threadsWithoutDraft = openThreads().filter(t => !(typeof t === 'object' && t.messageId === message.messageId));
-            openThreads([message.messageId, ...threadsWithoutDraft]);
-            threadViewOpen(true);
-          }}
-        />
-      </div>
-    </div>
-  );
-}
-
-const OpenThreads = () => {
-  const [threads] = useObservable(openThreads);
-
-  return (
-    <div className="dropdown">
-      <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-        Open Threads
-      </button>
-      <ul className="dropdown-menu" style={{ maxHeight: '70vh', overflowY: 'auto', minWidth: '90%' }}>
-        {threads.map(thread => {
-          let threadId = '';
-          if (typeof thread === 'object') {
-            threadId = thread.messageId;
-          } else {
-            threadId = thread;
-          }
-          return (
-            <OpenThreadsMenuItem key={threadId} thread={thread} />
-          )
-        })}
-      </ul>
-    </div>
-  );
-}
-
-const OpenThreadsMenuItem = (props: { thread: string | IMessage }) => {
-  const { thread } = props;
-  const [menuText, setMenuText] = useState('loading...');
-  const [message, setMessage] = useState<IMessage | undefined>();
-  const isDraft = typeof thread !== 'string';
-
-
-  useEffect(() => {
-    let sub: Subscription | undefined = undefined;
-    let disposed = false;
-    (async () => {
-      if (typeof thread === 'string') {
-        const message = await Messages().get(thread);
-        if (disposed) return;
-        setMenuText(message?.message ?? `Thread ${thread} not found`);
-        setMessage(message);
-      } else {
-        setMessage(thread);
-        const pVar = getContentPersistenceValue(thread.channelId, thread.messageId);
-        await pVar.loadingPromise;
-        if (disposed) return;
-        setMenuText(pVar() || 'New Thread');
-        sub = pVar.subscribe(() => {
-          setMenuText(pVar() || 'New Thread')
-        });
-      }
-    })();
-    return () => {
-      sub?.dispose();
-    }
-  }, [thread]);
-
-  function _closeThread(evt: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
-    evt.preventDefault();
-    evt.stopPropagation();
-    closeThread(thread);
-  }
-
-  return (
-    <li>
-      <div className='border rounded m-2 mb-3' onClick={() => openThread(thread)}>
-        {!message && 'loading...'}
-        {message && !isDraft && (
-          <div style={{ position: 'relative' }}>
-            <button className='btn-close' style={{ position: 'absolute', right: 8, top: -10, fontSize: '.7em' }} onClick={_closeThread} />
-            <MessageDisplay message={message} isThreadParent />
-          </div>
-        )}
-        {message && isDraft &&
-          <div className='p-1'>
-            <MarkdownWithMentions content={'DRAFT - ' + menuText} />
-          </div>
-        }
-      </div>
-    </li>
-  )
-
-}

package/src/components/off-canvas.tsx

@@ -1,83 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { Offcanvas } from 'bootstrap';
-
-interface IProps {
-  id: string
-  children: any
-  position: 'left' | 'right' | 'top' | 'bottom'
-  keepOpen?: boolean
-  dataBackdrop?: boolean
-  effects?: { 
-    hide: (() => any)
-  }
-}
-
-// function removeExtraFadeFromOffcanvas(canvasId: string) {
-//   const offcanvas = document.getElementById(canvasId);
-//   offcanvas?.addEventListener('shown.bs.offcanvas', event => {
-//     let fade = document.getElementsByClassName('offcanvas-backdrop fade show');
-//     for (let i = 0; i < fade.length; i++) {
-//       if (fade.length > 1) {
-//         fade[i].remove();
-//       }
-//     }
-//   });
-// }
-
-// function preventMultipleOffcanvasFades(canvasId: string) {
-//   const offcanvas = document.getElementById(canvasId);
-//   offcanvas?.addEventListener('show.bs.offcanvas', function () {
-//     const backdrops = document.querySelectorAll('.offcanvas-backdrop');
-//     if (backdrops.length > 1) {
-//       for (let i = 1; i < backdrops.length; i++) {
-//         backdrops[i].remove();
-//       }
-//     }
-//   });
-// }
-
-export const OffCanvas = (props: IProps) => {
-  console.log('OffCanvas');
-  const { id, position, keepOpen, effects } = props;
-  
-  const computedProps: any = {};
-  if (keepOpen) {
-    computedProps['data-bs-scroll'] = "true";
-    computedProps['data-bs-backdrop'] = "false";
-  }
-
-  if (props.dataBackdrop !== undefined) {
-    computedProps['data-bs-backdrop'] = String(props.dataBackdrop);
-  }
-
-  const offCanvasPosition = position == 'left' ? 'start'
-    : position == 'right' ? 'end' : position;
-
-  const offCanvasRef = useRef();
-  if (effects) {
-    effects.hide = () => {
-      if (offCanvasRef.current) {
-        let offCanvas = Offcanvas.getInstance(offCanvasRef.current);
-        offCanvas?.hide();
-      }
-    }
-  }
-
-  useEffect(() => {
-    // removeExtraFadeFromOffcanvas(id);
-    // preventMultipleOffcanvasFades(id);
-  }, [offCanvasRef, offCanvasRef.current]);
-
-  return (
-    <div
-      id={id}
-      ref={offCanvasRef}
-      tabIndex={-1} 
-      className={`offcanvas offcanvas-${offCanvasPosition} ${keepOpen ? 'show' : ''}`} 
-      style={{ width: "300px", visibility: keepOpen ? 'visible': '' }}
-      {...computedProps}
-    >
-      {props.children}
-    </div>
-  )
-}