fixes

apps/studio/components/interfaces/ProjectHome/ProjectUsageSection.tsx

@@ -10,8 +10,8 @@ import { useFillTimeseriesSorted } from 'hooks/analytics/useFillTimeseriesSorted
 import { useCheckEntitlements } from 'hooks/misc/useCheckEntitlements'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
-import Link from 'next/link'
 import { useRouter } from 'next/compat/router'
+import Link from 'next/link'
 import { useEffect, useMemo, useState } from 'react'
 import { Card, CardContent, CardHeader, CardTitle, Loading } from 'ui'
 import { Row } from 'ui-patterns'
@@ -218,7 +218,7 @@ export const ProjectUsageSection = () => {
       </div>
       <Row maxColumns={4} minWidth={280}>
         {enabledServices.map((s) => (
-          <Card key={s.key} className="mb-0 md:mb-0 h-full flex flex-col h-64">
+          <Card key={s.key} className="mb-0 pb-0 flex flex-col h-48">
             <CardHeader className="flex flex-row items-end justify-between gap-2 space-y-0 pb-0 border-b-0">
               <div className="flex items-center gap-2">
                 <div className="flex flex-col">

apps/studio/components/v2/HomeView.tsx

@@ -235,7 +235,7 @@ export function HomeView() {
         <div className="flex flex-col gap-3">
           <div className="grid grid-cols-2 gap-2">
             <div className="border border-border bg-surface-100 rounded-md p-2">
-              <div className="text-xs text-foreground-lighter">Service</div>
+              <div className="text-xs text-foreground-lighter">Services</div>
               <div className="text-xs mt-1">
                 <span
                   className={cn(

apps/studio/components/v2/HomeViewDataCountersRow.tsx

@@ -30,24 +30,24 @@ type V2DataCounts = ReturnType<typeof useV2DataCounts>
 /** Matches `DATA_GROUPS` in BrowserPanel (Data nav) — same hrefs and count keys */
 const HOME_COUNTER_CATALOG = [
   { id: 'tables', label: 'Tables', countKey: 'tables' as const, path: 'tables' },
-  { id: 'functions', label: 'Functions', countKey: 'functions' as const, path: 'functions' },
-  { id: 'types', label: 'Enumerated types', countKey: 'types' as const, path: 'types' },
-  { id: 'roles', label: 'Roles', countKey: 'roles' as const, path: 'roles' },
+  { id: 'functions', label: 'DB Functions', countKey: 'functions' as const, path: 'functions' },
+  { id: 'types', label: 'DB Enum types', countKey: 'types' as const, path: 'types' },
+  { id: 'roles', label: 'DB Roles', countKey: 'roles' as const, path: 'roles' },
   {
     id: 'extensions',
-    label: 'Extensions',
+    label: 'DB Extensions',
     countKey: 'extensions' as const,
     path: 'extensions',
   },
-  { id: 'indexes', label: 'Indexes', countKey: 'indexes' as const, path: 'indexes' },
+  { id: 'indexes', label: 'DB Indexes', countKey: 'indexes' as const, path: 'indexes' },
   {
     id: 'publications',
-    label: 'Publications',
+    label: 'DB Publications',
     countKey: 'publications' as const,
     path: 'publications',
   },
   { id: 'users', label: 'Users', countKey: 'users' as const, path: 'users' },
-  { id: 'providers', label: 'Providers', countKey: 'providers' as const, path: 'providers' },
+  { id: 'providers', label: 'Auth Providers', countKey: 'providers' as const, path: 'providers' },
   {
     id: 'oauthApps',
     label: 'OAuth apps',
@@ -333,8 +333,8 @@ export function HomeViewDataCountersRow({
 
   return (
     <div className="relative group/home-counters">
-      <div className="flex items-center justify-between mb-1 -mt-1 gap-1 focus-within:opacity-100">
-        <h2 className="!text-sm text-foreground-light">Your project in numbers</h2>
+      <div className="flex items-center justify-between mb-1 -mt-1 gap-2 focus-within:opacity-100">
+        <h2 className="!text-base">Your project in numbers</h2>
         <DropdownMenu open={open} onOpenChange={setOpen}>
           <DropdownMenuTrigger asChild>
             <Button
@@ -400,7 +400,7 @@ export function HomeViewDataCountersRow({
             <Link
               key={item.id}
               href={item.href}
-              className="text-left group/quick-access-link border bg-surface-100 p-2 rounded-md hover:border-foreground-lighter"
+              className="text-left group/quick-access-link border bg-surface-100 px-2 py-1 rounded-md hover:border-foreground-lighter"
             >
               <div className="flex gap-1 text-xs font-mono text-foreground-lighter leading-snug tracking-tight truncate">
                 <span title={item.label} className="truncate">

apps/studio/components/v2/useV2DataCounts.ts

@@ -1,6 +1,7 @@
 'use client'
 
 import { useQuery } from '@tanstack/react-query'
+import { useInstalledIntegrations } from 'components/interfaces/Integrations/Landing/useInstalledIntegrations'
 import { useUsersCountQuery } from 'data/auth/users-count-query'
 import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
 import { useDatabaseFunctionsQuery } from 'data/database-functions/database-functions-query'
@@ -9,12 +10,14 @@ import { useDatabaseRolesQuery } from 'data/database-roles/database-roles-query'
 import { useIndexesQuery } from 'data/database-indexes/indexes-query'
 import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query'
 import { useEnumeratedTypesQuery } from 'data/enumerated-types/enumerated-types-query'
+import { isValidConnString } from 'data/fetchers'
 import { useOAuthServerAppsQuery } from 'data/oauth-server-apps/oauth-server-apps-query'
 import { useProjectDetailQuery } from 'data/projects/project-detail-query'
+import { getBuckets } from 'data/storage/buckets-query'
+import { storageKeys } from 'data/storage/keys'
 import { useTablesQuery } from 'data/tables/tables-query'
-import { usePaginatedBucketsQuery } from 'data/storage/buckets-query'
 import { thirdPartyAuthIntegrationsQueryOptions } from 'data/third-party-auth/integrations-query'
-import { useInstalledIntegrations } from 'components/interfaces/Integrations/Landing/useInstalledIntegrations'
+import { PROJECT_STATUS } from 'lib/constants'
 
 export function useV2DataCounts(projectRef: string | undefined) {
   const { data: project } = useProjectDetailQuery(
@@ -22,45 +25,62 @@ export function useV2DataCounts(projectRef: string | undefined) {
     { enabled: Boolean(projectRef) }
   )
   const conn = project?.connectionString
+  const canQueryDb = Boolean(projectRef) && isValidConnString(conn)
+  const isProjectActive = project?.status === PROJECT_STATUS.ACTIVE_HEALTHY
 
   const { data: tables } = useTablesQuery(
-    { projectRef, connectionString: conn, schema: 'public' },
-    { enabled: Boolean(projectRef) }
+    {
+      projectRef,
+      connectionString: conn,
+      schema: 'public',
+      includeColumns: false,
+    },
+    { enabled: canQueryDb }
   )
-  const { data: usersCount } = useUsersCountQuery({ projectRef }, { enabled: Boolean(projectRef) })
-  const { data: bucketsPages } = usePaginatedBucketsQuery(
-    { projectRef },
-    { enabled: Boolean(projectRef) }
+  const { data: usersCount } = useUsersCountQuery(
+    {
+      projectRef,
+      connectionString: conn,
+      keywords: '',
+      filter: undefined,
+      providers: [],
+      forceExactCount: false,
+    },
+    { enabled: canQueryDb }
   )
-  const bucketsList = bucketsPages?.pages?.flatMap((p) => p) ?? []
+  const { data: bucketsData } = useQuery({
+    queryKey: storageKeys.buckets(projectRef),
+    queryFn: ({ signal }) => getBuckets({ projectRef }, signal),
+    enabled: Boolean(projectRef) && isProjectActive,
+  })
   const { data: edgeFunctions } = useEdgeFunctionsQuery(
     { projectRef },
     { enabled: Boolean(projectRef) }
   )
   const { data: extensions } = useDatabaseExtensionsQuery(
     { projectRef, connectionString: conn },
-    { enabled: Boolean(projectRef) }
+    { enabled: canQueryDb }
   )
   const { data: roles } = useDatabaseRolesQuery(
     { projectRef, connectionString: conn },
-    { enabled: Boolean(projectRef) }
+    { enabled: canQueryDb }
   )
   const { data: publications } = useDatabasePublicationsQuery(
     { projectRef, connectionString: conn },
-    { enabled: Boolean(projectRef) }
+    { enabled: canQueryDb }
   )
   const { data: types } = useEnumeratedTypesQuery(
     { projectRef, connectionString: conn },
-    { enabled: Boolean(projectRef) }
+    { enabled: canQueryDb }
   )
   const { data: dbFunctions } = useDatabaseFunctionsQuery(
     { projectRef, connectionString: conn },
-    { enabled: Boolean(projectRef) }
+    { enabled: canQueryDb }
   )
 
   const { data: indexes } = useIndexesQuery(
     { projectRef, connectionString: conn, schema: 'public' },
-    { enabled: Boolean(projectRef) && Boolean(conn) }
+    { enabled: canQueryDb }
   )
 
   const { data: thirdPartyAuth } = useQuery(
@@ -70,11 +90,14 @@ export function useV2DataCounts(projectRef: string | undefined) {
   const { data: oauthAppsData } = useOAuthServerAppsQuery({ projectRef })
   const { installedIntegrations } = useInstalledIntegrations()
 
+  const bucketsList = Array.isArray(bucketsData) ? bucketsData : []
+  const edgeFunctionsList = Array.isArray(edgeFunctions) ? edgeFunctions : []
+
   return {
     tables: Array.isArray(tables) ? tables.length : 0,
     users: usersCount?.count ?? 0,
     buckets: bucketsList.length,
-    edgeFunctions: edgeFunctions?.length ?? 0,
+    edgeFunctions: edgeFunctionsList.length,
     extensions: extensions?.length ?? 0,
     roles: roles?.length ?? 0,
     publications: publications?.length ?? 0,