diff --git a/packages/web/pages/settings/account.tsx b/packages/web/pages/settings/account.tsx
index 3e34236aa..6c5d26a56 100644
--- a/packages/web/pages/settings/account.tsx
+++ b/packages/web/pages/settings/account.tsx
@@ -16,7 +16,9 @@ import { Button } from '../../components/elements/Button'
import { useValidateUsernameQuery } from '../../lib/networking/queries/useValidateUsernameQuery'
import { updateUserMutation } from '../../lib/networking/mutations/updateUserMutation'
import { updateUserProfileMutation } from '../../lib/networking/mutations/updateUserProfileMutation'
-import { styled } from '../../components/tokens/stitches.config'
+import { styled, theme } from '../../components/tokens/stitches.config'
+import { ProgressBar } from '../../components/elements/ProgressBar'
+import { useGetLibraryItemsQuery } from '../../lib/networking/queries/useGetLibraryItemsQuery'
const StyledLabel = styled('label', {
fontWeight: 600,
@@ -54,6 +56,16 @@ export default function Account(): JSX.Element {
isUsernameValidationLoading,
])
+ const { itemsPages, isValidating } = useGetLibraryItemsQuery({
+ limit: 0,
+ searchQuery: 'in:all',
+ sortDescending: false,
+ })
+
+ const libraryCount = useMemo(() => {
+ return itemsPages?.find(() => true)?.search.pageInfo.totalCount
+ }, [itemsPages, isValidating])
+
useEffect(() => {
if (viewerData?.me?.profile.username) {
setUsername(viewerData?.me?.profile.username)
@@ -250,6 +262,33 @@ export default function Account(): JSX.Element {
+
+
+ Account Storage
+ {!isValidating && (
+ <>
+
+
+ {`${libraryCount} of 50K library items used.`}
+
+ >
+ )}
+
+