@peers-app/peers-ui 0.0.16 → 0.6.14

package/.claude/settings.local.json

@@ -0,0 +1,34 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(mkdir:*)",
+      "Bash(yarn add:*)",
+      "Bash(yarn test:*)",
+      "Bash(npm test)",
+      "Bash(yarn build)",
+      "Bash(yarn jest:*)",
+      "Bash(mv:*)",
+      "Bash(npm run build:*)",
+      "Bash(cd:*)",
+      "Bash(npm test:*)",
+      "Bash(npm run test:*)",
+      "Bash(yarn tsc:*)",
+      "WebFetch(domain:developer.mozilla.org)",
+      "Read(/Users/mark.archer/peers-device/src/**)",
+      "Read(/Users/mark.archer/peers-packages/tasks/**)",
+      "Read(/Users/mark.archer/peers-packages/tasks/**)",
+      "Read(/Users/mark.archer/peers-packages/tasks/**)",
+      "Read(/Users/mark.archer/peers-packages/tasks/**)",
+      "Read(/Users/mark.archer/peers-packages/tasks/src/**)",
+      "Read(/Users/mark.archer/peers-packages/tasks/dist/**)",
+      "Read(/Users/mark.archer/peers-packages/tasks/dist/**)",
+      "Read(/Users/mark.archer/peers-packages/tasks/dist/**)",
+      "Read(/Users/mark.archer/peers-packages/tasks/src/**)",
+      "Read(/Users/mark.archer/peers-packages/tasks/src/**)"
+    ],
+    "deny": [],
+    "additionalDirectories": [
+      "/Users/mark.archer/peers-packages/tasks/dist"
+    ]
+  }
+}

package/dist/index.d.ts

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

package/dist/index.js

@@ -14,7 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./app"), exports);
-__exportStar(require("./three-bar-layout/three-bar-layout"), exports);
 __exportStar(require("./screens/events/cron"), exports);
 __exportStar(require("./tabs-layout/tabs-layout"), exports);

package/dist/screens/groups/group-members.js

