@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/tabs-layout/tabs-state.ts

@@ -1,4 +1,12 @@
-import { groupDeviceVar, groupUserVar, IAppNav, IPackage, newid, observable, Observable } from "@peers-app/peers-sdk";
+import {
+  groupDeviceVar,
+  groupUserVar,
+  type IAppNav,
+  type IPackage,
+  newid,
+  type Observable,
+  observable,
+} from "@peers-app/peers-sdk";
 import { _mainContentPath } from "../globals";
 import { systemPackage } from "../system-apps";
 import { allPackages } from "../ui-router/routes-loader";
@@ -12,79 +20,79 @@ export interface TabState {
 }
 
 export const launcherApp: TabState = {
-  tabId: 'launcher',
-  packageId: 'launcher',
-  path: '',
-  title: 'Apps',
-  iconClassName: 'bi-grid-3x3-gap',
+  tabId: "launcher",
+  packageId: "launcher",
+  path: "",
+  title: "Apps",
+  iconClassName: "bi-grid-3x3-gap",
 };
 
 // Persistent vars for storage (write-only, no subscription to avoid oscillation)
-const _persistentActiveTabs = groupDeviceVar<TabState[]>('activeTabs', {
+const _persistentActiveTabs = groupDeviceVar<TabState[]>("activeTabs", {
   defaultValue: [launcherApp],
 });
 
-const _persistentActiveTabId = groupDeviceVar<string>('activeTabId', {
-  defaultValue: 'launcher',
+const _persistentActiveTabId = groupDeviceVar<string>("activeTabId", {
+  defaultValue: "launcher",
 });
 
-const _persistentRecentlyUsedApps = groupUserVar<string[]>('recentlyUsedApps', {
+const _persistentRecentlyUsedApps = groupUserVar<string[]>("recentlyUsedApps", {
   defaultValue: [],
 });
 
 // In-memory observables for UI state (loaded once, then write-through to persistent vars)
 export const activeTabs: Observable<TabState[]> & { loadingPromise: Promise<void> } = (() => {
   const obs = observable<TabState[]>([launcherApp]);
-  
+
   // Write-through to persistent var on change
-  obs.subscribe(value => {
+  obs.subscribe((value) => {
     _persistentActiveTabs(value);
   });
-  
+
   // Load initial value once
   const loadingPromise = _persistentActiveTabs.loadingPromise.then(() => {
     obs(_persistentActiveTabs());
   });
-  
+
   return Object.assign(obs, { loadingPromise });
 })();
 
 export const activeTabId: Observable<string> & { loadingPromise: Promise<void> } = (() => {
-  const obs = observable<string>('launcher');
-  
+  const obs = observable<string>("launcher");
+
   // Write-through to persistent var on change
-  obs.subscribe(value => {
+  obs.subscribe((value) => {
     _persistentActiveTabId(value);
   });
-  
+
   // Load initial value once
   const loadingPromise = _persistentActiveTabId.loadingPromise.then(() => {
     obs(_persistentActiveTabId());
   });
-  
+
   return Object.assign(obs, { loadingPromise });
 })();
 
 export const recentlyUsedApps: Observable<string[]> & { loadingPromise: Promise<void> } = (() => {
   const obs = observable<string[]>([]);
-  
+
   // Write-through to persistent var on change
-  obs.subscribe(value => {
+  obs.subscribe((value) => {
     _persistentRecentlyUsedApps(value);
   });
-  
+
   // Load initial value once
   const loadingPromise = _persistentRecentlyUsedApps.loadingPromise.then(() => {
     obs(_persistentRecentlyUsedApps());
   });
-  
+
   return Object.assign(obs, { loadingPromise });
 })();
 
 export const initializedTabs = new Set<string>();
 
 export function goToTabPath(path: string) {
-  const tab = activeTabs().find(t => t.path === path);
+  const tab = activeTabs().find((t) => t.path === path);
   if (tab) {
     activeTabId(tab.tabId);
   } else {
@@ -94,32 +102,43 @@ export function goToTabPath(path: string) {
         path: path,
         title: appInfo.navItem.displayName || appInfo.navItem.name,
         packageId: appInfo.package.packageId,
-        iconClassName: appInfo.navItem.iconClassName
+        iconClassName: appInfo.navItem.iconClassName,
       });
     } else {
-      // update current tab path if no app found
+      // No app matched — navigate by updating the active tab's path (e.g. deep link).
+      // Must replace the tab object (immutable): TabContentRenderer is memoized on tab.path,
+      // and mutating in place makes prev/next props compare equal so Router never re-renders.
       const currentTabId = activeTabId();
       const currentTabs = activeTabs();
-      const currentTab = currentTabs.find(t => t.tabId === currentTabId);
-      if (currentTab && currentTab.path !== '') {
-        currentTab.path = path;
-        activeTabs([...currentTabs]);
+      const idx = currentTabs.findIndex((t) => t.tabId === currentTabId);
+      if (idx >= 0 && currentTabs[idx].path !== "") {
+        const prev = currentTabs[idx];
+        const newTabs = [...currentTabs];
+        newTabs[idx] = { ...prev, path };
+        activeTabs(newTabs);
+        if (prev.packageId !== "launcher") {
+          _mainContentPath(path);
+        }
       } else {
         openNewTab({
           path: path,
           title: "New Tab",
-          packageId: 'system-apps',
-          iconClassName: 'bi-question-circle'
+          packageId: "system-apps",
+          iconClassName: "bi-question-circle",
         });
       }
     }
   }
 }
 
-export const handleMainPathChanged = (oldPath: string, newPath: string, setNewMainPath: ((path: string) => any)) => {
-  const oldPathPart = oldPath.toLowerCase().trim().split('?')[0];
-  const newPathPart = newPath.toLowerCase().trim().split('?')[0];
-  const currentTab = activeTabs().find(t => t.tabId === activeTabId());
+export const handleMainPathChanged = (
+  oldPath: string,
+  newPath: string,
+  setNewMainPath: (path: string) => void,
+) => {
+  const oldPathPart = oldPath.toLowerCase().trim().split("?")[0];
+  const newPathPart = newPath.toLowerCase().trim().split("?")[0];
+  const currentTab = activeTabs().find((t) => t.tabId === activeTabId());
   if (oldPathPart === newPathPart || (currentTab && currentTab.path === newPath)) {
     // nothing to do
     setNewMainPath(newPath);
@@ -127,81 +146,81 @@ export const handleMainPathChanged = (oldPath: string, newPath: string, setNewMa
   }
 
   const appInfo = determineAppFromPath(newPath);
-  if (appInfo && oldPath !== '') {
+  if (appInfo && oldPath !== "") {
     openNewTab({
       path: newPath,
       title: appInfo.navItem.displayName || appInfo.navItem.name,
       packageId: appInfo.package.packageId,
-      iconClassName: appInfo.navItem.iconClassName
+      iconClassName: appInfo.navItem.iconClassName,
     });
   } else {
     setNewMainPath(newPath);
   }
+};
 
-}
-
-type AppInfo = { navItem: IAppNav, package: IPackage };
+type AppInfo = { navItem: IAppNav; package: IPackage };
 
 export function determineAppFromPath(path: string): AppInfo | undefined {
   const launcherInfo = {
     navItem: {
-      name: 'Apps',
-      navigationPath: '',
-      iconClassName: launcherApp.iconClassName || 'bi-grid-3x3-gap',
+      name: "Apps",
+      navigationPath: "",
+      iconClassName: launcherApp.iconClassName || "bi-grid-3x3-gap",
     },
-    package: systemPackage
+    package: systemPackage,
   };
-  if (!path || path === '' || path === '/') {
+  if (!path || path === "" || path === "/") {
     return launcherInfo;
   }
 
   // Remove leading/trailing slashes and query params
-  path = path.toLowerCase().trim().split('?')[0];
-  if (path.startsWith('/')) {
+  path = path.toLowerCase().trim().split("?")[0];
+  if (path.startsWith("/")) {
     path = path.substring(1);
   }
-  const rootPath = path.split('/')[0];
+  const rootPath = path.split("/")[0];
   const _allPackages = [systemPackage, ...allPackages()]; // WARNING allPackages might not be loaded yet
 
-
   const allAppInfos: AppInfo[] = _allPackages
-    .filter(pkg => (pkg.appNavs?.length ?? 0) > 0)
-    .flatMap(pkg =>
-      pkg.appNavs!.map(navItem => ({ navItem, package: pkg as IPackage }))
-    );
+    .filter((pkg) => (pkg.appNavs?.length ?? 0) > 0)
+    .flatMap((pkg) => {
+      const navs = pkg.appNavs;
+      if (!navs) return [];
+      return navs.map((navItem) => ({ navItem, package: pkg as IPackage }));
+    });
 
   // Find the most relevant app based on path
   for (const appInfo of allAppInfos) {
     const navPath = appInfo.navItem.navigationPath || appInfo.navItem.name.toLowerCase();
 
     // Check for exact match or path starting with nav path
-    if (rootPath === navPath || rootPath.startsWith(navPath + '/')) {
+    if (rootPath === navPath || rootPath.startsWith(`${navPath}/`)) {
       // Return the first matching app
       return {
         navItem: appInfo.navItem,
-        package: appInfo.package
+        package: appInfo.package,
       };
     }
   }
 
   // look for package-specific routes
   // uri in format of "package-nav/{packageId}/{path}"
-  const packageNavPrefix = 'package-nav/';
+  const packageNavPrefix = "package-nav/";
   if (path.startsWith(packageNavPrefix)) {
-    const parts = path.substring(packageNavPrefix.length).split('/');
+    const parts = path.substring(packageNavPrefix.length).split("/");
     if (parts.length > 0) {
       const packageId = parts[0];
-      const pkg = _allPackages.find(p => p.packageId === packageId);
+      const pkg = _allPackages.find((p) => p.packageId === packageId);
       if (pkg) {
-        const subPath = parts.slice(1).join('/');
-        const navItem = pkg.appNavs?.find(n => {
+        const subPath = parts.slice(1).join("/");
+        const navItem = pkg.appNavs?.find((n) => {
           const navPath = n.navigationPath || n.name.toLowerCase();
-          return subPath === navPath || subPath.startsWith(navPath + '/');
+          return subPath === navPath || subPath.startsWith(`${navPath}/`);
         });
         if (navItem) {
           return {
             navItem,
-            package: pkg
+            package: pkg,
           };
         }
       }
@@ -218,7 +237,7 @@ export const updateActiveTabTitle = (newTitle: string) => {
   //      using setTimeout to get around a race condition for setting title on new tabs
   setTimeout(() => {
     const currentTabs = activeTabs();
-    const activeTab = currentTabs.find(t => t.tabId === activeTabId());
+    const activeTab = currentTabs.find((t) => t.tabId === activeTabId());
     if (activeTab) {
       activeTab.title = newTitle;
       activeTabs([...currentTabs]);
@@ -227,15 +246,15 @@ export const updateActiveTabTitle = (newTitle: string) => {
 };
 
 // Global function to open content in new tab
-export const openNewTab = (tab: Omit<TabState, 'tabId'>, forceNew = false) => {
+export const openNewTab = (tab: Omit<TabState, "tabId">, forceNew = false) => {
   const newTab: TabState = {
     ...tab,
     tabId: newid(),
   };
 
   const currentTabs = activeTabs();
-  const existingTabIndex = currentTabs.findIndex(t =>
-    t.packageId === tab.packageId && t.path === tab.path
+  const existingTabIndex = currentTabs.findIndex(
+    (t) => t.packageId === tab.packageId && t.path === tab.path,
   );
 
   if (existingTabIndex >= 0 && !forceNew) {
@@ -248,9 +267,9 @@ export const openNewTab = (tab: Omit<TabState, 'tabId'>, forceNew = false) => {
   }
 
   // Update recently used (track by path instead of packageId)
-  if (tab.path && tab.packageId !== 'launcher') {
+  if (tab.path && tab.packageId !== "launcher") {
     const recent = recentlyUsedApps();
-    const filtered = recent.filter(path => path !== tab.path);
+    const filtered = recent.filter((path) => path !== tab.path);
     recentlyUsedApps([tab.path, ...filtered].slice(0, 8));
   }
 };
@@ -259,17 +278,17 @@ export const openNewTab = (tab: Omit<TabState, 'tabId'>, forceNew = false) => {
 export const closeCurrentTab = () => {
   const currentTabs = activeTabs();
   const _activeTabId = activeTabId();
-  const tabToClose = currentTabs.find(t => t.tabId === _activeTabId);
+  const tabToClose = currentTabs.find((t) => t.tabId === _activeTabId);
 
   if (!tabToClose || tabToClose.tabId === "launcher") return;
 
-  const closedIndex = currentTabs.findIndex(t => t.tabId === _activeTabId);
-  const newTabs = currentTabs.filter(t => t.tabId !== _activeTabId);
+  const closedIndex = currentTabs.findIndex((t) => t.tabId === _activeTabId);
+  const newTabs = currentTabs.filter((t) => t.tabId !== _activeTabId);
   activeTabs(newTabs);
   initializedTabs.delete(_activeTabId);
 
   if (newTabs.length === 0) {
-    activeTabId('launcher');
+    activeTabId("launcher");
   } else if (closedIndex < newTabs.length) {
     activeTabId(newTabs[closedIndex].tabId);
   } else {
@@ -281,7 +300,7 @@ export const closeCurrentTab = () => {
 export const switchToNextTab = () => {
   const currentTabs = activeTabs();
   const activeTab = activeTabId();
-  const currentIndex = currentTabs.findIndex(tab => tab.tabId === activeTab);
+  const currentIndex = currentTabs.findIndex((tab) => tab.tabId === activeTab);
 
   if (currentIndex === -1) return;
 
@@ -293,7 +312,7 @@ export const switchToNextTab = () => {
 export const switchToPreviousTab = () => {
   const currentTabs = activeTabs();
   const activeTab = activeTabId();
-  const currentIndex = currentTabs.findIndex(tab => tab.tabId === activeTab);
+  const currentIndex = currentTabs.findIndex((tab) => tab.tabId === activeTab);
 
   if (currentIndex === -1) return;
 
@@ -303,19 +322,19 @@ export const switchToPreviousTab = () => {
 
 // Keyboard shortcuts are now handled by the command palette system
 
-activeTabId.subscribe(newActiveTab => {
+activeTabId.subscribe((newActiveTab) => {
   const currentTabs = activeTabs();
-  const activeTab = currentTabs.find(t => t.tabId === newActiveTab);
+  const activeTab = currentTabs.find((t) => t.tabId === newActiveTab);
 
   if (!activeTab) {
-    console.warn('Active tab not found:', newActiveTab);
+    console.warn("Active tab not found:", newActiveTab);
     return;
   }
 
   // Update mainContentPath for the new active tab
-  if (activeTab.packageId !== 'launcher') {
+  if (activeTab.packageId !== "launcher") {
     _mainContentPath(activeTab.path);
   } else {
-    _mainContentPath(''); // Launcher or fallback
+    _mainContentPath(""); // Launcher or fallback
   }
-});
+});

package/src/ui-defaults/index.ts

@@ -1,3 +1,2 @@
-
-import './list-screen'
-import './markdown-field'
+import "./list-screen";
+import "./markdown-field";

package/src/ui-defaults/list-screen.tsx

@@ -1,6 +1,6 @@
-import { FieldType, newid, getAllTables, getIconClassName } from "@peers-app/peers-sdk";
+import { FieldType, getAllTables, getIconClassName, newid, z } from "@peers-app/peers-sdk";
+// biome-ignore lint/correctness/noUnusedImports: classic JSX (`jsx: react`) needs React in scope for emit
 import React from "react";
-import { z } from "zod";
 import { ListScreen } from "../components/list-screen";
 import { mainContentPath } from "../globals";
 import { registerInternalPeersUI } from "../ui-router/ui-loader";
@@ -11,31 +11,35 @@ const propsSchema = z.object({
 
 type IProps = z.infer<typeof propsSchema>;
 
-export const DefaultListScreen = (props: IProps) => {
-  const path = mainContentPath().toLowerCase().trim().split('?')[0].split('#').pop()?.split('/')[0] || '';
-  const fuzzyTableName = ({
-    variables: 'persistent_vars',
-  }[path] || path).replace(/[_-]/g, '').trim();
+export const DefaultListScreen = (_props: IProps) => {
+  const path =
+    mainContentPath().toLowerCase().trim().split("?")[0].split("#").pop()?.split("/")[0] || "";
+  const fuzzyTableName = (
+    {
+      variables: "persistent_vars",
+    }[path] || path
+  )
+    .replace(/[_-]/g, "")
+    .trim();
 
   const allTables = getAllTables();
-  const tableName = Object.keys(allTables).find(t => t.toLowerCase().replace(/[_-]/g, '').trim() === fuzzyTableName);
-  const table = allTables[tableName || ''];
+  const tableName = Object.keys(allTables).find(
+    (t) => t.toLowerCase().replace(/[_-]/g, "").trim() === fuzzyTableName,
+  );
+  const table = allTables[tableName || ""];
   if (!table) {
-    return (
-      <div className="m-4">
-        Table not found for path: "{path}"
-      </div>
-    );
+    return <div className="m-4">Table not found for path: "{path}"</div>;
   }
-  const idField = table.metaData.fields.find(f => f.name === table.metaData.primaryKeyName);
+  const idField = table.metaData.fields.find((f) => f.name === table.metaData.primaryKeyName);
   if (!idField) {
-    throw new Error('No primary key field found for table');
+    throw new Error("No primary key field found for table");
   }
-  const nameField = table.metaData.fields.find(f => f.name === 'name') ||
-    table.metaData.fields.find(f => f.name === 'title') ||
-    table.metaData.fields.find(f => f.type === FieldType.string);
+  const nameField =
+    table.metaData.fields.find((f) => f.name === "name") ||
+    table.metaData.fields.find((f) => f.name === "title") ||
+    table.metaData.fields.find((f) => f.type === FieldType.string);
   if (!nameField) {
-    throw new Error('No name field found to create new record with');
+    throw new Error("No name field found to create new record with");
   }
 
   return (
@@ -45,45 +49,46 @@ export const DefaultListScreen = (props: IProps) => {
         table,
         sortBy: [`-${idField.name}`],
         newRecord: async (text: string) => {
-          text = text.trim().replace(/\s+/g, '_');
+          text = text.trim().replace(/\s+/g, "_");
           let item = table.initRecord({
             [idField.name]: newid(),
             [nameField?.name]: text,
-
-          })
+          });
           item = await table.insert(item);
           mainContentPath(`${path}/${item[idField.name]}`);
           return item;
         },
-        renderItem: (item: Record<string, any>) => {
+        renderItem: (item) => {
+          const row = item as Record<string, unknown>;
+          const rowId = row[idField.name];
+          const displayName = row.name;
           return (
-            <div
-              key={item[idField.name]}
-              className='container-fluid pb-4'
-            >
+            <div key={String(rowId)} className="container-fluid pb-4">
               <i className={getIconClassName(table)}></i>&nbsp;
-              <a href={`#${path}/${item[idField.name]}`}>
-                {item.name || '<empty-name>'}
+              <a href={`#${path}/${String(rowId)}`}>
+                {typeof displayName === "string" ? displayName : "<empty-name>"}
               </a>
-              <div style={{ paddingLeft: '20px' }}>
+              <div style={{ paddingLeft: "20px" }}>
                 {/* <MarkdownWithMentions content={item.description || ''} /> */}
               </div>
             </div>
-          )
+          );
         },
       }}
     />
   );
-}
+};
 
 registerInternalPeersUI({
   peersUIId: "00m5fql0x5v48vyrk5bllzdrr",
   component: DefaultListScreen,
-  routes: [{
-    isMatch: (props, context) => context.path.split('/').length === 1,
-    uiEditMode: 'view',
-    uiCategory: 'screen',
-    uiSubcategory: 'list',
-    priority: -Number.MAX_SAFE_INTEGER
-  }]
+  routes: [
+    {
+      isMatch: (_props, context) => context.path.split("/").length === 1,
+      uiEditMode: "view",
+      uiCategory: "screen",
+      uiSubcategory: "list",
+      priority: -Number.MAX_SAFE_INTEGER,
+    },
+  ],
 });

package/src/ui-defaults/markdown-field.tsx

@@ -1,6 +1,6 @@
-import { Observable, observable } from "@peers-app/peers-sdk";
+import { type Observable, observable, z } from "@peers-app/peers-sdk";
+// biome-ignore lint/correctness/noUnusedImports: classic JSX (`jsx: react`) needs React in scope for emit
 import React, { useEffect, useRef, useState } from "react";
-import { z } from "zod";
 import { MarkdownEditorInline } from "../components/markdown-editor/editor-inline";
 import { MarkdownWithMentions } from "../components/markdown-with-mentions";
 import { registerInternalPeersUI } from "../ui-router/ui-loader";
@@ -14,8 +14,8 @@ interface IMarkdownFieldProps {
  * Markdown field component for viewing markdown content
  */
 const MarkdownFieldView = (props: IMarkdownFieldProps) => {
-  const value = typeof props.value === 'function' ? props.value() : props.value;
-  
+  const value = typeof props.value === "function" ? props.value() : props.value;
+
   if (!value) {
     return null;
   }
@@ -32,30 +32,26 @@ const MarkdownFieldEdit = (props: IMarkdownFieldProps) => {
 
   // Create an observable for the editor that calls onChange when it changes
   const [valueObs] = useState(() => {
-    const initialValue = typeof props.value === 'function' ? props.value() : props.value;
-    const obs = observable(initialValue || '');
-    
+    const initialValue = typeof props.value === "function" ? props.value() : props.value;
+    const obs = observable(initialValue || "");
+
     // Subscribe to changes and call onChange
     obs.subscribe((newValue) => {
       onChangeRef.current?.(newValue);
     });
-    
+
     return obs;
   });
 
   // Sync external value changes to the observable
   useEffect(() => {
-    const currentValue = typeof props.value === 'function' ? props.value() : props.value;
+    const currentValue = typeof props.value === "function" ? props.value() : props.value;
     if (currentValue !== valueObs()) {
-      valueObs(currentValue || '');
+      valueObs(currentValue || "");
     }
-  }, [props.value]);
+  }, [props.value, valueObs]);
 
-  return (
-    <MarkdownEditorInline
-      value={valueObs}
-    />
-  );
+  return <MarkdownEditorInline value={valueObs} />;
 };
 
 // Schema for markdown field props
@@ -70,11 +66,11 @@ registerInternalPeersUI({
   propsSchema: markdownFieldPropsSchema,
   routes: [
     {
-      uiCategory: 'field',
-      uiSubcategory: 'markdown',
-      uiEditMode: 'view',
-    }
-  ]
+      uiCategory: "field",
+      uiSubcategory: "markdown",
+      uiEditMode: "view",
+    },
+  ],
 });
 
 // Register the edit mode component
@@ -83,9 +79,9 @@ registerInternalPeersUI({
   propsSchema: markdownFieldPropsSchema,
   routes: [
     {
-      uiCategory: 'field',
-      uiSubcategory: 'markdown',
-      uiEditMode: 'edit',
-    }
-  ]
+      uiCategory: "field",
+      uiSubcategory: "markdown",
+      uiEditMode: "edit",
+    },
+  ],
 });