@peers-app/peers-ui 0.14.0 → 0.15.0

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

@@ -1,18 +1,18 @@
-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, 
+import type { IAppNav, IMentionData } from "@peers-app/peers-sdk";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useObservable } from "../../hooks";
+import {
+  assistantMentionConfig,
+  type IMentionConfig,
+  toolMentionConfig,
+  userMentionConfig,
   valueTypeMentionConfig,
-  IMentionConfig 
-} from '../../mention-configs';
-import { IMentionData, IAppNav } from "@peers-app/peers-sdk";
-import { allPackages } from '../../ui-router/routes-loader';
-import { systemPackage } from '../../system-apps';
+  workflowMentionConfig,
+} from "../../mention-configs";
+import { systemPackage } from "../../system-apps";
+import { goToTabPath } from "../../tabs-layout/tabs-state";
+import { allPackages } from "../../ui-router/routes-loader";
+import { colorMode } from "../settings/color-mode-dropdown";
 
 interface SearchResult {
   config: IMentionConfig;
@@ -30,16 +30,28 @@ interface AppSearchItem {
   iconClassName: string;
 }
 
+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: valueTypeMentionConfig, category: "Types", navigationPath: "peer-types" },
+  { config: userMentionConfig, category: "Users", navigationPath: "contacts" },
+];
+
 export function GlobalSearch() {
   const [_colorMode] = useObservable(colorMode);
   const [packages] = useObservable(allPackages);
-  const [searchQuery, setSearchQuery] = useState('');
+  const [searchQuery, setSearchQuery] = useState("");
   const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
   const [appResults, setAppResults] = useState<AppSearchItem[]>([]);
   const [isSearching, setIsSearching] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
-  
-  const isDark = _colorMode === 'dark';
+
+  const isDark = _colorMode === "dark";
 
   // Focus search input on mount
   useEffect(() => {
@@ -48,30 +60,23 @@ export function GlobalSearch() {
     }
   }, []);
 
-  // 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: valueTypeMentionConfig, category: 'Types', navigationPath: 'peer-types' },
-    { config: userMentionConfig, category: 'Users', navigationPath: 'profile' },
-  ];
-
   // Get all apps (system and user)
