@taruvi/navkit 0.0.38 → 0.0.40

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.38",
+  "version": "0.0.40",
   "main": "src/App.tsx",
   "type": "module",
   "scripts": {
@@ -48,6 +48,6 @@
     "vitest": "^4.0.18"
   },
   "dependencies": {
-    "@taruvi/sdk": "^1.4.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,13 @@ 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 resolvedAppName = appName || appSettings?.displayName
+  const showTaruviLogo = !resolvedAppName && !appSettings?.icon
   const styles = getAppStyles(themeMode)
   const [showAppLauncher, setShowAppLauncher] = useState<boolean>(false)
   const [showProfileMenu, setShowProfileMenu] = useState<boolean>(false)
@@ -35,12 +38,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} /> : <></>}
+                {resolvedAppName &&
+                  <Typography sx={styles.appName} onClick={() => (window.location.href = "/")}>
+                    {resolvedAppName.length > 40 ? `${resolvedAppName.substring(0, 40)}...` : resolvedAppName}
+                  </Typography>
+                }
+              </>
+            )}
           </Box>
           <Box component={"div"} sx={styles.rightSection}>
             <Shortcuts showChat={setShowChat} onMenuToggle={() => setShowShortcutsMenu(!showShortcutsMenu)} />
@@ -70,7 +79,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>
@@ -122,4 +131,4 @@ const Navkit = ({ client, getTheme, appName }: NavkitProps) => {
   )
 }
 
-export default Navkit
+export default Navkit

package/src/NavkitContext.tsx

@@ -31,7 +31,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName }: Nav
     frontendUrl: '',
     enableDarkMode: false,
   })
-  const appSettings = useRef<AppSettings>({})
+  const [appSettings, setAppSettings] = useState<AppSettings>({})
 
   const [isDesk, setIsDesk] = useState<boolean>(false)
   const [appsList, setAppsList] = useState<AppData[]>([])
@@ -87,12 +87,12 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName }: Nav
     // Fetch app settings to get the app name
     try {
       const { data } = appName ? { data: { display_name: appName } } : await new App(client).settings().execute() as { data: { display_name?: string, icon?: string, primary_color?: string, secondary_color?: string } }
-      appSettings.current = {
+      setAppSettings({
         displayName: data?.display_name,
         icon: data?.icon,
         primaryColor: data?.primary_color,
         secondaryColor: data?.secondary_color
-      }
+      })
     } catch {
       // App settings not available, continue without app settings
     }
@@ -126,7 +126,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName }: Nav
       }
     }
 
-  }, [client])
+  }, [appName, client])
 
   useLayoutEffect(() => {
     const init = async () => {
@@ -169,7 +169,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName }: Nav
   }, [themeMode, onThemeChange])
 
   return (
-    <NavigationContext.Provider value={{ navigateToUrl, isDesk, appsList, userData, siteSettings: siteSettings.current, appSettings: appSettings.current, appName, jwtToken, isUserAuthenticated, client, auth, themeMode, toggleTheme }}>
+    <NavigationContext.Provider value={{ navigateToUrl, isDesk, appsList, userData, siteSettings: siteSettings.current, appSettings, appName, jwtToken, isUserAuthenticated, client, auth, themeMode, toggleTheme }}>
       {children}
     </NavigationContext.Provider>
   )
@@ -181,4 +181,4 @@ export const useNavigation = () => {
     throw new Error('useNavigation must be used within a NavkitProvider')
   }
   return context
-}
+}

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/Profile/Profile.tsx

@@ -2,11 +2,11 @@ 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>
 )
 
@@ -15,10 +15,11 @@ 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)
 
@@ -27,7 +28,7 @@ const Profile = (props: ProfileProps) => {
             {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/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>
             )}