@peers-app/peers-ui 0.27.2 → 0.27.4

package/src/screens/variables/variable-list.tsx

@@ -1,110 +0,0 @@
-import {
-  getIconClassName,
-  getUserContext,
-  type IPersistentVar,
-  newid,
-  PersistentVars,
-} from "@peers-app/peers-sdk";
-import { ListScreen } from "../../components/list-screen";
-import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
-import { Tabs } from "../../components/tabs";
-import { mainContentPath } from "../../globals";
-import { registerInternalPeersUI } from "../../ui-router/ui-loader";
-
-function renderItem(persistentVar: IPersistentVar) {
-  return (
-    <div key={persistentVar.persistentVarId} className="container-fluid pb-4">
-      <i className={getIconClassName(PersistentVars())}></i>&nbsp;
-      <a href={`#variables/${persistentVar.persistentVarId}`}>
-        {persistentVar.name || "<empty-name>"}
-      </a>
-      <div style={{ paddingLeft: "20px" }}>
-        <MarkdownWithMentions content={persistentVar.description || ""} />
-      </div>
-    </div>
-  );
-}
-
-/** List of user-created variables, with search-to-create. */
-function UserVariableList() {
-  async function newRecord(name: string) {
-    const userContext = await getUserContext();
-    const isPersonal = userContext.currentlyActiveGroupId() === userContext.userId;
-    const varName = name.replace(/\s+/g, "_");
-    const pVar = await PersistentVars().save({
-      persistentVarId: newid(),
-      name: varName,
-      scope: isPersonal ? "user" : "group",
-      description: "",
-      value: { value: "" },
-      userCreated: true,
-    });
-    mainContentPath(`variables/${pVar.persistentVarId}`);
-    return pVar;
-  }
-
-  function getFilter(searchText: string) {
-    return {
-      $or: [{ name: { $matchWords: searchText } }, { description: { $matchWords: searchText } }],
-      userCreated: true,
-    };
-  }
-
-  return (
-    <ListScreen
-      table={PersistentVars()}
-      newRecord={newRecord}
-      getFilter={getFilter}
-      sortBy={["name"]}
-      renderItem={renderItem}
-      placeholderName="environment variable"
-    />
-  );
-}
-
-/**
- * Browse/search list of non-user-created variables (system and package-owned pvars).
- * These are read-only here (no create); selecting one opens the same detail screen.
- */
-function SystemVariableList() {
-  function getFilter(searchText: string) {
-    return {
-      $or: [{ name: { $matchWords: searchText } }, { description: { $matchWords: searchText } }],
-      // $ne: true matches both `false` and unset (system/package pvars omit userCreated)
-      userCreated: { $ne: true },
-    };
-  }
-
-  return (
-    <ListScreen
-      table={PersistentVars()}
-      getFilter={getFilter}
-      sortBy={["name"]}
-      renderItem={renderItem}
-      placeholderName="system variable"
-    />
-  );
-}
-
-export function VariableList() {
-  return (
-    <Tabs
-      tabs={[
-        { name: "User", content: <UserVariableList /> },
-        { name: "System", content: <SystemVariableList /> },
-      ]}
-    />
-  );
-}
-
-registerInternalPeersUI({
-  peersUIId: "00m5fshz2g6ea23v8z6y0a1ci",
-  component: VariableList,
-  routes: [
-    {
-      isMatch: (_props, context) => context.path === "variables",
-      uiCategory: "screen",
-      priority: 2,
-    },
-  ],
-});

package/src/screens/welcome-modal.tsx

