@peers-app/peers-ui 0.0.14

package/src/components/typeahead.tsx

@@ -0,0 +1,359 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+// CSS for hover effects that work with both light and dark themes
+const typeaheadStyles = `
+  .typeahead-item:not(.bg-primary):hover {
+    background-color: var(--bs-secondary-bg) !important;
+  }
+  
+  [data-bs-theme="dark"] .typeahead-item:not(.bg-primary):hover {
+    background-color: var(--bs-dark) !important;
+  }
+
+  .typeahead-input-container {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    min-height: 38px;
+    border: 1px solid var(--bs-border-color);
+    border-radius: 0.375rem;
+    background-color: var(--bs-body-bg);
+    padding: 4px 8px;
+    gap: 4px;
+  }
+
+  .typeahead-input-container:focus-within {
+    border-color: #86b7fe;
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+  }
+
+  .typeahead-input {
+    border: none;
+    outline: none;
+    background: transparent;
+    flex: 1;
+    min-width: 120px;
+    height: 30px;
+    font-size: 1rem;
+    color: var(--bs-body-color);
+  }
+
+  .typeahead-input::placeholder {
+    color: var(--bs-secondary-color);
+  }
+
+  .typeahead-badge {
+    display: inline-flex;
+    align-items: center;
+    font-size: 0.8rem;
+    padding: 2px 8px;
+    margin: 1px;
+    white-space: nowrap;
+  }
+`;
+
+export interface TypeaheadItem {
+  id: string;
+  [key: string]: any;
+}
+
+interface TypeaheadProps<T extends TypeaheadItem> {
+  placeholder?: string;
+  searchFn: (query: string) => Promise<T[]>;
+  onSelectionChange: (selectedItems: T[]) => void;
+  renderItem: (item: T, isSelected: boolean) => React.ReactNode;
+  renderBadge?: (item: T) => React.ReactNode;
+  selectedItems?: T[];
+  multiSelect?: boolean;
+  maxSelections?: number;
+  className?: string;
+  disabled?: boolean;
+  minSearchLength?: number;
+  debounceMs?: number;
+  maxResults?: number;
+}
+
+export function Typeahead<T extends TypeaheadItem>(props: TypeaheadProps<T>) {
+  const {
+    placeholder = "Search...",
+    searchFn,
+    onSelectionChange,
+    renderItem,
+    renderBadge,
+    selectedItems = [],
+    multiSelect = false,
+    maxSelections,
+    className = "form-control",
+    disabled = false,
+    minSearchLength = 1,
+    debounceMs = 300,
+    maxResults = 10
+  } = props;
+
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<T[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const resultsRef = useRef<HTMLDivElement>(null);
+  const debounceRef = useRef<NodeJS.Timeout>();
+
+  // Inject styles once
+  useEffect(() => {
+    const styleId = 'typeahead-styles';
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement('style');
+      style.id = styleId;
+      style.textContent = typeaheadStyles;
+      document.head.appendChild(style);
+    }
+  }, []);
+
+  // Debounced search
+  useEffect(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
+    if (query.length >= minSearchLength) {
+      debounceRef.current = setTimeout(async () => {
+        setIsLoading(true);
+        try {
+          const searchResults = await searchFn(query);
+          // Filter out already selected items
+          const selectedIds = selectedItems.map(item => item.id);
+          const filteredResults = searchResults.filter(item => !selectedIds.includes(item.id));
+          setResults(filteredResults.slice(0, maxResults));
+          setIsOpen(filteredResults.length > 0);
+          setSelectedIndex(-1);
+        } catch (error) {
+          console.error('Search error:', error);
+          setResults([]);
+        } finally {
+          setIsLoading(false);
+        }
+      }, debounceMs);
+    } else {
+      setResults([]);
+      setIsOpen(false);
+      setSelectedIndex(-1);
+    }
+
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, [query, searchFn, minSearchLength, debounceMs, maxResults, selectedItems]);
+
+  // Click outside to close
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        setSelectedIndex(-1);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    // Handle backspace to remove last selected item when input is empty
+    if (e.key === 'Backspace' && query === '' && selectedItems.length > 0) {
+      e.preventDefault();
+      const lastItem = selectedItems[selectedItems.length - 1];
+      handleRemove(lastItem);
+      return;
+    }
+
+    // Handle tab to auto-select highlighted result (or first result if none highlighted)
+    if (e.key === 'Tab' && isOpen && results.length > 0) {
+      e.preventDefault();
+      const indexToSelect = selectedIndex >= 0 ? selectedIndex : 0;
+      handleSelect(results[indexToSelect]);
+      return;
+    }
+
+    if (!isOpen || results.length === 0) return;
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setSelectedIndex(prev => 
+          prev < results.length - 1 ? prev + 1 : 0
+        );
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setSelectedIndex(prev => 
+          prev > 0 ? prev - 1 : results.length - 1
+        );
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (selectedIndex >= 0 && selectedIndex < results.length) {
+          handleSelect(results[selectedIndex]);
+        }
+        break;
+      case 'Escape':
+        e.preventDefault();
+        setIsOpen(false);
+        setSelectedIndex(-1);
+        inputRef.current?.blur();
+        break;
+    }
+  };
+
+  const handleSelect = (item: T) => {
+    if (maxSelections && selectedItems.length >= maxSelections) {
+      return; // Don't allow selection beyond max
+    }
+
+    let newSelectedItems: T[];
+    if (multiSelect) {
+      // Add to existing selections
+      newSelectedItems = [...selectedItems, item];
+    } else {
+      // Replace existing selection
+      newSelectedItems = [item];
+    }
+    
+    onSelectionChange(newSelectedItems);
+    setQuery('');
+    setResults([]);
+    setIsOpen(false);
+    setSelectedIndex(-1);
+    inputRef.current?.focus();
+  };
+
+  const handleRemove = (itemToRemove: T) => {
+    const newSelectedItems = selectedItems.filter(item => item.id !== itemToRemove.id);
+    onSelectionChange(newSelectedItems);
+    inputRef.current?.focus();
+  };
+
+  const defaultRenderBadge = (item: T) => {
+    // Extract display text - try common properties
+    const displayText = (item as any).name || (item as any).title || (item as any).label || item.id;
+    return displayText;
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(e.target.value);
+  };
+
+  const handleInputFocus = () => {
+    if (results.length > 0) {
+      setIsOpen(true);
+    }
+  };
+
+  return (
+    <div ref={containerRef} className="position-relative">
+      {/* Input container with badges inside */}
+      <div 
+        className="typeahead-input-container"
+        onClick={() => inputRef.current?.focus()}
+      >
+        {/* Selected Items as Badges inside input */}
+        {selectedItems.map((item) => (
+          <div
+            key={item.id}
+            className="badge bg-primary typeahead-badge d-flex align-items-center position-relative pe-4"
+          >
+            <span>{renderBadge ? renderBadge(item) : defaultRenderBadge(item)}</span>
+            <button
+              type="button"
+              className="btn-close btn-close-white position-absolute"
+              style={{
+                right: '2px',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                fontSize: '0.5rem',
+                width: '10px',
+                height: '10px'
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                handleRemove(item);
+              }}
+              disabled={disabled}
+              aria-label="Remove"
+            />
+          </div>
+        ))}
+
+        {/* Input field */}
+        <input
+          ref={inputRef}
+          type="text"
+          className="typeahead-input"
+          placeholder={selectedItems.length > 0 && !multiSelect ? "Selection made" : placeholder}
+          value={query}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          onFocus={handleInputFocus}
+          disabled={disabled || (!multiSelect && selectedItems.length > 0)}
+        />
+
+        {/* Loading indicator */}
+        {isLoading && (
+          <div className="position-absolute" style={{
+            right: '8px',
+            top: '50%',
+            transform: 'translateY(-50%)'
+          }}>
+            <div className="spinner-border spinner-border-sm text-secondary" role="status">
+              <span className="visually-hidden">Loading...</span>
+            </div>
+          </div>
+        )}
+      </div>
+      
+      {isOpen && results.length > 0 && (
+        <div 
+          ref={resultsRef}
+          className="position-absolute w-100 bg-body border border-top-0 rounded-bottom shadow-lg"
+          style={{ 
+            zIndex: 1000,
+            maxHeight: '300px',
+            overflowY: 'auto'
+          }}
+        >
+          {results.map((item, index) => (
+            <div
+              key={item.id}
+              className={`px-3 py-2 border-bottom typeahead-item ${
+                index === selectedIndex 
+                  ? 'bg-primary text-white' 
+                  : 'bg-body text-body'
+              }`}
+              style={{ 
+                cursor: 'pointer'
+              }}
+              onClick={() => handleSelect(item)}
+              onMouseEnter={() => setSelectedIndex(index)}
+            >
+              {renderItem(item, index === selectedIndex)}
+            </div>
+          ))}
+        </div>
+      )}
+      
+      {isOpen && query.length >= minSearchLength && results.length === 0 && !isLoading && (
+        <div 
+          className="position-absolute w-100 bg-body border border-top-0 rounded-bottom shadow-lg px-3 py-2 text-muted"
+          style={{ zIndex: 1000 }}
+        >
+          No results found
+        </div>
+      )}
+    </div>
+  );
+}

