studio: improve warning for replicas on spend cap

The "> 8 GB warning" when spend cap enabled used to be conflated with
the "has replicas with spend cap" warning, which causes a confusing
error message.

Opting to split them out into 2 separate warnings to give the user a
better description of the problem.

apps/studio/components/interfaces/Organization/Usage/UsageSection/DiskUsage.tsx

@@ -62,11 +62,14 @@ export const DiskUsage = ({
       : []
   }, [isSuccess, projects, projectRef])
 
+  const hasReplicas = useMemo(
+    () => relevantProjects.some((it) => it.databases.some((db) => db.type === 'READ_REPLICA')),
+    [relevantProjects]
+  )
+
   const hasProjectsExceedingDiskSize = useMemo(() => {
     return relevantProjects.some((it) =>
-      it.databases.some(
-        (db) => db.type === 'READ_REPLICA' || (db.disk_volume_size_gb && db.disk_volume_size_gb > 8)
-      )
+      it.databases.some((db) => db.disk_volume_size_gb && db.disk_volume_size_gb > 8)
     )
   }, [relevantProjects])
 
@@ -103,6 +106,19 @@ export const DiskUsage = ({
                   </AlertDescription>
                 </Alert>
               )}
+            {currentBillingCycleSelected &&
+              subscription?.usage_billing_enabled === false &&
+              !hasProjectsExceedingDiskSize &&
+              hasReplicas && (
+                <Alert variant="warning">
+                  <CriticalIcon />
+                  <AlertTitle>Projects exceeding quota</AlertTitle>
+                  <AlertDescription>
+                    You have read replicas in your projects, but do not allow any overages with the
+                    Spend Cap on. Remove the read replicas or disable the spend cap.
+                  </AlertDescription>
+                </Alert>
+              )}
 
             <div>
               <div className="flex items-center justify-between">