-  const getAllApps = (): AppSearchItem[] => {
+  const getAllApps = useCallback((): AppSearchItem[] => {
     const allPackages_ = [...packages, systemPackage];
     return allPackages_
-      .filter(p => !p.disabled && p.appNavs && p.appNavs.length > 0)
-      .flatMap(pkg =>
-        pkg.appNavs!.map(navItem => {
+      .filter((p) => !p.disabled && p.appNavs && p.appNavs.length > 0)
+      .flatMap((pkg) => {
+        const navs = pkg.appNavs;
+        if (!navs?.length) return [];
+        return navs.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();
+          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('//', '/');
+            path = `package-nav/${pkg.packageId}/${(navItem.navigationPath ?? navItem.name).replace(/[^a-zA-Z0-9]/g, "-").toLowerCase()}`;
+            while (path.includes("//")) {
+              path = path.replace("//", "/");
             }
           }
 
@@ -82,11 +87,11 @@ export function GlobalSearch() {
             path,
             name: navItem.name,
             displayName: navItem.displayName || navItem.name,
-            iconClassName: navItem.iconClassName || 'bi-box-seam'
+            iconClassName: navItem.iconClassName || "bi-box-seam",
           };
-        })
-      );
-  };
+        });
+      });
+  }, [packages]);
 
   // Debounced search effect
   useEffect(() => {
@@ -115,16 +120,17 @@ export function GlobalSearch() {
 
         const searchResults = await Promise.all(searchPromises);
         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)
+        const filteredApps = allApps.filter(
+          (app) =>
+            app.name.toLowerCase().includes(lowerQuery) ||
+            app.displayName.toLowerCase().includes(lowerQuery) ||
+            app.packageName.toLowerCase().includes(lowerQuery),
         );
         setAppResults(filteredApps);
       } finally {
@@ -133,7 +139,7 @@ export function GlobalSearch() {
     }, 300); // 300ms debounce
 
     return () => clearTimeout(timeoutId);
-  }, [searchQuery, packages]);
+  }, [searchQuery, getAllApps]);
 
   const handleItemClick = (result: SearchResult, item: IMentionData) => {
     // Try using the config's onClick first
@@ -142,16 +148,10 @@ export function GlobalSearch() {
       return;
     }
 
-    // Otherwise navigate to the appropriate list page
-    const configPath = searchConfigs.find(c => c.config === result.config)?.navigationPath;
+    // Detail route under the same system app as list (e.g. tools/:id, contacts/:userId).
+    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}`);
-      }
+      goToTabPath(`${configPath}/${item.id}`);
     }
   };
 
@@ -159,69 +159,70 @@ export function GlobalSearch() {
     goToTabPath(app.path);
   };
 
-  const totalResults = searchResults.reduce((sum, result) => sum + result.items.length, 0) + appResults.length;
+  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' }}>
+    <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" 
+          <i
+            className="bi-search position-absolute"
             style={{
-              left: '16px',
-              top: '50%',
-              transform: 'translateY(-50%)',
-              color: '#6c757d',
+              left: "16px",
+              top: "50%",
+              transform: "translateY(-50%)",
+              color: "#6c757d",
               zIndex: 1,
-              fontSize: '18px'
-            }} 
+              fontSize: "18px",
+            }}
           />
           <input
             ref={inputRef}
             type="text"
-            className={`form-control form-control-lg ${isDark ? 'bg-dark text-light border-secondary' : ''}`}
+            className={`form-control form-control-lg ${isDark ? "bg-dark text-light border-secondary" : ""}`}
             placeholder="Search across apps, tools, assistants, workflows, 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'
+              paddingLeft: "50px",
+              fontSize: "18px",
+              borderRadius: "12px",
+              backgroundColor: isDark ? "#343a40" : "#f8f9fa",
+              border: isDark ? "2px solid #495057" : "2px solid #dee2e6",
             }}
           />
           {isSearching && (
-            <div 
+            <div
               className="position-absolute"
               style={{
-                right: '16px',
-                top: '50%',
-                transform: 'translateY(-50%)'
+                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' : ''}`
-            ) : searchQuery.trim() ? (
-              'No results found'
-            ) : null}
+            {isSearching
+              ? "Searching..."
+              : totalResults > 0
+                ? `Found ${totalResults} result${totalResults !== 1 ? "s" : ""}`
+                : searchQuery.trim()
+                  ? "No results found"
+                  : null}
           </div>
         )}
       </div>