package/src/globals.tsx

@@ -0,0 +1,162 @@
+import { Groups, IGroup, IMessage, IUser, Messages, computed, getMe, groupUserVar, observable, reloadPackagesOnPageRefresh, rpcClientCalls, rpcServerCalls, sleep } from "@peers-app/peers-sdk";
+import { handleMainPathChanged, openNewTab } from "./tabs-layout/tabs-state";
+import { stripMentions } from "./utils";
+
+export const packageReloaded = observable(0);
+
+export const _mainContentPath = groupUserVar('mainContentPath', { defaultValue: '' });
+
+export const mainContentPath = computed<string>({
+  read: () => {
+    return _mainContentPath();
+  },
+  write: (newPath) => {
+    const oldPath = _mainContentPath();
+    if (newPath === oldPath) return;
+    // _mainContentPath(newPath);
+    handleMainPathChanged(oldPath, newPath, _mainContentPath);
+  },
+});
+
+export const queryParams = computed<{ [key: string]: string }>({
+  read: () => {
+    const queryStr = mainContentPath()?.split('?')[1] || '';
+    const params = new URLSearchParams(queryStr);
+    const obj: { [key: string]: string } = {};
+    for (const [key, value] of params.entries()) {
+      obj[key] = value;
+    }
+    return obj
+  },
+  write: (value: { [key: string]: string }) => {
+    const queryStr = mainContentPath().split('?')[1] || '';
+    const params = new URLSearchParams(queryStr);
+    for (const key in value) {
+      params.set(key, value[key]);
+    }
+    mainContentPath(mainContentPath().split('?')[0] + '?' + params.toString());
+  },
+});
+
+export function queryParam(name: string, value?: string) {
+  const params = queryParams();
+  if (value !== undefined) {
+    if (params[name] === value) {
+      return value;
+    }
+    if (value === null || value === '') {
+      delete params[name];
+    } else {
+      params[name] = value;
+    }
+    queryParams(params);
+  }
+  return params[name];
+}
+
+// export const openThreads = persistentVar<(string | IMessage)[]>('openThreads', { scope: 'user', defaultValue: [] });
+export const openThreads: ReturnType<typeof groupUserVar<(string | IMessage)[]>> = 
+  groupUserVar<(string | IMessage)[]>('openThreads', { defaultValue: [] });
+export const threadViewOpen = groupUserVar<boolean>('threadViewOpen', { defaultValue: false });
+
+export async function openThread(thread: string | IMessage) {
+  openThreadInTab(thread);
+  // let threadId = typeof thread === 'string' ? thread : thread.messageId;
+  // const message = await Messages().get(threadId);
+  // if (message) {
+  //   thread = message.messageParentId || message.messageId;
+  // }
+  // const threadsWithout = openThreads().filter(t => (typeof t === 'string' && t !== threadId) || (typeof t === 'object' && t.messageId !== threadId));
+  // openThreads([thread, ...threadsWithout]);
+  // threadViewOpen(true);
+}
+
+// Thread opening function for tabs system
+export async function openThreadInTab(thread: string | IMessage) {
+  let threadId = typeof thread === 'string' ? thread : thread.messageId;
+  const message = await Messages().get(threadId);
+  
+  if (!message) {
+    console.warn('Thread message not found:', threadId);
+    return;
+  }
+  
+  // Use parent message ID if this is a reply, otherwise use the message itself
+  const actualThreadId = message.messageParentId || message.messageId;
+  
+  // Generate thread title from message content (strip mentions and clean formatting)
+  const cleanMessage = stripMentions(message.message);
+  const messagePreview = cleanMessage.slice(0, 30);
+  const threadTitle = `${messagePreview}${cleanMessage.length > 30 ? '...' : ''}` || `Thread`;
+  
+  // // Import openNewTab dynamically to avoid circular dependency
+  // const { openNewTab } = await import('./tabs-layout/tabs-layout');
+  
+  openNewTab({
+    packageId: 'system-apps',
+    path: `threads/${actualThreadId}`,
+    title: threadTitle,
+    iconClassName: 'bi-chat-dots',
+  });
+}
+
+rpcClientCalls.setClientPath = async (url: string) => {
+  mainContentPath(url && String(url).trim() || '');
+};
+
+rpcClientCalls.openThread = async (threadId: string) => {
+  console.warn('Opening thread:', threadId);
+  openThread(threadId);
+};
+
+export let me: IUser = null as unknown as IUser;
+
+export const windowWidth = observable(window.innerWidth);//.extend({ rateLimit: 500 });
+export const windowHeight = observable(window.innerHeight);//.extend({ rateLimit: 500 });
+window.addEventListener("resize", (ev) => {
+  windowWidth(window.innerWidth)
+  windowHeight(window.innerHeight)
+});
+
+export const isDesktop = computed(() => {
+  // return windowWidth() > 1200;
+  return windowWidth() > 992;
+  // return windowWidth() > 768;
+});
+
+export const groups = observable<IGroup[]>([]);
+
+let globalsLoaded = false;
+export async function loadGlobals() {
+  if (globalsLoaded) return true;
+  globalsLoaded = true;
+  me = await getMe();
+  await reloadPackagesOnPageRefresh.loadingPromise;
+  if (reloadPackagesOnPageRefresh()) {
+    await rpcServerCalls.installOrUpdatePackage('all');
+  }
+  await Promise.all([
+    Groups().list().then(groups),
+    _mainContentPath.loadingPromise,
+    openThreads.loadingPromise,
+    threadViewOpen.loadingPromise,
+    sleep(100), // hacky way to prevent some jank
+  ]);
+
+  function updateWindowHash() {
+    if (window.location.hash.substr(1) !== mainContentPath()) {
+      window.location.hash = mainContentPath() || '';
+    }
+    mainContentPath(mainContentPath() || '');
+  }
+  mainContentPath.subscribe(updateWindowHash);
+  updateWindowHash();
+  window.addEventListener('hashchange', () => mainContentPath(window.location.hash.substring(1)));
+
+  return true;
+}
+
+if (typeof window !== 'undefined') {
+  // @ts-ignore
+  window.globals = module.exports;
+}

