feat(core): add cloud usage in sidebar avatar menu (#6400)

- Extract logic of getting cloud storage usage information into new hook
- Move `<StorageProgress />`: `component` → `core`
- Set minimum progress `0.5%`
- Add cloud usage progress bar in sidebar user avatar's dropdown

![CleanShot 2024-03-29 at 17.10.04@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/1fe9371a-a870-49a1-b4bb-b923c2fa4fe6.png)

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

@@ -85,39 +85,3 @@ 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: cssVar('fontXs'),
-  color: cssVar('textSecondaryColor'),
-  height: '20px',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  marginBottom: 2,
-});
-globalStyle(`${storageProgressWrapper} .storage-progress-bar-wrapper`, {
-  height: '8px',
-  borderRadius: '4px',
-  backgroundColor: cssVar('black10'),
-  overflow: 'hidden',
-});
-export const storageProgressBar = style({
-  height: '100%',
-  backgroundColor: cssVar('processingColor'),
-  selectors: {
-    '&.danger': {
-      backgroundColor: cssVar('errorColor'),
-    },
-  },
-});
-export const storageButton = style({
-  padding: '4px 12px',
-});