@peers-app/peers-ui 0.27.3 → 0.27.5

package/src/screens/peer-types/peer-type-details.tsx

@@ -1,172 +0,0 @@
-import {
-  type IDoc,
-  type IOSchema,
-  type IPeerType,
-  type Observable,
-  PeerTypes,
-} from "@peers-app/peers-sdk";
-import { useEffect } from "react";
-import { Input } from "../../components/input";
-import { IOSchemaEditor } from "../../components/io-schema";
-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 { Tooltip } from "../../components/tooltip";
-import { useObservable, usePromise } from "../../hooks";
-import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
-
-interface IProps {
-  peerTypeId: string;
-}
-
-export const PeerTypeDetails = (props: IProps) => {
-  const valueType = usePromise(
-    async () => {
-      const valueType = await PeerTypes().get(props.peerTypeId);
-      if (!valueType) {
-        throw new Error("Variable not found");
-      }
-      const doc = PeerTypes().initDoc(valueType);
-      updateActiveTabTitle(doc.name || "Type");
-      return doc;
-    },
-    undefined,
-    [props.peerTypeId],
-  );
-
-  useEffect(() => {
-    if (!valueType) return;
-    const sub = valueType.qs.name.subscribe(() => {
-      valueType.name = valueType.qs
-        .name()
-        .replaceAll(/\s/g, "_")
-        .replaceAll(/[^a-zA-Z0-9_-]/g, "");
-    });
-    return () => {
-      sub.dispose();
-    };
-  }, [valueType]);
-
-  if (!valueType) {
-    return <LoadingIndicator />;
-  }
-
-  return (
-    <div className="container-fluid p-3">
-      <div className="d-flex">
-        <div>
-          <h4>
-            <i className="bi bi-code-square me-2"></i>
-          </h4>
-        </div>
-        <div className="flex-grow-1">
-          <h4>
-            <Input
-              key={valueType.peerTypeId}
-              className="border border-0"
-              style={{ width: "100%", outline: "none", backgroundColor: "transparent" }}
-              value={valueType.qs.name}
-            />
-          </h4>
-        </div>
-        <div>
-          <SaveButton key={valueType.peerTypeId} doc={valueType} />
-        </div>
-      </div>
-
-      <Tabs
-        key={valueType.peerTypeId}
-        tabs={[
-          {
-            name: "Info",
-            content: (
-              <ScreenTabBody>
-                <VariableInfo valueType={valueType} />
-              </ScreenTabBody>
-            ),
-          },
-          {
-            name: "Schema",
-            content: (
-              <ScreenTabBody>
-                <VariableSchema valueType={valueType} />
-              </ScreenTabBody>
-            ),
-          },
-        ]}
-      />
-    </div>
-  );
-};
-
-const VariableInfo = (props: { valueType: IDoc<IPeerType> }) => {
-  const { valueType } = props;
-
-  valueType.description = valueType.description || "";
-
-  return (
-    <div>
-      <small className="text-body-secondary">Name:</small>
-      <Input
-        value={valueType.qs.name}
-        className="form-control mb-3 p-0 ps-2"
-        placeholder="Variable name"
-        title="Variable name"
-      />
-
-      <small className="text-body-secondary">
-        Icon Class:
-        <small>
-          <Tooltip
-            markdownContent={[
-              "Icon classes can be found at:",
-              "[Bootstrap Icons](https://icons.getbootstrap.com/)",
-            ].join(" ")}
-          />
-        </small>
-      </small>
-      <IconPicker icon={valueType.qs.iconClass} />
-
-      <small className="mt-2 text-body-secondary">Description:</small>
-      <MarkdownEditorInline value={valueType.qs.description as Observable<string>} />
-    </div>
-  );
-};
-
-const VariableSchema = (props: { valueType: IDoc<IPeerType> }) => {
-  const { valueType } = props;
-
-  return (
-    <div>
-      <IOSchemaEditor
-        ioSchema={valueType.qs.schema as Observable<IOSchema>}
-        simpleValueName="value"
-      />
-    </div>
-  );
-};
-
-export const IconPicker = (props: { icon: Observable<string | undefined> }) => {
-  const { icon } = props;
-
-  useObservable(icon);
-
-  if (icon() === undefined) {
-    icon("");
-  }
-
-  return (
-    <div className="d-flex">
-      <Input
-        value={icon}
-        className="form-control mb-3 p-0 ps-2"
-        placeholder="icon class"
-        title="Icon"
-      />
-      <div className="me-2 ms-2" style={{ width: "22px" }}>
-        <i className={icon()}></i>
-      </div>
-    </div>
-  );
-};

