jaredandClaude Opus 5
c6c2e88df5
CI / Build & Quality Checks (push) Canceled after 0s
CI / Trigger Desktop Build (push) Canceled after 0s
CI / Secret scan (gitleaks) (push) Canceled after 0s
CI / Docker image build & smoke test (push) Canceled after 0s
CI / Playwright smoke (e2e) (push) Canceled after 0s
One tile under Settings → General → Storage: total local usage vs the browser's quota from navigator.storage.estimate(), the Chromium usageDetails breakdown when available (IndexedDB = sync cache + encryption keys + search index; Cache Storage = offline app files), and whether the browser granted persistent storage — green "Protected" or amber "May be evicted" with a "Keep my data" button that calls storage.persist(). That last bit is the useful diagnostic for the KE-1 storage-eviction cluster. No clear button: media lives in the browser's own HTTP cache (not in the estimate, and not clearable from a page), the crypto store must never be casually cleared, and the search-index clear already lives in Message Search. The About page's "Clear Cache & Reload" now says it deletes this device's encryption keys too. Hidden entirely when estimate() is missing. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
104 lines
3.6 KiB
TypeScript
104 lines
3.6 KiB
TypeScript
import React, { useCallback, useEffect, useState } from 'react';
|
|
import { Badge, Box, Button, Text } from 'folds';
|
|
import { SequenceCard } from '../../../components/sequence-card';
|
|
import { SequenceCardStyle } from '../styles.css';
|
|
import { SettingTile } from '../../../components/setting-tile';
|
|
import { bytesToSize } from '../../../utils/common';
|
|
import {
|
|
percentOf,
|
|
readStorageUsage,
|
|
requestPersistentStorage,
|
|
StorageUsage as Usage,
|
|
storageUsageSupported,
|
|
} from '../../../utils/storageUsage';
|
|
|
|
/**
|
|
* [Gitea #120] One tile: how much this device stores for Lotus, whether the
|
|
* browser has promised to keep it, and a way to ask. Hidden entirely when
|
|
* `navigator.storage.estimate()` is unavailable rather than showing zeros.
|
|
*/
|
|
export function StorageUsage() {
|
|
const [usage, setUsage] = useState<Usage | undefined>();
|
|
const [requesting, setRequesting] = useState(false);
|
|
|
|
const refresh = useCallback(() => {
|
|
readStorageUsage()
|
|
.then(setUsage)
|
|
.catch(() => setUsage(undefined));
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (storageUsageSupported()) refresh();
|
|
}, [refresh]);
|
|
|
|
if (!usage) return null;
|
|
|
|
const handlePersist = async () => {
|
|
setRequesting(true);
|
|
await requestPersistentStorage();
|
|
setRequesting(false);
|
|
refresh();
|
|
};
|
|
|
|
const breakdown: string[] = [];
|
|
if (typeof usage.indexedDB === 'number')
|
|
breakdown.push(
|
|
`${bytesToSize(usage.indexedDB)} in IndexedDB (sync cache, encryption keys, search index)`,
|
|
);
|
|
if (typeof usage.caches === 'number')
|
|
breakdown.push(`${bytesToSize(usage.caches)} offline app files`);
|
|
|
|
return (
|
|
<Box direction="Column" gap="100">
|
|
<Text size="L400">Storage</Text>
|
|
<SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
|
|
<SettingTile
|
|
title={`${bytesToSize(usage.usage)} used on this device`}
|
|
description={
|
|
<Box direction="Column" gap="100">
|
|
<Text size="T200">
|
|
{percentOf(usage.usage, usage.quota)}% of the {bytesToSize(usage.quota)} the browser
|
|
allows this site.
|
|
{breakdown.length > 0 && ` ${breakdown.join(' · ')}.`}
|
|
</Text>
|
|
<Text size="T200">
|
|
Images and videos you have viewed are kept in the browser's own cache, which it
|
|
manages and empties itself; they are not counted here. Encryption keys are never
|
|
cleared from this page — losing them makes older encrypted messages unreadable on
|
|
this device. Cached search results can be cleared from Message Search.
|
|
</Text>
|
|
</Box>
|
|
}
|
|
after={
|
|
usage.persisted === undefined ? undefined : (
|
|
<Box direction="Column" alignItems="End" gap="100">
|
|
<Badge
|
|
variant={usage.persisted ? 'Success' : 'Warning'}
|
|
fill="Soft"
|
|
radii="300"
|
|
size="400"
|
|
>
|
|
<Text size="L400">{usage.persisted ? 'Protected' : 'May be evicted'}</Text>
|
|
</Badge>
|
|
{!usage.persisted && (
|
|
<Button
|
|
size="300"
|
|
variant="Secondary"
|
|
fill="Soft"
|
|
radii="300"
|
|
outlined
|
|
disabled={requesting}
|
|
onClick={handlePersist}
|
|
>
|
|
<Text size="B300">Keep my data</Text>
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
)
|
|
}
|
|
/>
|
|
</SequenceCard>
|
|
</Box>
|
|
);
|
|
}
|