@taruvi/navkit 0.0.45 → 0.0.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taruvi/navkit",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "main": "src/App.tsx",
   "type": "module",
   "scripts": {

package/src/App.styles.ts

@@ -82,6 +82,7 @@ export const getAppStyles = (mode: ThemeMode) => {
       justifyContent: 'space-between',
       minHeight: `${dimensions.navHeight} !important`,
       height: dimensions.navHeight,
+      px: '18px !important',
     },
     leftSection: {
       display: 'flex',
@@ -177,7 +178,7 @@ export const getAppStyles = (mode: ThemeMode) => {
       marginTop: '2px',
     },
     backdrop: {
-      position: "absolute" as const,
+      position: "fixed" as const,
       inset: 0,
       zIndex: 10,
     },

package/src/NavkitContext.tsx

@@ -51,8 +51,7 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
   }, [])
 
   const checkIfDesk = async () => {
-    const fetchedSettings = await settings?.current?.get?.()
-    const frontendUrl = (fetchedSettings?.data ?? fetchedSettings)?.settings?.['navkit.frontend-url']
+    const frontendUrl = appSettings?.frontendUrl
     if (!frontendUrl) return false
     return window.location.href.includes(frontendUrl || '')
   }
@@ -89,12 +88,13 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
     // Fetch app settings to get the app name
     try {
       setAppSettingsLoaded(false)
-      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 } }
+      const { data } = await new App(client).settings().execute() as { data: { display_name?: string, icon?: string, primary_color?: string, secondary_color?: string, frontend_url?: string } }
       setAppSettings({
-        displayName: data?.display_name,
+        displayName: appName || data?.display_name,
         icon: data?.icon,
         primaryColor: data?.primary_color,
-        secondaryColor: data?.secondary_color
+        secondaryColor: data?.secondary_color,
+        frontendUrl: data?.frontend_url
       })
     } catch {
       // App settings not available, continue without app settings
@@ -143,15 +143,6 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
     init()
   }, [])
 
-  useEffect(() => {
-    const initIsDesk = async () => {
-      const isDeskValue = await checkIfDesk()
-      setIsDesk(isDeskValue)
-    }
-
-    initIsDesk()
-  }, [])
-
   // Listen for user profile updates via BroadcastChannel
   useEffect(() => {
     const channel = new BroadcastChannel('taruvi-updates')
@@ -168,7 +159,16 @@ export const NavkitProvider = ({ children, client, onThemeChange, appName, navba
       channel.removeEventListener('message', handleMessage)
       channel.close()
     }
-  }, [getData])
+  }, [getData, isUserAuthenticated])
+
+  useEffect(() => {
+    const initIsDesk = async () => {
+      const isDeskValue = await checkIfDesk()
+      setIsDesk(isDeskValue)
+    }
+
+    initIsDesk()
+  }, [checkIfDesk])
 
   // Notify parent app of theme changes
   useEffect(() => {

package/src/components/AppLauncher/AppLauncher.styles.ts

@@ -95,17 +95,15 @@ export const getAppLauncherStyles = (mode: ThemeMode) => {
       },
     },
     iconContainer: {
-      width: 48,
-      height: 48,
+      width: 40,
+      height: 40,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      borderRadius: borderRadius.default,
-      border: `1px solid ${colors.border.light}`,
       mb: spacing.sm,
     },
     iconStyle: {
-      fontSize: dimensions.iconSize.md,
+      fontSize: '40px',
       color: colors.text.secondary,
     },
     appName: {

package/src/components/AppLauncher/AppLauncher.tsx

@@ -38,14 +38,14 @@ const AppLauncher = () => {
     return (
         <Card sx={styles.container}>
             <Search appsList={appsList} onSearchChange={handleSearchChange} />
-            {filteredApps.length === 0 ? (
+            {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>
                 </Box>
             ) : (
                 <Box sx={styles.scrollContainer}>
                     <Grid container spacing={0}>
-                        {filteredApps.map((app) => {
+                        {filteredApps.filter(app => app.url).map((app) => {
                             return (
                                 <Grid size={2} key={app.id}>
                                     <Box
@@ -60,8 +60,8 @@ const AppLauncher = () => {
                                                     src={app.icon}
                                                     alt={app.appname}
                                                     style={{
-                                                        width: 24,
-                                                        height: 24,
+                                                        width: 40,
+                                                        height: 40,
                                                         objectFit: 'contain'
                                                     }}
                                                 />

package/src/types.ts

@@ -25,6 +25,7 @@ export interface AppSettings {
   icon?: string
   primaryColor?: string
   secondaryColor?: string
+  frontendUrl?: string
 }
 
 export interface NavigationContextType {

package/.claude/settings.local.json

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