@taruvi/navkit 0.0.36 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taruvi/navkit",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "main": "src/App.tsx",
   "type": "module",
   "scripts": {
@@ -13,10 +13,10 @@
   "peerDependencies": {
     "@emotion/react": ">=11 <12",
     "@emotion/styled": ">=11 <12",
-    "@fortawesome/fontawesome-svg-core": ">=6 <7",
-    "@fortawesome/free-regular-svg-icons": ">=6 <7",
-    "@fortawesome/free-solid-svg-icons": ">=6 <7",
-    "@fortawesome/react-fontawesome": ">=0.2 <1",
+    "@fortawesome/fontawesome-svg-core": ">=6 <8",
+    "@fortawesome/free-regular-svg-icons": ">=6 <8",
+    "@fortawesome/free-solid-svg-icons": ">=6 <8",
+    "@fortawesome/react-fontawesome": ">=0.2 <4",
     "@mui/icons-material": ">=5 <8",
     "@mui/material": ">=5 <8",
     "react": ">=18 <20"
@@ -48,6 +48,6 @@
     "vitest": "^4.0.18"
   },
   "dependencies": {
-    "@taruvi/sdk": "^1.3.4-beta.0"
+    "@taruvi/sdk": "^1.4.0"
   }
 }

package/src/App.styles.ts

@@ -153,8 +153,8 @@ export const getAppStyles = (mode: ThemeMode) => {
       minHeight: 40,
     },
     appLauncherLogo: {
-      width: 20,
-      height: 20,
+      width: 23,
+      height: 23,
     },
     appLauncherHover: {
       display: 'flex',

package/src/App.tsx

@@ -101,7 +101,7 @@ const NavkitContent = () => {
               <FontAwesomeIcon icon={["fas", "external-link-alt"]} style={{ fontSize: "10px" }} />
             </IconButton>
           </Box>
-          <MattermostChat jwtToken={jwtToken} mattermostUrl={siteSettings['chat-url']} width="100%" height="100%" />
+          <MattermostChat jwtToken={jwtToken} mattermostUrl={siteSettings['chat-url']} loginId={userData?.email || ''} width="100%" height="100%" />
         </DraggableResizable>
       )}
     </>

package/src/NavkitContext.tsx

@@ -12,7 +12,6 @@ const getInitialTheme = (): ThemeMode => {
   if (typeof window !== 'undefined') {
     const stored = localStorage.getItem(THEME_STORAGE_KEY)
     if (stored === 'dark' || stored === 'light') return stored
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) return 'dark'
   }
   return 'light'
 }
@@ -30,6 +29,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName }: Nav
     'show-chat': false,
     'chat-url': '',
     frontendUrl: '',
+    enableDarkMode: false,
   })
   const appSettings = useRef<AppSettings>({})
 
@@ -104,6 +104,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName }: Nav
       'chat-url': rawSettings['navkit.chat-url'] ?? '',
       frontendUrl: rawSettings['navkit.frontend-url'] ?? '',
       logo: rawSettings['navkit.logo'] ?? '',
