@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/screens/welcome-modal.tsx

@@ -1,6 +1,16 @@
-import { Devices, getMe, getUserContext, hasShownWelcomeModal, IDevice, thisDeviceId, TrustLevel, Users } from "@peers-app/peers-sdk";
-import React, { useEffect, useState } from 'react';
-import { useObservable, usePromise } from '../hooks';
+import {
+  Devices,
+  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";
 
 interface WelcomeModalProps {
   colorMode: string;
@@ -8,13 +18,13 @@ interface WelcomeModalProps {
 }
 
 export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
-  const [displayName, setDisplayName] = useState('');
-  const [deviceName, setDeviceName] = useState('');
+  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';
+  const isDark = colorMode === "dark";
 
   // Load current user data
   const me = usePromise(async () => getMe());
@@ -36,7 +46,7 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
           setDeviceName(device.name);
         }
       } catch (err) {
-        console.error('Error loading device name:', err);
+        console.error("Error loading device name:", err);
       }
     };
     loadDeviceName();
@@ -58,7 +68,7 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
       // Save device name
       if (deviceId && deviceName.trim()) {
         const devicesTable = Devices(userContext.userDataContext);
-        const device: IDevice = await devicesTable.get(deviceId) || {
+        const device: IDevice = (await devicesTable.get(deviceId)) || {
           deviceId,
           userId: userContext.userId,
           firstSeen: new Date(),
@@ -71,11 +81,11 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
 
       // Mark the welcome modal as shown
       hasShownWelcomeModal(true);
-      
+
       onClose();
-    } catch (err: any) {
-      console.error('Error saving profile:', err);
-      setError(err.message || 'Failed to save. Please try again.');
+    } catch (err: unknown) {
+      console.error("Error saving profile:", err);
+      setError(err instanceof Error ? err.message : "Failed to save. Please try again.");
       setIsSaving(false);
     }
   };
@@ -87,10 +97,10 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
+    if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSave();
-    } else if (e.key === 'Escape') {
+    } else if (e.key === "Escape") {
       handleSkip();
     }
   };
@@ -106,34 +116,35 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
         top: 0,
         left: 0,
         zIndex: 1050,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        backdropFilter: 'blur(4px)',
-        paddingTop: '10vh'
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        backdropFilter: "blur(4px)",
+        paddingTop: "10vh",
       }}
     >
       <div
-        className={`${isDark ? 'bg-dark text-light' : 'bg-white text-dark'}`}
+        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'
+          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'}`
+            borderBottom: `1px solid ${isDark ? "#495057" : "#dee2e6"}`,
           }}
         >
