@peers-app/peers-ui 0.7.39 → 0.8.0

package/src/screens/contacts/contact-list.tsx

@@ -127,6 +127,10 @@ export function ContactList() {
           <i className="bi-person-fill-check me-2" />
           Contacts
         </h4>
+        <a href="#contacts/connect" className="btn btn-primary btn-sm">
+          <i className="bi-person-plus me-1" />
+          Connect to New User
+        </a>
       </div>
 
       <div className="input-group mb-3">

package/src/screens/contacts/index.ts

@@ -1,6 +1,8 @@
 // Import all contact screen components to ensure they register their routes
 import './contact-list';
 import './contact-details';
+import './user-connect';
 
 export * from "./contact-list";
-export * from "./contact-details";
+export * from "./contact-details";
+export * from "./user-connect";

package/src/screens/contacts/user-connect.tsx

@@ -0,0 +1,452 @@
+import { 
+  formatConnectionCode, 
+  generateConnectionCode, 
+  generateConfirmationHash,
+  getMe,
+  getUserContext, 
+  IUser,
+  IUserConnectInfo,
+  setUserTrustLevel, 
+  TrustLevel, 
+  userConnectCodeOffer, 
+  userConnectCodeAnswer, 
+  userConnectStatus,
+  Users, 
+  Devices
+} from "@peers-app/peers-sdk";
+import React, { useState, useEffect, useCallback } from 'react';
+import { mainContentPath } from '../../globals';
+import { useObservable } from '../../hooks';
+import { registerInternalPeersUI } from '../../ui-router/ui-loader';
+
+type ConnectionMode = 'select' | 'initiate' | 'respond';
+type ConnectionStatus = 'idle' | 'waiting' | 'success' | 'error';
+
+interface ConnectionResult {
+  remoteUser: IUser;
+  confirmationHash: string;
+}
+
+export function UserConnect() {
+  const [mode, setMode] = useState<ConnectionMode>('select');
+  const [status, setStatus] = useState<ConnectionStatus>('idle');
+  const [connectionCode, setConnectionCode] = useState<string>('');
+  const [inputCode, setInputCode] = useState<string>('');
+  const [result, setResult] = useState<ConnectionResult | null>(null);
+  const [error, setError] = useState<string>('');
+  const [copied, setCopied] = useState(false);
+
+  // Subscribe to userConnectStatus from the device layer
+  const [connectStatus] = useObservable(userConnectStatus);
+
+  // Also set up a direct subscription after loading is complete
+  useEffect(() => {
+    let disposed = false;
+    let subscription: { dispose: () => void } | undefined;
+
+    userConnectStatus.loadingPromise.then(() => {
+      if (disposed) return;
+      subscription = userConnectStatus.subscribe(() => {
+        // Force a re-render by checking the current value
+        const currentStatus = userConnectStatus();
+        if (currentStatus && typeof currentStatus === 'string') {
+          handleConnectStatusChange(currentStatus);
+        }
+      });
+    });
+
+    return () => {
+      disposed = true;
+      subscription?.dispose();
+    };
+  }, []);
+
+  // Handle connect status changes
+  const handleConnectStatusChange = useCallback(async (connectStatusValue: string) => {
+    if (!connectStatusValue || status === 'success') return;
+
+    if (connectStatusValue.startsWith('Error:')) {
+      // Error status
+      setError(connectStatusValue.replace('Error: ', ''));
+      setStatus('error');
+    } else if (connectStatusValue.length > 0) {
+      // Success - connectStatus is the remote userId
+      const remoteUserId = connectStatusValue;
+      
+      try {
+        const userContext = await getUserContext();
+        const me = await getMe();
+        const remoteUser = await Users(userContext.userDataContext).get(remoteUserId);
+        
+        if (!remoteUser) {
+          setError('Could not find connected user');
+          setStatus('error');
+          return;
+        }
+
+        const remoteDevice = await Devices(userContext.userDataContext).findOne({ userId: remoteUserId });
+        if (!remoteDevice) {
+          setError('Could not find connected device but connection was successful');
+          setStatus('error');
+          return;
+        }
+
+        // Build user connect info for confirmation hash
+        const myInfo: IUserConnectInfo = {
+          userId: me.userId,
+          publicKey: me.publicKey,
+          publicBoxKey: me.publicBoxKey,
+          deviceId: userContext.deviceId(),
+        };
+        const remoteInfo: IUserConnectInfo = {
+          userId: remoteUser.userId,
+          publicKey: remoteUser.publicKey,
+          publicBoxKey: remoteUser.publicBoxKey,
+          deviceId: remoteDevice.deviceId,
+        };
+
+        const confirmationHash = generateConfirmationHash(myInfo, remoteInfo);
+        
+        setResult({ remoteUser, confirmationHash });
+        setStatus('success');
+        
+        // Clear the codes
+        userConnectCodeOffer('');
+        userConnectCodeAnswer('');
+      } catch (err: any) {
+        setError(err.message || 'Failed to complete connection');
+        setStatus('error');
+      }
+    }
+  }, [status]);
+
+  // React to userConnectStatus changes from useObservable
+  useEffect(() => {
+    if (connectStatus && typeof connectStatus === 'string') {
+      handleConnectStatusChange(connectStatus);
+    }
+  }, [connectStatus, handleConnectStatusChange]);
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      if (mode === 'initiate' && status === 'waiting') {
+        userConnectCodeOffer('');
+        userConnectCodeAnswer('');
+      }
+    };
+  }, [mode, status]);
+
+  const handleInitiate = useCallback(async () => {
+    setMode('initiate');
+    setStatus('waiting');
+    setError('');
+    userConnectStatus(''); // Clear any previous status
+
+    // Generate the connection code
+    const code = generateConnectionCode();
+    userConnectCodeOffer(code.code);
+    const formattedCode = formatConnectionCode(code.code);
+    setConnectionCode(formattedCode);
+  }, []);
+
+  const handleRespond = useCallback(async () => {
+    if (inputCode.replace(/[^0-9A-Za-z]/g, '').length !== 12) {
+      setError('Please enter a valid 12-character connection code');
+      return;
+    }
+    
+    setStatus('waiting');
+    setError('');
+    userConnectStatus(''); // Clear any previous status
+    userConnectCodeAnswer(inputCode);
+  }, [inputCode]);
+
+  const handleCancel = useCallback(async () => {
+    userConnectCodeOffer('');
+    userConnectCodeAnswer('');
+    userConnectStatus('');
+    setMode('select');
+    setStatus('idle');
+    setConnectionCode('');
+    setError('');
+  }, []);
+
+  const handleReset = useCallback(() => {
+    userConnectCodeOffer('');
+    userConnectCodeAnswer('');
+    userConnectStatus('');
+    setMode('select');
+    setStatus('idle');
+    setConnectionCode('');
+    setInputCode('');
+    setResult(null);
+    setError('');
+    setCopied(false);
+  }, []);
+
+  const handleSaveContact = useCallback(async () => {
+    if (!result) return;
+
+    try {
+      const userContext = await getUserContext();
+      
+      // Contact is already saved by the device layer, just set trust level
+      await setUserTrustLevel(result.remoteUser.userId, TrustLevel.Trusted, userContext.userDataContext);
+
+      // Navigate to contact details
+      mainContentPath(`contacts/${result.remoteUser.userId}`);
+    } catch (err: any) {
+      setError(err.message || 'Failed to save contact');
+    }
+  }, [result]);
+
+  // Copy connection code to clipboard
+  const handleCopyCode = useCallback(async () => {
+    if (!connectionCode) return;
+    try {
+      await navigator.clipboard.writeText(connectionCode);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      // Fallback for older browsers
+      const textArea = document.createElement('textarea');
+      textArea.value = connectionCode;
+      document.body.appendChild(textArea);
+      textArea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textArea);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  }, [connectionCode]);
+
+  // Format input code as user types
+  const handleCodeInput = (value: string) => {
+    // Remove non-alphanumeric characters
+    const cleaned = value.toUpperCase().replace(/[^0-9A-Z]/g, '');
+    
+    // Format as XXXX-YYYY-ZZZZ
+    let formatted = '';
+    for (let i = 0; i < cleaned.length && i < 12; i++) {
+      if (i === 4 || i === 8) formatted += '-';
+      formatted += cleaned[i];
+    }
+    
+    setInputCode(formatted);
+  };
+
+  return (
+    <div className="container-fluid p-3">
+      <div className="d-flex justify-content-between align-items-center mb-4">
+        <h4>
+          <i className="bi-person-plus-fill me-2" />
+          Connect to New User
+        </h4>
+        {mode !== 'select' && (
+          <button className="btn btn-outline-secondary btn-sm" onClick={handleReset}>
+            <i className="bi-arrow-left me-1" />
+            Back
+          </button>
+        )}
+      </div>
+
+      {/* Mode Selection */}
+      {mode === 'select' && (
+        <div className="row g-3">
+          <div className="col-md-6">
+            <div 
+              className="card h-100 border-primary" 
+              style={{ cursor: 'pointer' }}
+              onClick={handleInitiate}
+            >
+              <div className="card-body text-center p-4">
+                <i className="bi-qr-code display-4 text-primary mb-3" />
+                <h5 className="card-title">Create Connection Code</h5>
+                <p className="card-text text-muted">
+                  Generate a code to share with someone who wants to connect with you
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="col-md-6">
+            <div 
+              className="card h-100 border-success" 
+              style={{ cursor: 'pointer' }}
+              onClick={() => setMode('respond')}
+            >
+              <div className="card-body text-center p-4">
+                <i className="bi-keyboard display-4 text-success mb-3" />
+                <h5 className="card-title">Enter Connection Code</h5>
+                <p className="card-text text-muted">
+                  Enter a code that someone shared with you to connect
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Initiate Mode - Show Generated Code */}
+      {mode === 'initiate' && status === 'waiting' && (
+        <div className="text-center">
+          <div className="mb-4">
+            <p className="text-muted">Share this code with the person you want to connect with:</p>
+          </div>
+          
+          <div className="mb-4" style={{ maxWidth: '400px', margin: '0 auto' }}>
+            <div className="input-group">
+              <input
+                type="text"
+                className="form-control form-control-lg text-center font-monospace"
+                value={connectionCode || 'XXXX-YYYY-ZZZZ'}
+                readOnly
+                style={{ letterSpacing: '0.15em', fontSize: '1.5rem' }}
+              />
+              <button 
+                className="btn btn-outline-primary" 
+                onClick={handleCopyCode}
+                title="Copy to clipboard"
+              >
+                <i className={copied ? "bi-check-lg" : "bi-clipboard"} />
+              </button>
+            </div>
+            {copied && (
+              <small className="text-success mt-1 d-block">Copied!</small>
+            )}
+          </div>
+
+          <div className="mb-4">
+            <div className="spinner-border spinner-border-sm text-primary me-2" role="status" />
+            <span className="text-muted">Waiting for connection...</span>
+          </div>
+
+          <p className="text-muted small">
+            This code will expire in 10 minutes
+          </p>
+
+          <button className="btn btn-outline-secondary" onClick={handleCancel}>
+            Cancel
+          </button>
+        </div>
+      )}
+
+      {/* Respond Mode - Enter Code */}
+      {mode === 'respond' && status !== 'success' && (
+        <div className="text-center">
+          <div className="mb-4">
+            <p className="text-muted">Enter the connection code shared with you:</p>
+          </div>
+
+          <div className="mb-4" style={{ maxWidth: '400px', margin: '0 auto' }}>
+            <input
+              type="text"
+              className="form-control form-control-lg text-center font-monospace"
+              placeholder="XXXX-YYYY-ZZZZ"
+              value={inputCode}
+              onChange={(e) => handleCodeInput(e.target.value)}
+              maxLength={14}
+              style={{ letterSpacing: '0.15em', fontSize: '1.5rem' }}
+              autoFocus
+            />
+          </div>
+
+          {error && (
+            <div className="alert alert-danger" style={{ maxWidth: '400px', margin: '0 auto 1rem' }}>
+              {error}
+            </div>
+          )}
+
+          <button 
+            className="btn btn-primary btn-lg"
+            onClick={handleRespond}
+            disabled={status === 'waiting' || inputCode.replace(/[^0-9A-Z]/gi, '').length !== 12}
+          >
+            {status === 'waiting' ? (
+              <>
+                <span className="spinner-border spinner-border-sm me-2" role="status" />
+                Connecting...
+              </>
+            ) : (
+              <>
+                <i className="bi-link-45deg me-2" />
+                Connect
+              </>
+            )}
+          </button>
+        </div>
+      )}
+
+      {/* Success State */}
+      {status === 'success' && result && (
+        <div className="text-center">
+          <div className="mb-4">
+            <i className="bi-check-circle-fill text-success display-3" />
+          </div>
+          
+          <h5 className="mb-4">Connection Successful!</h5>
+
+          <div className="card mb-4" style={{ maxWidth: '400px', margin: '0 auto' }}>
+            <div className="card-body">
+              <p className="text-muted mb-2">Verify with the other person that you both see:</p>
+              <h3 className="font-monospace text-primary mb-3" style={{ letterSpacing: '0.2em' }}>
+                {result.confirmationHash}
+              </h3>
+              
+              <hr />
+              
+              <div className="text-start">
+                <small className="text-muted">Name:</small>
+                <p className="mb-2">{result.remoteUser.name}</p>
+                
+                <small className="text-muted">User ID:</small>
+                <p className="font-monospace small mb-0">{result.remoteUser.userId}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="d-flex gap-2 justify-content-center">
+            <button className="btn btn-primary" onClick={handleSaveContact}>
+              <i className="bi-check-lg me-2" />
+              Trust & View Contact
+            </button>
+            <button className="btn btn-outline-secondary" onClick={handleReset}>
+              Connect Another
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Error State */}
+      {status === 'error' && (
+        <div className="text-center">
+          <div className="mb-4">
+            <i className="bi-x-circle-fill text-danger display-3" />
+          </div>
+          
+          <h5 className="mb-4">Connection Failed</h5>
+
+          <div className="alert alert-danger" style={{ maxWidth: '400px', margin: '0 auto 1rem' }}>
+            {error}
+          </div>
+
+          <button className="btn btn-primary" onClick={handleReset}>
+            Try Again
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+registerInternalPeersUI({
+  peersUIId: '000user00connect0screen01',
+  component: UserConnect,
+  routes: [
+    {
+      isMatch: (props, context) => context.path === 'contacts/connect',
+      uiCategory: 'screen',
+      priority: 3
+    }
+  ]
+});

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

@@ -12,7 +12,9 @@ import {
   valueTypeMentionConfig,
   IMentionConfig 
 } from '../../mention-configs';
-import { IMentionData } from "@peers-app/peers-sdk";
+import { IMentionData, IAppNav } from "@peers-app/peers-sdk";
+import { allPackages } from '../../ui-router/routes-loader';
+import { systemPackage } from '../../system-apps';
 
 interface SearchResult {
   config: IMentionConfig;
@@ -20,10 +22,22 @@ interface SearchResult {
   category: string;
 }
 
+interface AppSearchItem {
+  packageId: string;
+  packageName: string;
+  navItem: IAppNav;
+  path: string;
+  name: string;
+  displayName: string;
+  iconClassName: string;
+}
+
 export function GlobalSearch() {
   const [_colorMode] = useObservable(colorMode);
+  const [packages] = useObservable(allPackages);
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
+  const [appResults, setAppResults] = useState<AppSearchItem[]>([]);
   const [isSearching, setIsSearching] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   
@@ -47,10 +61,42 @@ export function GlobalSearch() {
     { config: userMentionConfig, category: 'Users', navigationPath: 'profile' },
   ];
 
+  // Get all apps (system and user)
+  const getAllApps = (): AppSearchItem[] => {
+    const allPackages_ = [...packages, systemPackage];
+    return allPackages_
+      .filter(p => !p.disabled && p.appNavs && p.appNavs.length > 0)
+      .flatMap(pkg =>
+        pkg.appNavs!.map(navItem => {
+          // Construct path - use direct path for system apps, package-nav for others
+          let path: string;
+          if (pkg.packageId === 'system-apps') {
+            path = navItem.navigationPath ?? navItem.name.replace(/\s/g, '-').toLowerCase();
+          } else {
+            path = `package-nav/${pkg.packageId}/${(navItem.navigationPath ?? navItem.name).replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()}`;
+            while (path.includes('//')) {
+              path = path.replace('//', '/');
+            }
+          }
+
+          return {
+            packageId: pkg.packageId,
+            packageName: pkg.name,
+            navItem,
+            path,
+            name: navItem.name,
+            displayName: navItem.displayName || navItem.name,
+            iconClassName: navItem.iconClassName || 'bi-box-seam'
+          };
+        })
+      );
+  };
+
   // Debounced search effect
   useEffect(() => {
     if (!searchQuery.trim()) {
       setSearchResults([]);
+      setAppResults([]);
       return;
     }
 
@@ -75,13 +121,23 @@ export function GlobalSearch() {
         const filteredResults = searchResults.filter(Boolean) as SearchResult[];
         
         setSearchResults(filteredResults);
+
+        // Search apps
+        const allApps = getAllApps();
+        const lowerQuery = searchQuery.toLowerCase();
+        const filteredApps = allApps.filter(app =>
+          app.name.toLowerCase().includes(lowerQuery) ||
+          app.displayName.toLowerCase().includes(lowerQuery) ||
+          app.packageName.toLowerCase().includes(lowerQuery)
+        );
+        setAppResults(filteredApps);
       } finally {
         setIsSearching(false);
       }
     }, 300); // 300ms debounce
 
     return () => clearTimeout(timeoutId);
-  }, [searchQuery]);
+  }, [searchQuery, packages]);
 
   const handleItemClick = (result: SearchResult, item: IMentionData) => {
     // Try using the config's onClick first
@@ -103,7 +159,11 @@ export function GlobalSearch() {
     }
   };
 
-  const totalResults = searchResults.reduce((sum, result) => sum + result.items.length, 0);
+  const handleAppClick = (app: AppSearchItem) => {
+    goToTabPath(app.path);
+  };
+
+  const totalResults = searchResults.reduce((sum, result) => sum + result.items.length, 0) + appResults.length;
 
   return (
     <div className="container-fluid h-100 p-4" style={{ maxHeight: '100vh', overflowY: 'auto' }}>
@@ -131,7 +191,7 @@ export function GlobalSearch() {
             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..."
+            placeholder="Search across apps, tools, assistants, workflows, events, and more..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             style={{
@@ -162,7 +222,7 @@ export function GlobalSearch() {
             {isSearching ? (
               'Searching...'
             ) : totalResults > 0 ? (
-              `Found ${totalResults} result${totalResults !== 1 ? 's' : ''} across ${searchResults.length} categor${searchResults.length !== 1 ? 'ies' : 'y'}`
+              `Found ${totalResults} result${totalResults !== 1 ? 's' : ''}`
             ) : searchQuery.trim() ? (
               'No results found'
             ) : null}
@@ -173,7 +233,7 @@ export function GlobalSearch() {
       {/* Search Results */}
       {searchQuery && !isSearching && (
         <div>
-          {searchResults.length === 0 ? (
+          {searchResults.length === 0 && appResults.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>
@@ -183,6 +243,65 @@ export function GlobalSearch() {
             </div>
           ) : (
             <div>
+              {/* Apps Section */}
+              {appResults.length > 0 && (
+                <div className="mb-5">
+                  <div className="d-flex align-items-center mb-3">
+                    <i className="bi-grid-3x3-gap me-3" style={{ fontSize: '20px', color: '#6c757d' }} />
+                    <h4 className="mb-0 me-3">Apps</h4>
+                    <span className="badge bg-secondary">{appResults.length}</span>
+                  </div>
+                  <div className="row g-3">
+                    {appResults.map((app) => (
+                      <div key={`${app.packageId}-${app.path}`} 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={() => handleAppClick(app)}
+                          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={`${app.iconClassName} 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">
+                                  {app.displayName}
+                                </h6>
+                                <small className="text-muted text-uppercase" style={{ fontSize: '11px', letterSpacing: '0.5px' }}>
+                                  {app.packageId === 'system-apps' ? 'System App' : app.packageName}
+                                </small>
+                              </div>
+                              <i className="bi-arrow-right text-muted" style={{ fontSize: '12px' }} />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Entity Results */}
               {searchResults.map((result) => (
                 <div key={result.category} className="mb-5">
                   {/* Category Header */}
@@ -253,7 +372,7 @@ export function GlobalSearch() {
           <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.
+            Find apps, 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 }) => (