@peers-app/peers-ui 0.20.2 → 0.20.3

package/dist/screens/settings/settings-page.d.ts

@@ -1,2 +1,3 @@
 import type React from "react";
+/** Application settings organized by user, system, and developer concerns. */
 export declare const SettingsPage: React.FC;

package/dist/screens/settings/settings-page.js

@@ -48,6 +48,7 @@ const voice_settings_1 = require("./voice-settings");
 function getAppVersion() {
     return globalThis.__PEERS_APP_VERSION__ || "unknown";
 }
+/** Application settings organized by user, system, and developer concerns. */
 const SettingsPage = () => {
     return ((0, jsx_runtime_1.jsx)("div", { className: "container-fluid", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: [
                 {
@@ -95,7 +96,7 @@ const ProfileSection = () => {
             try {
                 const userContext = await (0, peers_sdk_1.getUserContext)();
                 const device = await (0, peers_sdk_1.Devices)(userContext.userDataContext).get(deviceId);
-                deviceName(device?.name || "");
+                deviceName((device?.name || "").slice(0, peers_sdk_1.DISPLAY_NAME_MAX_LENGTH));
                 savedDeviceName(device?.name || "");
             }
             catch (err) {
@@ -111,7 +112,10 @@ const ProfileSection = () => {
             // signAndSave call is serialized to JSON over the socket to the server.
             if (me?.q()) {
                 const userContext = await (0, peers_sdk_1.getUserContext)();
-                await (0, peers_sdk_1.Users)(userContext.userDataContext).signAndSave(me.toJS());
+                const updatedUser = me.toJS();
+                updatedUser.name = updatedUser.name.slice(0, peers_sdk_1.DISPLAY_NAME_MAX_LENGTH);
+                await (0, peers_sdk_1.Users)(userContext.userDataContext).signAndSave(updatedUser);
+                me.qs.name(updatedUser.name);
                 me.q(0); // Reset change counter
             }
             // Save device name if changed
@@ -142,7 +146,7 @@ const ProfileSection = () => {
         return null;
     }
     const hasChanges = !!me.q() || deviceName() !== savedDeviceName();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center mb-3", children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-0 me-auto", children: "Settings" }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary btn-sm", onClick: handleSave, disabled: !hasChanges, children: "Save" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("small", { className: "form-label", children: "Display Name:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.qs.name, className: "form-control", placeholder: "Enter your name" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Device Name:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Give this device a friendly name to identify it in your network." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: deviceName, className: "form-control", placeholder: "e.g., My Laptop" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["User ID:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies you to all other users." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.userId, className: "form-control", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Public Key:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This is your public key that other users will use to verify your signatures." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.publicKey, className: "form-control form-control-sm", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Public Box Key:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This is the public key that other users can use to encrypt data so that only you can open it." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.publicBoxKey, className: "form-control form-control-sm", disabled: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Device ID:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies this device on Peers networks." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: deviceId || "", className: "form-control form-control-sm", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("small", { className: "form-label", children: "App Version:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: getAppVersion(), className: "form-control form-control-sm", disabled: true })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center mb-3", children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-0 me-auto", children: "Settings" }), (0, jsx_runtime_1.jsx)("button", { className: "btn btn-primary btn-sm", onClick: handleSave, disabled: !hasChanges, children: "Save" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("small", { className: "form-label", children: "Display Name:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.qs.name, className: "form-control", maxLength: peers_sdk_1.DISPLAY_NAME_MAX_LENGTH, placeholder: "Enter your name" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Device Name:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "Give this device a friendly name to identify it in your network." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: deviceName, className: "form-control", maxLength: peers_sdk_1.DISPLAY_NAME_MAX_LENGTH, placeholder: "e.g., My Laptop" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["User ID:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies you to all other users." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.userId, className: "form-control", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "row", children: [(0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Public Key:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This is your public key that other users will use to verify your signatures." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.publicKey, className: "form-control form-control-sm", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "col-md-6 mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Public Box Key:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This is the public key that other users can use to encrypt data so that only you can open it." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: me.publicBoxKey, className: "form-control form-control-sm", disabled: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("small", { className: "form-label", children: ["Device ID:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies this device on Peers networks." })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: deviceId || "", className: "form-control form-control-sm", disabled: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("small", { className: "form-label", children: "App Version:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: getAppVersion(), className: "form-control form-control-sm", disabled: true })] })] }));
 };
 const PackagesRootDirectory = () => {
     return ((0, jsx_runtime_1.jsxs)("div", { className: "mt-3", children: [(0, jsx_runtime_1.jsxs)("small", { children: ["Packages Directory:", (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `Changing this will not effect existing packages.` })] }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: peers_sdk_1.packagesRootDir, className: "form-control" })] }));

package/dist/screens/welcome-modal.d.ts

@@ -2,5 +2,6 @@ interface WelcomeModalProps {
     colorMode: string;
     onClose: () => void;
 }
+/** First-run profile dialog for naming the user and current device. */
 export declare function WelcomeModal({ colorMode, onClose }: WelcomeModalProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/screens/welcome-modal.js

@@ -15,6 +15,7 @@ async function tryRegisterPeersServicesAfterWelcome() {
         console.warn("Peers services registration after welcome modal:", err);
     }
 }
+/** First-run profile dialog for naming the user and current device. */
 function WelcomeModal({ colorMode, onClose }) {
     const [displayName, setDisplayName] = (0, react_1.useState)("");
     const [deviceName, setDeviceName] = (0, react_1.useState)("");
@@ -27,7 +28,7 @@ function WelcomeModal({ colorMode, onClose }) {
     // Pre-populate with existing values if any
     (0, react_1.useEffect)(() => {
         if (me?.name) {
-            setDisplayName(me.name);
+            setDisplayName(me.name.slice(0, peers_sdk_1.DISPLAY_NAME_MAX_LENGTH));
         }
     }, [me?.name]);
     (0, react_1.useEffect)(() => {
@@ -38,7 +39,7 @@ function WelcomeModal({ colorMode, onClose }) {
                 const userContext = await (0, peers_sdk_1.getUserContext)();
                 const device = await (0, peers_sdk_1.Devices)(userContext.userDataContext).get(deviceId);
                 if (device?.name) {
-                    setDeviceName(device.name);
+                    setDeviceName(device.name.slice(0, peers_sdk_1.DISPLAY_NAME_MAX_LENGTH));
                 }
             }
             catch (err) {
@@ -115,16 +116,16 @@ function WelcomeModal({ colorMode, onClose }) {
                 overflow: "hidden",
             }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "p-4 text-center", style: {
                         borderBottom: `1px solid ${isDark ? "#495057" : "#dee2e6"}`,
-                    }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-circle text-primary d-block mb-3", style: { fontSize: "48px" } }), (0, jsx_runtime_1.jsx)("h4", { className: "mb-2", children: "Welcome to Peers!" }), (0, jsx_runtime_1.jsx)("p", { className: `mb-0 ${isDark ? "text-light opacity-75" : "text-muted"}`, style: { fontSize: "14px" }, children: "Let's personalize your experience. You can change these anytime in Settings." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4", children: [error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger py-2 px-3 mb-3", style: { fontSize: "14px" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-exclamation-triangle me-2" }), error] })), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("label", { className: "form-label fw-semibold mb-1", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person me-2" }), "Display Name"] }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: `form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`, placeholder: "How should others see you?", value: displayName, onChange: (e) => {
+                    }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person-circle text-primary d-block mb-3", style: { fontSize: "48px" } }), (0, jsx_runtime_1.jsx)("h4", { className: "mb-2", children: "Welcome to Peers!" }), (0, jsx_runtime_1.jsx)("p", { className: `mb-0 ${isDark ? "text-light opacity-75" : "text-muted"}`, style: { fontSize: "14px" }, children: "Let's personalize your experience. You can change these anytime in Settings." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4", children: [error && ((0, jsx_runtime_1.jsxs)("div", { className: "alert alert-danger py-2 px-3 mb-3", style: { fontSize: "14px" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-exclamation-triangle me-2" }), error] })), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("label", { className: "form-label fw-semibold mb-1", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-person me-2" }), "Display Name"] }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: `form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`, maxLength: peers_sdk_1.DISPLAY_NAME_MAX_LENGTH, placeholder: "How should others see you?", value: displayName, onChange: (e) => {
                                         setDisplayName(e.target.value);
                                         setError(null);
-                                    }, onKeyDown: handleKeyDown, disabled: isSaving, maxLength: 100, style: {
+                                    }, onKeyDown: handleKeyDown, disabled: isSaving, style: {
                                         fontSize: "14px",
                                         backgroundColor: isDark ? "#343a40" : "#ffffff",
-                                    } }), (0, jsx_runtime_1.jsx)("small", { className: isDark ? "text-light opacity-50" : "text-muted", style: { fontSize: "11px" }, children: "This name will be visible to others when you connect" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("label", { className: "form-label fw-semibold mb-1", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-laptop me-2" }), "Device Name"] }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: `form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`, placeholder: "e.g., My Laptop, Work Computer", value: deviceName, onChange: (e) => {
+                                    } }), (0, jsx_runtime_1.jsx)("small", { className: isDark ? "text-light opacity-50" : "text-muted", style: { fontSize: "11px" }, children: "This name will be visible to others when you connect" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsxs)("label", { className: "form-label fw-semibold mb-1", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-laptop me-2" }), "Device Name"] }), (0, jsx_runtime_1.jsx)("input", { type: "text", className: `form-control ${isDark ? "bg-dark text-light border-secondary" : ""}`, maxLength: peers_sdk_1.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, maxLength: 100, style: {
+                                    }, onKeyDown: handleKeyDown, disabled: isSaving, style: {
                                         fontSize: "14px",
                                         backgroundColor: isDark ? "#343a40" : "#ffffff",
                                     } }), (0, jsx_runtime_1.jsx)("small", { className: isDark ? "text-light opacity-50" : "text-muted", style: { fontSize: "11px" }, children: "Helps you identify this device when syncing across multiple devices" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "p-3 d-flex justify-content-between align-items-center", style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.20.2",
+  "version": "0.20.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -28,7 +28,7 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.20.2",
+    "@peers-app/peers-sdk": "^0.20.3",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -39,7 +39,7 @@
     "@babel/preset-env": "^7.24.5",
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@peers-app/peers-sdk": "0.20.2",
+    "@peers-app/peers-sdk": "0.20.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/src/screens/settings/settings-page.tsx

@@ -1,6 +1,7 @@
 import {
   autoUpdatePeersCore,
   Devices,
+  DISPLAY_NAME_MAX_LENGTH,
   getUserContext,
   type IDevice,
   packagesRootDir,
@@ -37,6 +38,7 @@ function getAppVersion() {
   return (globalThis as PeersGlobal).__PEERS_APP_VERSION__ || "unknown";
 }
 
+/** Application settings organized by user, system, and developer concerns. */
 export const SettingsPage: React.FC = () => {
   return (
     <div className="container-fluid">
@@ -121,7 +123,7 @@ const ProfileSection: React.FC = () => {
       try {
         const userContext = await getUserContext();
         const device = await Devices(userContext.userDataContext).get(deviceId);
-        deviceName(device?.name || "");
+        deviceName((device?.name || "").slice(0, DISPLAY_NAME_MAX_LENGTH));
         savedDeviceName(device?.name || "");
       } catch (err) {
         console.error("Error loading device name:", err);
@@ -137,7 +139,10 @@ const ProfileSection: React.FC = () => {
       // signAndSave call is serialized to JSON over the socket to the server.
       if (me?.q()) {
         const userContext = await getUserContext();
-        await Users(userContext.userDataContext).signAndSave(me.toJS());
+        const updatedUser = me.toJS();
+        updatedUser.name = updatedUser.name.slice(0, DISPLAY_NAME_MAX_LENGTH);
+        await Users(userContext.userDataContext).signAndSave(updatedUser);
+        me.qs.name(updatedUser.name);
         me.q(0); // Reset change counter
       }
 
@@ -183,7 +188,12 @@ const ProfileSection: React.FC = () => {
 
       <div className="mb-3">
         <small className="form-label">Display Name:</small>
-        <Input value={me.qs.name} className="form-control" placeholder="Enter your name" />
+        <Input
+          value={me.qs.name}
+          className="form-control"
+          maxLength={DISPLAY_NAME_MAX_LENGTH}
+          placeholder="Enter your name"
+        />
       </div>
 
       <div className="mb-3">
@@ -191,7 +201,12 @@ const ProfileSection: React.FC = () => {
           Device Name:
           <Tooltip markdownContent="Give this device a friendly name to identify it in your network." />
         </small>
-        <Input value={deviceName} className="form-control" placeholder="e.g., My Laptop" />
+        <Input
+          value={deviceName}
+          className="form-control"
+          maxLength={DISPLAY_NAME_MAX_LENGTH}
+          placeholder="e.g., My Laptop"
+        />
       </div>
 
       <div className="mb-3">

package/src/screens/welcome-modal.tsx

@@ -1,5 +1,6 @@
 import {
   Devices,
+  DISPLAY_NAME_MAX_LENGTH,
   getMe,
   getUserContext,
   hasShownWelcomeModal,
@@ -28,6 +29,7 @@ async function tryRegisterPeersServicesAfterWelcome(): Promise<void> {
   }
 }
 
+/** 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("");
@@ -43,7 +45,7 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
   // Pre-populate with existing values if any
   useEffect(() => {
     if (me?.name) {
-      setDisplayName(me.name);
+      setDisplayName(me.name.slice(0, DISPLAY_NAME_MAX_LENGTH));
     }
   }, [me?.name]);
 
@@ -54,7 +56,7 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
         const userContext = await getUserContext();
         const device = await Devices(userContext.userDataContext).get(deviceId);
         if (device?.name) {
-          setDeviceName(device.name);
+          setDeviceName(device.name.slice(0, DISPLAY_NAME_MAX_LENGTH));
         }
       } catch (err) {
         console.error("Error loading device name:", err);
@@ -182,6 +184,7 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
             <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) => {
@@ -190,7 +193,6 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
               }}
               onKeyDown={handleKeyDown}
               disabled={isSaving}
-              maxLength={100}
               style={{
                 fontSize: "14px",
                 backgroundColor: isDark ? "#343a40" : "#ffffff",
@@ -213,6 +215,7 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
             <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) => {
@@ -221,7 +224,6 @@ export function WelcomeModal({ colorMode, onClose }: WelcomeModalProps) {
               }}
               onKeyDown={handleKeyDown}
               disabled={isSaving}
-              maxLength={100}
               style={{
                 fontSize: "14px",
                 backgroundColor: isDark ? "#343a40" : "#ffffff",