-          <i className="bi-person-circle text-primary d-block mb-3" style={{ fontSize: '48px' }} />
+          <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' }}>
+          <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>
@@ -142,7 +153,7 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
         <div className="p-4">
           {/* Error Alert */}
           {error && (
-            <div className="alert alert-danger py-2 px-3 mb-3" style={{ fontSize: '14px' }}>
+            <div className="alert alert-danger py-2 px-3 mb-3" style={{ fontSize: "14px" }}>
               <i className="bi-exclamation-triangle me-2" />
               {error}
             </div>
@@ -156,7 +167,7 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
             </label>
             <input
               type="text"
-              className={`form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`}
+              className={`form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`}
               placeholder="How should others see you?"
               value={displayName}
               onChange={(e) => {
@@ -164,15 +175,17 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
                 setError(null);
               }}
               onKeyDown={handleKeyDown}
-              autoFocus
               disabled={isSaving}
               maxLength={100}
               style={{
-                fontSize: '14px',
-                backgroundColor: isDark ? '#343a40' : '#ffffff'
+                fontSize: "14px",
+                backgroundColor: isDark ? "#343a40" : "#ffffff",
               }}
             />
-            <small className={isDark ? 'text-light opacity-50' : 'text-muted'} style={{ fontSize: '11px' }}>
+            <small
+              className={isDark ? "text-light opacity-50" : "text-muted"}
+              style={{ fontSize: "11px" }}
+            >
               This name will be visible to others when you connect
             </small>
           </div>
@@ -185,7 +198,7 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
             </label>
             <input
               type="text"
-              className={`form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`}
+              className={`form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`}
               placeholder="e.g., My Laptop, Work Computer"
               value={deviceName}
               onChange={(e) => {
@@ -196,11 +209,14 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
               disabled={isSaving}
               maxLength={100}
               style={{
-                fontSize: '14px',
-                backgroundColor: isDark ? '#343a40' : '#ffffff'
+                fontSize: "14px",
+                backgroundColor: isDark ? "#343a40" : "#ffffff",
               }}
             />
-            <small className={isDark ? 'text-light opacity-50' : 'text-muted'} style={{ fontSize: '11px' }}>
+            <small
+              className={isDark ? "text-light opacity-50" : "text-muted"}
+              style={{ fontSize: "11px" }}
+            >
               Helps you identify this device when syncing across multiple devices
             </small>
           </div>
@@ -210,12 +226,12 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
         <div
           className="p-3 d-flex justify-content-between align-items-center"
           style={{
-            borderTop: `1px solid ${isDark ? '#495057' : '#dee2e6'}`,
-            backgroundColor: isDark ? '#2d3238' : '#f8f9fa'
+            borderTop: `1px solid ${isDark ? "#495057" : "#dee2e6"}`,
+            backgroundColor: isDark ? "#2d3238" : "#f8f9fa",
           }}
         >
           <button
-            className={`btn btn-sm ${isDark ? 'btn-outline-light' : 'btn-outline-secondary'}`}
+            className={`btn btn-sm ${isDark ? "btn-outline-light" : "btn-outline-secondary"}`}
             onClick={handleSkip}
             disabled={isSaving}
           >
@@ -225,11 +241,15 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
             className="btn btn-sm btn-primary"
             onClick={handleSave}
             disabled={isSaving}
-            style={{ minWidth: '100px' }}
+            style={{ minWidth: "100px" }}
           >
             {isSaving ? (
               <>
-                <span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" />
+                <span
+                  className="spinner-border spinner-border-sm me-1"
+                  role="status"
+                  aria-hidden="true"
+                />
                 Saving...
               </>
             ) : (
@@ -243,11 +263,11 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
 
         {/* Keyboard Shortcuts Helper */}
         <div
-          className={`px-3 py-2 small text-center ${isDark ? 'text-light opacity-50' : 'text-muted'}`}
+          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'
+            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

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

@@ -1,5 +1,10 @@
-import { defaultAssistantId, getAllAssistantIdsMentioned, IWorkflow, runWorkflow, Workflows } from "@peers-app/peers-sdk";
-import React from "react";
+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";
@@ -15,15 +20,18 @@ interface IProps {
 }
 
 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]);
+  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 />;
@@ -32,14 +40,15 @@ export const WorkflowDetails = (props: IProps) => {
   async function saveChanges() {
     if (!workflow) return;
     workflow.updatedAt = new Date();
-    const assistantsMentioned = await getAllAssistantIdsMentioned(workflow.instructions[0].markdown ?? '');
+    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>
@@ -50,26 +59,24 @@ export const WorkflowDetails = (props: IProps) => {
           <h4>
             <Input
               key={workflow.workflowId}
-              className='border border-0'
-              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              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());
-          }}>
+          <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}
-          />
-
+          <SaveButton key={workflow.workflowId} onClick={saveChanges} doc={workflow} />
         </div>
       </div>
 
@@ -77,23 +84,26 @@ export const WorkflowDetails = (props: IProps) => {
         key={workflow.workflowId}
         tabs={[
           {
-            name: 'Info', content:
+            name: "Info",
+            content: (
               <ScreenTabBody>
                 <WorkflowInfo workflow={workflow} />
               </ScreenTabBody>
+            ),
           },
           {
-            name: 'Instructions', content:
+            name: "Instructions",
+            content: (
               <ScreenTabBody>
                 <WorkflowInstructions workflow={workflow} />
               </ScreenTabBody>
+            ),
           },
         ]}
       />
     </div>
-  )
-}
-
+  );
+};
 
 async function _runWorkflow(workflow: IWorkflow) {
   // TODO maybe warn if there are pending changes

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

@@ -1,10 +1,7 @@
-
+import type { IDoc, IWorkflow } from "@peers-app/peers-sdk";
 import { Input } from "../../components/input";
-import React from "react";
-import { IDoc, IWorkflow } from "@peers-app/peers-sdk";
 import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
 
-
 export const WorkflowInfo = (props: { workflow: IDoc<IWorkflow> }) => {
   const { workflow } = props;
 
@@ -19,11 +16,7 @@ export const WorkflowInfo = (props: { workflow: IDoc<IWorkflow> }) => {
       />
 
       <small>Description:</small>
-      <MarkdownEditorInline
-        value={workflow.qs.description}
-      />
-
+      <MarkdownEditorInline value={workflow.qs.description} />
     </div>
-  )
-}
-
+  );
+};

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