@@ -54,7 +54,7 @@ const GroupMembersUI = (props) => {
     // Check if current user has admin privileges in this group
     const userPermissions = (0, hooks_1.usePromise)(async () => {
         const currentUserContext = await (0, peers_sdk_1.getUserContext)();
-        const currentUserId = currentUserContext.userId();
+        const currentUserId = currentUserContext.userId;
         const userRole = await (0, peers_sdk_1.getUserRole)(groupId, currentUserId);
         return {
             isMember: !!userRole,

package/dist/screens/setup-user.d.ts

@@ -1,2 +1,2 @@
 import React from "react";
-export declare const SetupUser: () => React.JSX.Element;
+export declare const SetupUser: () => React.JSX.Element | null;

package/dist/screens/setup-user.js

@@ -36,235 +36,138 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SetupUser = void 0;
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = __importStar(require("react"));
-const input_1 = require("../components/input");
-const markdown_with_mentions_1 = require("../components/markdown-with-mentions");
-const tooltip_1 = require("../components/tooltip");
-const globals_1 = require("../globals");
-async function sendNewUserMessage(userId) {
-    const user = await (0, peers_sdk_1.Users)().get(userId);
-    if (!user) {
-        throw new Error('user not found');
-    }
-    const primaryAssistant = await (0, peers_sdk_1.getPrimaryAssistant)();
-    const message = {
-        messageId: (0, peers_sdk_1.newid)(),
-        message: [
-            `Hi, ${user.name}! Welcome to Peers! I'm your primary AI assistant.`,
-            "\n\n",
-            "If you have any questions, just ask! I'm here to help.",
-            // `\nRemind Mark to add some Getting-Started tasks that I can work through with you.`,
-        ].join(' '),
-        userId: user.userId,
-        assistantId: primaryAssistant?.assistantId,
-        channelId: user.userId,
-        createdAt: new Date(),
-    };
-    await (0, peers_sdk_1.Messages)().insert(message);
-    (0, globals_1.openThread)(message.messageId);
-}
+const hooks_1 = require("../hooks");
+const color_mode_dropdown_1 = require("./settings/color-mode-dropdown");
 const SetupUser = () => {
-    const [username, setUsername] = (0, react_1.useState)('');
-    let [userId, setUserId] = (0, react_1.useState)('');
+    const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
+    const [step, setStep] = (0, react_1.useState)('select-user-type');
+    const [isExistingUser, setIsExistingUser] = (0, react_1.useState)(null);
+    const [userId, setUserId] = (0, react_1.useState)('');
     const [secretKey, setSecretKey] = (0, react_1.useState)('');
-    const [existingUser, setExistingUser] = (0, react_1.useState)(false);
-    const [registerAccount, setRegisterAccount] = (0, react_1.useState)(true);
-    const [showUserKeys, setShowUserKeys] = (0, react_1.useState)(false);
-    async function onSubmit(e) {
-        e.preventDefault();
-        let keys;
-        if (existingUser) {
-            if (!userId || !secretKey) {
-                confirm('Please enter a userId and secret key');
-                return;
-            }
-            if ((0, peers_sdk_1.isid)(userId) !== true) {
-                confirm('Invalid userId');
-                return;
-            }
-            try {
-                keys = (0, peers_sdk_1.loadKeys)(secretKey);
-                const msg = (0, peers_sdk_1.newid)();
-                const msgSigned = (0, peers_sdk_1.signMessageWithSecretKey)(msg, keys.secretKey);
-                const msgOpened = (0, peers_sdk_1.openMessageWithPublicKey)(msgSigned, keys.publicKey);
-                if (msg !== msgOpened) {
-                    throw new Error('signed message does not match');
-                }
-            }
-            catch (e) {
-                confirm('Invalid secret key');
-                return;
-            }
-        }
-        else {
-            keys = (0, peers_sdk_1.newKeys)();
+    const [error, setError] = (0, react_1.useState)('');
+    const [isValidating, setIsValidating] = (0, react_1.useState)(false);
+    const isDark = _colorMode === 'dark';
+    const handleNewUser = async () => {
+        setError('');
+        setIsValidating(true);
+        try {
+            // Generate new user credentials
+            const keys = (0, peers_sdk_1.newKeys)();
+            const _userId = (0, peers_sdk_1.newid)();
+            // Call setUserIdAndSecretKey
+            await peers_sdk_1.rpcServerCalls.setUserIdAndSecretKey(_userId, keys.secretKey);
+            // Success - reload the app
+            window.location.reload();
         }
-        const _userId = userId || globals_1.me.userId;
-        let _me = await (0, peers_sdk_1.Users)().get(_userId);
-        const name = username.trim() || "Unnamed_1";
-        if (!_me) {
-            _me = {
-                userId: _userId,
-                name,
-                publicKey: keys.publicKey,
-                publicBoxKey: keys.publicBoxKey,
-            };
-            await (0, peers_sdk_1.Users)().insert(_me);
+        catch (err) {
+            setError('Error creating new user: ' + String(err).replaceAll('\n', ' '));
+            setIsValidating(false);
         }
-        else {
-            _me.name = name;
-            _me.publicKey = keys.publicKey;
-            _me.publicBoxKey = keys.publicBoxKey;
-            await (0, peers_sdk_1.Users)().update(_me);
+    };
+    const handleExistingUser = async () => {
+        setError('');
+        // Validate inputs
+        if (!userId.trim() || !secretKey.trim()) {
+            setError('Please enter both User ID and Secret Key');
+            return;
         }
-        (0, peers_sdk_1.myUserId)(_userId);
-        const result = await peers_sdk_1.rpcServerCalls.setSecretKey(keys.secretKey).catch(err => {
-            confirm('Error setting user id and secret key: ' + String(err).replaceAll('\n', ' '));
-            return err;
-        });
-        if (result) {
+        if ((0, peers_sdk_1.isid)(userId) !== true) {
+            setError('Invalid User ID format');
             return;
         }
-        // if changing user then use new device id
-        (0, peers_sdk_1.thisDeviceId)((0, peers_sdk_1.newid)());
-        if (existingUser) {
-            (0, globals_1.mainContentPath)('profile');
-            setTimeout(() => {
-                (0, globals_1.mainContentPath)('profile');
-                window.location.reload();
-            }, 100);
+        setIsValidating(true);
+        try {
+            // Validate secret key
+            const keys = (0, peers_sdk_1.loadKeys)(secretKey);
+            const msg = (0, peers_sdk_1.newid)();
+            const msgSigned = (0, peers_sdk_1.signMessageWithSecretKey)(msg, keys.secretKey);
+            const msgOpened = (0, peers_sdk_1.openMessageWithPublicKey)(msgSigned, keys.publicKey);
+            if (msg !== msgOpened) {
+                throw new Error('Secret key validation failed');
+            }
+            // Call setUserIdAndSecretKey
+            await peers_sdk_1.rpcServerCalls.setUserIdAndSecretKey(userId, keys.secretKey);
+            // Success - reload the app
+            window.location.reload();
         }
-        else {
-            setUserId(_userId);
-            setSecretKey(keys.secretKey);
-            setShowUserKeys(true);
+        catch (err) {
+            setError('Invalid credentials: ' + String(err).replaceAll('\n', ' '));
+            setIsValidating(false);
         }
+    };
+    // Step 1: Select User Type
+    if (step === 'select-user-type' && isExistingUser === null) {
+        return (react_1.default.createElement("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { minHeight: '100vh', paddingTop: '80px', backgroundColor: isDark ? '#212529' : '#f8f9fa' } },
+            react_1.default.createElement("div", { className: "card shadow", style: { maxWidth: '500px', width: '100%', backgroundColor: isDark ? '#2d3238' : '#ffffff' } },
+                react_1.default.createElement("div", { className: "card-body p-4 p-md-5" },
+                    react_1.default.createElement("div", { className: "text-center mb-4" },
+                        react_1.default.createElement("h2", { className: `fw-bold mb-2 ${isDark ? 'text-light' : ''}` }, "Welcome to Peers"),
+                        react_1.default.createElement("p", { className: isDark ? 'text-light opacity-75' : 'text-muted' }, "Let's get you set up")),
+                    react_1.default.createElement("div", { className: "d-grid gap-3" },
+                        react_1.default.createElement("button", { className: "btn btn-lg btn-primary py-3", onClick: () => setIsExistingUser(false) },
+                            react_1.default.createElement("div", { className: "d-flex align-items-center justify-content-center" },
+                                react_1.default.createElement("i", { className: "bi bi-person-plus fs-4 me-2" }),
+                                react_1.default.createElement("div", { className: "text-start" },
+                                    react_1.default.createElement("div", { className: "fw-semibold" }, "I'm a New User"),
+                                    react_1.default.createElement("small", { className: "opacity-75" }, "Create a new account")))),
+                        react_1.default.createElement("button", { className: `btn btn-lg py-3 ${isDark ? 'btn-outline-light' : 'btn-outline-primary'}`, onClick: () => setIsExistingUser(true) },
+                            react_1.default.createElement("div", { className: "d-flex align-items-center justify-content-center" },
+                                react_1.default.createElement("i", { className: "bi bi-box-arrow-in-right fs-4 me-2" }),
+                                react_1.default.createElement("div", { className: "text-start" },
+                                    react_1.default.createElement("div", { className: "fw-semibold" }, "I'm an Existing User"),
+                                    react_1.default.createElement("small", { className: "opacity-75" }, "Sign in with your credentials")))))))));
     }
-    if (showUserKeys) {
-        return react_1.default.createElement(ShowUserKeys, { userId: userId, secretKey: secretKey });
+    // Step 2: New User Confirmation
+    if (isExistingUser === false) {
+        return (react_1.default.createElement("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { minHeight: '100vh', paddingTop: '80px', backgroundColor: isDark ? '#212529' : '#f8f9fa' } },
+            react_1.default.createElement("div", { className: "card shadow", style: { maxWidth: '500px', width: '100%', backgroundColor: isDark ? '#2d3238' : '#ffffff' } },
+                react_1.default.createElement("div", { className: "card-body p-4 p-md-5" },
+                    react_1.default.createElement("div", { className: "text-center mb-4" },
+                        react_1.default.createElement("i", { className: "bi bi-person-plus-fill text-primary fs-1 mb-3 d-block" }),
+                        react_1.default.createElement("h3", { className: `fw-bold mb-2 ${isDark ? 'text-light' : ''}` }, "Create New Account"),
+                        react_1.default.createElement("p", { className: isDark ? 'text-light opacity-75' : 'text-muted' }, "We'll generate secure credentials for you")),
+                    error && (react_1.default.createElement("div", { className: "alert alert-danger", role: "alert" },
+                        react_1.default.createElement("i", { className: "bi bi-exclamation-triangle me-2" }),
+                        error)),
+                    react_1.default.createElement("div", { className: "d-grid gap-2" },
+                        react_1.default.createElement("button", { className: "btn btn-lg btn-primary", onClick: handleNewUser, disabled: isValidating }, isValidating ? (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-2" }),
+                            "Creating Account...")) : (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement("i", { className: "bi bi-check-circle me-2" }),
+                            "Create Account"))),
+                        react_1.default.createElement("button", { className: "btn btn-outline-secondary", onClick: () => setIsExistingUser(null), disabled: isValidating },
+                            react_1.default.createElement("i", { className: "bi bi-arrow-left me-2" }),
+                            "Back"))))));
     }
-    return (react_1.default.createElement("div", { className: 'container-fluid' },
-        react_1.default.createElement("div", { className: "position-relative", style: {
-                height: '100vh',
-            } },
-            react_1.default.createElement("div", { className: "position-absolute start-50 translate-middle bg-body-tertiary", style: {
-                    width: '400px',
-                    padding: '20px',
-                    border: '1px solid #ccc',
-                    borderRadius: '5px',
-                    top: '350px',
-                } },
-                react_1.default.createElement("h3", { className: 'text-center' }, "Setup User"),
-                react_1.default.createElement("form", { onSubmit: onSubmit },
-                    react_1.default.createElement("label", null, "Display Name"),
-                    react_1.default.createElement(tooltip_1.Tooltip, { positions: ['top', 'bottom', 'right', 'left'], markdownContent: "This can be whatever you want it to be.  You can change it any time." }),
-                    react_1.default.createElement("input", { id: "display-name", type: 'text', className: 'form-control', value: username, onChange: (e) => setUsername(e.target.value) }),
-                    react_1.default.createElement("div", { className: "mt-2" },
-                        react_1.default.createElement("label", null, "Existing User"),
-                        react_1.default.createElement(tooltip_1.Tooltip, { positions: ['top', 'bottom', 'right', 'left'], markdownContent: "Check this if you have already have an account and need to enter your existing `userId` and `secretKey`." }),
-                        "\u00A0",
-                        react_1.default.createElement("input", { type: "checkbox", checked: existingUser, onChange: (e) => {
-                                const checked = e.target.checked;
-                                setExistingUser(checked);
-                                if (checked) {
-                                    setUserId('');
-                                    setSecretKey('');
-                                }
-                            } })),
-                    existingUser && (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("br", null),
-                        react_1.default.createElement("label", null, "User Id"),
-                        react_1.default.createElement(tooltip_1.Tooltip, { positions: ['top', 'bottom', 'right', 'left'], markdownContent: "The user id that was generated when you first setup your account." }),
-                        react_1.default.createElement("input", { id: "user-id", type: "text", className: 'form-control', value: userId, onChange: (e) => setUserId(e.target.value), disabled: !existingUser }),
-                        react_1.default.createElement("br", null),
-                        react_1.default.createElement("label", null, "Secret Key"),
-                        react_1.default.createElement(tooltip_1.Tooltip, { positions: ['top', 'bottom', 'right', 'left'], markdownContent: "The secret key for the public key that is currently associated with this account." }),
-                        react_1.default.createElement("input", { id: "secret-key", type: 'password', className: 'form-control', value: secretKey, disabled: !existingUser, onChange: (e) => setSecretKey(e.target.value) }))),
-                    react_1.default.createElement("div", { className: "mt-2" },
-                        react_1.default.createElement("label", null, "Sync with Peers"),
-                        react_1.default.createElement(tooltip_1.Tooltip, { positions: ['top', 'bottom', 'right', 'left'], markdownContent: [
-                                "### PLEASE READ",
-                                '\n',
-                                "Leave this checked to register your `userId` and `publicKey` with [https://peers.app](https://peers.app) server.",
-                                "\n\n**No other data is sent to the server.**\n\n",
-                                "This is not required to use Peers but it is required to use the built-in network services.",
-                                "Additionally this will ensure that your `userId` is not used publicly by someone else.",
-                                "\n\n",
-                                "**This is _highly_ recommended** but if your goal is absolute privacy, uncheck this.",
-                                "\n\n",
-                                "If you choose to not do this now, you can still do it later from the settings screen.",
-                            ].join(' ') }),
-                        "\u00A0",
-                        react_1.default.createElement("input", { type: "checkbox", checked: registerAccount, onChange: (e) => setRegisterAccount(e.target.checked) })),
-                    react_1.default.createElement("button", { className: 'btn btn-primary float-end', onClick: e => onSubmit(e) }, "Submit"))))));
-};
-exports.SetupUser = SetupUser;
-const ShowUserKeys = (props) => {
-    const { userId, secretKey } = props;
-    const [secretKeySaved, setSecretKeySaved] = (0, react_1.useState)(false);
-    async function continueToApp() {
-        await sendNewUserMessage(userId);
-        window.location.reload();
+    // Step 3: Existing User Sign In
+    if (isExistingUser === true) {
+        return (react_1.default.createElement("div", { className: "container-fluid d-flex align-items-start justify-content-center", style: { minHeight: '100vh', paddingTop: '80px', backgroundColor: isDark ? '#212529' : '#f8f9fa' } },
+            react_1.default.createElement("div", { className: "card shadow", style: { maxWidth: '500px', width: '100%', backgroundColor: isDark ? '#2d3238' : '#ffffff' } },
+                react_1.default.createElement("div", { className: "card-body p-4 p-md-5" },
+                    react_1.default.createElement("div", { className: "text-center mb-4" },
+                        react_1.default.createElement("i", { className: "bi bi-box-arrow-in-right text-primary fs-1 mb-3 d-block" }),
+                        react_1.default.createElement("h3", { className: `fw-bold mb-2 ${isDark ? 'text-light' : ''}` }, "Sign In"),
+                        react_1.default.createElement("p", { className: isDark ? 'text-light opacity-75' : 'text-muted' }, "Enter your existing credentials")),
+                    error && (react_1.default.createElement("div", { className: "alert alert-danger", role: "alert" },
+                        react_1.default.createElement("i", { className: "bi bi-exclamation-triangle me-2" }),
+                        error)),
+                    react_1.default.createElement("form", { onSubmit: (e) => { e.preventDefault(); handleExistingUser(); } },
+                        react_1.default.createElement("div", { className: "mb-3" },
+                            react_1.default.createElement("label", { htmlFor: "userId", className: "form-label fw-semibold" }, "User ID"),
+                            react_1.default.createElement("input", { id: "userId", type: "text", className: "form-control form-control-lg", placeholder: "Enter your user ID", value: userId, onChange: (e) => setUserId(e.target.value), disabled: isValidating, autoFocus: true })),
+                        react_1.default.createElement("div", { className: "mb-4" },
+                            react_1.default.createElement("label", { htmlFor: "secretKey", className: "form-label fw-semibold" }, "Secret Key"),
+                            react_1.default.createElement("input", { id: "secretKey", type: "password", className: "form-control form-control-lg", placeholder: "Enter your secret key", value: secretKey, onChange: (e) => setSecretKey(e.target.value), disabled: isValidating })),
+                        react_1.default.createElement("div", { className: "d-grid gap-2" },
+                            react_1.default.createElement("button", { type: "submit", className: "btn btn-lg btn-primary", disabled: isValidating }, isValidating ? (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement("span", { className: "spinner-border spinner-border-sm me-2" }),
+                                "Signing In...")) : (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement("i", { className: "bi bi-check-circle me-2" }),
+                                "Sign In"))),
+                            react_1.default.createElement("button", { type: "button", className: "btn btn-outline-secondary", onClick: () => setIsExistingUser(null), disabled: isValidating },
+                                react_1.default.createElement("i", { className: "bi bi-arrow-left me-2" }),
+                                "Back")))))));
     }
-    const secretKeyExplainer = [
-        "**`NEVER SHARE THIS KEY WITH ANYONE!`**",
-        "\n\n",
-        "If this key is compromised another user can permanently take over your account.",
-        "\n\n",
-        "This key is used to:",
-        "\n - Sign messages so that other users can verify they were sent from you.",
-        "\n - Decrypt boxed data that was encrypted with your public box key.",
-        "\n    - This allows other users to send data to you securely through public channels.",
-        "\n - Encrypt your own private data so that only you can decrypt it.",
-        "\n\n",
-        "Unlike a password, this key is never sent to the server and is entirely in your control.",
-        "This is the foundation of your account's security.",
-        "If you lose this key you will lose access to your account.",
-        "If this key is compromised your account will be too and you will be putting any groups you are a part of at risk.",
-        "\n\n",
-        "Since the secret key is never sent to the server, if you lose it you'll lose access to your account.",
-        "It is highly recommend to store these in a password manager like [1Password](https://1password.com).",
-    ].join(' ');
-    return (react_1.default.createElement("div", { className: 'container-fluid' },
-        react_1.default.createElement("div", { className: "position-relative", style: {
-                height: '100vh',
-            } },
-            react_1.default.createElement("div", { className: "position-absolute top-50 start-50 translate-middle bg-body-tertiary", style: {
-                    width: '600px',
-                    padding: '20px',
-                    border: '1px solid #ccc',
-                    borderRadius: '5px',
-                } },
-                react_1.default.createElement("h3", { className: 'text-center' }, "User Created!"),
-                react_1.default.createElement("small", null, "User Id:"),
-                react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies you to all other users." }),
-                react_1.default.createElement("button", { className: 'btn btn-secondary-outline', onClick: () => {
-                        navigator.clipboard.writeText(userId);
-                    }, title: "Copy User Id to Clipboard" },
-                    react_1.default.createElement("i", { className: "bi bi-copy" })),
-                react_1.default.createElement(input_1.Input, { value: globals_1.me.userId, className: "form-control mb-3", disabled: true }),
-                react_1.default.createElement("small", null, "Secret Key:"),
-                react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: secretKeyExplainer }),
-                react_1.default.createElement("button", { className: 'btn btn-secondary-outline', onClick: () => {
-                        navigator.clipboard.writeText(props.secretKey);
-                    }, title: "Copy Secret Key to Clipboard" },
-                    react_1.default.createElement("i", { className: "bi bi-copy" })),
-                react_1.default.createElement("pre", null, secretKey),
-                react_1.default.createElement("small", null,
-                    react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: [
-                            "**`IMPORTANT:`**",
-                            "**Copy your User Id and Secret Key to a secure location.**",
-                            "\n\n",
-                            "You won't be able to view this key again after you continue.",
-                            "\n\n",
-                            "It is highly recommended to store these in a password manager like [1Password](https://1password.com).",
-                            "\n\n",
-                            "Unlike a password, this key is never sent to the server and is entirely in your control.",
-                            "If you lose this key you will lose access to your account and data.",
-                        ].join(' ') })),
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("label", { style: { textDecoration: 'underline' } }, "I Have Saved My Secret Key"),
-                    " \u00A0",
-                    react_1.default.createElement("input", { type: "checkbox", checked: secretKeySaved, onChange: (e) => setSecretKeySaved(e.target.checked) }),
-                    "\u00A0 \u00A0",
-                    react_1.default.createElement("button", { disabled: !secretKeySaved, className: (secretKeySaved ? 'btn btn-primary' : 'btn btn-secondary') + ' float-end', onClick: continueToApp }, "Continue"))))));
+    return null;
 };
+exports.SetupUser = SetupUser;

package/dist/screens/variables/variable-list.js

@@ -13,7 +13,7 @@ const ui_loader_1 = require("../../ui-router/ui-loader");
 function VariableList() {
     async function newRecord(name) {
         const userContext = await (0, peers_sdk_1.getUserContext)();
-        const isPersonal = userContext.currentlyActiveGroupId() === userContext.userId();
+        const isPersonal = userContext.currentlyActiveGroupId() === userContext.userId;
         const varName = name.replace(/\s+/g, '_');
         const pVar = await (0, peers_sdk_1.PersistentVars)().save({
             persistentVarId: (0, peers_sdk_1.newid)(),

package/dist/tabs-layout/tabs-layout.d.ts

@@ -1,5 +1,9 @@
 import React from 'react';
 import { ColorModePreference } from '../screens/settings/color-mode-dropdown';
+export declare function TabsLayoutApp(props: {
+    colorMode?: ColorModePreference;
+}): React.JSX.Element | undefined;
 export declare function TabsLayout(props: {
+    userId: string;
     colorMode?: ColorModePreference;
 }): false | React.JSX.Element;

package/dist/tabs-layout/tabs-layout.js

@@ -33,6 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsLayoutApp = TabsLayoutApp;
 exports.TabsLayout = TabsLayout;
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const react_1 = __importStar(require("react"));
@@ -48,7 +49,28 @@ const system_apps_1 = require("../system-apps");
 const routes_loader_1 = require("../ui-router/routes-loader");
 const ui_loader_1 = require("../ui-router/ui-loader");
 const tabs_state_1 = require("./tabs-state");
+function TabsLayoutApp(props) {
+    const userId = (0, hooks_1.usePromise)(async () => {
+        const _userId = await peers_sdk_1.rpcServerCalls.getUserId();
+        return _userId || null;
+    });
+    if (userId === undefined) {
+        return;
+    }
+    document.getElementById('appLoadingDiv')?.remove();
+    if (!userId) {
+        return react_1.default.createElement(setup_user_1.SetupUser, null);
+    }
+    else {
+        return react_1.default.createElement(TabsLayout, { userId: userId, colorMode: props.colorMode });
+    }
+}
+let userContextInitialized = false;
 function TabsLayout(props) {
+    if (!userContextInitialized) {
+        (0, peers_sdk_1.setDefaultClientUserContext)(props.userId);
+        userContextInitialized = true;
+    }
     const loaded = (0, hooks_1.usePromise)(async () => {
         await (0, globals_1.loadGlobals)().then(() => console.log('Globals loaded'));
         await (0, routes_loader_1.loadAllRoutes)().then(() => console.log('Routes loaded'));
@@ -62,7 +84,6 @@ function TabsLayout(props) {
     });
     if (!loaded)
         return false;
-    document.getElementById('appLoadingDiv')?.remove();
     if (globals_1.me.name === globals_1.me.userId) {
         return react_1.default.createElement(setup_user_1.SetupUser, null);
     }
@@ -79,9 +100,9 @@ function TabsLayoutInternal() {
     (0, react_1.useEffect)(() => {
         let sub;
         (0, peers_sdk_1.getUserContext)().then(userContext => {
-            setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId());
+            setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId);
             sub = userContext.currentlyActiveGroupId.subscribe(async (groupId) => {
-                setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId());
+                setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId);
                 // below reloading logic is a kludge to deal with different groups having different packages installed
                 await (0, peers_sdk_1.sleep)(100);
                 window.location.reload();

package/dist/ui-router/routes-loader.d.ts

@@ -21,5 +21,4 @@ export declare const allPackages: import("@peers-app/peers-sdk").Observable<{
     uiBundleFileId?: string | undefined;
     uiBundleFileHash?: string | undefined;
 }[]>;
-export declare const allRoutesLoaded: import("@peers-app/peers-sdk").Observable<boolean>;
 export declare const loadAllRoutes: () => Promise<true | undefined>;

package/dist/ui-router/routes-loader.js

@@ -1,34 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.loadAllRoutes = exports.allRoutesLoaded = exports.allPackages = void 0;
+exports.loadAllRoutes = exports.allPackages = void 0;
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 require("../ui-defaults");
 exports.allPackages = (0, peers_sdk_1.observable)([]);
-exports.allRoutesLoaded = (0, peers_sdk_1.observable)(false);
-(0, peers_sdk_1.Packages)().dataChanged.subscribe(async (evt) => {
-    if (!(0, exports.allRoutesLoaded)())
-        return;
-    const _allPackages = (0, exports.allPackages)();
-    if (evt.op === 'insert') {
-        _allPackages.push(evt.dataObject);
-    }
-    else if (evt.op === 'delete') {
-        let idx = (0, exports.allPackages)().findIndex(p => p.packageId === evt.dataObject.packageId);
-        if (idx >= 0) {
-            _allPackages.splice(idx, 1);
-        }
-    }
-    else {
-        let idx = (0, exports.allPackages)().findIndex(p => p.packageId === evt.dataObject.packageId);
-        if (idx >= 0) {
-            _allPackages[idx] = evt.dataObject;
-        }
-    }
-    (0, exports.allPackages)([..._allPackages]);
-});
+let allRoutesLoaded = false;
 const loadAllRoutes = async () => {
-    if ((0, exports.allRoutesLoaded)())
+    if (allRoutesLoaded)
         return;
+    allRoutesLoaded = true;
     // Filter packages that have UI bundles (routesBundleFileId or uiBundleFileId)
     let packagesWithUI = await (0, peers_sdk_1.Packages)().list({
         disabled: { $ne: true },
@@ -36,7 +16,32 @@ const loadAllRoutes = async () => {
     });
     (0, exports.allPackages)(packagesWithUI);
     await Promise.all(packagesWithUI.map(pkg => loadRoutesBundle(pkg)));
-    (0, exports.allRoutesLoaded)(true);
+    (0, peers_sdk_1.Packages)().dataChanged.subscribe(async (evt) => {
+        const _allPackages = (0, exports.allPackages)();
+        if (evt.op === 'insert') {
+            _allPackages.push(evt.dataObject);
+        }
+        else if (evt.op === 'delete') {
+            let idx = (0, exports.allPackages)().findIndex(p => p.packageId === evt.dataObject.packageId);
+            if (idx >= 0) {
+                _allPackages.splice(idx, 1);
+            }
+        }
+        else {
+            let idx = (0, exports.allPackages)().findIndex(p => p.packageId === evt.dataObject.packageId);
+            if (idx >= 0) {
+                _allPackages[idx] = evt.dataObject;
+            }
+        }
+        (0, exports.allPackages)([..._allPackages]);
+    });
+    (0, peers_sdk_1.Packages)().dataChanged.subscribe(evt => {
+        const pkg = evt.dataObject;
+        const loadingPromise = routeLoadingPromises[pkg.packageId];
+        if (!loadingPromise)
+            return;
+        reloadPackage(pkg.packageId);
+    });
     return true;
 };
 exports.loadAllRoutes = loadAllRoutes;
@@ -88,10 +93,3 @@ const reloadPackage = (0, peers_sdk_1.debounceByArgs)(async (packageId) => {
         await loadRoutesBundle(pkg, true);
     }
 }, 200);
-(0, peers_sdk_1.Packages)().dataChanged.subscribe(evt => {
-    const pkg = evt.dataObject;
-    const loadingPromise = routeLoadingPromises[pkg.packageId];
-    if (!loadingPromise)
-        return;
-    reloadPackage(pkg.packageId);
-});