package/src/screens/peer-types/peer-type-list.tsx

@@ -1,64 +0,0 @@
-import { IOSchemaType, type IPeerType, newid, PeerTypes } from "@peers-app/peers-sdk";
-import { ListScreen } from "../../components/list-screen";
-import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
-import { mainContentPath } from "../../globals";
-import { registerInternalPeersUI } from "../../ui-router/ui-loader";
-
-export function PeerTypeLists() {
-  async function newRecord(name: string) {
-    const peerTypeName = name.replace(/\s+/g, "_");
-    let valueType = await PeerTypes().insert({
-      peerTypeId: newid(),
-      name: peerTypeName,
-      description: "",
-      schema: {
-        type: IOSchemaType.none,
-        fields: [],
-      },
-    });
-    valueType = await PeerTypes().save(valueType);
-    mainContentPath(`peer-types/${valueType.peerTypeId}`);
-    return valueType;
-  }
-
-  function getFilter(searchText: string) {
-    return {
-      $or: [{ name: { $matchWords: searchText } }, { description: { $matchWords: searchText } }],
-    };
-  }
-
-  function renderItem(item: IPeerType) {
-    return (
-      <div key={item.peerTypeId} className="container-fluid pb-4">
-        <i className={item.iconClass ?? "bi bi-code-square"}></i>&nbsp;
-        <a href={`#peer-types/${item.peerTypeId}`}>{item.name || "<empty-name>"}</a>
-        <div style={{ paddingLeft: "20px" }}>
-          <MarkdownWithMentions content={item.description || ""} />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <ListScreen
-      table={PeerTypes()}
-      newRecord={newRecord}
-      getFilter={getFilter}
-      sortBy={["name"]}
-      renderItem={renderItem}
-      placeholderName="value type"
-    />
-  );
-}
-
-registerInternalPeersUI({
-  peersUIId: "00m5fshz2g6ea23v8z6y0a1cj",
-  component: PeerTypeLists,
-  routes: [
-    {
-      isMatch: (_props, context) => context.path === "peer-types",
-      uiCategory: "screen",
-      priority: 2,
-    },
-  ],
-});

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

@@ -1,406 +0,0 @@
-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,
-  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;
-  items: IMentionData[];
-  category: string;
-}
-
-interface AppSearchItem {
-  packageId: string;
-  packageName: string;
-  navItem: IAppNav;
-  path: string;
-  name: string;
-  displayName: string;
-  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: "People", navigationPath: "identity/people" },
-];
-
-/** Search system apps and known entities, then navigate to their canonical routes. */
-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);
-
-  const isDark = _colorMode === "dark";
-
-  // Focus search input on mount
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, []);
-
-  // Get all apps (system and user)
-  const getAllApps = useCallback((): AppSearchItem[] => {
-    const allPackages_ = [...packages, systemPackage];
-    return allPackages_
-      .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();
-          } 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",
-          };
-        });
-      });
-  }, [packages]);
-
-  // Debounced search effect
-  useEffect(() => {
-    if (!searchQuery.trim()) {
-      setSearchResults([]);
-      setAppResults([]);
-      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);
-
-        // 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, getAllApps]);
-
-  const handleItemClick = (result: SearchResult, item: IMentionData) => {
-    // Try using the config's onClick first
-    if (result.config.onClick) {
-      result.config.onClick(item);
-      return;
-    }
-
-    // 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) {
-      goToTabPath(`${configPath}/${item.id}`);
-    }
-  };
-
-  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" }}>
-      {/* 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 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",
-            }}
-          />
-          {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" : ""}`
-                : searchQuery.trim()
-                  ? "No results found"
-                  : null}
-          </div>
-        )}
-      </div>
-
-      {/* Search Results */}
-      {searchQuery && !isSearching && (
-        <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" }} />
-              <h4 className="text-muted">No results found</h4>
-              <p className="text-muted">Try different keywords or check your spelling</p>
-            </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 */}
-                  <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 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
-                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>
-  );
-}