@taruvi/navkit 0.0.48-beta.8 → 0.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taruvi/navkit",
-  "version": "0.0.48-beta.8",
+  "version": "0.0.48",
   "main": "src/App.tsx",
   "type": "module",
   "scripts": {
@@ -48,6 +48,6 @@
     "vitest": "^4.0.18"
   },
   "dependencies": {
-    "@taruvi/sdk": "beta"
+    "@taruvi/sdk": "latest"
   }
 }

package/src/App.styles.ts

@@ -53,9 +53,9 @@ export const appStyles = {
     padding: '8px',
   },
   chatOpenButton: {
-    backgroundColor: 'transparent',
+    backgroundColor: colours.bg.white,
     '&:hover': {
-      backgroundColor: 'transparent',
+      backgroundColor: colours.bg.light,
     },
   },
   iconStyle: {
@@ -139,9 +139,9 @@ export const getAppStyles = (mode: ThemeMode) => {
       padding: '8px',
     },
     chatOpenButton: {
-      backgroundColor: 'transparent',
+      backgroundColor: colors.bg.white,
       '&:hover': {
-        backgroundColor: 'transparent',
+        backgroundColor: colors.bg.light,
       },
     },
     iconStyle: {

package/src/App.tsx

@@ -1,7 +1,6 @@
 import AppBar from "@mui/material/AppBar"
 import Toolbar from "@mui/material/Toolbar"
 import IconButton from "@mui/material/IconButton"
-import { SvgIcon } from "@mui/material"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { useState } from "react"
 import { AppLauncher, Profile, ProfileMenu, Shortcuts, ShortcutsMenu, MattermostChat } from "./components"
@@ -13,31 +12,8 @@ import taruviLogo from "./assets/logo.svg";
 import taruviLogoWhite from "./assets/taruvi-logo-white.png";
 import type { Client } from "@taruvi/sdk"
 
-/** Top-level storage access for the chat origin (Chromium). Call synchronously from the chat button click
- *  so transient activation is preserved; pairs with the iframe autologin bridge so no second in-frame login
- *  click is needed when the browser supports this API. */
-function requestMattermostStorageAccessFromUserGesture(chatUrl: string) {
-  try {
-    const origin = new URL(chatUrl).origin
-    const doc = document as Document & {
-      requestStorageAccessFor?: (requestedOrigin: string) => Promise<void>
-    }
-    if (typeof doc.requestStorageAccessFor === "function") {
-      void doc.requestStorageAccessFor(origin).catch(() => {})
-    }
-  } catch {
-    // invalid chatUrl or API unavailable
-  }
-}
-
-const ChatIcon = ({ color }: { color?: string }) => (
-  <SvgIcon viewBox="-2 -2 24 24" sx={{ fontSize: 23, display: 'block', position: 'relative', top: 2 }}>
-    <path d="M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0Z" fill={color || "#9DE5FD"} />
-  </SvgIcon>
-)
-
 const NavkitContent = () => {
-  const { isUserAuthenticated, appSettings, appSettingsLoaded, appName, userData, appsList, chatUrl, themeMode, navbarColor, iconColor, sessionToken } = useNavigation();
+  const { isUserAuthenticated, siteSettings, appSettings, appSettingsLoaded, appName, userData, jwtToken, themeMode, navbarColor, iconColor } = useNavigation();
   const resolvedAppName = appName || appSettings?.displayName
   const showTaruviLogo = appSettingsLoaded && !resolvedAppName && !appSettings?.icon
   const styles = getAppStyles(themeMode)
@@ -76,18 +52,7 @@ const NavkitContent = () => {
             ) : null}
           </Box>
           <Box component={"div"} sx={styles.rightSection}>
-            <Shortcuts onMenuToggle={() => setShowShortcutsMenu(!showShortcutsMenu)} iconColor={iconColor} />
-            {isUserAuthenticated && appsList.some(a => a.id === 'chat') && chatUrl && (
-              <Box
-                onClick={() => {
-                  requestMattermostStorageAccessFromUserGesture(chatUrl)
-                  setShowChat(true)
-                }}
-                sx={{ ...styles.appLauncherContainer, cursor: 'pointer' }}
-              >
-                <ChatIcon color={iconColor} />
-              </Box>
-            )}
+            <Shortcuts showChat={setShowChat} onMenuToggle={() => setShowShortcutsMenu(!showShortcutsMenu)} iconColor={iconColor} />
             <Box
                 onClick={() => {
                   if (isUserAuthenticated) {
@@ -134,28 +99,18 @@ const NavkitContent = () => {
 
       {showShortcutsMenu && (
         <Box>
-          <ShortcutsMenu />
+          <ShortcutsMenu showChat={setShowChat} />
         </Box>
       )}
 
-      {showChat && chatUrl && (
-        <DraggableResizable
-          onClose={() => setShowChat(false)}
-          initialWidth={Math.min(1200, window.innerWidth * 0.9)}
-          initialHeight={Math.min(600, window.innerHeight * 0.8)}
-          titleBarActions={
-            <IconButton onClick={() => window.open(chatUrl, "_blank")} sx={styles.chatOpenButton}>
+      {showChat && siteSettings['chat-url'] && (
+        <DraggableResizable onClose={() => setShowChat(false)} initialWidth={Math.min(1200, window.innerWidth * 0.9)} initialHeight={Math.min(600, window.innerHeight * 0.8)}>
+          <Box sx={styles.chatHeader}>
+            <IconButton onClick={() => window.open(siteSettings['chat-url'], "_blank")} sx={styles.chatOpenButton}>
               <FontAwesomeIcon icon={["fas", "external-link-alt"]} style={{ fontSize: "10px" }} />
             </IconButton>
-          }
-        >
-          <MattermostChat
-            mattermostUrl={chatUrl}
-            loginId={userData?.username ?? ''}
-            sessionToken={sessionToken ?? ''}
-            width="100%"
-            height="100%"
-          />
+          </Box>
+          <MattermostChat jwtToken={jwtToken} mattermostUrl={siteSettings['chat-url']} loginId={userData?.email || ''} width="100%" height="100%" />
         </DraggableResizable>
       )}
     </>

package/src/NavkitContext.tsx

@@ -2,7 +2,7 @@ import { version } from '../package.json' with { type: 'json' }
 import { createContext, startTransition, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { AppData, AppSettings, NavigationContextType, NavkitProviderProps, SiteSettings, UserData } from './types'
 import type { ThemeMode } from './styles/variables'
-import { User, Settings, Auth, App, Secrets } from "@taruvi/sdk"
+import { User, Settings, Auth, App } from "@taruvi/sdk"
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import { far } from '@fortawesome/free-regular-svg-icons'
@@ -24,7 +24,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
 
   const user = useRef<any>(null)
   const settings = useRef<any>(null)
-  const [siteSettings, setSiteSettings] = useState<SiteSettings>({
+  const siteSettings = useRef<SiteSettings>({
     shortcuts: [],
     logo: '',
     'show-chat': false,
@@ -38,8 +38,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
   const [isDesk, setIsDesk] = useState<boolean>(false)
   const [appsList, setAppsList] = useState<AppData[]>([])
   const [userData, setUserData] = useState<UserData | null>(null)
-  const [chatUrl, setChatUrl] = useState<string>('')
-  const [sessionToken, setSessionToken] = useState<string>('')
+  const [jwtToken, setJwtToken] = useState<string>('')
   const [isUserAuthenticated, setIsUserAuthenticated] = useState<boolean>(false)
   const [themeMode, setThemeMode] = useState<ThemeMode>(getInitialTheme)
 
@@ -76,8 +75,8 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
 
     // Get JWT token if authenticated from sdk
     if (authenticated) {
-      const token = auth.getSessionToken() || ''
-      setSessionToken(token)
+      const token = client.tokenClient.getToken() || ''
+      setJwtToken(token)
     }
   }
 
@@ -105,48 +104,45 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
     }
 
     const rawSettings = (fetchedSettings?.data ?? fetchedSettings)?.settings ?? {}
-
-    let chatUrl = ''
-    try {
-      const secretResponse = await new Secrets(client).get('chat-url').execute<{ data: { value: string | { chat_url?: string, url?: string } } }>()
-      const secretValue = secretResponse?.data?.value
-      chatUrl = typeof secretValue === 'string'
-        ? secretValue
-        : (secretValue?.chat_url ?? secretValue?.url ?? '')
-    } catch { }
-    setChatUrl(chatUrl)
-
-    const newSiteSettings: SiteSettings = {
-      shortcuts: [],
-      logo: rawSettings['navkit.logo'] ?? '',
+    siteSettings.current = {
+      ...siteSettings.current,
       'show-chat': rawSettings['navkit.show-chat'] ?? false,
-      'chat-url': chatUrl,
+      'chat-url': rawSettings['navkit.chat-url'] ?? '',
       frontendUrl: rawSettings['navkit.frontend-url'] ?? '',
+      logo: rawSettings['navkit.logo'] ?? '',
       enableDarkMode: rawSettings['navkit.enable-dark-mode'] ?? false,
     }
-    setSiteSettings(newSiteSettings)
     if (isUserAuthenticated) {
       const userDataResponse = await auth.getCurrentUser()
       setUserData(userDataResponse?.data || null)
 
       // Fetch user apps using username from userData
       if (userDataResponse?.data?.username) {
-        const appsResponse = await user.current.getUserApps?.(userDataResponse.data.username)
-        // Transform API response to match AppData interface
-        const transformedApps: AppData[] = (appsResponse?.data || []).map?.((app: any) => ({
-          id: app.slug,
-          appname: app.display_name || app.name,
-          icon: app.icon || "",
-          url: app.url
-        }))
-        startTransition(() => {
-          setAppsList(transformedApps)
-        })
+        fetchUserAppsList(userDataResponse.data.username)
       }
     }
 
   }, [appName, client])
 
+  const fetchUserAppsList = async (name?: string) => {
+    // Prefer the explicitly passed username (used on first load, when userData
+    // state hasn't committed yet); fall back to committed userData for the
+    // argument-less onError refresh path.
+    const username = name ?? userData?.username
+    // Transform API response to match AppData interface
+    const appsResponse = await user.current?.getUserApps?.(username)
+    const transformedApps: AppData[] = (appsResponse?.data || []).map?.((app: any) => ({
+      id: app.slug,
+      appname: app.display_name || app.name,
+      icon: app.icon || "",
+      url: app.url
+    }))
+    startTransition(() => {
+      setAppsList(transformedApps)
+    })
+  }
+
+
   useLayoutEffect(() => {
     console.log(`Taruvi Navkit v${version} initialized`)
     const init = async () => {
@@ -189,7 +185,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
   }, [themeMode, onThemeChange])
 
   return (
-    <NavigationContext.Provider value={{ navigateToUrl, isDesk, appsList, userData, siteSettings, appSettings, appSettingsLoaded, appName, chatUrl, sessionToken, isUserAuthenticated, client, auth, themeMode, toggleTheme, navbarColor, iconColor }}>
+    <NavigationContext.Provider value={{ navigateToUrl, isDesk, appsList, userData, siteSettings: siteSettings.current, appSettings, appSettingsLoaded, appName, jwtToken, isUserAuthenticated, client, auth, themeMode, toggleTheme, navbarColor, iconColor, fetchUserAppsList }}>
       {children}
     </NavigationContext.Provider>
   )

package/src/components/AppLauncher/AppLauncher.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react"
+import { useState, useRef, useMemo } from "react"
 import type { AppData } from "../../types"
 import Search from "../Search/Search"
 import { Card, Box, Grid, Typography } from "@mui/material"
@@ -19,26 +19,49 @@ const isValidFaIcon = (icon: string): boolean => {
 }
 
 const AppLauncher = () => {
-    const { navigateToUrl, appsList: allApps, themeMode } = useNavigation()
-    const appsList = allApps.filter(a => a.id !== 'chat')
+    const { navigateToUrl, appsList, themeMode, fetchUserAppsList } = useNavigation()
     const styles = getAppLauncherStyles(themeMode)
-    const [filteredApps, setFilteredApps] = useState<AppData[]>(appsList || [])
+    const [query, setQuery] = useState('')
+    
+    // Derive during render — no second state, no effect, no loop
+    const filteredApps = useMemo(
+        () => appsList.filter(app =>
+            app.appname?.toLowerCase().includes(query.toLowerCase())
+        ),
+        [appsList, query]
+    )
+    // Single-flight guard for fetchUserAppsList. 
+    // This prevents multiple concurrent calls to fetchUserAppsList.
+    const refreshPromise = useRef<Promise<void> | null>(null)
 
-    const handleAppClick = (app: AppData) => {
-        navigateToUrl(app.url, false)
+    const fetchIcons = async () => {
+        // A refresh is already running — share it instead of starting another.
+        if (refreshPromise.current) {
+            await refreshPromise.current
+            return
+        }
+
+        refreshPromise.current = (async () => {
+            try {
+                await fetchUserAppsList()
+            } finally {
+                // Release the guard so the next expiry cycle can refresh again.
+                refreshPromise.current = null
+            }
+        })()
+
+        await refreshPromise.current
     }
 
-    const handleSearchChange = (filtered: AppData[]) => {
-        setFilteredApps(filtered)
+    const handleAppClick = (app: AppData) => {
+        navigateToUrl(app.url, false)
     }
 
-    useEffect(() => {
-        setFilteredApps(appsList || [])
-    }, [appsList])
+    const handleSearchChange = (q: string) => setQuery(q)
 
     return (
         <Card sx={styles.container}>
-            <Search appsList={appsList} onSearchChange={handleSearchChange} />
+            <Search onSearchChange={handleSearchChange} />
             {filteredApps.filter(app => app.url).length === 0 ? (
                 <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', py: 6 }}>
                     <Typography sx={{ color: styles.appName.color, fontSize: typography.sizes.sm }}>No apps available</Typography>
@@ -60,6 +83,7 @@ const AppLauncher = () => {
                                                 <img
                                                     src={app.icon}
                                                     alt={app.appname}
+                                                    onError={fetchIcons}
                                                     style={{
                                                         width: 40,
                                                         height: 40,
@@ -94,4 +118,4 @@ const AppLauncher = () => {
     )
 }
 
-export default AppLauncher
+export default AppLauncher

package/src/components/DraggableResizable.tsx

@@ -3,7 +3,6 @@ import { Box } from '@mui/material'
 
 interface Props {
   children: React.ReactNode
-  titleBarActions?: React.ReactNode
   initialWidth?: number
   initialHeight?: number
   minWidth?: number
@@ -15,7 +14,6 @@ const HEADER_HEIGHT = 28
 
 const DraggableResizable = ({
   children,
-  titleBarActions,
   initialWidth = 900,
   initialHeight = 600,
   minWidth = 320,
@@ -110,21 +108,13 @@ const DraggableResizable = ({
             cursor: 'grab',
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'space-between',
-            px: 1,
+            justifyContent: 'center',
             flexShrink: 0,
             userSelect: 'none',
             '&:active': { cursor: 'grabbing' },
           }}
         >
-          <Box sx={{ width: 32 }} />
           <Box sx={{ width: 40, height: 4, borderRadius: 2, backgroundColor: '#999' }} />
-          <Box
-            sx={{ display: 'flex', alignItems: 'center', width: 32, justifyContent: 'flex-end' }}
-            onPointerDown={(e) => e.stopPropagation()}
-          >
-            {titleBarActions}
-          </Box>
         </Box>
         {/* Content */}
         <Box sx={{ flex: 1, overflow: 'hidden', position: 'relative' }}>

package/src/components/MattermostChat/MattermostChat.tsx

@@ -1,46 +1,98 @@
-import {useLayoutEffect, useRef, useState} from 'react'
-import {Box, Badge} from '@mui/material'
+import { useEffect, useRef, useState } from 'react'
+import { Box, Badge, CircularProgress, Typography } from '@mui/material'
 
 interface MattermostChatProps {
-  mattermostUrl: string  // Mattermost server URL (must be passed from parent app)
-  loginId: string        // Mattermost login_id (username)
-  sessionToken: string   // Taruvi session token used as password for auth_type=session
+  jwtToken: string
+  mattermostUrl: string
+  loginId: string
   onNotification?: (count: number) => void
   onUrlClick?: (url: string) => void
   width?: string | number
   height?: string | number
 }
 
-const MattermostChat = ({ mattermostUrl, loginId, sessionToken, onNotification, onUrlClick, width = '100%', height = '100%' }: MattermostChatProps) => {
+interface NotifyMessage {
+  event: string
+  data?: {
+    title?: string
+    body?: string
+    channel?: string
+    teamId?: string
+    url?: string
+  }
+}
+
+const MattermostChat = ({
+  jwtToken,
+  mattermostUrl,
+  loginId,
+  onNotification,
+  onUrlClick,
+  width = '100%',
+  height = '100%'
+}: MattermostChatProps) => {
   const iframeRef = useRef<HTMLIFrameElement>(null)
-  const credentialsRef = useRef({ loginId, sessionToken })
-  credentialsRef.current = { loginId, sessionToken }
   const [unreadCount, setUnreadCount] = useState(0)
   const [isWindowFocused, setIsWindowFocused] = useState(true)
-  const mattermostOrigin = new URL(mattermostUrl).origin
-
-  const postLoginToBridge = () => {
-    const { loginId: id, sessionToken: token } = credentialsRef.current
-    if (!id || !token) return
-    iframeRef.current?.contentWindow?.postMessage(
-      { type: 'mm-login', loginId: id, token },
-      mattermostOrigin
-    )
-  }
+  const [authToken, setAuthToken] = useState<string | null>(null)
+  const [authError, setAuthError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
 
-  // useLayoutEffect so the listener is attached in the same commit as the iframe
-  // before the bridge can fire mm-bridge-ready (useEffect runs too late and misses it).
-  useLayoutEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      if (event.origin !== mattermostOrigin) return
+  // Authenticate with Mattermost on mount
+  useEffect(() => {
+    const login = async () => {
+      try {
+        const res = await fetch(`${mattermostUrl.replace(/\/$/, '')}/api/v4/users/login`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
+          credentials: 'omit',
+          body: JSON.stringify({ login_id: loginId, password: jwtToken, token: '', deviceId: '' })
+        })
+
+        if (!res.ok) {
+          setAuthError(`Login failed (${res.status})`)
+          setIsLoading(false)
+          return
+        }
 
-      // Bridge ready — send login credentials
-      if (event.data?.type === 'mm-bridge-ready') {
-        postLoginToBridge()
-        return
+        const token = res.headers.get('Token')
+        if (token) {
+          setAuthToken(token)
+        } else {
+          setAuthError('No token in response')
+        }
+      } catch (e: any) {
+        setAuthError(e.message || 'Login failed')
       }
+      setIsLoading(false)
+    }
+
+    if (loginId && jwtToken) login()
+    else { setAuthError('Missing credentials'); setIsLoading(false) }
+  }, [mattermostUrl, loginId, jwtToken])
+
+  // Inject auth token into iframe via postMessage once loaded
+  useEffect(() => {
+    if (!authToken || !iframeRef.current) return
+
+    const handleIframeLoad = () => {
+      // Set the auth cookie/token in the iframe context
+      iframeRef.current?.contentWindow?.postMessage(
+        { type: 'token', data: authToken },
+        new URL(mattermostUrl).origin
+      )
+    }
+
+    const iframe = iframeRef.current
+    iframe.addEventListener('load', handleIframeLoad)
+    return () => iframe.removeEventListener('load', handleIframeLoad)
+  }, [authToken, mattermostUrl])
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent<NotifyMessage>) => {
+      const mattermostOrigin = new URL(mattermostUrl).origin
+      if (event.origin !== mattermostOrigin) return
 
-      // Mattermost Notify events (unread badge, URL clicks)
       if (event.data?.event === 'Notify') {
         if (!isWindowFocused) {
           setUnreadCount(prev => {
@@ -49,74 +101,60 @@ const MattermostChat = ({ mattermostUrl, loginId, sessionToken, onNotification,
             return newCount
           })
         }
-        if (event.data.data?.url && onUrlClick) {
-          onUrlClick(event.data.data.url)
-        }
+        if (event.data.data?.url && onUrlClick) onUrlClick(event.data.data.url)
       }
     }
 
-    const handleFocus = () => {
-      setIsWindowFocused(true)
-      setUnreadCount(0)
-      onNotification?.(0)
-    }
-
+    const handleFocus = () => { setIsWindowFocused(true); setUnreadCount(0); onNotification?.(0) }
     const handleBlur = () => setIsWindowFocused(false)
 
     window.addEventListener('message', handleMessage)
     window.addEventListener('focus', handleFocus)
     window.addEventListener('blur', handleBlur)
-
     return () => {
       window.removeEventListener('message', handleMessage)
       window.removeEventListener('focus', handleFocus)
       window.removeEventListener('blur', handleBlur)
     }
-  }, [mattermostOrigin, isWindowFocused, onNotification, onUrlClick])
+  }, [mattermostUrl, isWindowFocused, onNotification, onUrlClick])
+
+  if (isLoading) {
+    return (
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width, height }}>
+        <CircularProgress size={32} />
+      </Box>
+    )
+  }
+
+  if (authError) {
+    return (
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width, height }}>
+        <Typography color="error">{authError}</Typography>
+      </Box>
+    )
+  }
 
-  // Always load the autologin bridge first — it handles storage access + login,
-  // then redirects the iframe to Mattermost
-  const bridgeUrl = `${mattermostOrigin}/static/autologin.html`
+  // Load Mattermost with the auth token as a cookie header via the access_token param
+  const iframeUrl = `${mattermostUrl.replace(/\/$/, '')}?access_token=${authToken}`
 
   return (
-    <Box
-      sx={{
-        position: 'relative',
-        width,
-        height,
-        overflow: 'hidden'
-      }}
-    >
+    <Box sx={{ position: 'relative', width, height, overflow: 'hidden' }}>
       {unreadCount > 0 && (
         <Badge
           badgeContent={unreadCount}
           color="error"
           sx={{
-            position: 'absolute',
-            top: 16,
-            right: 16,
-            zIndex: 1000,
-            '& .MuiBadge-badge': {
-              fontSize: '1rem',
-              height: '28px',
-              minWidth: '28px',
-              borderRadius: '14px'
-            }
+            position: 'absolute', top: 16, right: 16, zIndex: 1000,
+            '& .MuiBadge-badge': { fontSize: '1rem', height: '28px', minWidth: '28px', borderRadius: '14px' }
           }}
         />
       )}
       <iframe
-        key={`${loginId}:${sessionToken ? '1' : '0'}`}
         ref={iframeRef}
-        src={bridgeUrl}
+        src={iframeUrl}
         title="Mattermost Chat"
-        allow="clipboard-read; clipboard-write; storage-access"
-        style={{
-          width: '100%',
-          height: '100%',
-          border: 'none',
-          display: 'block'
-        }}
+        allow="clipboard-read; clipboard-write"
+        style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
       />
     </Box>
   )

package/src/components/Profile/ProfileMenu.tsx

@@ -6,7 +6,7 @@ import { getProfileStyles } from './Profile.styles'
 import { useNavigation } from '../../NavkitContext'
 
 const ProfileMenu = () => {
-    const { auth, client, chatUrl, themeMode, toggleTheme, userData, siteSettings } = useNavigation()
+    const { auth, themeMode, toggleTheme, userData, siteSettings } = useNavigation()
     const styles = getProfileStyles(themeMode)
 
     // const handlePreferences = () => {
@@ -15,15 +15,6 @@ const ProfileMenu = () => {
 
     const handleLogout = async () => {
         localStorage.removeItem('navkit-theme-mode')
-        try {
-            await fetch(chatUrl + 'api/v4/users/logout', {
-                method: 'POST',
-                headers: {
-                    'X-Session-Token': client.tokenClient.getSessionToken() || '',
-                    'X-Requested-With': 'XMLHttpRequest',
-                },
-            })
-        } catch { /* ignore */ }
         await auth.logout()
     }
 

package/src/components/Search/Search.tsx

@@ -3,14 +3,12 @@ import { TextField, InputAdornment } from '@mui/material'
 import { useState } from 'react'
 import { getSearchStyles } from './Search.styles'
 import { useNavigation } from '../../NavkitContext'
-import type { AppData } from '../../types'
 
 interface SearchProps {
-  appsList?: AppData[]
-  onSearchChange?: (filteredApps: AppData[]) => void
+  onSearchChange?: (query: string) => void
 }
 
-const Search = ({ appsList, onSearchChange }: SearchProps) => {
+const Search = ({ onSearchChange }: SearchProps) => {
   const [searchTerm, setSearchTerm] = useState('')
   const { themeMode } = useNavigation()
   const styles = getSearchStyles(themeMode)
@@ -19,17 +17,8 @@ const Search = ({ appsList, onSearchChange }: SearchProps) => {
     const value = event.target.value
     setSearchTerm(value)
 
-    // Filter apps based on search term
-    if (appsList) {
-      const filtered = value.trim() === ''
-        ? appsList
-        : appsList.filter(app =>
-            app.appname.toLowerCase().includes(value.toLowerCase())
-          )
-
-      // Call parent callback with filtered results
-      onSearchChange?.(filtered)
-    }
+    // Report the raw query upward; filtering happens in the parent
+    onSearchChange?.(value)
   }
 
   return (