@@ -1,6 +1,12 @@
-import { IDoc, IWorkflow, IWorkflowInstruction, Observable, observable } from "@peers-app/peers-sdk";
-import React, { useEffect, useState } from "react";
-import { IEditorEffects } from "../../components/markdown-editor/editor";
+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";
 
@@ -13,15 +19,17 @@ export const WorkflowInstructions = (props: { workflow: IDoc<IWorkflow> }) => {
 
   return (
     <div>
-      {workflow.qs.instructions().map((instruction, i) => {
+      {workflow.qs.instructions().map((_instruction, i) => {
         return (
           <div
             key={i}
             className="mb-2"
-            style={{
-              // border: '1px solid #ccc',
-              // borderRadius: '5px',
-            }}
+            style={
+              {
+                // border: '1px solid #ccc',
+                // borderRadius: '5px',
+              }
+            }
           >
             <WorkflowInstruction
               workflow={workflow}
@@ -30,12 +38,11 @@ export const WorkflowInstructions = (props: { workflow: IDoc<IWorkflow> }) => {
               focusedInstructionIndex={focusedInstructionIndex}
             />
           </div>
-        )
+        );
       })}
     </div>
-  )
-}
-
+  );
+};
 
 interface IWorkflowInstructionProps {
   workflow: IDoc<IWorkflow>;
@@ -53,42 +60,41 @@ const WorkflowInstruction = (props: IWorkflowInstructionProps) => {
 
   const thisInstruction = instructions()[thisInstructionIndex];
 
-  const [markdownObs] = useState(() => observable(thisInstruction.markdown ?? ''));
+  const [markdownObs] = useState(() => observable(thisInstruction.markdown ?? ""));
 
   useEffect(() => {
-    const sub = focusedInstructionIndex.subscribe(focusedIndex => {
+    const sub = focusedInstructionIndex.subscribe((focusedIndex) => {
       if (focusedIndex === thisInstructionIndex) {
         mdEffects.focus?.();
       }
     });
     return () => sub.dispose();
-  }, [thisInstructionIndex]);
+  }, [thisInstructionIndex, focusedInstructionIndex.subscribe, mdEffects.focus]);
 
   useEffect(() => {
-    markdownObs(thisInstruction.markdown ?? '');
-    const sub = markdownObs.subscribe(value => {
+    markdownObs(thisInstruction.markdown ?? "");
+    const sub = markdownObs.subscribe((value) => {
       thisInstruction.markdown = value;
       props.workflow.q(props.workflow.q() + 1);
     });
     return () => sub.dispose();
-  }, [thisInstruction, instructions(), thisInstructionIndex]);
-
+  }, [thisInstruction, markdownObs, props.workflow.q]);
 
   let backspacedOnEmpty = false;
   mdEffects.onKeyDown = (evt) => {
-    if (evt.key === 'Enter') {
+    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.splice(thisInstructionIndex + 1, 0, { markdown: "" });
         instructions([..._instructions]);
         markdownObs(markdownObs().trim());
         focusedInstructionIndex(thisInstructionIndex + 1);
       }
     }
-    if (evt.key === 'Backspace') {
-      if (markdownObs().trim() === '') {
+    if (evt.key === "Backspace") {
+      if (markdownObs().trim() === "") {
         if (backspacedOnEmpty) {
           evt.preventDefault();
           const _instructions = instructions();
@@ -103,11 +109,12 @@ const WorkflowInstruction = (props: IWorkflowInstructionProps) => {
         }
       }
     }
+    return false;
   };
 
   function runThisInstruction() {
     // runInstructions([thisInstruction]);
-    confirm('TODO: run this instruction not implemented yet');
+    confirm("TODO: run this instruction not implemented yet");
   }
 
   return (
@@ -117,11 +124,11 @@ const WorkflowInstruction = (props: IWorkflowInstructionProps) => {
       autoFocus={props.thisInstructionIndex === focusedInstructionIndex()}
       topRightControls={[
         {
-          iconClass: 'bi bi-play',
+          iconClass: "bi bi-play",
           title: `Run this instruction.`,
           onClick: runThisInstruction,
-        }
+        },
       ]}
     />
-  )
-}
+  );
+};