@peers-app/peers-ui 0.0.14

package/src/screens/predicates/predicate-details.tsx

@@ -0,0 +1,125 @@
+import { IDoc, IPredicate, Observable, Predicates } from "@peers-app/peers-sdk";
+import React, { useEffect } from "react";
+import { Input } from "../../components/input";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
+import { SaveButton } from "../../components/save-button";
+import { ScreenTabBody, Tabs } from "../../components/tabs";
+import { usePromise } from "../../hooks";
+import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
+
+interface IProps {
+  predicateId: string;
+}
+
+export const PredicateDetails = (props: IProps) => {
+
+  const predicate = usePromise(async () => {
+    const predicate = await Predicates().get(props.predicateId);
+    if (!predicate) {
+      throw new Error('Predicate not found');
+    }
+    const doc = Predicates().initDoc(predicate);
+    updateActiveTabTitle(doc.name || "Predicate");
+    return doc;
+  }, undefined, [props.predicateId]);
+
+
+  useEffect(() => {
+    if (!predicate) return;
+    const sub = predicate.qs.name.subscribe(() => {
+      predicate.name = predicate.qs.name().replaceAll(/\s/g, '_').replaceAll(/[^a-zA-Z0-9_-]/g, '');
+    });
+    return () => {
+      sub.dispose();
+    }
+  }, [predicate]);
+
+  if (!predicate) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <div className="container-fluid p-3">
+
+      <div className="d-flex">
+        <div>
+          <h4>
+            <i className="me-2 bi bi-node-plus-fill"></i>
+          </h4>
+        </div>
+        <div className="flex-grow-1">
+          <h4>
+            <Input
+              key={predicate.predicateId}
+              className='border border-0'
+              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              value={predicate.qs.name}
+            />
+          </h4>
+        </div>
+        <div>
+          <SaveButton
+            key={predicate.predicateId}
+            doc={predicate}
+          />
+        </div>
+      </div>
+
+      <Tabs
+        key={predicate.predicateId}
+        tabs={[
+          {
+            name: 'Info', content:
+              <ScreenTabBody>
+                <PredicateInfo predicate={predicate} />
+              </ScreenTabBody>
+          },
+          {
+            name: 'Allowed Types', content:
+              <ScreenTabBody>
+                <AllowedTypes predicate={predicate} />
+              </ScreenTabBody>
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+
+const PredicateInfo = (props: { predicate: IDoc<IPredicate> }) => {
+  const { predicate } = props
+
+  predicate.description = predicate.description || '';
+
+  return (
+    <div>
+
+      <small>Name:</small>
+      <Input
+        value={predicate.qs.name}
+        className="form-control mb-3 p-0 ps-2"
+        placeholder="Variable name"
+        title="Variable name"
+      />
+
+      <small className="mt-2">Description:</small>
+      <MarkdownEditorInline
+        value={predicate.qs.description as Observable<string>}
+      />
+
+    </div>
+  )
+}
+
+const AllowedTypes = (props: { predicate: IDoc<IPredicate> }) => {
+  const { predicate } = props
+
+  return (
+    <div>
+      {/* <TextListEditor value={predicate} /> */}
+    </div>
+  )
+}
+

package/src/screens/predicates/predicate-list.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { newid, IPredicate, Predicates } from "@peers-app/peers-sdk";
+import { ListScreen } from '../../components/list-screen';
+import { MarkdownWithMentions } from '../../components/markdown-with-mentions';
+import { mainContentPath } from '../../globals';
+
+export function PredicateList() {
+  const screenPathPart = 'predicates';
+  const icon = 'bi bi-node-plus-fill';
+
+  return ListScreen({
+    table: Predicates(),
+    sortBy: ['-predicateId'],
+    placeholderName: 'frame',
+    getFilter: (text: string) => {
+      return {
+        $or: [
+          { name: { $matchWords: text } },
+          { description: { $matchWords: text } },
+        ]
+      };
+    },
+    newRecord: async (text: string) => {
+      text = text.trim().replace(/\s+/g, '_');
+      const item = await Predicates().insert({
+        predicateId: newid(),
+        name: text,
+        description: '',
+      });
+      mainContentPath(`${screenPathPart}/${item.predicateId}`);
+      return item;
+    },
+    renderItem: (item: IPredicate) => {
+      return (
+        <div
+          key={item.predicateId}
+          className='container-fluid pb-4'
+        >
+          <i className={icon}></i>&nbsp;
+          <a href={`#${screenPathPart}/${item.predicateId}`}>
+            {item.name || '<empty-name>'}
+          </a>
+          <div style={{ paddingLeft: '20px' }}>
+            <MarkdownWithMentions content={item.description || ''} />
+          </div>
+        </div>
+      )
+    },
+  });
+}

package/src/screens/profile.tsx

@@ -0,0 +1,68 @@
+
+import React, { useState } from 'react';
+import { thisDeviceId, Users } from "@peers-app/peers-sdk";
+import { SaveButton } from '../components/save-button';
+import { Tooltip } from '../components/tooltip';
+import * as globals from '../globals';
+import { Input } from '../components/input';
+
+export const Profile = () => {
+
+  const [me] = useState(() => Users().initDoc(globals.me));
+
+  return (
+    <div className="container mt-4">
+
+      <div className="d-flex mb-2">
+        <div className="flex-grow-1">
+          <h4>Profile</h4>
+        </div>
+        <div>
+          <SaveButton
+            doc={me}
+            noBuiltInActions
+          />
+        </div>
+      </div>
+
+      <small>Name:</small>
+      <Input
+        value={me.qs.name}
+        className="form-control mb-3"
+      />
+
+      <small>User Id:</small>
+      <Tooltip markdownContent="This uniquely identifies you to all other users." />
+      <Input
+        value={me.userId}
+        className="form-control mb-3"
+        disabled
+      />
+
+      <small>Device Id:</small>
+      <Tooltip markdownContent="This uniquely identifies this device on Peers networks." />
+      <Input
+        value={thisDeviceId()}
+        className="form-control mb-3"
+        disabled
+      />
+
+      <small>Public Key:</small>
+      <Tooltip markdownContent="This is your public key that other users will use to verify your signatures and thereby confirm a message was actually from you." />
+      <Input
+        value={me.publicKey}
+        className="form-control mb-3"
+        disabled
+      />
+
+      <small>Public Box Key:</small>
+      <Tooltip markdownContent="This is the public key that other users can use to encrypt data so that only you can open it with your secret key." />
+      <Input
+        value={me.publicBoxKey}
+        className="form-control mb-3"
+        disabled
+      />
+
+    </div>
+  );
+}

package/src/screens/search/global-search.tsx

@@ -0,0 +1,274 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useObservable } from '../../hooks';
+import { colorMode } from '../settings/color-mode-dropdown';
+import { goToTabPath } from '../../tabs-layout/tabs-state';
+import { 
+  toolMentionConfig, 
+  userMentionConfig, 
+  assistantMentionConfig, 
+  workflowMentionConfig, 
+  peerEventTypeMentionConfig, 
+  predicateMentionConfig, 
+  valueTypeMentionConfig,
+  IMentionConfig 
+} from '../../mention-configs';
+import { IMentionData } from "@peers-app/peers-sdk";
+
+interface SearchResult {
+  config: IMentionConfig;
+  items: IMentionData[];
+  category: string;
+}
+
+export function GlobalSearch() {
+  const [_colorMode] = useObservable(colorMode);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  
+  const isDark = _colorMode === 'dark';
+
+  // Focus search input on mount
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  // Search configs with their display names
+  const searchConfigs: Array<{ config: IMentionConfig; category: string; navigationPath: string }> = [
+    { config: toolMentionConfig, category: 'Tools', navigationPath: 'tools' },
+    { config: assistantMentionConfig, category: 'Assistants', navigationPath: 'assistants' },
+    { config: workflowMentionConfig, category: 'Workflows', navigationPath: 'workflows' },
+    { config: peerEventTypeMentionConfig, category: 'Events', navigationPath: 'events' },
+    { config: predicateMentionConfig, category: 'Predicates', navigationPath: 'predicates' },
+    { config: valueTypeMentionConfig, category: 'Types', navigationPath: 'peer-types' },
+    { config: userMentionConfig, category: 'Users', navigationPath: 'profile' },
+  ];
+
+  // Debounced search effect
+  useEffect(() => {
+    if (!searchQuery.trim()) {
+      setSearchResults([]);
+      return;
+    }
+
+    const timeoutId = setTimeout(async () => {
+      setIsSearching(true);
+      try {
+        // Search all entity types in parallel
+        const searchPromises = searchConfigs.map(async ({ config, category }) => {
+          try {
+            const items = await config.query(searchQuery);
+            if (items.length > 0) {
+              return { config, items, category };
+            }
+            return null;
+          } catch (error) {
+            console.warn(`Search failed for ${category}:`, error);
+            return null;
+          }
+        });
+
+        const searchResults = await Promise.all(searchPromises);
+        const filteredResults = searchResults.filter(Boolean) as SearchResult[];
+        
+        setSearchResults(filteredResults);
+      } finally {
+        setIsSearching(false);
+      }
+    }, 300); // 300ms debounce
+
+    return () => clearTimeout(timeoutId);
+  }, [searchQuery]);
+
+  const handleItemClick = (result: SearchResult, item: IMentionData) => {
+    // Try using the config's onClick first
+    if (result.config.onClick) {
+      result.config.onClick(item);
+      return;
+    }
+
+    // Otherwise navigate to the appropriate list page
+    const configPath = searchConfigs.find(c => c.config === result.config)?.navigationPath;
+    if (configPath) {
+      if (configPath === 'profile') {
+        // Special case for users - just go to profile for now
+        goToTabPath('profile');
+      } else {
+        // Navigate to the detail page if possible
+        goToTabPath(`${configPath}/${item.id}`);
+      }
+    }
+  };
+
+  const totalResults = searchResults.reduce((sum, result) => sum + result.items.length, 0);
+
+  return (
+    <div className="container-fluid h-100 p-4" style={{ maxHeight: '100vh', overflowY: 'auto' }}>
+      {/* Search Header */}
+      <div className="mb-4">
+        <h1 className="h3 mb-3 d-flex align-items-center">
+          <i className="bi-search me-3" />
+          Search Everything
+        </h1>
+        
+        {/* Search Input */}
+        <div className="position-relative">
+          <i 
+            className="bi-search position-absolute" 
+            style={{
+              left: '16px',
+              top: '50%',
+              transform: 'translateY(-50%)',
+              color: '#6c757d',
+              zIndex: 1,
+              fontSize: '18px'
+            }} 
+          />
+          <input
+            ref={inputRef}
+            type="text"
+            className={`form-control form-control-lg ${isDark ? 'bg-dark text-light border-secondary' : ''}`}
+            placeholder="Search across tools, assistants, workflows, events, and more..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            style={{
+              paddingLeft: '50px',
+              fontSize: '18px',
+              borderRadius: '12px',
+              backgroundColor: isDark ? '#343a40' : '#f8f9fa',
+              border: isDark ? '2px solid #495057' : '2px solid #dee2e6'
+            }}
+          />
+          {isSearching && (
+            <div 
+              className="position-absolute"
+              style={{
+                right: '16px',
+                top: '50%',
+                transform: 'translateY(-50%)'
+              }}
+            >
+              <div className="spinner-border spinner-border-sm text-muted" />
+            </div>
+          )}
+        </div>
+        
+        {/* Search Stats */}
+        {searchQuery && (
+          <div className="mt-3 text-muted small">
+            {isSearching ? (
+              'Searching...'
+            ) : totalResults > 0 ? (
+              `Found ${totalResults} result${totalResults !== 1 ? 's' : ''} across ${searchResults.length} categor${searchResults.length !== 1 ? 'ies' : 'y'}`
+            ) : searchQuery.trim() ? (
+              'No results found'
+            ) : null}
+          </div>
+        )}
+      </div>
+
+      {/* Search Results */}
+      {searchQuery && !isSearching && (
+        <div>
+          {searchResults.length === 0 ? (
+            <div className="text-center py-5">
+              <i className="bi-search mb-3 d-block text-muted" style={{ fontSize: '48px' }} />
+              <h4 className="text-muted">No results found</h4>
+              <p className="text-muted">
+                Try different keywords or check your spelling
+              </p>
+            </div>
+          ) : (
+            <div>
+              {searchResults.map((result) => (
+                <div key={result.category} className="mb-5">
+                  {/* Category Header */}
+                  <div className="d-flex align-items-center mb-3">
+                    <i className={`${result.config.iconClass} me-3`} style={{ fontSize: '20px', color: '#6c757d' }} />
+                    <h4 className="mb-0 me-3">{result.category}</h4>
+                    <span className="badge bg-secondary">{result.items.length}</span>
+                  </div>
+
+                  {/* Items */}
+                  <div className="row g-3">
+                    {result.items.map((item) => (
+                      <div key={item.id} className="col-12 col-md-6 col-lg-4">
+                        <div
+                          className={`card h-100 ${isDark ? 'bg-dark border-secondary' : 'bg-light'}`}
+                          style={{
+                            cursor: 'pointer',
+                            transition: 'all 0.15s ease',
+                            borderRadius: '8px'
+                          }}
+                          onClick={() => handleItemClick(result, item)}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.transform = 'translateY(-2px)';
+                            e.currentTarget.style.boxShadow = isDark 
+                              ? '0 4px 12px rgba(0,0,0,0.3)' 
+                              : '0 4px 12px rgba(0,0,0,0.1)';
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.transform = 'translateY(0)';
+                            e.currentTarget.style.boxShadow = 'none';
+                          }}
+                        >
+                          <div className="card-body p-3">
+                            <div className="d-flex align-items-start">
+                              <i 
+                                className={`${result.config.iconClass} me-3 mt-1`}
+                                style={{ 
+                                  fontSize: '16px',
+                                  color: isDark ? '#0d6efd' : '#0d6efd',
+                                  minWidth: '16px'
+                                }}
+                              />
+                              <div className="flex-grow-1">
+                                <h6 className="card-title mb-1 fw-medium">
+                                  {item.name}
+                                </h6>
+                                <small className="text-muted text-uppercase" style={{ fontSize: '11px', letterSpacing: '0.5px' }}>
+                                  {result.category.slice(0, -1)}
+                                </small>
+                              </div>
+                              <i className="bi-arrow-right text-muted" style={{ fontSize: '12px' }} />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Initial State */}
+      {!searchQuery && (
+        <div className="text-center py-5">
+          <i className="bi-search mb-3 d-block text-muted" style={{ fontSize: '64px' }} />
+          <h3 className="text-muted mb-3">Search across everything</h3>
+          <p className="text-muted mb-4" style={{ maxWidth: '400px', margin: '0 auto' }}>
+            Find tools, assistants, workflows, events, predicates, types, and users all in one place.
+          </p>
+          <div className="d-flex flex-wrap justify-content-center gap-2">
+            {searchConfigs.map(({ config, category }) => (
+              <span 
+                key={category}
+                className={`badge ${isDark ? 'bg-secondary' : 'bg-light text-dark'} px-3 py-2 d-flex align-items-center`}
+                style={{ fontSize: '12px' }}
+              >
+                <i className={`${config.iconClass} me-2`} />
+                {category}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/screens/settings/color-mode-dropdown.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { camelCaseToSpaces, deviceVar } from "@peers-app/peers-sdk";
+import { useObservable } from '../../hooks';
+
+export type ColorModePreference = 'light' | 'dark' | 'auto';
+export type ColorMode = 'light' | 'dark';
+
+export const colorMode = deviceVar<ColorMode>('colorMode', {
+  defaultValue: 'dark',
+});
+
+export const colorModePreference = deviceVar<ColorModePreference>('colorModePreference', {
+  defaultValue: 'dark',
+});
+
+function applyColorMode(modePreference?: ColorModePreference): ColorMode {
+  if (!modePreference) {
+    modePreference = colorModePreference() || 'dark';
+  } else {
+    colorModePreference(modePreference);
+  }
+  let mode = colorMode();
+  if (modePreference === 'auto') {
+    const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    mode = isDarkMode ? 'dark' : 'light';
+  } else {
+    mode = modePreference;
+  }
+  document.documentElement.setAttribute('data-bs-theme', mode);
+  if (mode === 'light') {
+    document.body.style.backgroundColor = 'initial';
+  } else {
+    document.body.style.backgroundColor = 'rgb(33, 37, 41)';
+  }
+  colorMode(mode);
+  colorMode.notifySubscribers();
+  return mode;
+}
+
+colorModePreference.subscribe(newValue => applyColorMode(newValue));
+
+export const ColorModeDropdown = () => {
+    const [modePreference] = useObservable(colorModePreference);  
+  
+    return (
+      <div className="dropdown">
+        <button className="btn btn-secondary dropdown-toggle" type="button" id="colorModeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
+          Color Mode: {camelCaseToSpaces(modePreference)}
+        </button>
+        <ul className="dropdown-menu" aria-labelledby="colorModeDropdown">
+          <li><button className="dropdown-item" onClick={() => colorModePreference('auto')}>Auto {modePreference === 'auto' && '✓'}</button></li>
+          <li><button className="dropdown-item" onClick={() => colorModePreference('light')}>Light {modePreference === 'light' && '✓'}</button></li>
+          <li><button className="dropdown-item" onClick={() => colorModePreference('dark')}>Dark {modePreference === 'dark' && '✓'}</button></li>
+        </ul>
+      </div>
+    );
+  };

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { packagesRootDir, reloadPackagesOnPageRefresh, rpcServerCalls } from "@peers-app/peers-sdk";
+import { Tooltip } from '../../components/tooltip';
+import { ColorModeDropdown } from './color-mode-dropdown';
+import { Input } from '../../components/input';
+import { useObservable } from '../../hooks';
+
+export const SettingsPage: React.FC = () => {
+  return (
+    <div className='container-fluid'>
+      <ColorModeDropdown />
+      <PackagesRootDirectory />
+      <ReloadPackagesOnPageRefresh />
+      <ResetDeviceSyncInfos />
+    </div>
+  );
+};
+
+const PackagesRootDirectory: React.FC = () => {
+  return (
+    <div className='mt-3'>
+      <small>
+        Packages Directory:
+        <Tooltip
+          markdownContent={`Changing this will not effect existing packages.`}
+        />
+      </small>
+      <Input
+        value={packagesRootDir}
+        className='form-control'
+      />
+    </div>
+  );
+};
+
+const ReloadPackagesOnPageRefresh: React.FC = () => {
+  useObservable(reloadPackagesOnPageRefresh);
+  return (
+    <div>
+      <label htmlFor="isPrimary" className="form-label small mt-2 me-2">
+        Reload Packages on Page Load:
+      </label>
+      <input
+        type="checkbox"
+        checked={reloadPackagesOnPageRefresh()}
+        onChange={(e) => {
+          const checked = (e.target as HTMLInputElement).checked;
+          reloadPackagesOnPageRefresh(checked);
+        }}
+      />
+      <Tooltip
+        markdownContent={`Checking this will reload all packages very time the page is loaded.  Particularly useful while developing packages.`}
+      />
+    </div>
+  );
+}
+
+const ResetDeviceSyncInfos: React.FC = () => {
+  return (
+    <div className='mt-3'>
+      <button
+        className='btn btn-secondary btn-sm ms-2'
+        onClick={async () => {
+          try {
+            await rpcServerCalls.resetAllDeviceSyncInfo();
+            alert('All device sync info has been reset.  Syncing in progress...');
+          } catch (err) {
+            console.error('Error while resetting all device sync info', err);
+          }
+        }}
+      >
+        Reset All Device Sync Info
+      </button>
+    </div>
+  );
+}