@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/tabs-layout/tabs-layout.tsx

@@ -1,18 +1,32 @@
-import { getUserContext, hasShownWelcomeModal, IAppNav, rpcServerCalls, setDefaultClientUserContext, Subscription } from "@peers-app/peers-sdk";
-import React, { Component, useEffect, useState } from 'react';
-import { openCommandPalette } from '../command-palette/command-palette';
-import { CommandPaletteOverlay } from '../command-palette/command-palette-ui';
-import { GroupSwitcher } from '../components/group-switcher';
-import { Router } from '../components/router';
-import { isDesktop, loadGlobals, me } from '../globals';
-import { useObservable, usePromise } from '../hooks';
-import { colorMode } from '../screens/settings/color-mode-dropdown';
-import { SetupUser } from '../screens/setup-user';
-import { WelcomeModal } from '../screens/welcome-modal';
-import { systemPackage } from '../system-apps';
-import { allPackages, loadAllRoutes } from '../ui-router/routes-loader';
-import { UIRouter } from '../ui-router/ui-loader';
-import { activeTabId, activeTabs, goToTabPath, initializedTabs, recentlyUsedApps, TabState } from './tabs-state';
+import {
+  getUserContext,
+  hasShownWelcomeModal,
+  type IAppNav,
+  rpcServerCalls,
+  type Subscription,
+  setDefaultClientUserContext,
+} from "@peers-app/peers-sdk";
+import React, { Component, useEffect, useState } from "react";
+import { openCommandPalette } from "../command-palette/command-palette";
+import { CommandPaletteOverlay } from "../command-palette/command-palette-ui";
+import { GroupSwitcher } from "../components/group-switcher";
+import { Router } from "../components/router";
+import { isDesktop, loadGlobals } from "../globals";
+import { useObservable, usePromise } from "../hooks";
+import { colorMode } from "../screens/settings/color-mode-dropdown";
+import { SetupUser } from "../screens/setup-user";
+import { WelcomeModal } from "../screens/welcome-modal";
+import { systemPackage } from "../system-apps";
+import { allPackages, loadAllRoutes } from "../ui-router/routes-loader";
+import { UIRouter } from "../ui-router/ui-loader";
+import {
+  activeTabId,
+  activeTabs,
+  goToTabPath,
+  initializedTabs,
+  recentlyUsedApps,
+  type TabState,
+} from "./tabs-state";
 
 // Error boundary that wraps each tab's content so a crash in one tab
 // doesn't take down the entire app.
@@ -38,18 +52,30 @@ class TabErrorBoundary extends Component<TabErrorBoundaryProps, TabErrorBoundary
   }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    console.error(`TabErrorBoundary caught error in tab "${this.props.tabTitle}":`, error, errorInfo);