@@ -1,294 +0,0 @@
-import {
-  Devices,
-  DISPLAY_NAME_MAX_LENGTH,
-  getMe,
-  getUserContext,
-  hasShownWelcomeModal,
-  type IDevice,
-  TrustLevel,
-  thisDeviceId,
-  Users,
-} from "@peers-app/peers-sdk";
-import type React from "react";
-import { useEffect, useState } from "react";
-import { useObservable, usePromise } from "../hooks";
-import { persistPeersServicesRegistration } from "../peers-services-registration";
-import { identityTools } from "./device-pairing/identity-ipc";
-
-interface WelcomeModalProps {
-  colorMode: string;
-  onClose: () => void;
-}
-
-async function tryRegisterPeersServicesAfterWelcome(): Promise<void> {
-  try {
-    const { token } = await (await identityTools()).registerWithPeersServices();
-    await persistPeersServicesRegistration(token);
-  } catch (err: unknown) {
-    console.warn("Peers services registration after welcome modal:", err);
-  }
-}
-
-/** First-run profile dialog for naming the user and current device. */
-export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
-  const [displayName, setDisplayName] = useState("");
-  const [deviceName, setDeviceName] = useState("");
-  const [isSaving, setIsSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [deviceId] = useObservable(thisDeviceId);
-
-  const isDark = colorMode === "dark";
-
-  // Load current user data
-  const me = usePromise(async () => getMe());
-
-  // Pre-populate with existing values if any
-  useEffect(() => {
-    if (me?.name) {
-      setDisplayName(me.name.slice(0, DISPLAY_NAME_MAX_LENGTH));
-    }
-  }, [me?.name]);
-
-  useEffect(() => {
-    const loadDeviceName = async () => {
-      if (!deviceId) return;
-      try {
-        const userContext = await getUserContext();
-        const device = await Devices(userContext.userDataContext).get(deviceId);
-        if (device?.name) {
-          setDeviceName(device.name.slice(0, DISPLAY_NAME_MAX_LENGTH));
-        }
-      } catch (err) {
-        console.error("Error loading device name:", err);
-      }
-    };
-    loadDeviceName();
-  }, [deviceId]);
-
-  const handleSave = async () => {
-    setError(null);
-    setIsSaving(true);
-
-    try {
-      const userContext = await getUserContext();
-
-      // Save display name
-      if (me && displayName.trim()) {
-        me.name = displayName.trim();
-        await Users(userContext.userDataContext).signAndSave(me, { saveAsSnapshot: true });
-      }
-
-      // Save device name
-      if (deviceId && deviceName.trim()) {
-        const devicesTable = Devices(userContext.userDataContext);
-        const device: IDevice = (await devicesTable.get(deviceId)) || {
-          deviceId,
-          userId: userContext.userId,
-          firstSeen: new Date(),
-          lastSeen: new Date(),
-          trustLevel: TrustLevel.NewDevice,
-        };
-        device.name = deviceName.trim();
-        await devicesTable.save(device);
-      }
-
-      await tryRegisterPeersServicesAfterWelcome();
-
-      // Mark the welcome modal as shown
-      hasShownWelcomeModal(true);
-
-      onClose();
-    } catch (err: unknown) {
-      console.error("Error saving profile:", err);
-      setError(err instanceof Error ? err.message : "Failed to save. Please try again.");
-      setIsSaving(false);
-    }
-  };
-
-  const handleSkip = async () => {
-    await tryRegisterPeersServicesAfterWelcome();
-    // Mark as shown even if skipped
-    hasShownWelcomeModal(true);
-    onClose();
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSave();
-    } else if (e.key === "Escape") {
-      handleSkip();
-    }
-  };
-
-  if (!me) {
-    return null;
-  }
-
-  return (
-    <div
-      className="position-fixed w-100 h-100 d-flex align-items-start justify-content-center"
-      style={{
-        top: 0,
-        left: 0,
-        zIndex: 1050,
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
-        backdropFilter: "blur(4px)",
-        paddingTop: "10vh",
-      }}
-    >
-      <div
-        className={`${isDark ? "bg-dark text-light" : "bg-white text-dark"}`}
-        style={{
-          width: "90%",
-          maxWidth: "500px",
-          borderRadius: "12px",
-          boxShadow: isDark ? "0 20px 40px rgba(0, 0, 0, 0.5)" : "0 20px 40px rgba(0, 0, 0, 0.1)",
-          border: isDark ? "1px solid #495057" : "1px solid #dee2e6",
-          overflow: "hidden",
-        }}
-      >
-        {/* Header */}
-        <div
-          className="p-4 text-center"
-          style={{
-            borderBottom: `1px solid ${isDark ? "#495057" : "#dee2e6"}`,
-          }}
-        >
-          <i className="bi-person-circle text-primary d-block mb-3" style={{ fontSize: "48px" }} />
-          <h4 className="mb-2">Welcome to Peers!</h4>
-          <p
-            className={`mb-0 ${isDark ? "text-light opacity-75" : "text-muted"}`}
-            style={{ fontSize: "14px" }}
-          >
-            Let's personalize your experience. You can change these anytime in Settings.
-          </p>
-        </div>
-
-        {/* Body */}
-        <div className="p-4">
-          {/* Error Alert */}
-          {error && (
-            <div className="alert alert-danger py-2 px-3 mb-3" style={{ fontSize: "14px" }}>
-              <i className="bi-exclamation-triangle me-2" />
-              {error}
-            </div>
-          )}
-
-          {/* Display Name */}
-          <div className="mb-3">
-            <label className="form-label fw-semibold mb-1">
-              <i className="bi-person me-2" />
-              Display Name
-            </label>
-            <input
-              type="text"
-              className={`form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`}
-              maxLength={DISPLAY_NAME_MAX_LENGTH}
-              placeholder="How should others see you?"
-              value={displayName}
-              onChange={(e) => {
-                setDisplayName(e.target.value);
-                setError(null);
-              }}
-              onKeyDown={handleKeyDown}
-              disabled={isSaving}
-              style={{
-                fontSize: "14px",
-                backgroundColor: isDark ? "#343a40" : "#ffffff",
-              }}
-            />
-            <small
-              className={isDark ? "text-light opacity-50" : "text-muted"}
-              style={{ fontSize: "11px" }}
-            >
-              This name will be visible to others when you connect
-            </small>
-          </div>
-
-          {/* Device Name */}
-          <div className="mb-3">
-            <label className="form-label fw-semibold mb-1">
-              <i className="bi-laptop me-2" />
-              Device Name
-            </label>
-            <input
-              type="text"
-              className={`form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`}
-              maxLength={DISPLAY_NAME_MAX_LENGTH}
-              placeholder="e.g., My Laptop, Work Computer"
-              value={deviceName}
-              onChange={(e) => {
-                setDeviceName(e.target.value);
-                setError(null);
-              }}
-              onKeyDown={handleKeyDown}
-              disabled={isSaving}
-              style={{
-                fontSize: "14px",
-                backgroundColor: isDark ? "#343a40" : "#ffffff",
-              }}
-            />
-            <small
-              className={isDark ? "text-light opacity-50" : "text-muted"}
-              style={{ fontSize: "11px" }}
-            >
-              Helps you identify this device when syncing across multiple devices
-            </small>
-          </div>
-        </div>
-
-        {/* Footer */}
-        <div
-          className="p-3 d-flex justify-content-between align-items-center"
-          style={{
-            borderTop: `1px solid ${isDark ? "#495057" : "#dee2e6"}`,
-            backgroundColor: isDark ? "#2d3238" : "#f8f9fa",
-          }}
-        >
-          <button
-            className={`btn btn-sm ${isDark ? "btn-outline-light" : "btn-outline-secondary"}`}
-            onClick={handleSkip}
-            disabled={isSaving}
-          >
-            Skip for now
-          </button>
-          <button
-            className="btn btn-sm btn-primary"
-            onClick={handleSave}
-            disabled={isSaving}
-            style={{ minWidth: "100px" }}
-          >
-            {isSaving ? (
-              <>
-                <span
-                  className="spinner-border spinner-border-sm me-1"
-                  role="status"
-                  aria-hidden="true"
-                />
-                Saving...
-              </>
-            ) : (
-              <>
-                <i className="bi-check-lg me-1" />
-                Get Started
-              </>
-            )}
-          </button>
-        </div>
-
-        {/* Keyboard Shortcuts Helper */}
-        <div
-          className={`px-3 py-2 small text-center ${isDark ? "text-light opacity-50" : "text-muted"}`}
-          style={{
-            borderTop: `1px solid ${isDark ? "#495057" : "#dee2e6"}`,
-            fontSize: "11px",
-            backgroundColor: isDark ? "#212529" : "#ffffff",
-          }}
-        >
-          <kbd className="small">↵</kbd> to save • <kbd className="small">esc</kbd> to skip
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/screens/workflows/workflow-details.tsx

@@ -1,115 +0,0 @@
-import {
-  defaultAssistantId,
-  getAllAssistantIdsMentioned,
-  type IWorkflow,
-  runWorkflow,
-  Workflows,
-} from "@peers-app/peers-sdk";
-import { Input } from "../../components/input";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { SaveButton } from "../../components/save-button";
-import { ScreenTabBody, Tabs } from "../../components/tabs";
-import { openThread } from "../../globals";
-import { usePromise } from "../../hooks";
-import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
-import { WorkflowInfo } from "./workflow-info";
-import { WorkflowInstructions } from "./workflow-instructions";
-
-interface IProps {
-  workflowId: string;
-}
-
-export const WorkflowDetails = (props: IProps) => {
-  const workflow = usePromise(
-    async () => {
-      const workflow = await Workflows().get(props.workflowId);
-      if (!workflow) {
-        throw new Error("Workflow not found");
-      }
-      updateActiveTabTitle(workflow.name || "Workflow");
-      return Workflows().initDoc(workflow);
-    },
-    undefined,
-    [props.workflowId],
-  );
-
-  if (!workflow) {
-    return <LoadingIndicator />;
-  }
-
-  async function saveChanges() {
-    if (!workflow) return;
-    workflow.updatedAt = new Date();
-    const assistantsMentioned = await getAllAssistantIdsMentioned(
-      workflow.instructions[0].markdown ?? "",
-    );
-    workflow.defaultAssistantId = assistantsMentioned[0] || defaultAssistantId;
-    workflow.save();
-  }
-
-  return (
-    <div className="container-fluid p-3">
-      <div className="d-flex">
-        <div>
-          <h4>
-            <i className="bi bi-database-fill-gear me-2"></i>
-          </h4>
-        </div>
-        <div className="flex-grow-1">
-          <h4>
-            <Input
-              key={workflow.workflowId}
-              className="border border-0"
-              style={{ width: "100%", outline: "none", backgroundColor: "transparent" }}
-              value={workflow.qs.name}
-            />
-          </h4>
-        </div>
-        <div>
-          <button
-            className="btn btn-success me-2"
-            onClick={() => {
-              saveChanges(); // TODO take this out, is just for testing
-              _runWorkflow(workflow.toJS());
-            }}
-          >
-            Run All
-          </button>
-
-          <SaveButton key={workflow.workflowId} onClick={saveChanges} doc={workflow} />
-        </div>
-      </div>
-
-      <Tabs
-        key={workflow.workflowId}
-        tabs={[
-          {
-            name: "Info",
-            content: (
-              <ScreenTabBody>
-                <WorkflowInfo workflow={workflow} />
-              </ScreenTabBody>
-            ),
-          },
-          {
-            name: "Instructions",
-            content: (
-              <ScreenTabBody>
-                <WorkflowInstructions workflow={workflow} />
-              </ScreenTabBody>
-            ),
-          },
-        ]}
-      />
-    </div>
-  );
-};
-
-async function _runWorkflow(workflow: IWorkflow) {
-  // TODO maybe warn if there are pending changes
-  const run = await runWorkflow({
-    workflowId: workflow.workflowId,
-    vars: {},
-  });
-  openThread(run.parentMessageId);
-}

package/src/screens/workflows/workflow-info.tsx

@@ -1,22 +0,0 @@
-import type { IDoc, IWorkflow } from "@peers-app/peers-sdk";
-import { Input } from "../../components/input";
-import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
-
-export const WorkflowInfo = (props: { workflow: IDoc<IWorkflow> }) => {
-  const { workflow } = props;
-
-  return (
-    <div>
-      <small>Name:</small>
-      <Input
-        value={workflow.qs.name}
-        className="form-control mb-3 p-0 ps-2"
-        placeholder="Workflow name"
-        title="Workflow name"
-      />
-
-      <small>Description:</small>
-      <MarkdownEditorInline value={workflow.qs.description} />
-    </div>
-  );
-};

package/src/screens/workflows/workflow-instructions.tsx

@@ -1,134 +0,0 @@
-import {
-  type IDoc,
-  type IWorkflow,
-  type IWorkflowInstruction,
-  type Observable,
-  observable,
-} from "@peers-app/peers-sdk";
-import { useEffect, useState } from "react";
-import type { IEditorEffects } from "../../components/markdown-editor/editor";
-import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
-import { useObservable } from "../../hooks";
-
-export const WorkflowInstructions = (props: { workflow: IDoc<IWorkflow> }) => {
-  const { workflow } = props;
-
-  const instructions = workflow.qs.instructions;
-  useObservable(instructions);
-  const [focusedInstructionIndex] = useState(() => observable(0));
-
-  return (
-    <div>
-      {workflow.qs.instructions().map((_instruction, i) => {
-        return (
-          <div
-            key={i}
-            className="mb-2"
-            style={
-              {
-                // border: '1px solid #ccc',
-                // borderRadius: '5px',
-              }
-            }
-          >
-            <WorkflowInstruction
-              workflow={workflow}
-              instructions={instructions}
-              thisInstructionIndex={i}
-              focusedInstructionIndex={focusedInstructionIndex}
-            />
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-interface IWorkflowInstructionProps {
-  workflow: IDoc<IWorkflow>;
-  instructions: Observable<IWorkflowInstruction[]>;
-  thisInstructionIndex: number;
-  focusedInstructionIndex: Observable<number>;
-  insertInstructionBelow?: () => void;
-  deleteInstruction?: () => void;
-}
-
-const WorkflowInstruction = (props: IWorkflowInstructionProps) => {
-  const { instructions, thisInstructionIndex, focusedInstructionIndex } = props;
-
-  const [mdEffects] = useState<IEditorEffects>(() => ({}));
-
-  const thisInstruction = instructions()[thisInstructionIndex];
-
-  const [markdownObs] = useState(() => observable(thisInstruction.markdown ?? ""));
-
-  useEffect(() => {
-    const sub = focusedInstructionIndex.subscribe((focusedIndex) => {
-      if (focusedIndex === thisInstructionIndex) {
-        mdEffects.focus?.();
-      }
-    });
-    return () => sub.dispose();
-  }, [thisInstructionIndex, focusedInstructionIndex.subscribe, mdEffects.focus]);
-
-  useEffect(() => {
-    markdownObs(thisInstruction.markdown ?? "");
-    const sub = markdownObs.subscribe((value) => {
-      thisInstruction.markdown = value;
-      props.workflow.q(props.workflow.q() + 1);
-    });
-    return () => sub.dispose();
-  }, [thisInstruction, markdownObs, props.workflow.q]);
-
-  let backspacedOnEmpty = false;
-  mdEffects.onKeyDown = (evt) => {
-    if (evt.key === "Enter") {
-      if (markdownObs().match(/\n\s*\n$/)) {
-        // if the markdown ends with a new line, zero or more whitespace and then another newline, insert a new instruction below
-        evt.preventDefault();
-        const _instructions = instructions();
-        _instructions.splice(thisInstructionIndex + 1, 0, { markdown: "" });
-        instructions([..._instructions]);
-        markdownObs(markdownObs().trim());
-        focusedInstructionIndex(thisInstructionIndex + 1);
-      }
-    }
-    if (evt.key === "Backspace") {
-      if (markdownObs().trim() === "") {
-        if (backspacedOnEmpty) {
-          evt.preventDefault();
-          const _instructions = instructions();
-          if (_instructions.length > 1) {
-            _instructions.splice(thisInstructionIndex, 1);
-            instructions([..._instructions]);
-            focusedInstructionIndex(thisInstructionIndex - 1);
-          }
-          backspacedOnEmpty = false;
-        } else {
-          backspacedOnEmpty = true;
-        }
-      }
-    }
-    return false;
-  };
-
-  function runThisInstruction() {
-    // runInstructions([thisInstruction]);
-    confirm("TODO: run this instruction not implemented yet");
-  }
-
-  return (
-    <MarkdownEditorInline
-      value={markdownObs}
-      effects={mdEffects}
-      autoFocus={props.thisInstructionIndex === focusedInstructionIndex()}
-      topRightControls={[
-        {
-          iconClass: "bi bi-play",
-          title: `Run this instruction.`,
-          onClick: runThisInstruction,
-        },
-      ]}
-    />
-  );
-};