@peers-app/peers-ui 0.0.14

package/.github/README.md

@@ -0,0 +1,52 @@
+# GitHub Actions for @peers-app/peers-ui
+
+## Quick Start
+
+### 1. Configure npm Token
+
+Add your npm token as a GitHub Secret:
+
+1. Go to **Settings** → **Secrets and variables** → **Actions**
+2. Click **New repository secret**
+3. Name: `NPM_TOKEN`
+4. Value: Your npm automation token
+5. Click **Add secret**
+
+### 2. Create npm Token
+
+If you don't have one:
+
+1. Go to [npmjs.com](https://www.npmjs.com)
+2. **Account Settings** → **Access Tokens**
+3. **Generate New Token** → **Automation**
+4. Copy the token and add it to GitHub Secrets
+
+### 3. Release
+
+**IMPORTANT**: Ensure @peers-app/peers-sdk is published first!
+
+```bash
+# Update @peers-app/peers-sdk dependency if needed
+# Edit package.json: "@peers-app/peers-sdk": "^0.1.1"
+
+# Update version
+npm version patch  # 0.0.14 → 0.0.15
+
+# Push tag (triggers CI/CD)
+git push origin main
+git push origin --tags
+```
+
+## Workflow
+
+The `publish.yml` workflow:
+- Triggers on version tags (`v*.*.*`)
+- Runs tests
+- Builds the package
+- Publishes to npm
+- Creates GitHub release
+
+## Dependencies
+
+This package depends on:
+- **@peers-app/peers-sdk**: Ensure it's published before releasing

package/.github/workflows/publish.yml

@@ -0,0 +1,45 @@
+name: Publish to npm
+
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+      - '*.*.*'
+  workflow_dispatch:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      # - name: Run tests
+      #   run: yarn test
+
+      - name: Build package
+        run: yarn build
+
+      - name: Publish to npm
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v1
+        if: startsWith(github.ref, 'refs/tags/')
+        with:
+          generate_release_notes: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    ['@babel/preset-react', { runtime: 'automatic' }],
+    '@babel/preset-typescript',
+  ],
+};

package/dist/app.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ColorModePreference } from './screens/settings/color-mode-dropdown';
+import './ui-router/ui-loader';
+export declare const App: (props: {
+    colorMode?: ColorModePreference;
+}) => React.JSX.Element;
+export declare const AppSimple: (props: {
+    colorMode?: ColorModePreference;
+}) => false | React.JSX.Element;

package/dist/app.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppSimple = exports.App = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importDefault(require("react"));
+const left_bar_1 = require("./components/left-bar");
+const top_bar_1 = require("./components/top-bar");
+const hooks_1 = require("./hooks");
+const color_mode_dropdown_1 = require("./screens/settings/color-mode-dropdown");
+const tabs_layout_1 = require("./tabs-layout/tabs-layout");
+require("./ui-router/ui-loader");
+const App = (props) => {
+    return react_1.default.createElement(tabs_layout_1.TabsLayout, { colorMode: props.colorMode });
+};
+exports.App = App;
+const AppSimple = (props) => {
+    console.log('AppSimple waiting');
+    const loaded = (0, hooks_1.usePromise)(async () => {
+        await (0, peers_sdk_1.sleep)(100);
+        return true;
+    });
+    if (!loaded)
+        return false;
+    console.log('AppSimple loaded');
+    document.getElementById('appLoadingDiv')?.remove();
+    (0, color_mode_dropdown_1.colorModePreference)(props.colorMode);
+    // return (
+    //   <div className='container'>
+    //     <h1>Hi</h1>
+    //     <main className="peers-main-content">
+    //       HI! v2
+    //     </main>
+    //     <pre>
+    //       {`
+    //         hi
+    //         hi
+    //         hi
+    //         hi
+    //         hi
+    //         hi
+    //         hi
+    //       `}
+    //     </pre>
+    //   </div>
+    // )
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(top_bar_1.TopBar, null),
+        react_1.default.createElement(left_bar_1.LeftBar, null),
+        react_1.default.createElement("main", { className: "peers-main-content" })));
+};
+exports.AppSimple = AppSimple;

package/dist/command-palette/command-palette-ui.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function CommandPaletteOverlay(): React.JSX.Element | null;

