chore: pretteier and lint skills

apps/studio/components/interfaces/Home/ProjectList/ProjectCard.tsx

@@ -126,7 +126,6 @@ export const ProjectCard = ({
                     projectRef={project.ref}
                     cloudProvider={project.cloud_provider}
                     computeSize={getComputeSize(project)}
-                    resourceWarnings={resourceWarnings}
                     badgeClassName="text-[10px] leading-none tracking-[0.07em]"
                   />
                 )}

apps/studio/components/interfaces/Home/ProjectList/ProjectTableRow.tsx

@@ -137,7 +137,6 @@ export const ProjectTableRow = ({
                 projectRef={project.ref}
                 cloudProvider={project.cloud_provider}
                 computeSize={getComputeSize(project)}
-                resourceWarnings={resourceWarnings}
               />
             ) : (
               <span className="text-xs text-foreground-muted">–</span>

apps/studio/components/layouts/ProjectLayout/index.tsx

@@ -39,7 +39,7 @@ import { UpgradingState } from './UpgradingState'
 import { CreateBranchModal } from '@/components/interfaces/BranchManagement/CreateBranchModal'
 import { ProjectAPIDocs } from '@/components/interfaces/ProjectAPIDocs/ProjectAPIDocs'
 import { BannerFreeMicroUpgrade } from '@/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade'
-import { useBannerStack } from '@/components/ui/BannerStack/BannerStackProvider'
+import { BANNER_ID, useBannerStack } from '@/components/ui/BannerStack/BannerStackProvider'
 import { ResourceExhaustionWarningBanner } from '@/components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner'
 import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
 import { useCheckEntitlements } from '@/hooks/misc/useCheckEntitlements'
@@ -169,17 +169,24 @@ export const ProjectLayout = forwardRef<HTMLDivElement, PropsWithChildren<Projec
     const showPausedState = isPaused && !ignorePausedState
 
     useEffect(() => {
+      if (!selectedProject?.ref) return
       if (isEligibleForFreeUpgrade && !isFreeMicroUpgradeBannerDismissed) {
         addBanner({
-          id: 'free-micro-upgrade-banner',
+          id: BANNER_ID.FREE_MICRO_UPGRADE,
           isDismissed: false,
           content: <BannerFreeMicroUpgrade />,
           priority: 2,
         })
       } else {
-        dismissBanner('free-micro-upgrade-banner')
+        dismissBanner(BANNER_ID.FREE_MICRO_UPGRADE)
       }
-    }, [isEligibleForFreeUpgrade, isFreeMicroUpgradeBannerDismissed, addBanner, dismissBanner])
+    }, [
+      selectedProject?.ref,
+      isEligibleForFreeUpgrade,
+      isFreeMicroUpgradeBannerDismissed,
+      addBanner,
+      dismissBanner,
+    ])
 
     useLayoutEffect(() => {
       const unregister = registerOpenMenu(() => {

apps/studio/components/ui/BannerStack/BannerStackProvider.tsx

@@ -1,6 +1,6 @@
 import { createContext, useCallback, useContext, useState } from 'react'
 
-const BANNER_ID = {
+export const BANNER_ID = {
   METRICS_API: 'metrics-api-banner',
   INDEX_ADVISOR: 'index-advisor-banner',
   TABLE_EDITOR_QUEUE_OPERATIONS: 'table-editor-queue-operations-banner',

apps/studio/components/ui/BannerStack/Banners/BannerFreeMicroUpgrade.tsx

@@ -1,5 +1,6 @@
 import { LOCAL_STORAGE_KEYS } from 'common'
 import { useParams } from 'common/hooks'
+import { ChevronsUpAnimated } from 'components/ui/ComputeBadgeWrapper'
 import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
 import { useTrack } from 'lib/telemetry/track'
 import Link from 'next/link'
@@ -7,31 +8,7 @@ import { Button } from 'ui'
 import { ComputeBadge } from 'ui-patterns/ComputeBadge'
 
 import { BannerCard } from '../BannerCard'
-import { useBannerStack } from '../BannerStackProvider'
-
-const ChevronsUpAnimated = () => (
-  <svg
-    width={10}
-    height={10}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2.5"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-  >
-    <polyline
-      points="17 18 12 13 7 18"
-      className="animate-chevron-up"
-      style={{ animationDelay: '0s' }}
-    />
-    <polyline
-      points="17 11 12 6 7 11"
-      className="animate-chevron-up"
-      style={{ animationDelay: '0.3s' }}
-    />
-  </svg>
-)
+import { BANNER_ID, useBannerStack } from '../BannerStackProvider'
 
 export const BannerFreeMicroUpgrade = () => {
   const { ref } = useParams()
@@ -46,7 +23,7 @@ export const BannerFreeMicroUpgrade = () => {
     <BannerCard
       onDismiss={() => {
         setIsDismissed(true)
-        dismissBanner('free-micro-upgrade-banner')
+        dismissBanner(BANNER_ID.FREE_MICRO_UPGRADE)
         track('free_micro_upgrade_banner_dismissed')
       }}
     >
@@ -77,7 +54,7 @@ export const BannerFreeMicroUpgrade = () => {
             asChild
             onClick={() => {
               setIsDismissed(true)
-              dismissBanner('free-micro-upgrade-banner')
+              dismissBanner(BANNER_ID.FREE_MICRO_UPGRADE)
               track('free_micro_upgrade_banner_cta_clicked')
             }}
           >

apps/studio/components/ui/ComputeBadgeWrapper.tsx

@@ -15,7 +15,7 @@ import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
 
 import { UpgradePlanButton } from './UpgradePlanButton'
 
-const ChevronsUpAnimated = () => (
+export const ChevronsUpAnimated = () => (
   <svg
     width={10}
     height={10}
@@ -129,7 +129,7 @@ export const ComputeBadgeWrapper = ({
               )}
             />
             {hasUpgradeAvailable && (
-              <span className="animate-badge-shimmer pointer-events-none absolute inset-0 bg-gradient-to-br p-3 from-transparent via-brand/20 to-transparent blur-md" />
+              <span className="animate-badge-shimmer pointer-events-none absolute inset-0 bg-gradient-to-br from-transparent via-brand/20 to-transparent blur-md" />
             )}
           </div>
         </div>