+      enableDarkMode: rawSettings['navkit.enable-dark-mode'] ?? false,
     }
     if (isUserAuthenticated) {
       const userDataResponse = await auth.getCurrentUser()

package/src/components/AppLauncher/AppLauncher.tsx

@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { findIconDefinition, type IconName } from "@fortawesome/fontawesome-svg-core"
 import { useNavigation } from "../../NavkitContext"
 import { getAppLauncherStyles } from "./AppLauncher.styles"
+import { typography } from "../../styles/variables"
 
 
 const isIconUrl = (icon: string): boolean => {
@@ -37,7 +38,11 @@ const AppLauncher = () => {
     return (
         <Card sx={styles.container}>
             <Search appsList={appsList} onSearchChange={handleSearchChange} />
-            {filteredApps && filteredApps.length > 0 && (
+            {filteredApps.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>
+                </Box>
+            ) : (
                 <Box sx={styles.scrollContainer}>
                     <Grid container spacing={0}>
                         {filteredApps.map((app) => {

package/src/components/MattermostChat/MattermostChat.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useRef, useState } from 'react'
-import { Box, Badge } from '@mui/material'
+import { Box, Badge, CircularProgress, Typography } from '@mui/material'
 
 interface MattermostChatProps {
   jwtToken: string
-  mattermostUrl: string  // Mattermost server URL (must be passed from parent app)
+  mattermostUrl: string
+  loginId: string
   onNotification?: (count: number) => void
   onUrlClick?: (url: string) => void
   width?: string | number
@@ -24,6 +25,7 @@ interface NotifyMessage {
 const MattermostChat = ({
   jwtToken,
   mattermostUrl,
+  loginId,
   onNotification,
   onUrlClick,
   width = '100%',
@@ -32,17 +34,65 @@ const MattermostChat = ({
   const iframeRef = useRef<HTMLIFrameElement>(null)
   const [unreadCount, setUnreadCount] = useState(0)
   const [isWindowFocused, setIsWindowFocused] = useState(true)
+  const [authToken, setAuthToken] = useState<string | null>(null)
+  const [authError, setAuthError] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+
+  // 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
+        }
+
+        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(() => {
-    // Handle postMessage events from Mattermost iframe
     const handleMessage = (event: MessageEvent<NotifyMessage>) => {
-      // Validate origin for security
       const mattermostOrigin = new URL(mattermostUrl).origin
-      if (event.origin !== mattermostOrigin) {
-        console.warn('Received message from untrusted origin:', event.origin)
-        return
-      }
+      if (event.origin !== mattermostOrigin) return
 
-      // Handle Notify events
       if (event.data?.event === 'Notify') {
         if (!isWindowFocused) {
           setUnreadCount(prev => {
@@ -51,31 +101,16 @@ const MattermostChat = ({
             return newCount
           })
         }
-
-        // Handle URL clicks if provided
-        if (event.data.data?.url && onUrlClick) {
-          onUrlClick(event.data.data.url)
-        }
+        if (event.data.data?.url && onUrlClick) onUrlClick(event.data.data.url)
       }
     }
 
-    // Handle window focus/blur to track unread messages
-    const handleFocus = () => {
-      setIsWindowFocused(true)
-      setUnreadCount(0)
-      onNotification?.(0)
-    }
+    const handleFocus = () => { setIsWindowFocused(true); setUnreadCount(0); onNotification?.(0) }
+    const handleBlur = () => setIsWindowFocused(false)
 
-    const handleBlur = () => {
-      setIsWindowFocused(false)
-    }
-
-    // Add event listeners
     window.addEventListener('message', handleMessage)
     window.addEventListener('focus', handleFocus)
     window.addEventListener('blur', handleBlur)
-
-    // Cleanup event listeners on unmount
     return () => {
       window.removeEventListener('message', handleMessage)
       window.removeEventListener('focus', handleFocus)
@@ -83,33 +118,34 @@ const MattermostChat = ({
     }
   }, [mattermostUrl, isWindowFocused, onNotification, onUrlClick])
 
-  // Construct iframe URL with JWT authentication
-  const iframeUrl = `${mattermostUrl.replace(/\/$/, '')}/login`
+  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>
+    )
+  }
+
+  // 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' }
           }}
         />
       )}
@@ -118,12 +154,7 @@ const MattermostChat = ({
         src={iframeUrl}
         title="Mattermost Chat"
         allow="clipboard-read; clipboard-write"
-        style={{
-          width: '100%',
-          height: '100%',
-          border: 'none',
-          display: 'block'
-        }}
+        style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
       />
     </Box>
   )

package/src/components/Profile/Profile.tsx

@@ -10,14 +10,7 @@ const ProfileIcon = () => (
     </SvgIcon>
 )
 
-interface UserData {
-    full_name?: string
-    first_name?: string
-    last_name?: string
-    pfp?: string
-    username?: string
-    email?: string
-}
+import type { UserData } from '../../types'
 
 interface ProfileProps {
     userData: UserData
@@ -31,8 +24,8 @@ const Profile = (props: ProfileProps) => {
 
     return (
         <Box sx={styles.trigger} onClick={onClick}>
-            {userData.pfp ? (
-                <Box component="img" src={userData.pfp} sx={{ width: 23, height: 23, borderRadius: '50%' }} />
+            {userData.icon_url ? (
+                <Box component="img" src={userData.icon_url} sx={{ width: 23, height: 23, borderRadius: '50%' }} />
             ) : (
                 <ProfileIcon />
             )}

package/src/components/Profile/ProfileMenu.tsx

@@ -6,7 +6,7 @@ import { getProfileStyles } from './Profile.styles'
 import { useNavigation } from '../../NavkitContext'
 
 const ProfileMenu = () => {
-    const { auth, themeMode, toggleTheme, userData } = useNavigation()
+    const { auth, themeMode, toggleTheme, userData, siteSettings } = useNavigation()
     const styles = getProfileStyles(themeMode)
 
     // const handlePreferences = () => {
@@ -14,6 +14,7 @@ const ProfileMenu = () => {
     // }
 
     const handleLogout = async () => {
+        localStorage.removeItem('navkit-theme-mode')
         await auth.logout()
     }
 
@@ -35,6 +36,7 @@ const ProfileMenu = () => {
                 </Typography>
             </MenuItem> */}
 
+            {siteSettings.enableDarkMode && (
             <MenuItem onClick={toggleTheme} sx={styles.menuItem}>
                 {themeMode === 'dark' ? (
                     <LightModeOutlined sx={styles.iconStyle} />
@@ -45,6 +47,7 @@ const ProfileMenu = () => {
                     {themeMode === 'dark' ? 'Light Mode' : 'Dark Mode'}
                 </Typography>
             </MenuItem>
+            )}
 
             <MenuItem onClick={handleLogout} sx={styles.menuItem}>
                 <FontAwesomeIcon

package/src/components/Shortucts/Shortcuts.styles.ts

@@ -24,7 +24,7 @@ export const shortcutsStyles = {
     },
   },
   iconStyle: {
-    fontSize: '20px',
+    fontSize: '23px',
     color: colours.text.secondary,
   },
 }

package/src/types.ts

@@ -1,7 +1,9 @@
 import type { ReactNode } from "react"
-import type { Client, Auth } from "@taruvi/sdk"
+import type { Client, Auth, UserData, UserRole } from "@taruvi/sdk"
 import type { ThemeMode } from "./styles/variables"
 
+export type { UserData, UserRole }
+
 export interface AppData {
     appname: string,
     icon: string,
@@ -9,41 +11,13 @@ export interface AppData {
     id: string
 }
 
-export interface UserRole {
-  name: string
-  slug: string
-  type: string
-  app_slug?: string
-  source?: string
-}
-
-export interface UserData {
-  id?: number
-  username?: string
-  email?: string
-  first_name?: string
-  last_name?: string
-  full_name?: string
-  pfp?: string
-  is_active?: boolean
-  is_staff?: boolean
-  is_superuser?: boolean
-  is_deleted?: boolean
-  date_joined?: string
-  last_login?: string
-  groups?: { id: number; name: string }[]
-  user_permissions?: { id: number; name: string; codename: string; content_type: string }[]
-  attributes?: Record<string, unknown>
-  missing_attributes?: string[]
-  roles?: UserRole[]
-}
-
 export interface SiteSettings {
   shortcuts?: AppData[]
   logo?: string
   'show-chat': boolean
   'chat-url': string
   frontendUrl: string
+  enableDarkMode: boolean
 }
 
 export interface AppSettings {