package/dist/command-palette/command-palette-ui.js

@@ -0,0 +1,192 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandPaletteOverlay = CommandPaletteOverlay;
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../hooks");
+const color_mode_dropdown_1 = require("../screens/settings/color-mode-dropdown");
+const command_palette_1 = require("./command-palette");
+function CommandPaletteOverlay() {
+    const [isOpen] = (0, hooks_1.useObservable)(command_palette_1.isCommandPaletteOpen);
+    const [searchQuery, setSearchQuery] = (0, hooks_1.useObservable)(command_palette_1.commandSearchQuery);
+    const [_colorMode] = (0, hooks_1.useObservable)(color_mode_dropdown_1.colorMode);
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
+    const inputRef = (0, react_1.useRef)(null);
+    const filteredCommands = (0, command_palette_1.searchCommands)(searchQuery);
+    // Create a flattened list that matches the visual rendering order
+    const visualOrderCommands = Object.entries(filteredCommands.reduce((acc, cmd) => {
+        const category = cmd.category || 'Other';
+        if (!acc[category])
+            acc[category] = [];
+        acc[category].push(cmd);
+        return acc;
+    }, {})).flatMap(([, commands]) => commands);
+    // Focus input when opened
+    (0, react_1.useEffect)(() => {
+        if (isOpen && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isOpen]);
+    // Reset selected index when search changes
+    (0, react_1.useEffect)(() => {
+        setSelectedIndex(0);
+    }, [searchQuery]);
+    // Keyboard navigation
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                setSelectedIndex(prev => Math.min(prev + 1, visualOrderCommands.length - 1));
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                setSelectedIndex(prev => Math.max(prev - 1, 0));
+            }
+            else if (e.key === 'Enter') {
+                e.preventDefault();
+                if (visualOrderCommands[selectedIndex]) {
+                    (0, command_palette_1.executeCommand)(visualOrderCommands[selectedIndex].id);
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, visualOrderCommands, selectedIndex]);
+    if (!isOpen)
+        return null;
+    const isDark = _colorMode === 'dark';
+    return (react_1.default.createElement("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'
+        }, onClick: (e) => {
+            if (e.target === e.currentTarget) {
+                (0, command_palette_1.closeCommandPalette)();
+            }
+        } },
+        react_1.default.createElement("div", { className: `${isDark ? 'bg-dark text-light' : 'bg-white text-dark'}`, style: {
+                width: '90%',
+                maxWidth: '600px',
+                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'
+            } },
+            react_1.default.createElement("div", { className: "p-3 border-bottom", style: {
+                    borderBottomColor: isDark ? '#495057' : '#dee2e6'
+                } },
+                react_1.default.createElement("div", { className: "position-relative" },
+                    react_1.default.createElement("i", { className: "bi-search position-absolute", style: {
+                            left: '12px',
+                            top: '50%',
+                            transform: 'translateY(-50%)',
+                            color: '#6c757d',
+                            zIndex: 1
+                        } }),
+                    react_1.default.createElement("input", { ref: inputRef, type: "text", className: `form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`, placeholder: "Type a command or search...", value: searchQuery, onChange: (e) => {
+                            setSearchQuery(e.target.value);
+                            (0, command_palette_1.commandSearchQuery)(e.target.value);
+                        }, style: {
+                            paddingLeft: '40px',
+                            fontSize: '16px',
+                            border: 'none',
+                            outline: 'none',
+                            boxShadow: 'none',
+                            backgroundColor: isDark ? '#343a40' : '#f8f9fa'
+                        } }))),
+            react_1.default.createElement("div", { style: {
+                    maxHeight: '400px',
+                    overflowY: 'auto'
+                } }, visualOrderCommands.length === 0 ? (react_1.default.createElement("div", { className: "p-4 text-center text-muted" },
+                react_1.default.createElement("i", { className: "bi-search mb-2 d-block", style: { fontSize: '24px' } }),
+                "No commands found")) : (react_1.default.createElement("div", { className: "py-2" }, Object.entries(filteredCommands.reduce((acc, cmd) => {
+                const category = cmd.category || 'Other';
+                if (!acc[category])
+                    acc[category] = [];
+                acc[category].push(cmd);
+                return acc;
+            }, {})).map(([category, commands]) => (react_1.default.createElement("div", { key: category },
+                react_1.default.createElement("div", { className: "px-3 py-1 small text-muted fw-bold text-uppercase", style: { fontSize: '11px', letterSpacing: '0.5px' } }, category),
+                commands.map((command) => {
+                    const globalIndex = visualOrderCommands.indexOf(command);
+                    const isSelected = globalIndex === selectedIndex;
+                    return (react_1.default.createElement("div", { key: command.id, className: `px-3 py-2 d-flex align-items-center justify-content-between ${isSelected
+                            ? (isDark ? 'bg-primary bg-opacity-25' : 'bg-primary bg-opacity-10')
+                            : ''}`, style: {
+                            cursor: 'pointer',
+                            transition: 'background-color 0.1s ease'
+                        }, onClick: () => (0, command_palette_1.executeCommand)(command.id), onMouseEnter: () => setSelectedIndex(globalIndex) },
+                        react_1.default.createElement("div", { className: "d-flex align-items-center" },
+                            command.iconClassName && (react_1.default.createElement("i", { className: `${command.iconClassName} me-3`, style: {
+                                    fontSize: '16px',
+                                    color: isSelected ? (isDark ? '#ffffff' : '#0d6efd') : '#6c757d',
+                                    minWidth: '16px'
+                                } })),
+                            react_1.default.createElement("div", null,
+                                react_1.default.createElement("div", { className: "fw-medium" }, command.label),
+                                command.description && (react_1.default.createElement("div", { className: "small text-muted", style: { fontSize: '12px' } }, command.description)))),
+                        command.shortcut && (react_1.default.createElement("div", { className: `small px-2 py-1 rounded ${isDark ? 'bg-secondary bg-opacity-50' : 'bg-light'}`, style: {
+                                fontSize: '11px',
+                                fontFamily: 'monospace',
+                                color: isDark ? '#adb5bd' : '#6c757d',
+                                border: isDark ? '1px solid #495057' : '1px solid #dee2e6'
+                            } }, command.shortcut))));
+                }))))))),
+            react_1.default.createElement("div", { className: `px-3 py-2 small text-muted border-top d-flex align-items-center justify-content-between`, style: {
+                    borderTopColor: isDark ? '#495057' : '#dee2e6',
+                    fontSize: '11px'
+                } },
+                react_1.default.createElement("div", { className: "d-flex align-items-center gap-3" },
+                    react_1.default.createElement("span", null,
+                        react_1.default.createElement("kbd", { className: "small" }, "\u21B5"),
+                        " to select"),
+                    react_1.default.createElement("span", null,
+                        react_1.default.createElement("kbd", { className: "small" }, "\u2191\u2193"),
+                        " to navigate"),
+                    react_1.default.createElement("span", null,
+                        react_1.default.createElement("kbd", { className: "small" }, "esc"),
+                        " to close")),
+                react_1.default.createElement("div", null,
+                    visualOrderCommands.length,
+                    " command",
+                    visualOrderCommands.length !== 1 ? 's' : '')))));
+}

package/dist/command-palette/command-palette.d.ts

@@ -0,0 +1,23 @@
+export interface Command {
+    id: string;
+    label: string;
+    description?: string;
+    shortcut?: string;
+    category?: string;
+    iconClassName?: string;
+    action: () => void;
+    isAvailable?: () => boolean;
+}
+export declare const isCommandPaletteOpen: import("@peers-app/peers-sdk").PersistentVar<boolean>;
+export declare const commandSearchQuery: import("@peers-app/peers-sdk").PersistentVar<string>;
+export declare function registerCommand(command: Command): void;
+export declare function unregisterCommand(commandId: string): void;
+export declare function getCommand(commandId: string): Command | undefined;
+export declare function getAllCommands(): Command[];
+export declare function searchCommands(query: string): Command[];
+export declare function openCommandPalette(): void;
+export declare function closeCommandPalette(): void;
+export declare function toggleCommandPalette(): void;
+export declare function executeCommand(commandId: string): void;
+export declare function initializeCommandPalette(): void;
+export declare function destroyCommandPalette(): void;