feat(workspace): add blob and storage limit (#5535)

close TOV-343 AFF-508 TOV-461 TOV-460 TOV-419

Add `isOverCapacity ` status to detect if blob usage exceeds limits.
Add `onCapacityChange` and `onBlobSet` to monitor if the storage or blob exceeds the capacity limit.
Global modals `LocalQuotaModal` and `CloudQuotaModal` have been added, with the upload size of the blob being limited within the modal components.
The notification component has been adjusted, now you can pass in `action` click events and `actionLabel` .

packages/frontend/core/src/hooks/use-workspace-quota.ts

@@ -0,0 +1,41 @@
+import { workspaceQuotaQuery } from '@affine/graphql';
+import bytes from 'bytes';
+import { useCallback } from 'react';
+
+import { useQuery } from './use-query';
+
+export const useWorkspaceQuota = (workspaceId: string) => {
+  const { data } = useQuery({
+    query: workspaceQuotaQuery,
+    variables: {
+      id: workspaceId,
+    },
+  });
+
+  const changeToHumanReadable = useCallback((value: string | number) => {
+    return bytes.format(bytes.parse(value));
+  }, []);
+
+  const quotaData = data.workspace.quota;
+  const blobLimit = BigInt(quotaData.blobLimit);
+  const storageQuota = BigInt(quotaData.storageQuota);
+  const usedSize = BigInt(quotaData.usedSize);
+
+  const humanReadableBlobLimit = changeToHumanReadable(blobLimit.toString());
+  const humanReadableStorageQuota = changeToHumanReadable(
+    storageQuota.toString()
+  );
+  const humanReadableUsedSize = changeToHumanReadable(usedSize.toString());
+
+  return {
+    blobLimit,
+    storageQuota,
+    usedSize,
+    humanReadable: {
+      name: quotaData.humanReadableName,
+      blobLimit: humanReadableBlobLimit,
+      storageQuota: humanReadableStorageQuota,
+      usedSize: humanReadableUsedSize,
+    },
+  };
+};