@peers-app/peers-ui 0.27.2 → 0.27.4

package/src/components/typeahead.tsx

@@ -1,357 +0,0 @@
-import type React from "react";
-import { useEffect, useRef, useState } 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]: unknown;
-}
-
-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) => {
-    const r = item as Record<string, unknown>;
-    const str = (k: string) => {
-      const v = r[k];
-      return typeof v === "string" ? v : undefined;
-    };
-    return str("name") || str("title") || str("label") || item.id;
-  };
-
-  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 ${className}`}
-          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-hash.test.ts

@@ -1,19 +0,0 @@
-jest.mock("./tabs-layout/tabs-state", () => ({
-  handleMainPathChanged: (_oldPath: string, newPath: string, storage: (value: string) => void) =>
-    storage(newPath),
-  openNewTab: jest.fn(),
-}));
-
-import { initializeHashNavigation, mainContentPath } from "./globals";
-
-describe("initial hash navigation", () => {
-  it("lets an incoming legacy deep link win and canonicalizes it", () => {
-    mainContentPath("identity/activity");
-    window.history.replaceState(null, "", "/#contacts/abcdefghijklmnopqrstuvwxy?from=link");
-
-    initializeHashNavigation();
-
-    expect(mainContentPath()).toBe("identity/people/abcdefghijklmnopqrstuvwxy?from=link");
-    expect(window.location.hash).toBe("#identity/people/abcdefghijklmnopqrstuvwxy?from=link");
-  });
-});

package/src/globals.tsx

@@ -1,226 +0,0 @@
-import {
-  computed,
-  Groups,
-  getMe,
-  groupUserVar,
-  type IGroup,
-  type IMessage,
-  type IUser,
-  Messages,
-  observable,
-  reloadPackagesOnPageRefresh,
-  sleep,
-  subscribe,
-} from "@peers-app/peers-sdk";
-import { canonicalizeRoute } from "./screens/identity/identity-routes";
-import { packagesTools } from "./screens/packages/packages-ipc";
-import { handleMainPathChanged, openNewTab } from "./tabs-layout/tabs-state";
-import { stripMentions } from "./utils";
-
-/** Counter incremented when installed package UI should reload. */
-export const packageReloaded = observable(0);
-
-/** Persisted route for the active data context. Prefer {@link mainContentPath}. */
-export const _mainContentPath = groupUserVar("mainContentPath", { defaultValue: "" });
-
-/** Canonical navigation observable backed by the active tab state. */
-export const mainContentPath = computed<string>({
-  read: () => {
-    return _mainContentPath();
-  },
-  write: (newPath) => {
-    const oldPath = _mainContentPath();
-    if (newPath === oldPath) return;
-    // _mainContentPath(newPath);
-    handleMainPathChanged(oldPath, newPath, _mainContentPath);
-  },
-});
-
-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()}`);
-  },
-});
-
-/** Read or update one query parameter on {@link mainContentPath}. */
-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];
-}
-
-/** Open a message thread in its owning app tab. */
-export async function openThread(thread: string | IMessage) {
-  openThreadInTab(thread);
-}
-
-/** Resolve a message and open its root thread in a new tab. */
-export async function openThreadInTab(thread: string | IMessage) {
-  const 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",
-  });
-}
-
-// A notification clicked in the desktop app's main process opens its thread here.
-subscribe<{ threadId?: string }>("ui:openThread", (event) => {
-  if (event.data?.threadId) void openThread(event.data.threadId);
-});
-
-/** Signed profile for the active user after {@link loadGlobals}. */
-export let me: IUser = null as unknown as IUser;
-
-/** Current browser viewport width. */
-export const windowWidth = observable(window.innerWidth); //.extend({ rateLimit: 500 });
-/** Current browser viewport height. */
-export const windowHeight = observable(window.innerHeight); //.extend({ rateLimit: 500 });
-window.addEventListener("resize", (_ev) => {
-  windowWidth(window.innerWidth);
-  windowHeight(window.innerHeight);
-});
-
-/** True when the viewport uses wide-screen navigation. */
-export const isDesktop = computed(() => {
-  // return windowWidth() > 1200;
-  return windowWidth() > 992;
-  // return windowWidth() > 768;
-});
-
-/** Enabled groups available to the active user. */
-export const groups = observable<IGroup[]>([]);
-
-let globalsLoaded = false;
-let hashNavigationInitialized = false;
-
-/**
- * Start two-way hash synchronization after routes and persisted tabs are restored.
- *
- * A non-empty startup hash wins over persisted navigation so canonical and legacy
- * deep links open the destination the user requested.
- */
-export function initializeHashNavigation() {
-  if (hashNavigationInitialized) {
-    return;
-  }
-  hashNavigationInitialized = true;
-
-  const updateWindowHash = () => {
-    const currentPath = window.location.hash.substring(1);
-    const expectedPath = mainContentPath() || "";
-    if (currentPath !== expectedPath) {
-      window.location.hash = expectedPath;
-    }
-  };
-  const navigateFromHash = () => {
-    const requestedPath = canonicalizeRoute(window.location.hash.substring(1));
-    if (requestedPath !== mainContentPath()) {
-      mainContentPath(requestedPath);
-    } else {
-      updateWindowHash();
-    }
-  };
-
-  mainContentPath.subscribe(updateWindowHash);
-  window.addEventListener("hashchange", navigateFromHash);
-
-  if (window.location.hash.substring(1)) {
-    navigateFromHash();
-  } else {
-    updateWindowHash();
-  }
-}
-
-/** Longest page startup waits for package folders to be re-read. */
-const PACKAGE_FOLDER_RELOAD_WAIT_MS = 30_000;
-
-/**
- * Re-read this device's package folders so rebuilt dev bundles load before the UI does.
- * Skipped on hosts without package folders; failures are logged, and the wait is bounded so
- * a slow host cannot stall startup.
- */
-async function reloadPackageFolders(): Promise<void> {
-  const reload = (async () => {
-    const tools = await packagesTools();
-    const { capabilities } = await tools.getCapabilities();
-    if (!capabilities.fileSystem) return;
-    const { skipped, results } = await tools.reloadAllPackages();
-    if (skipped) console.warn(skipped);
-    for (const result of results) {
-      if (!result.ok) console.warn(`[packages] Reloading ${result.name} failed: ${result.error}`);
-      if (result.warning) console.warn(`[packages] ${result.name}: ${result.warning}`);
-    }
-  })().catch((err: unknown) => {
-    console.warn("[packages] Reloading package folders failed:", err);
-  });
-  await Promise.race([reload, sleep(PACKAGE_FOLDER_RELOAD_WAIT_MS)]);
-}
-
-/** Load global user state required before the root layout renders. */
-export async function loadGlobals() {
-  if (globalsLoaded) return true;
-  globalsLoaded = true;
-  me = await getMe();
-  await reloadPackagesOnPageRefresh.loadingPromise;
-  if (reloadPackagesOnPageRefresh()) {
-    await reloadPackageFolders();
-  }
-  await Promise.all([
-    Groups()
-      .list()
-      .then((r) => groups(r)),
-    _mainContentPath.loadingPromise,
-    sleep(100),
-  ]);
-
-  return true;
-}
-
-if (typeof window !== "undefined") {
-  // @ts-expect-error
-  window.globals = module.exports;
-}