package/src/hooks.ts

@@ -0,0 +1,144 @@
+
+import React, { useState, useEffect } from 'react';
+import { isArray, isEqual } from 'lodash';
+import { observable, isSubscribable, unwrapObservable, Observable } from "@peers-app/peers-sdk";
+
+
+
+/**
+ * Use this to subscribe to an observable or computed in a functional component.
+ * @param sub the observable or computed to subscribe to
+ * @param deps an array of dependencies to pass to useEffect which will trigger a re-render when any of the dependencies change
+ * @returns the current value of the observable or computed and a function to set the value
+ */
+export function useObservable<T>(sub: Observable<T> | T, deps: React.DependencyList = []): [T, (value: T) => void] {
+  const [data, setData] = useState(() => unwrapObservable(sub));
+  useEffect(() => {
+    if (!isSubscribable(sub)) {
+      return;
+    }
+    const subscription = sub.subscribe(() => {
+      const newData = sub();
+      // @ts-ignore
+      if (isArray(newData) && newData === data) {
+        // @ts-ignore
+        setData([...newData])
+      } else {
+        setData(newData)      
+      }
+    })
+    // the data might change _after_ useObservable is called but _before_ the subscription has been created
+    // this checks for that and updates the state with the new data if necessary
+    const newData = sub();
+    if (!isEqual(data, newData)) {
+      setData(newData);
+    }
+    return () => subscription.dispose();
+  }, deps);
+
+  return [data, newData => {
+    setData(newData);
+    if (isSubscribable(sub)) {
+      sub(newData);
+    }
+  }];
+}
+
+/**
+ * Use this to easily wait for a promise in a functional component.
+ * @param p The promise to wait for
+ * @param initialValue the initial value to return before the promise resolves
+ * @param deps the dependencies to pass to useEffect which will trigger a re-render when any of the dependencies change
+ * @returns the initial value and the resolved value of the promise
+ */
+export function usePromise<T>(p: Promise<T> | (() => Promise<T>), initialValue?: T, deps: React.DependencyList = []): T | undefined {
+  const [data, setData] = useState(initialValue);
+  useEffect(() => {
+    let disposed = false;
+    if (typeof p === 'function') {
+      p = p();
+    }
+    p.then(newData => {
+      // if (!_.isEqual(newData, data) && !disposed) {
+      if (!disposed) {
+        setData(newData)
+      }
+    })
+    return () => { 
+      disposed = true; 
+    }
+  }, deps);
+  return data;
+}
+
+/**
+ * Use this to create an observable in a functional component. 
+ * This automatically subscribes to the observable and triggers a re-render when the value changes.
+ * @param initialValue This will be the initial value of the observable
+ * @param doNotSubscribe If true, the observable will not be subscribed to automatically.  
+ * This is useful if you want to create an observable that persists between rerenders but doesn't cause rerenders itself.
+ * @returns 
+ */
+export function useObservableState<T>(initialValue?: T, doNotSubscribe?: boolean) {
+  const [obs] = useState(() => observable(initialValue));
+  if (!doNotSubscribe) {
+    useObservable(obs);
+  }
+  return obs;
+}
+
+/**
+ * Use this to register a handler for a knockout subscribable in a functional component.
+ * The handler will be called immediately and whenever the subscribable changes. 
+ * @param subscribable The observable to subscribe to
+ * @param onChange The function to call with the new value when the observable changes
+  */
+export function useSubscription<T>(subscribable: Observable<T>, onChange: (value: T) => any, doNotCallOnChangeDuringSetup?: boolean): void {
+  if (!doNotCallOnChangeDuringSetup) {
+    useEffect(() => onChange(subscribable()), []);
+  }
+  useEffect(() => {
+    const subscription = subscribable.subscribe(() => onChange(subscribable()));
+    return () => subscription.dispose();
+  }, [subscribable, onChange]);
+}
+
+export function useOnScreen(ref: React.RefObject<any>) {
+  const [isIntersecting, setIntersecting] = useState(false)
+
+  const observer = new IntersectionObserver(
+    ([entry]) => setIntersecting(entry.isIntersecting)
+  )
+
+  useEffect(() => {
+    observer.observe(ref.current)
+    // Remove the observer as soon as the component is unmounted
+    return () => { observer.disconnect() }
+  }, [])
+
+  return isIntersecting
+}
+
+// /**
+//  * This creates an observable that will automatically persist its value between page reloads using localStorage.
+//  * If localStorage is not available, the observable will not persist its value.
+//  * @param initialValue the initial value of the observable
+//  * @param globalName the name to use when storing the value in localStorage
+//  * @returns the observable that will persist between page reloads
+//  */
+// export function persistentValue<T>(initialValue: T, globalName: string): Observable<T | undefined> {
+//   let q = observable<T>();
+//   if (typeof localStorage === 'undefined') {
+//     return q;
+//   }
+//   q.subscribe(newVal => {
+//     localStorage.setItem(globalName, JSON.stringify(toJSON(newVal)))
+//   })
+//   const existing = localStorage.getItem(globalName);
+//   if (existing) {
+//     q(fromJSON(JSON.parse(existing)))
+//   } else {
+//     q(initialValue);
+//   }
+//   return q;
+// }

package/src/index.tsx

@@ -0,0 +1,8 @@
+
+export * from "./app";
+
+export * from "./three-bar-layout/three-bar-layout";
+
+export * from "./screens/events/cron";
+
+export * from "./tabs-layout/tabs-layout";

package/src/layout-vars.ts

@@ -0,0 +1,8 @@
+import { deviceVar } from "@peers-app/peers-sdk";
+
+export const leftBarCollapsed = deviceVar('leftBarCollapsed', { defaultValue: false, });
+export const rightBarCollapsed = deviceVar('rightBarCollapsed', { defaultValue: false, });
+export const leftBarWidth = deviceVar('leftBarWidth', { defaultValue: 250, });
+export const rightBarWidth = deviceVar('rightBarWidth', { defaultValue: 250, });
+export const leftBarWidthPrev = deviceVar('leftBarWidthPrev', { defaultValue: 250, });
+export const rightBarWidthPrev = deviceVar('rightBarWidthPrev', { defaultValue: 250, });