@taruvi/navkit 0.0.37 → 0.0.39

package/.claude/settings.local.json

@@ -0,0 +1,12 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm run dev:*)",
+      "WebSearch",
+      "Bash(npm run build:*)",
+      "Bash(npm install:*)"
+    ],
+    "deny": [],
+    "ask": []
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taruvi/navkit",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "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": "latest"
   }
 }

package/src/App.styles.ts

@@ -77,7 +77,7 @@ export const getAppStyles = (mode: ThemeMode) => {
       overflow: 'hidden',
     },
     toolbar: {
-      backgroundColor: '#004369',
+      backgroundColor: '#2B97FF',
       boxShadow: ' 0px 0px 10px 2px rgba(0, 0, 0, 0.3)',
       justifyContent: 'space-between',
       minHeight: dimensions.navHeight,
@@ -106,6 +106,9 @@ export const getAppStyles = (mode: ThemeMode) => {
       fontWeight: 600,
       cursor: 'pointer',
     },
+    taruviSpaceLogo: {
+      height: '22px',
+    },
     rightSection: {
       display: 'flex',
       alignItems: 'center',

package/src/App.tsx

@@ -9,10 +9,12 @@ import DraggableResizable from "./components/DraggableResizable";
 import { getAppStyles } from "./App.styles"
 import { NavkitProvider, useNavigation } from "./NavkitContext"
 import taruviLogo from "./assets/logo.svg";
+import taruviLogoWhite from "./assets/taruvi-logo-white.png";
 import type { Client } from "@taruvi/sdk"
 
 const NavkitContent = () => {
   const { isUserAuthenticated, siteSettings, appSettings, appName, userData, jwtToken, themeMode } = useNavigation();
+  const showTaruviLogo = !appName
   const styles = getAppStyles(themeMode)
   const [showAppLauncher, setShowAppLauncher] = useState<boolean>(false)
   const [showProfileMenu, setShowProfileMenu] = useState<boolean>(false)
@@ -35,12 +37,18 @@ const NavkitContent = () => {
       <AppBar position="static" sx={styles.appBar}>
         <Toolbar sx={styles.toolbar}>
           <Box component={"a"} href="/" sx={styles.leftSection}>
-            {appSettings?.icon ? <Box component="img" src={appSettings?.icon} sx={styles.logo} /> : <></>}
-            {(appName || appSettings?.displayName) &&
-              <Typography sx={styles.appName} onClick={() => (window.location.href = "/")}>
-                {(() => { const name = appName || appSettings!.displayName!; return name.length > 40 ? `${name.substring(0, 40)}...` : name })()}
-              </Typography>
-            }
+            {showTaruviLogo ? (
+              <Box component="img" src={taruviLogoWhite} sx={styles.taruviSpaceLogo} />
+            ) : (
+              <>
+                {appSettings?.icon ? <Box component="img" src={appSettings?.icon} sx={styles.logo} /> : <></>}
+                {(appName || appSettings?.displayName) &&
+                  <Typography sx={styles.appName} onClick={() => (window.location.href = "/")}>
+                    {(() => { const name = appName || appSettings!.displayName!; return name.length > 40 ? `${name.substring(0, 40)}...` : name })()}
+                  </Typography>
+                }
+              </>
+            )}
           </Box>
           <Box component={"div"} sx={styles.rightSection}>
             <Shortcuts showChat={setShowChat} onMenuToggle={() => setShowShortcutsMenu(!showShortcutsMenu)} />
@@ -70,7 +78,7 @@ const NavkitContent = () => {
                 <Box component="img" src={taruviLogo} sx={styles.appLauncherLogo} />
               )}
             </Box>
-            {isUserAuthenticated && userData && <Profile userData={userData} onClick={() => setShowProfileMenu(!showProfileMenu)}/>}
+            {isUserAuthenticated && userData && <Profile userData={userData} onClick={() => setShowProfileMenu(!showProfileMenu)} />}
           </Box>
         </Toolbar>
       </AppBar>
@@ -101,7 +109,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/DraggableResizable.tsx

@@ -41,7 +41,7 @@ const DraggableResizable = ({
         y: Math.max(0, Math.min(e.clientY - dragOffset.current.y, window.innerHeight - 50)),
       })
     } else if (action.current === 'resize') {
-      setSize(prev => ({
+      setSize(() => ({
         w: Math.max(minWidth, e.clientX - dragOffset.current.x),
         h: Math.max(minHeight, e.clientY - dragOffset.current.y),
       }))

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

@@ -2,39 +2,33 @@ import { Box, SvgIcon } from '@mui/material'
 import { getProfileStyles } from './Profile.styles'
 import { useNavigation } from '../../NavkitContext'
 
-const ProfileIcon = () => (
+const ProfileIcon = ({ color }: { color?: string }) => (
     <SvgIcon viewBox="0 0 22 22" sx={{ fontSize: 23, display: 'block' }}>
-        <path d="M10.9921 20.9849C16.511 20.9849 20.9849 16.511 20.9849 10.9921C20.9849 5.4732 16.511 0.999268 10.9921 0.999268C5.47322 0.999268 0.999283 5.4732 0.999283 10.9921C0.999283 16.511 5.47322 20.9849 10.9921 20.9849Z" stroke="#9DE5FD" fill="none" strokeWidth="1.99856" strokeLinecap="round" strokeLinejoin="round"/>
-        <path d="M10.9921 11.9914C12.6478 11.9914 13.9899 10.6492 13.9899 8.99357C13.9899 7.33791 12.6478 5.99573 10.9921 5.99573C9.33644 5.99573 7.99426 7.33791 7.99426 8.99357C7.99426 10.6492 9.33644 11.9914 10.9921 11.9914Z" stroke="#9DE5FD" fill="none" strokeWidth="1.99856" strokeLinecap="round" strokeLinejoin="round"/>
-        <path d="M5.99569 19.6479V17.9871C5.99569 17.457 6.20625 16.9487 6.58106 16.5739C6.95586 16.1991 7.4642 15.9885 7.99425 15.9885H13.9899C14.52 15.9885 15.0283 16.1991 15.4031 16.5739C15.7779 16.9487 15.9885 17.457 15.9885 17.9871V19.6479" stroke="#9DE5FD" fill="none" strokeWidth="1.99856" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M10.9921 20.9849C16.511 20.9849 20.9849 16.511 20.9849 10.9921C20.9849 5.4732 16.511 0.999268 10.9921 0.999268C5.47322 0.999268 0.999283 5.4732 0.999283 10.9921C0.999283 16.511 5.47322 20.9849 10.9921 20.9849Z" stroke={color || "#ffffff"} fill="none" strokeWidth="1.99856" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M10.9921 11.9914C12.6478 11.9914 13.9899 10.6492 13.9899 8.99357C13.9899 7.33791 12.6478 5.99573 10.9921 5.99573C9.33644 5.99573 7.99426 7.33791 7.99426 8.99357C7.99426 10.6492 9.33644 11.9914 10.9921 11.9914Z" stroke={color || "#ffffff"} fill="none" strokeWidth="1.99856" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M5.99569 19.6479V17.9871C5.99569 17.457 6.20625 16.9487 6.58106 16.5739C6.95586 16.1991 7.4642 15.9885 7.99425 15.9885H13.9899C14.52 15.9885 15.0283 16.1991 15.4031 16.5739C15.7779 16.9487 15.9885 17.457 15.9885 17.9871V19.6479" stroke={color || "#ffffff"} fill="none" strokeWidth="1.99856" strokeLinecap="round" strokeLinejoin="round"/>
     </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
     onClick: () => void
+    iconColor?: string
 }
 
 const Profile = (props: ProfileProps) => {
-    const { userData, onClick } = props
+    const { userData, onClick, iconColor } = props
     const { themeMode } = useNavigation()
     const styles = getProfileStyles(themeMode)
 
     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 />
+                <ProfileIcon color={iconColor} />
             )}
         </Box>
     )

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

@@ -10,7 +10,7 @@ export const shortcutsStyles = {
   mobileTrigger: {
     display: { xs: 'flex', md: 'none' },
     ml: spacing.sm,
-    color: '#9DE5FD',
+    color: '#ffffff',
   },
   shortcut: {
     display: 'flex',
@@ -25,6 +25,6 @@ export const shortcutsStyles = {
   },
   iconStyle: {
     fontSize: '23px',
-    color: colours.text.secondary,
+    color: '#ffffff',
   },
 }

package/src/components/Shortucts/Shortcuts.tsx

@@ -4,9 +4,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { shortcutsStyles } from './Shortcuts.styles'
 import { useNavigation } from '../../NavkitContext'
 
-const ChatIcon = () => (
+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="#9DE5FD"/>
+        <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 || "#ffffff"}/>
     </SvgIcon>
 )
 
@@ -14,11 +14,12 @@ interface ShortcutsProps {
     showChat?: (showChat: boolean) => void
     onMenuToggle?: () => void
     triggerRef?: React.RefObject<HTMLButtonElement | null>
+    iconColor?: string
 }
 
 const Shortcuts = (props: ShortcutsProps) => {
 
-    const { showChat, onMenuToggle, triggerRef } = props
+    const { showChat, onMenuToggle, triggerRef, iconColor } = props
     const { navigateToUrl, siteSettings, isUserAuthenticated } = useNavigation()
     const shortcuts = siteSettings.shortcuts
 
@@ -40,7 +41,7 @@ const Shortcuts = (props: ShortcutsProps) => {
                     >
                         <FontAwesomeIcon
                             icon={["far", shortcut.icon] as any}
-                            style={shortcutsStyles.iconStyle}
+                            style={{ ...shortcutsStyles.iconStyle, ...(iconColor && { color: iconColor }) }}
                         />
                     </Link>
                 ))}
@@ -50,7 +51,7 @@ const Shortcuts = (props: ShortcutsProps) => {
                         onClick={() => showChat?.(true)}
                         sx={shortcutsStyles.shortcut}
                     >
-                        <ChatIcon />
+                        <ChatIcon color={iconColor} />
                     </Link>
                 }
             </Box>
@@ -60,11 +61,11 @@ const Shortcuts = (props: ShortcutsProps) => {
                 <IconButton
                     ref={triggerRef}
                     onClick={onMenuToggle}
-                    sx={shortcutsStyles.mobileTrigger}
+                    sx={{ ...shortcutsStyles.mobileTrigger, ...(iconColor && { color: iconColor }) }}
                 >
                     <FontAwesomeIcon
                         icon={["fas", "ellipsis-v"]}
-                        style={{ ...shortcutsStyles.iconStyle, color: '#9DE5FD' }}
+                        style={{ ...shortcutsStyles.iconStyle, color: iconColor || '#ffffff' }}
                     />
                 </IconButton>
             )}

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 {