@@ -231,11 +232,9 @@ export function GlobalSearch() {
         <div>
           {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' }} />
+              <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>
+              <p className="text-muted">Try different keywords or check your spelling</p>
             </div>
           ) : (
             <div>
@@ -243,51 +242,61 @@ export function GlobalSearch() {
               {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' }} />
+                    <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
+                        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'}`}
+                          className={`card h-100 ${isDark ? "bg-dark border-secondary" : "bg-light"}`}
                           style={{
-                            cursor: 'pointer',
-                            transition: 'all 0.15s ease',
-                            borderRadius: '8px'
+                            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)';
+                            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';
+                            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 
+                              <i
                                 className={`${app.iconClassName} me-3 mt-1`}
-                                style={{ 
-                                  fontSize: '16px',
-                                  color: isDark ? '#0d6efd' : '#0d6efd',
-                                  minWidth: '16px'
+                                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}
+                                <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' }} />
+                              <i
+                                className="bi-arrow-right text-muted"
+                                style={{ fontSize: "12px" }}
+                              />
                             </div>
                           </div>
                         </div>
@@ -302,7 +311,10 @@ export function GlobalSearch() {
                 <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' }} />
+                    <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>
@@ -312,43 +324,47 @@ export function GlobalSearch() {
                     {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'}`}
+                          className={`card h-100 ${isDark ? "bg-dark border-secondary" : "bg-light"}`}
                           style={{
-                            cursor: 'pointer',
-                            transition: 'all 0.15s ease',
-                            borderRadius: '8px'
+                            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)';
+                            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';
+                            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 
+                              <i
                                 className={`${result.config.iconClass} me-3 mt-1`}
-                                style={{ 
-                                  fontSize: '16px',
-                                  color: isDark ? '#0d6efd' : '#0d6efd',
-                                  minWidth: '16px'
+                                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' }}>
+                                <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' }} />
+                              <i
+                                className="bi-arrow-right text-muted"
+                                style={{ fontSize: "12px" }}
+                              />
                             </div>
                           </div>
                         </div>
@@ -365,17 +381,17 @@ export function GlobalSearch() {
       {/* Initial State */}
       {!searchQuery && (
         <div className="text-center py-5">
-          <i className="bi-search mb-3 d-block text-muted" style={{ fontSize: '64px' }} />
+          <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' }}>
+          <p className="text-muted mb-4" style={{ maxWidth: "400px", margin: "0 auto" }}>
             Find apps, tools, assistants, workflows, types, and users all in one place.
           </p>
           <div className="d-flex flex-wrap justify-content-center gap-2">
             {searchConfigs.map(({ config, category }) => (
-              <span 
+              <span
                 key={category}
-                className={`badge ${isDark ? 'bg-secondary' : 'bg-light text-dark'} px-3 py-2 d-flex align-items-center`}
-                style={{ fontSize: '12px' }}
+                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}
@@ -386,4 +402,4 @@ export function GlobalSearch() {
       )}
     </div>
   );
-}
+}

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

@@ -1,43 +1,42 @@
 import { camelCaseToSpaces, deviceVar } from "@peers-app/peers-sdk";
-import React from 'react';
-import { useObservable } from '../../hooks';
+import { useObservable } from "../../hooks";
 
-export type ColorModePreference = 'light' | 'dark' | 'auto';
-export type ColorMode = 'light' | 'dark';
+export type ColorModePreference = "light" | "dark" | "auto";
+export type ColorMode = "light" | "dark";
 
-export const colorMode = deviceVar<ColorMode>('colorMode', {
-  defaultValue: 'dark',
+export const colorMode = deviceVar<ColorMode>("colorMode", {
+  defaultValue: "dark",
 });
 
-export const colorModePreference = deviceVar<ColorModePreference>('colorModePreference', {
-  defaultValue: 'dark',
+export const colorModePreference = deviceVar<ColorModePreference>("colorModePreference", {
+  defaultValue: "dark",
 });
 
 function applyColorMode(modePreference?: ColorModePreference): ColorMode {
   if (!modePreference) {
-    modePreference = colorModePreference() || 'dark';
+    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';
+  if (modePreference === "auto") {
+    const isDarkMode = 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.documentElement.style.backgroundColor = '';
-    document.body.style.backgroundColor = 'initial';
+  document.documentElement.setAttribute("data-bs-theme", mode);
+  if (mode === "light") {
+    document.documentElement.style.backgroundColor = "";
+    document.body.style.backgroundColor = "initial";
   } else {
-    document.documentElement.style.backgroundColor = 'rgb(33, 37, 41)';
-    document.body.style.backgroundColor = 'rgb(33, 37, 41)';
+    document.documentElement.style.backgroundColor = "rgb(33, 37, 41)";
+    document.body.style.backgroundColor = "rgb(33, 37, 41)";
   }
 
   const themeMeta = document.querySelector('meta[name="theme-color"]');
   if (themeMeta) {
-    themeMeta.setAttribute('content', mode === 'light' ? '#ffffff' : '#212529');
+    themeMeta.setAttribute("content", mode === "light" ? "#ffffff" : "#212529");
   }
   colorMode(mode);
   colorMode.notifySubscribers();
@@ -45,21 +44,39 @@ function applyColorMode(modePreference?: ColorModePreference): ColorMode {
   return mode;
 }
 
-colorModePreference.subscribe(newValue => applyColorMode(newValue));
+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>
-    );
-  };
+  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>
+  );
+};