feat: add storage panel in setting (#4069)

packages/component/src/components/setting-components/index.tsx

@@ -1,6 +1,7 @@
 export { SettingModal, type SettingModalProps } from './modal';
 export { SettingHeader } from './setting-header';
 export { SettingRow } from './setting-row';
+export * from './storage-progess';
 export * from './workspace-detail-skeleton';
 export * from './workspace-list-skeleton';
 export { SettingWrapper } from './wrapper';

packages/component/src/components/setting-components/share.css.ts

@@ -92,3 +92,55 @@ globalStyle(`${settingRow} .right-col`, {
   paddingLeft: '15px',
   flexShrink: 0,
 });
+
+export const storageProgressContainer = style({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const storageProgressWrapper = style({
+  flexGrow: 1,
+  marginRight: '20px',
+});
+
+globalStyle(`${storageProgressWrapper} .storage-progress-desc`, {
+  fontSize: 'var(--affine-font-xs)',
+  color: 'var(--affine-text-secondary-color)',
+  height: '20px',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: 2,
+});
+globalStyle(`${storageProgressWrapper} .storage-progress-bar-wrapper`, {
+  height: '8px',
+  borderRadius: '4px',
+  backgroundColor: 'var(--affine-pure-black-10)',
+  overflow: 'hidden',
+});
+export const storageProgressBar = style({
+  height: '100%',
+  backgroundColor: 'var(--affine-processing-color)',
+  selectors: {
+    '&.warning': {
+      // Wait for design
+      backgroundColor: '#FF7C09',
+    },
+    '&.danger': {
+      backgroundColor: 'var(--affine-error-color)',
+    },
+  },
+});
+export const storageExtendHint = style({
+  borderRadius: '4px',
+  padding: '4px 8px',
+  backgroundColor: 'var(--affine-background-secondary-color)',
+  color: 'var(--affine-text-secondary-color)',
+  fontSize: 'var(--affine-font-xs)',
+  lineHeight: '20px',
+  marginTop: 8,
+});
+globalStyle(`${storageExtendHint} a`, {
+  color: 'var(--affine-link-color)',
+});

packages/component/src/components/setting-components/storage-progess.tsx

@@ -0,0 +1,87 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
+import { Button } from '@toeverything/components/button';
+import { Tooltip } from '@toeverything/components/tooltip';
+import clsx from 'clsx';
+import { useMemo, useRef } from 'react';
+
+import * as styles from './share.css';
+
+export interface StorageProgressProgress {
+  max: number;
+  value: number;
+  onUpgrade: () => void;
+}
+
+const transformBytesToMB = (bytes: number) => {
+  return (bytes / 1024 / 1024).toFixed(2);
+};
+
+const transformBytesToGB = (bytes: number) => {
+  return (bytes / 1024 / 1024 / 1024).toFixed(2);
+};
+
+export const StorageProgress = ({
+  max: upperLimit,
+  value,
+  onUpgrade,
+}: StorageProgressProgress) => {
+  const t = useAFFiNEI18N();
+  const ref = useRef(null);
+  const percent = useMemo(
+    () => Math.round((value / upperLimit) * 100),
+    [upperLimit, value]
+  );
+
+  const used = useMemo(() => transformBytesToMB(value), [value]);
+  const max = useMemo(() => transformBytesToGB(upperLimit), [upperLimit]);
+
+  return (
+    <>
+      <div className={styles.storageProgressContainer}>
+        <div className={styles.storageProgressWrapper}>
+          <div className="storage-progress-desc">
+            <span>{t['com.affine.storage.used.hint']()}</span>
+            <span>
+              {used}MB/{max}GB
+            </span>
+          </div>
+
+          <div className="storage-progress-bar-wrapper">
+            <div
+              className={clsx(styles.storageProgressBar, {
+                warning: percent > 80,
+                danger: percent > 99,
+              })}
+              style={{ width: `${percent}%` }}
+            ></div>
+          </div>
+        </div>
+
+        <Tooltip
+          content={t['com.affine.storage.disabled.hint']()}
+          portalOptions={{
+            container: ref.current,
+          }}
+        >
+          <div ref={ref}>
+            <Button disabled onClick={onUpgrade}>
+              {t['com.affine.storage.upgrade']()}
+            </Button>
+          </div>
+        </Tooltip>
+      </div>
+      {percent > 80 ? (
+        <div className={styles.storageExtendHint}>
+          {t['com.affine.storage.extend.hint']()}
+          <a
+            href="https://community.affine.pro/c/insider-general/"
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t['com.affine.storage.extend.link']()}
+          </a>
+        </div>
+      ) : null}
+    </>
+  );
+};