fix(sidebar): show latest version badge in desktop

Author: x0sina

dashboard/src/components/common/topbar-ad.tsx

@@ -9,6 +9,8 @@ import useDirDetection from '@/hooks/use-dir-detection'
 
 const TOPBAR_AD_STORAGE_KEY = 'topbar_ad_closed'
 const HOURS_TO_HIDE = 24
+const TOPBAR_AD_CACHE_KEY = 'topbar_ad_cache'
+const CACHE_DURATION = 10 * 60 * 1000 // 10 minutes
 
 interface TopbarAdConfig {
   enabled: boolean
@@ -25,6 +27,12 @@ interface TopbarAdConfig {
   }
 }
 
+interface CachedAdData {
+  config: TopbarAdConfig | null
+  timestamp: number
+  is404: boolean
+}
+
 
 export default function TopbarAd() {
   const { i18n } = useTranslation()
@@ -40,6 +48,25 @@ export default function TopbarAd() {
   const [iconError, setIconError] = useState(false)
 
   useEffect(() => {
+    const getCached = (): CachedAdData | null => {
+      try {
+        const cached = localStorage.getItem(TOPBAR_AD_CACHE_KEY)
+        if (!cached) return null
+        return JSON.parse(cached)
+      } catch {
+        return null
+      }
+    }
+
+    const setCache = (config: TopbarAdConfig | null, is404: boolean): void => {
+      try {
+        const data: CachedAdData = { config, timestamp: Date.now(), is404 }
+        localStorage.setItem(TOPBAR_AD_CACHE_KEY, JSON.stringify(data))
+      } catch {
+        // Silently fail
+      }
+    }
+
     const checkShouldFetch = () => {
       const closedTimestamp = localStorage.getItem(TOPBAR_AD_STORAGE_KEY)
 
@@ -59,6 +86,23 @@ export default function TopbarAd() {
       return
     }
 
+    // Check cache first
+    const cached = getCached()
+    if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
+      // Use cached data if still valid
+      if (cached.is404) {
+        // If it's a 404 cache, don't fetch and set config to null
+        setConfig(null)
+        setIsLoading(false)
+        return
+      } else {
+        // Use cached successful response
+        setConfig(cached.config)
+        setIsLoading(false)
+        return
+      }
+    }
+
     const loadConfig = async () => {
       try {
         const githubApiUrl = 'https://api.github.com/repos/pasarguard/ads/contents/config'
@@ -74,15 +118,28 @@ export default function TopbarAd() {
               Array.from(binaryString, (char) => '%' + ('00' + char.charCodeAt(0).toString(16)).slice(-2)).join('')
             )
             const data = JSON.parse(utf8String)
+            setCache(data, false)
             setConfig(data)
           } else {
+            setCache(null, false)
             setConfig(null)
           }
         } else {
+          // Cache 404 errors
+          if (response.status === 404) {
+            setCache(null, true)
+          } else {
+            setCache(null, false)
+          }
           setConfig(null)
         }
       } catch (error) {
-        setConfig(null)
+        // On error, use cached data if available, otherwise set to null
+        if (cached && !cached.is404) {
+          setConfig(cached.config)
+        } else {
+          setConfig(null)
+        }
       } finally {
         setIsLoading(false)
       }

dashboard/src/components/layout/sidebar.tsx

@@ -402,7 +402,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                       alt="PasarGuard Logo"
                       className="h-8 w-8 flex-shrink-0 object-contain"
                     />
-                    <div className="flex flex-col overflow-hidden min-w-0 flex-1">
+                    <div className="flex flex-col overflow-hidden min-w-0 flex-1 items-start">
                       <span className={cn(isRTL ? 'text-right' : 'text-left', 'truncate text-sm font-semibold leading-tight')}>{t('pasarguard')}</span>
                       <div className="flex items-center gap-1.5 min-w-0">
                         <span className="text-xs opacity-45 shrink-0">{version}</span>

dashboard/src/components/layout/version-badge.tsx

@@ -48,10 +48,10 @@ export function VersionBadge({ currentVersion, className }: VersionBadgeProps) {
             href={releaseLink}
             target="_blank"
             rel="noopener noreferrer"
-            className={cn('inline-flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400 hover:underline min-w-0 max-w-full', className)}
+            className={cn('inline-flex items-center gap-0.5 text-[10px] opacity-70 text-amber-600 dark:text-amber-400 hover:opacity-100 hover:underline min-w-0 max-w-full transition-opacity', className)}
             onClick={(e) => e.stopPropagation()}
           >
-            <span className="h-1.5 w-1.5 rounded-full bg-amber-500 dark:bg-amber-400 shrink-0" />
+            <span className="h-1 w-1 rounded-full bg-amber-500 dark:bg-amber-400 shrink-0" />
             <span className="truncate min-w-0">{t('version.needsUpdate')}</span>
           </a>
         </TooltipTrigger>
@@ -68,10 +68,40 @@ export function VersionBadge({ currentVersion, className }: VersionBadgeProps) {
     )
   }
 
-  // Default: show dot with tooltip (for non-mobile, non-expanded states)
+  // Show "Up to date" text when expanded on desktop or mobile and there's no update
+  if (showText && !hasUpdate) {
+    return (
+      <Tooltip delayDuration={100}>
+        <TooltipTrigger asChild>
+          <span className={cn('inline-flex items-center gap-0.5 text-[10px] opacity-70 text-emerald-600 dark:text-emerald-400 min-w-0 max-w-full', className)}>
+            <span className="h-1 w-1 rounded-full bg-emerald-500 dark:bg-emerald-400 shrink-0" />
+            <span className="truncate min-w-0">{t('version.upToDate')}</span>
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" className="p-1.5">
+          <div className="space-y-0.5 text-[10px]">
+            <p className="font-medium">{t('version.runningLatest', { version: `v${currentVersion}` })}</p>
+            <p className="text-[9px]">{t('version.upToDate')}</p>
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    )
+  }
+
+  // Default: show dot with tooltip (for collapsed desktop state when no update)
   if (!hasUpdate) {
     return (
-      <span className="h-1.5 w-1.5 rounded-full bg-emerald-500/50 dark:bg-emerald-400/50" />
+      <Tooltip delayDuration={100}>
+        <TooltipTrigger asChild>
+          <span className="h-1.5 w-1.5 rounded-full bg-emerald-500/50 dark:bg-emerald-400/50" />
+        </TooltipTrigger>
+        <TooltipContent side="bottom" className="p-1.5">
+          <div className="space-y-0.5 text-[10px]">
+            <p className="font-medium">{t('version.runningLatest', { version: `v${currentVersion}` })}</p>
+            <p className="text-[9px]">{t('version.upToDate')}</p>
+          </div>
+        </TooltipContent>
+      </Tooltip>
     )
   }