package/src/hooks/index.ts

@@ -1,8 +0,0 @@
-// `use-host-contract` stays internal: its screens import it by path.
-export * from "./use-observable";
-export * from "./use-observable-state";
-export * from "./use-on-screen";
-export * from "./use-promise";
-export * from "./use-rows";
-export * from "./use-subscription";
-export * from "./use-tool";

package/src/hooks/use-host-contract.ts

@@ -1,75 +0,0 @@
-import {
-  type IContractConsumerBase,
-  type IHostContractConsumer,
-  subscribeHostContractTransport,
-} from "@peers-app/peers-sdk";
-import { useEffect, useState } from "react";
-
-/** Live consumer for one host contract, plus the last failure to obtain it. */
-export interface IUseHostContractResult<T extends IContractConsumerBase> {
-  /** Current consumer, or `undefined` while the host transport is down. */
-  consumer: T | undefined;
-  /** Set when `get` rejects, for example when the transport wait times out. */
-  error: Error | undefined;
-}
-
-/**
- * Resolve a cached local-host contract consumer and keep it current across reconnects.
- *
- * The handle owns caching and disposal. This hook re-reads it when the host transport
- * changes. Read `consumer.observables.*` with `useObservable`.
- *
- * @param accessor Handle from `hostContractConsumer`, stable for the lifetime of the screen module.
- * @returns The current consumer and the last error.
- */
-export function useHostContract<T extends IContractConsumerBase>(
-  accessor: IHostContractConsumer<T>,
-): IUseHostContractResult<T> {
-  const [consumer, setConsumer] = useState<T | undefined>();
-  const [error, setError] = useState<Error | undefined>();
-
-  useEffect(() => {
-    let cancelled = false;
-
-    const apply = (next: T): void => {
-      if (cancelled) {
-        return;
-      }
-      setConsumer(next);
-      setError(undefined);
-    };
-
-    const fail = (cause: unknown): void => {
-      if (cancelled) {
-        return;
-      }
-      setError(cause instanceof Error ? cause : new Error(String(cause)));
-    };
-
-    const load = (): void => {
-      accessor.get().then(apply, fail);
-    };
-
-    load();
-    const unsubscribe = subscribeHostContractTransport(
-      (transport) => {
-        if (cancelled) {
-          return;
-        }
-        if (!transport) {
-          setConsumer(undefined);
-          return;
-        }
-        load();
-      },
-      { emitCurrent: false },
-    );
-
-    return () => {
-      cancelled = true;
-      unsubscribe();
-    };
-  }, [accessor]);
-
-  return { consumer, error };
-}