+    console.error(
+      `TabErrorBoundary caught error in tab "${this.props.tabTitle}":`,
+      error,
+      errorInfo,
+    );
   }
 
   render() {
     if (this.state.hasError) {
       return (
-        <div style={{ padding: '24px', textAlign: 'center' }}>
-          <h4 style={{ marginBottom: '12px' }}>Something went wrong in "{this.props.tabTitle}"</h4>
-          <p style={{ opacity: 0.7, marginBottom: '16px', fontFamily: 'monospace', fontSize: '13px' }}>
-            {this.state.error?.message || 'Unknown error'}
+        <div style={{ padding: "24px", textAlign: "center" }}>
+          <h4 style={{ marginBottom: "12px" }}>Something went wrong in "{this.props.tabTitle}"</h4>
+          <p
+            style={{
+              opacity: 0.7,
+              marginBottom: "16px",
+              fontFamily: "monospace",
+              fontSize: "13px",
+            }}
+          >
+            {this.state.error?.message || "Unknown error"}
           </p>
           <button
+            type="button"
             className="btn btn-outline-primary btn-sm"
             onClick={() => this.setState({ hasError: false, error: null })}
           >
@@ -65,7 +91,7 @@ class TabErrorBoundary extends Component<TabErrorBoundaryProps, TabErrorBoundary
 export function TabsLayoutApp() {
   const userId = usePromise(async () => {
     const _userId = await rpcServerCalls.getUserId();
-    return _userId || null as string | null;
+    return _userId || (null as string | null);
   });
 
   if (userId === undefined) {
@@ -73,7 +99,7 @@ export function TabsLayoutApp() {
   }
 
   if (!userId) {
-    document.getElementById('appLoadingDiv')?.remove();
+    document.getElementById("appLoadingDiv")?.remove();
     return <SetupUser />;
   } else {
     return <TabsLayout userId={userId} />;
@@ -86,7 +112,7 @@ export function TabsLayout(props: { userId: string }) {
     setDefaultClientUserContext(props.userId);
     userContextInitialized = true;
   }
-  
+
   const loaded = usePromise(async () => {
     await loadGlobals();
     await loadAllRoutes();
@@ -111,17 +137,14 @@ export function TabsLayout(props: { userId: string }) {
 
   if (!loaded) return false;
 
-  document.getElementById('appLoadingDiv')?.remove();
+  document.getElementById("appLoadingDiv")?.remove();
 
   return (
     <>
       <TabsLayoutInternal />
       <CommandPaletteOverlay />
       {showWelcomeModal && (
-        <WelcomeModal 
-          colorMode={_colorMode} 
-          onClose={() => setShowWelcomeModal(false)} 
-        />
+        <WelcomeModal colorMode={_colorMode} onClose={() => setShowWelcomeModal(false)} />
       )}
     </>
   );
@@ -131,14 +154,14 @@ function TabsLayoutInternal() {
   const [_colorMode] = useObservable(colorMode);
   const [tabs] = useObservable(activeTabs);
   const [activeTab] = useObservable(activeTabId);
-  const [currentlyActiveGroupId, setCurrentlyActiveGroupId] = useState('');
+  const [currentlyActiveGroupId, setCurrentlyActiveGroupId] = useState("");
   const [switchingGroup, setSwitchingGroup] = useState(false);
-  
+
   useEffect(() => {
     let sub: Subscription;
-    getUserContext().then(userContext => {
-      setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId)
-      sub = userContext.currentlyActiveGroupId.subscribe(async groupId => {
+    getUserContext().then((userContext) => {
+      setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId);
+      sub = userContext.currentlyActiveGroupId.subscribe(async (_groupId) => {
         setCurrentlyActiveGroupId(userContext.currentlyActiveGroupId() || userContext.userId);
         setSwitchingGroup(true);
         await userContext.waitForActiveGroupPersistence();
@@ -152,24 +175,24 @@ function TabsLayoutInternal() {
       }
     };
   }, []);
-  
+
   useObservable(isDesktop);
   const isMobile = !isDesktop();
 
   const closeTab = (tabId: string) => {
     const currentTabs = activeTabs();
-    const tabToClose = currentTabs.find(t => t.tabId === tabId);
+    const tabToClose = currentTabs.find((t) => t.tabId === tabId);
 
     if (!tabToClose || tabToClose.tabId === "launcher") return;
 
-    const closedIndex = currentTabs.findIndex(t => t.tabId === tabId);
-    const newTabs = currentTabs.filter(t => t.tabId !== tabId);
+    const closedIndex = currentTabs.findIndex((t) => t.tabId === tabId);
+    const newTabs = currentTabs.filter((t) => t.tabId !== tabId);
     activeTabs(newTabs);
     initializedTabs.delete(tabId);
 
     if (activeTab === tabId) {
       if (newTabs.length === 0) {
-        activeTabId('launcher');
+        activeTabId("launcher");
       } else if (closedIndex < newTabs.length) {
         activeTabId(newTabs[closedIndex].tabId);
       } else {
@@ -185,25 +208,35 @@ function TabsLayoutInternal() {
   return (
     <div
       key={currentlyActiveGroupId}
-      className="d-flex flex-column" style={{ height: 'calc(100vh - 25px)', overflow: 'hidden' }}>
+      className="d-flex flex-column"
+      style={{ height: "calc(100vh - 25px)", overflow: "hidden" }}
+    >
       {switchingGroup && (
-        <div style={{
-          position: 'fixed', inset: 0, zIndex: 9999,
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
-          backgroundColor: _colorMode === 'light' ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.85)',
-        }}>
+        <div
+          style={{
+            position: "fixed",
+            inset: 0,
+            zIndex: 9999,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: _colorMode === "light" ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.85)",
+          }}
+        >
           <div className="text-center">
             <div className="spinner-border text-secondary mb-3" role="status" />
-            <div className={`small ${_colorMode === 'light' ? 'text-muted' : 'text-secondary'}`}>Switching group...</div>
+            <div className={`small ${_colorMode === "light" ? "text-muted" : "text-secondary"}`}>
+              Switching group...
+            </div>
           </div>
         </div>
       )}
       {/* Tabs Header */}
       <div
-        className={`border-bottom ${_colorMode === 'light' ? 'bg-light' : 'bg-dark'}`}
+        className={`border-bottom ${_colorMode === "light" ? "bg-light" : "bg-dark"}`}
         style={{
-          borderBottomWidth: '1px',
-          borderBottomColor: _colorMode === 'light' ? '#dee2e6' : '#495057'
+          borderBottomWidth: "1px",
+          borderBottomColor: _colorMode === "light" ? "#dee2e6" : "#495057",
         }}
       >
         {isMobile ? (
@@ -215,43 +248,45 @@ function TabsLayoutInternal() {
             colorMode={_colorMode}
           />
         ) : (
-          <div className="d-flex align-items-center px-1" style={{ height: '36px' }}>
+          <div className="d-flex align-items-center px-1" style={{ height: "36px" }}>
             {/* Group Switcher */}
             <GroupSwitcher colorMode={_colorMode} isMobile={false} />
-            
+
             {/* Search Button */}
             <button
+              type="button"
               className="btn btn-sm me-2 d-flex align-items-center"
               onClick={openCommandPalette}
               title="Search everything (Cmd+K)"
               style={{
-                padding: '4px 8px',
-                fontSize: '12px',
-                borderRadius: '6px',
-                border: 'none',
-                background: 'transparent',
-                color: _colorMode === 'light' ? '#6c757d' : '#adb5bd'
+                padding: "4px 8px",
+                fontSize: "12px",
+                borderRadius: "6px",
+                border: "none",
+                background: "transparent",
+                color: _colorMode === "light" ? "#6c757d" : "#adb5bd",
               }}
               onMouseEnter={(e) => {
-                e.currentTarget.style.backgroundColor = _colorMode === 'light' ? '#f8f9fa' : '#495057';
-                e.currentTarget.style.color = _colorMode === 'light' ? '#0d6efd' : '#ffffff';
+                e.currentTarget.style.backgroundColor =
+                  _colorMode === "light" ? "#f8f9fa" : "#495057";
+                e.currentTarget.style.color = _colorMode === "light" ? "#0d6efd" : "#ffffff";
               }}
               onMouseLeave={(e) => {
-                e.currentTarget.style.backgroundColor = 'transparent';
-                e.currentTarget.style.color = _colorMode === 'light' ? '#6c757d' : '#adb5bd';
+                e.currentTarget.style.backgroundColor = "transparent";
+                e.currentTarget.style.color = _colorMode === "light" ? "#6c757d" : "#adb5bd";
               }}
             >
-              <i className="bi-search" style={{ fontSize: '14px' }} />
+              <i className="bi-search" style={{ fontSize: "14px" }} />
             </button>
-            
+
             <div
               className="d-flex flex-grow-1 overflow-auto"
               style={{
-                scrollbarWidth: 'none',
-                msOverflowStyle: 'none'
+                scrollbarWidth: "none",
+                msOverflowStyle: "none",
               }}
             >
-              {tabs.map(tab => (
+              {tabs.map((tab) => (
                 <TabHeader
                   key={tab.tabId}
                   tab={tab}
@@ -268,11 +303,11 @@ function TabsLayoutInternal() {
 
       {/* Tab Content */}
       <div className="flex-grow-1 overflow-hidden">
-        {tabs.map(tab => (
+        {tabs.map((tab) => (
           <div
             key={tab.tabId}
-            className={`h-100 ${activeTab === tab.tabId ? 'd-block' : 'd-none'}`}
-            style={{ display: activeTab === tab.tabId ? 'block' : 'none' }}
+            className={`h-100 ${activeTab === tab.tabId ? "d-block" : "d-none"}`}
+            style={{ display: activeTab === tab.tabId ? "block" : "none" }}
           >
             <TabErrorBoundary tabTitle={tab.title} tabId={tab.tabId}>
               <TabContent tab={tab} isMobile={isMobile} isActive={activeTab === tab.tabId} />
@@ -292,112 +327,131 @@ interface MobileTabsHeaderProps {
   colorMode: string;
 }
 
-function MobileTabsHeader({ tabs, activeTab, onSwitch, onClose, colorMode }: MobileTabsHeaderProps) {
+function MobileTabsHeader({
+  tabs,
+  activeTab,
+  onSwitch,
+  onClose,
+  colorMode,
+}: MobileTabsHeaderProps) {
   const [showMenuDropdown, setShowMenuDropdown] = React.useState(false);
-  const currentTab = tabs.find(t => t.tabId === activeTab);
-  const nonLauncherTabs = tabs.filter(t => t.packageId !== 'launcher');
+  const currentTab = tabs.find((t) => t.tabId === activeTab);
+  const nonLauncherTabs = tabs.filter((t) => t.packageId !== "launcher");
 
   return (
-    <div className="d-flex align-items-center justify-content-between px-2 position-relative" style={{ height: '36px' }}>
+    <div
+      className="d-flex align-items-center justify-content-between px-2 position-relative"
+      style={{ height: "36px" }}
+    >
       {/* Left Side - Group Switcher */}
       <div className="d-flex align-items-center gap-1">
         <GroupSwitcher colorMode={colorMode} isMobile={true} />
       </div>
 
       {/* Center - Current Tab Display (absolutely positioned to center on screen) */}
-      <div 
+      <div
         className="d-flex align-items-center justify-content-center position-absolute"
-        style={{ 
-          left: '50%',
-          transform: 'translateX(-50%)',
-          pointerEvents: 'none',
-          maxWidth: 'calc(100% - 140px)'
+        style={{
+          left: "50%",
+          transform: "translateX(-50%)",
+          pointerEvents: "none",
+          maxWidth: "calc(100% - 140px)",
         }}
       >
-        {currentTab?.iconClassName && currentTab.packageId !== 'launcher' && (
+        {currentTab?.iconClassName && currentTab.packageId !== "launcher" && (
           <i className={`${currentTab.iconClassName} me-2`} />
         )}
-        <span className="fw-medium text-truncate small">
-          {currentTab?.title || 'Apps'}
-        </span>
+        <span className="fw-medium text-truncate small">{currentTab?.title || "Apps"}</span>
       </div>
 
       {/* Right Side - Hamburger Menu */}
       <div className="d-flex align-items-center">
         <div className="dropdown">
           <button
-            className={`btn btn-sm ${colorMode === 'light' ? 'btn-outline-dark' : 'btn-outline-light'}`}
+            type="button"
+            className={`btn btn-sm ${colorMode === "light" ? "btn-outline-dark" : "btn-outline-light"}`}
             onClick={() => setShowMenuDropdown(!showMenuDropdown)}
-            style={{ minWidth: '36px' }}
+            style={{ minWidth: "36px" }}
           >
             <i className="bi-list" />
-            {nonLauncherTabs.length > 0 && (
-              <span className="ms-1">{nonLauncherTabs.length}</span>
-            )}
+            {nonLauncherTabs.length > 0 && <span className="ms-1">{nonLauncherTabs.length}</span>}
           </button>
           {showMenuDropdown && (
             <div
-              className={`dropdown-menu show position-absolute ${colorMode === 'light' ? '' : 'dropdown-menu-dark'}`}
-              style={{ right: 0, top: '100%', zIndex: 1000, minWidth: '280px', maxHeight: 'calc(100vh - 60px)', overflowY: 'auto' }}
+              className={`dropdown-menu show position-absolute ${colorMode === "light" ? "" : "dropdown-menu-dark"}`}
+              style={{
+                right: 0,
+                top: "100%",
+                zIndex: 1000,
+                minWidth: "280px",
+                maxHeight: "calc(100vh - 60px)",
+                overflowY: "auto",
+              }}
             >
               {/* Apps Option */}
               <div
-                className={`dropdown-item d-flex align-items-center ${activeTab === 'launcher' ? 'active' : ''}`}
-                style={{ cursor: 'pointer', padding: '14px 18px', fontSize: '17px' }}
+                className={`dropdown-item d-flex align-items-center ${activeTab === "launcher" ? "active" : ""}`}
+                style={{ cursor: "pointer", padding: "14px 18px", fontSize: "17px" }}
                 onClick={() => {
-                  onSwitch('launcher');
+                  onSwitch("launcher");
                   setShowMenuDropdown(false);
                 }}
               >
-                <i className="bi-grid-3x3-gap me-3" style={{ fontSize: '20px' }} />
+                <i className="bi-grid-3x3-gap me-3" style={{ fontSize: "20px" }} />
                 <span>Apps</span>
               </div>
-              
+
               {/* Search Option */}
               <div
                 className="dropdown-item d-flex align-items-center"
-                style={{ cursor: 'pointer', padding: '14px 18px', fontSize: '17px' }}
+                style={{ cursor: "pointer", padding: "14px 18px", fontSize: "17px" }}
                 onClick={() => {
                   openCommandPalette();
                   setShowMenuDropdown(false);
                 }}
               >
-                <i className="bi-search me-3" style={{ fontSize: '20px' }} />
+                <i className="bi-search me-3" style={{ fontSize: "20px" }} />
                 <span>Search</span>
               </div>
-              
+
               {/* Divider if there are open tabs */}
               {nonLauncherTabs.length > 0 && (
-                <div className="dropdown-divider" style={{ margin: '8px 0' }} />
+                <div className="dropdown-divider" style={{ margin: "8px 0" }} />
               )}
-              
+
               {/* Open Tabs */}
-              {nonLauncherTabs.slice().reverse().map(tab => (
-                <div
-                  key={tab.tabId}
-                  className={`dropdown-item d-flex align-items-center justify-content-between ${activeTab === tab.tabId ? 'active' : ''}`}
-                  style={{ cursor: 'pointer', padding: '14px 18px', fontSize: '17px' }}
-                  onClick={() => {
-                    onSwitch(tab.tabId);
-                    setShowMenuDropdown(false);
-                  }}
-                >
-                  <div className="d-flex align-items-center">
-                    {tab.iconClassName && <i className={`${tab.iconClassName} me-3`} style={{ fontSize: '20px' }} />}
-                    <span>{tab.title}</span>
-                  </div>
-                  <button
-                    className="btn btn-sm p-0 ms-3"
-                    style={{ width: '32px', height: '32px', fontSize: '20px' }}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onClose(tab.tabId);
+              {nonLauncherTabs
+                .slice()
+                .reverse()
+                .map((tab) => (
+                  <div
+                    key={tab.tabId}
+                    className={`dropdown-item d-flex align-items-center justify-content-between ${activeTab === tab.tabId ? "active" : ""}`}
+                    style={{ cursor: "pointer", padding: "14px 18px", fontSize: "17px" }}
+                    onClick={() => {
+                      onSwitch(tab.tabId);
+                      setShowMenuDropdown(false);
                     }}
                   >
-                    <i className="bi-x" />
-                  </button>
-                </div>
-              ))}
+                    <div className="d-flex align-items-center">
+                      {tab.iconClassName && (
+                        <i className={`${tab.iconClassName} me-3`} style={{ fontSize: "20px" }} />
+                      )}
+                      <span>{tab.title}</span>
+                    </div>
+                    <button
+                      type="button"
+                      className="btn btn-sm p-0 ms-3"
+                      style={{ width: "32px", height: "32px", fontSize: "20px" }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onClose(tab.tabId);
+                      }}
+                    >
+                      <i className="bi-x" />
+                    </button>
+                  </div>
+                ))}
             </div>
           )}
         </div>
@@ -425,59 +479,70 @@ interface TabHeaderProps {
 
 function TabHeader({ tab, isActive, onSwitch, onClose, colorMode }: TabHeaderProps) {
   const activeClass = isActive
-    ? (colorMode === 'light' ? 'bg-white' : 'bg-secondary')
-    : (colorMode === 'light' ? 'bg-light' : 'bg-dark');
+    ? colorMode === "light"
+      ? "bg-white"
+      : "bg-secondary"
+    : colorMode === "light"
+      ? "bg-light"
+      : "bg-dark";
 
   return (
     <div
       className={`d-flex align-items-center px-2 py-1 user-select-none ${activeClass}`}
       style={{
-        cursor: 'pointer',
-        minWidth: '100px',
-        maxWidth: '180px',
-        height: '34px',
-        fontSize: '13px',
-        borderTop: isActive ? '2px solid #0d6efd' : '2px solid transparent',
-        borderLeft: '1px solid transparent',
-        borderRight: '1px solid ' + (colorMode === 'light' ? '#dee2e6' : '#495057'),
-        borderBottom: isActive ? (colorMode === 'light' ? '1px solid white' : '1px solid #343a40') : 'none',
-        marginBottom: isActive ? '-1px' : '0',
-        borderRadius: isActive ? '6px 6px 0 0' : '0',
-        transition: 'all 0.15s ease',
+        cursor: "pointer",
+        minWidth: "100px",
+        maxWidth: "180px",
+        height: "34px",
+        fontSize: "13px",
+        borderTop: isActive ? "2px solid #0d6efd" : "2px solid transparent",
+        borderLeft: "1px solid transparent",
+        borderRight: `1px solid ${colorMode === "light" ? "#dee2e6" : "#495057"}`,
+        borderBottom: isActive
+          ? colorMode === "light"
+            ? "1px solid white"
+            : "1px solid #343a40"
+          : "none",
+        marginBottom: isActive ? "-1px" : "0",
+        borderRadius: isActive ? "6px 6px 0 0" : "0",
+        transition: "all 0.15s ease",
         zIndex: isActive ? 1 : 0,
-        boxShadow: isActive ? '0 2px 4px rgba(0,0,0,0.1)' : 'none'
+        boxShadow: isActive ? "0 2px 4px rgba(0,0,0,0.1)" : "none",
       }}
       onMouseEnter={(e) => {
         if (!isActive) {
-          e.currentTarget.style.backgroundColor = colorMode === 'light' ? '#f8f9fa' : '#495057';
+          e.currentTarget.style.backgroundColor = colorMode === "light" ? "#f8f9fa" : "#495057";
         }
       }}
       onMouseLeave={(e) => {
         if (!isActive) {
-          e.currentTarget.style.backgroundColor = colorMode === 'light' ? '#f1f3f4' : '#343a40';
+          e.currentTarget.style.backgroundColor = colorMode === "light" ? "#f1f3f4" : "#343a40";
         }
       }}
       onClick={() => onSwitch(tab.tabId)}
     >
-      {tab.iconClassName && (
-        <i className={`${tab.iconClassName} me-2`} />
-      )}
-      <span className="text-truncate" style={{ maxWidth: '120px', fontSize: '12px' }}>
+      {tab.iconClassName && <i className={`${tab.iconClassName} me-2`} />}
+      <span className="text-truncate" style={{ maxWidth: "120px", fontSize: "12px" }}>
         {tab.title}
       </span>
       {tab.tabId !== "launcher" && (
         <button
+          type="button"
           className="btn p-0 ms-1 opacity-75 hover-opacity-100"
           style={{
-            width: '14px',
-            height: '14px',
-            fontSize: '11px',
-            border: 'none',
-            background: 'none',
-            borderRadius: '2px'
+            width: "14px",
+            height: "14px",
+            fontSize: "11px",
+            border: "none",
+            background: "none",
+            borderRadius: "2px",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = "rgba(0,0,0,0.1)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = "transparent";
           }}
-          onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.1)'}
-          onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
           onClick={(e) => {
             e.stopPropagation();
             onClose(tab.tabId);
@@ -499,7 +564,7 @@ interface TabContentProps {
 function TabContent({ tab, isMobile, isActive }: TabContentProps) {
   // Only render content if this tab is active OR has been previously initialized
   const shouldRender = isActive || initializedTabs.has(tab.tabId);
-  
+
   // Mark tab as initialized when it becomes active for the first time
   React.useEffect(() => {
     if (isActive) {
@@ -515,30 +580,35 @@ function TabContent({ tab, isMobile, isActive }: TabContentProps) {
 }
 
 // Create individual tab content components that don't re-render
-const TabContentRenderer = React.memo(({ tab, isMobile }: { tab: TabState, isMobile: boolean }) => {
-  if (tab.packageId === 'launcher') {
-    return <AppLauncherTab isMobile={isMobile} />;
-  }
+const TabContentRenderer = React.memo(
+  ({ tab, isMobile }: { tab: TabState; isMobile: boolean }) => {
+    if (tab.packageId === "launcher") {
+      return <AppLauncherTab isMobile={isMobile} />;
+    }
 
-  // System apps use the main Router (which reads from mainContentPath)
-  // Package apps use UIRouter with explicit path
-  const isSystemApp = tab.packageId === 'system-apps';
+    // System apps use the main Router (which reads from mainContentPath)
+    // Package apps use UIRouter with explicit path
+    const isSystemApp = tab.packageId === "system-apps";
 
-  return (
-    <div className={`h-100 overflow-auto ${isMobile ? 'p-2' : 'p-3'}`}>
-      {isSystemApp ? (
-        <Router path={tab.path} />
-      ) : (
-        <UIRouter path={tab.path} uiCategory="screen" props={{}} />
-      )}
-    </div>
-  );
-}, (prevProps, nextProps) => {
-  // Only re-render if the tab or isMobile changed
-  return prevProps.tab.tabId === nextProps.tab.tabId && 
-         prevProps.tab.path === nextProps.tab.path &&
-         prevProps.isMobile === nextProps.isMobile;
-});
+    return (
+      <div className={`h-100 overflow-auto ${isMobile ? "p-2" : "p-3"}`}>
+        {isSystemApp ? (
+          <Router path={tab.path} />
+        ) : (
+          <UIRouter path={tab.path} uiCategory="screen" props={{}} />
+        )}
+      </div>
+    );
+  },
+  (prevProps, nextProps) => {
+    // Only re-render if the tab or isMobile changed
+    return (
+      prevProps.tab.tabId === nextProps.tab.tabId &&
+      prevProps.tab.path === nextProps.tab.path &&
+      prevProps.isMobile === nextProps.isMobile
+    );
+  },
+);
 
 interface AppLauncherTabProps {
   isMobile: boolean;
@@ -558,26 +628,28 @@ interface AppItem {
 function AppLauncherTab({ isMobile }: AppLauncherTabProps) {
   const [packages] = useObservable(allPackages);
   const [recentApps] = useObservable(recentlyUsedApps);
-  const [searchTerm, setSearchTerm] = React.useState('');
+  const [searchTerm, setSearchTerm] = React.useState("");
 
   // Combine regular packages with system apps package
   const allPackages_ = [...packages, systemPackage];
 
   // Create app items from nav items in packages
   const allApps: AppItem[] = 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) 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') {
+        if (pkg.packageId === "system-apps") {
           // System apps use direct routing (like the original left bar)
-          path = navItem.navigationPath ?? navItem.name.replace(/\s/g, '-').toLowerCase();
+          path = navItem.navigationPath ?? navItem.name.replace(/\s/g, "-").toLowerCase();
         } else {
           // Regular packages use package-nav format
-          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("//", "/");
           }
         }
 
@@ -588,42 +660,45 @@ function AppLauncherTab({ isMobile }: AppLauncherTabProps) {
           path,
           name: navItem.name,
           displayName: navItem.displayName || navItem.name,
-          iconClassName: navItem.iconClassName || 'bi-box-seam'
+          iconClassName: navItem.iconClassName || "bi-box-seam",
         };
-      })
-    );
+      });
+    });
 
   // Filter apps based on search term
   const filteredApps = searchTerm.trim()
-    ? allApps.filter(app =>
-      app.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      app.displayName.toLowerCase().includes(searchTerm.toLowerCase())
-    )
+    ? allApps.filter(
+        (app) =>
+          app.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          app.displayName.toLowerCase().includes(searchTerm.toLowerCase()),
+      )
     : allApps;
 
   // Categorize filtered apps by package ID
-  const systemApps = filteredApps.filter(app => app.packageId === 'system-apps');
-  const userApps = filteredApps.filter(app => app.packageId !== 'system-apps');
+  const systemApps = filteredApps.filter((app) => app.packageId === "system-apps");
+  const userApps = filteredApps.filter((app) => app.packageId !== "system-apps");
 
   // Get recently used apps by matching paths (only show if they match search)
   const recentAppItems = recentApps
-    .map(path => filteredApps.find(app => app.path === path))
+    .map((path) => filteredApps.find((app) => app.path === path))
     .filter(Boolean) as AppItem[];
 
   const openApp = (appItem: AppItem) => {
     // Check if this is the mobile-settings app and we're in React Native
-    if (appItem.path === 'mobile-settings' && typeof (window as any).__NATIVE_THEME !== 'undefined') {
-      // Use expo-linking to navigate to native screen
-      // @ts-ignore
-      if (window.ReactNativeWebView) {
-        // @ts-ignore
-        window.ReactNativeWebView.postMessage(JSON.stringify({
-          type: 'navigate',
-          path: 'mobile-settings'
-        }));
+    const w = window as Window & {
+      __NATIVE_THEME?: unknown;
+      ReactNativeWebView?: { postMessage: (message: string) => void };
+    };
+    if (appItem.path === "mobile-settings" && typeof w.__NATIVE_THEME !== "undefined") {
+      if (w.ReactNativeWebView) {
+        w.ReactNativeWebView.postMessage(
+          JSON.stringify({
+            type: "navigate",
+            path: "mobile-settings",
+          }),
+        );
       } else {
-        // Fallback to deep link
-        window.location.href = 'peers://mobile-settings';
+        window.location.href = "peers://mobile-settings";
       }
       return;
     }
@@ -631,17 +706,23 @@ function AppLauncherTab({ isMobile }: AppLauncherTabProps) {
   };
 
   return (
-    <div className={`container-fluid ${isMobile ? 'p-2' : 'p-4'}`} style={{ maxHeight: '100%', overflowY: 'auto' }}>
+    <div
+      className={`container-fluid ${isMobile ? "p-2" : "p-4"}`}
+      style={{ maxHeight: "100%", overflowY: "auto" }}
+    >
       {/* Search Bar */}
-      <div className={isMobile ? 'mb-3' : 'mb-4'}>
+      <div className={isMobile ? "mb-3" : "mb-4"}>
         <div className="position-relative">
-          <i className="bi-search position-absolute" style={{
-            left: '12px',
-            top: '50%',
-            transform: 'translateY(-50%)',
-            color: '#6c757d',
-            zIndex: 1
-          }} />
+          <i
+            className="bi-search position-absolute"
+            style={{
+              left: "12px",
+              top: "50%",
+              transform: "translateY(-50%)",
+              color: "#6c757d",
+              zIndex: 1,
+            }}
+          />
           <input
             type="text"
             className="form-control"
@@ -649,22 +730,23 @@ function AppLauncherTab({ isMobile }: AppLauncherTabProps) {
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
             style={{
-              paddingLeft: '40px',
-              fontSize: isMobile ? '14px' : '15px'
+              paddingLeft: "40px",
+              fontSize: isMobile ? "14px" : "15px",
             }}
           />
           {searchTerm && (
             <button
+              type="button"
               className="btn btn-sm position-absolute"
               style={{
-                right: '8px',
-                top: '50%',
-                transform: 'translateY(-50%)',
-                border: 'none',
-                background: 'none',
-                color: '#6c757d'
+                right: "8px",
+                top: "50%",
+                transform: "translateY(-50%)",
+                border: "none",
+                background: "none",
+                color: "#6c757d",
               }}
-              onClick={() => setSearchTerm('')}
+              onClick={() => setSearchTerm("")}
             >
               <i className="bi-x" />
             </button>
@@ -718,14 +800,22 @@ interface AppSectionProps {
 
 function AppSection({ title, iconClassName, apps, onOpenApp, isMobile }: AppSectionProps) {
   return (
-    <div className='mb-5'>
-      <h4 className={`${isMobile ? 'mb-3 h5' : 'mb-3'}`}>
+    <div className="mb-5">
+      <h4 className={`${isMobile ? "mb-3 h5" : "mb-3"}`}>
         <i className={`${iconClassName} me-2`} />
         {title}
       </h4>
-      <div className={`d-flex flex-wrap ${isMobile ? 'gap-3' : 'gap-4'}`} style={{ gap: isMobile ? '16px' : '20px' }}>
-        {apps.map(app => (
-          <AppCard key={`${app.packageId}-${app.path}`} appItem={app} onOpenApp={onOpenApp} isMobile={isMobile} />
+      <div
+        className={`d-flex flex-wrap ${isMobile ? "gap-3" : "gap-4"}`}
+        style={{ gap: isMobile ? "16px" : "20px" }}
+      >
+        {apps.map((app) => (
+          <AppCard
+            key={`${app.packageId}-${app.path}`}
+            appItem={app}
+            onOpenApp={onOpenApp}
+            isMobile={isMobile}
+          />
         ))}
       </div>
     </div>
@@ -741,63 +831,64 @@ interface AppCardProps {
 function AppCard({ appItem, onOpenApp, isMobile }: AppCardProps) {
   const [_colorMode] = useObservable(colorMode);
 
-  const isDark = _colorMode === 'dark';
+  const isDark = _colorMode === "dark";
 
   return (
     <button
+      type="button"
       className="d-flex flex-column align-items-center text-center"
       style={{
-        cursor: 'pointer',
-        width: isMobile ? '80px' : '90px',
-        transition: 'all 0.15s ease',
-        background: 'none',
-        border: 'none',
+        cursor: "pointer",
+        width: isMobile ? "80px" : "90px",
+        transition: "all 0.15s ease",
+        background: "none",
+        border: "none",
         padding: 0,
       }}
       title={appItem.name}
       onMouseEnter={(e) => {
-        e.currentTarget.style.transform = 'scale(1.05)';
+        e.currentTarget.style.transform = "scale(1.05)";
       }}
       onMouseLeave={(e) => {
-        e.currentTarget.style.transform = 'scale(1)';
+        e.currentTarget.style.transform = "scale(1)";
       }}
       onClick={() => onOpenApp(appItem)}
     >
       <div
         className="d-flex align-items-center justify-content-center mb-2"
         style={{
-          width: isMobile ? '64px' : '72px',
-          height: isMobile ? '64px' : '72px',
-          backgroundColor: isDark ? '#343a40' : '#f8f9fa',
-          borderRadius: '12px',
-          border: `1px solid ${isDark ? '#495057' : '#e9ecef'}`,
-          boxShadow: isDark ? '0 2px 4px rgba(0,0,0,0.3)' : '0 2px 4px rgba(0,0,0,0.08)',
-          transition: 'all 0.15s ease'
+          width: isMobile ? "64px" : "72px",
+          height: isMobile ? "64px" : "72px",
+          backgroundColor: isDark ? "#343a40" : "#f8f9fa",
+          borderRadius: "12px",
+          border: `1px solid ${isDark ? "#495057" : "#e9ecef"}`,
+          boxShadow: isDark ? "0 2px 4px rgba(0,0,0,0.3)" : "0 2px 4px rgba(0,0,0,0.08)",
+          transition: "all 0.15s ease",
         }}
       >
         <i
           className={appItem.iconClassName}
           style={{
-            fontSize: isMobile ? '28px' : '32px',
-            color: isDark ? '#0d6efd' : '#0d6efd'
+            fontSize: isMobile ? "28px" : "32px",
+            color: isDark ? "#0d6efd" : "#0d6efd",
           }}
         />
       </div>
 
       <span
-        className={isDark ? 'text-light' : 'text-dark'}
+        className={isDark ? "text-light" : "text-dark"}
         style={{
-          fontSize: isMobile ? '11px' : '12px',
-          fontWeight: '500',
-          lineHeight: '1.2',
-          maxWidth: '100%',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap'
+          fontSize: isMobile ? "11px" : "12px",
+          fontWeight: "500",
+          lineHeight: "1.2",
+          maxWidth: "100%",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
         }}
       >
         {appItem.displayName}
       </span>
     </button>
   );
-}
+}