Buriburizaemon/nodewarden
1
0
Fork 0
mirror of https://github.com/shuaiplus/nodewarden.git synced 2026-06-20 21:00:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update mobile layout query to 1180px and enhance icon loading experience

Browse Source
This commit is contained in:
shuaiplus
2026-04-25 03:19:06 +08:00
parent e4bc1b9bbe
commit a1f7250e90
7 changed files with 78 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/src/components/SendsPage.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ interface SendsPageProps {
type SendTypeFilter = 'all' | 'text' | 'file';
const AUTO_COPY_KEY = 'nodewarden.send.auto_copy_link.v1';
const MOBILE_LAYOUT_QUERY = '(max-width: 900px)';
const MOBILE_LAYOUT_QUERY = '(max-width: 1180px)';
function daysFromNow(iso: string | null | undefined, fallback: number): string {
if (!iso) return String(fallback);
webapp/src/components/TotpCodesPage.tsx
+19 -11
View File
@@ -73,23 +73,31 @@ function TotpListIcon({ cipher }: { cipher: Cipher }) {
const uri = firstCipherUri(cipher);
const host = hostFromUri(uri);
const [errored, setErrored] = useState(() => (host ? failedIconHosts.has(host) : false));
const [loaded, setLoaded] = useState(false);
useEffect(() => {
setErrored(host ? failedIconHosts.has(host) : false);
setLoaded(false);
}, [host]);
if (host && !errored) {
return (
<img
className="list-icon"
src={websiteIconUrl(host)}
alt=""
loading="lazy"
referrerPolicy="no-referrer"
onError={() => {
failedIconHosts.add(host);
setErrored(true);
}}
/>
<span className="list-icon-stack">
<span className={`list-icon-fallback ${loaded ? 'hidden' : ''}`}>
<Globe size={18} />
</span>
<img
className={`list-icon ${loaded ? 'loaded' : ''}`}
src={websiteIconUrl(host)}
alt=""
loading="lazy"
referrerPolicy="no-referrer"
onLoad={() => setLoaded(true)}
onError={() => {
failedIconHosts.add(host);
setErrored(true);
}}
/>
</span>
);
}
return (
webapp/src/components/vault/vault-page-helpers.tsx
+20 -12
View File
@@ -36,7 +36,7 @@ export const CREATE_TYPE_OPTIONS: TypeOption[] = [
];
export const VAULT_SORT_STORAGE_KEY = 'nodewarden.vault.sort.v1';
export const MOBILE_LAYOUT_QUERY = '(max-width: 900px)';
export const MOBILE_LAYOUT_QUERY = '(max-width: 1180px)';
export const VAULT_LIST_ROW_HEIGHT = 74;
export const VAULT_LIST_OVERSCAN = 10;
export const VAULT_SORT_OPTIONS: Array<{ value: VaultSortMode; label: string }> = [
@@ -433,23 +433,31 @@ export function VaultListIcon({ cipher }: { cipher: Cipher }) {
const uri = firstCipherUri(cipher);
const host = hostFromUri(uri);
const [errored, setErrored] = useState(() => (host ? failedIconHosts.has(host) : false));
const [loaded, setLoaded] = useState(false);
useEffect(() => {
setErrored(host ? failedIconHosts.has(host) : false);
setLoaded(false);
}, [host]);
if (host && !errored) {
return (
<img
className="list-icon"
src={websiteIconUrl(host)}
alt=""
loading="lazy"
referrerPolicy="no-referrer"
onError={() => {
failedIconHosts.add(host);
setErrored(true);
}}
/>
<span className="list-icon-stack">
<span className={`list-icon-fallback ${loaded ? 'hidden' : ''}`}>
<TypeIcon type={Number(cipher.type || 1)} />
</span>
<img
className={`list-icon ${loaded ? 'loaded' : ''}`}
src={websiteIconUrl(host)}
alt=""
loading="lazy"
referrerPolicy="no-referrer"
onLoad={() => setLoaded(true)}
onError={() => {
failedIconHosts.add(host);
setErrored(true);
}}
/>
</span>
);
}
return (