mirror of
https://github.com/shuaiplus/nodewarden.git
synced 2026-06-20 21:00:41 +00:00
refactor: clean up vault components by removing unused drag-and-drop functionality and optimizing icon loading logic
This commit is contained in:
shuaiplus
@@ -36,6 +36,7 @@ const TOTP_ORDER_STORAGE_KEY = 'nodewarden.totp-order';
|
||||
const TOTP_REFRESH_BATCH_SIZE = 16;
|
||||
const ICON_LOAD_ROOT_MARGIN = '180px 0px';
|
||||
const failedIconHosts = new Set<string>();
|
||||
const loadedIconHosts = new Set<string>();
|
||||
|
||||
function getTotpTimeState(): { windowId: number; remain: number } {
|
||||
const epoch = Math.floor(Date.now() / 1000);
|
||||
@@ -75,12 +76,20 @@ function TotpListIcon({ cipher }: { cipher: Cipher }) {
|
||||
const host = useMemo(() => hostFromUri(firstCipherUri(cipher)), [cipher]);
|
||||
const iconStackRef = useRef<HTMLSpanElement | null>(null);
|
||||
const [errored, setErrored] = useState(() => (host ? failedIconHosts.has(host) : false));
|
||||
const [shouldLoad, setShouldLoad] = useState(() => !host);
|
||||
const [shouldLoad, setShouldLoad] = useState(() => {
|
||||
if (!host) return true;
|
||||
if (loadedIconHosts.has(host)) return true;
|
||||
return false;
|
||||
});
|
||||
const markIconError = () => {
|
||||
if (host) failedIconHosts.add(host);
|
||||
if (host) {
|
||||
failedIconHosts.add(host);
|
||||
loadedIconHosts.delete(host);
|
||||
}
|
||||
setErrored(true);
|
||||
};
|
||||
const hideFallback = () => {
|
||||
if (host) loadedIconHosts.add(host);
|
||||
const stack = iconStackRef.current;
|
||||
if (stack) {
|
||||
const fallback = stack.querySelector('.list-icon-fallback') as HTMLElement | null;
|
||||
@@ -93,8 +102,16 @@ function TotpListIcon({ cipher }: { cipher: Cipher }) {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setErrored(host ? failedIconHosts.has(host) : false);
|
||||
setShouldLoad(!host);
|
||||
if (!host) {
|
||||
setErrored(false);
|
||||
setShouldLoad(true);
|
||||
} else if (failedIconHosts.has(host)) {
|
||||
setErrored(true);
|
||||
setShouldLoad(false);
|
||||
} else {
|
||||
setErrored(false);
|
||||
setShouldLoad(loadedIconHosts.has(host));
|
||||
}
|
||||
const fallback = iconStackRef.current?.querySelector('.list-icon-fallback') as HTMLElement | null;
|
||||
if (fallback) fallback.style.display = '';
|
||||
}, [host]);
|
||||
|
||||
@@ -8,7 +8,6 @@ import {
|
||||
MOBILE_LAYOUT_QUERY,
|
||||
VAULT_LIST_OVERSCAN,
|
||||
VAULT_LIST_ROW_HEIGHT,
|
||||
VAULT_ORDER_STORAGE_KEY,
|
||||
FOLDER_SORT_STORAGE_KEY,
|
||||
VAULT_SORT_STORAGE_KEY,
|
||||
cipherTypeKey,
|
||||
@@ -73,15 +72,6 @@ export default function VaultPage(props: VaultPageProps) {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [searchComposing, setSearchComposing] = useState(false);
|
||||
const [sortMode, setSortMode] = useState<VaultSortMode>('edited');
|
||||
const [vaultOrderedIds, setVaultOrderedIds] = useState<string[]>(() => {
|
||||
if (typeof localStorage === 'undefined') return [];
|
||||
try {
|
||||
const parsed = JSON.parse(String(localStorage.getItem(VAULT_ORDER_STORAGE_KEY) || '[]'));
|
||||
return Array.isArray(parsed) ? parsed.map((id) => String(id || '').trim()).filter(Boolean) : [];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
});
|
||||
const [sortMenuOpen, setSortMenuOpen] = useState(false);
|
||||
const [folderSortMode, setFolderSortMode] = useState<VaultSortMode>('name');
|
||||
const [folderSortMenuOpen, setFolderSortMenuOpen] = useState(false);
|
||||
@@ -128,7 +118,7 @@ export default function VaultPage(props: VaultPageProps) {
|
||||
const attachmentInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const listPanelRef = useRef<HTMLDivElement | null>(null);
|
||||
const mobileSidebarToggleKeyRef = useRef(props.mobileSidebarToggleKey);
|
||||
const suppressNextSortScrollRef = useRef(false);
|
||||
|
||||
const sshSeedTicketRef = useRef(0);
|
||||
const sshFingerprintTicketRef = useRef(0);
|
||||
const listScrollBucketRef = useRef(0);
|
||||
@@ -165,7 +155,7 @@ export default function VaultPage(props: VaultPageProps) {
|
||||
useEffect(() => {
|
||||
try {
|
||||
const saved = String(localStorage.getItem(VAULT_SORT_STORAGE_KEY) || '').trim() as VaultSortMode;
|
||||
if (saved === 'manual' || saved === 'edited' || saved === 'created' || saved === 'name') {
|
||||
if (saved === 'edited' || saved === 'created' || saved === 'name') {
|
||||
setSortMode(saved);
|
||||
}
|
||||
} catch {
|
||||
@@ -181,36 +171,6 @@ export default function VaultPage(props: VaultPageProps) {
|
||||
}
|
||||
}, [sortMode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.loading) return;
|
||||
const cipherById = new Map(props.ciphers.map((cipher) => [cipher.id, cipher]));
|
||||
const validIds = new Set(cipherById.keys());
|
||||
setVaultOrderedIds((prev) => {
|
||||
const filtered = prev.filter((id) => validIds.has(id));
|
||||
const existing = new Set(filtered);
|
||||
const missing = props.ciphers
|
||||
.filter((cipher) => !existing.has(cipher.id))
|
||||
.sort((a, b) => {
|
||||
const diff = creationTimeValue(b) - creationTimeValue(a);
|
||||
if (diff !== 0) return diff;
|
||||
return String(b.id || '').localeCompare(String(a.id || ''));
|
||||
})
|
||||
.map((cipher) => cipher.id);
|
||||
const next = [...missing, ...filtered];
|
||||
if (next.length === prev.length && next.every((id, index) => id === prev[index])) return prev;
|
||||
return next;
|
||||
});
|
||||
}, [props.ciphers, props.loading]);
|
||||
|
||||
useEffect(() => {
|
||||
if (props.loading) return;
|
||||
try {
|
||||
localStorage.setItem(VAULT_ORDER_STORAGE_KEY, JSON.stringify(vaultOrderedIds));
|
||||
} catch {
|
||||
// ignore storage write failures
|
||||
}
|
||||
}, [vaultOrderedIds, props.loading]);
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const saved = String(localStorage.getItem(FOLDER_SORT_STORAGE_KEY) || '').trim() as VaultSortMode;
|
||||
@@ -408,20 +368,10 @@ export default function VaultPage(props: VaultPageProps) {
|
||||
return !!meta?.searchText.includes(searchQuery);
|
||||
});
|
||||
|
||||
const orderMap = sortMode === 'manual' ? new Map(vaultOrderedIds.map((id, index) => [id, index])) : null;
|
||||
next.sort((a, b) => {
|
||||
const metaA = cipherMetaById.get(a.id);
|
||||
const metaB = cipherMetaById.get(b.id);
|
||||
if (sortMode === 'manual' && orderMap) {
|
||||
const orderA = orderMap.get(a.id);
|
||||
const orderB = orderMap.get(b.id);
|
||||
if (orderA != null && orderB != null) {
|
||||
const diff = orderA - orderB;
|
||||
if (diff !== 0) return diff;
|
||||
}
|
||||
if (orderA != null) return -1;
|
||||
if (orderB != null) return 1;
|
||||
} else if (sortMode === 'edited') {
|
||||
if (sortMode === 'edited') {
|
||||
const diff = (metaB?.sortTime || 0) - (metaA?.sortTime || 0);
|
||||
if (diff !== 0) return diff;
|
||||
} else if (sortMode === 'created') {
|
||||
@@ -436,7 +386,7 @@ export default function VaultPage(props: VaultPageProps) {
|
||||
});
|
||||
|
||||
return next;
|
||||
}, [props.ciphers, cipherMetaById, sidebarFilter, searchQuery, sortMode, duplicateSignatureInfo, vaultOrderedIds, nameCollator]);
|
||||
}, [props.ciphers, cipherMetaById, sidebarFilter, searchQuery, sortMode, duplicateSignatureInfo, nameCollator]);
|
||||
|
||||
const filteredCipherIds = useMemo(() => {
|
||||
const ids = new Set<string>();
|
||||
@@ -451,10 +401,6 @@ export default function VaultPage(props: VaultPageProps) {
|
||||
}, [sidebarFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
if (suppressNextSortScrollRef.current) {
|
||||
suppressNextSortScrollRef.current = false;
|
||||
return;
|
||||
}
|
||||
setListScrollTop(0);
|
||||
listScrollBucketRef.current = 0;
|
||||
listPanelRef.current?.scrollTo({ top: 0 });
|
||||
@@ -466,40 +412,6 @@ export default function VaultPage(props: VaultPageProps) {
|
||||
}
|
||||
}, [sidebarFilter.kind, sortMode]);
|
||||
|
||||
const canReorderVaultList =
|
||||
!searchQuery &&
|
||||
sidebarFilter.kind !== 'duplicates' &&
|
||||
sidebarFilter.kind !== 'trash' &&
|
||||
sidebarFilter.kind !== 'archive' &&
|
||||
!props.loading &&
|
||||
!busy;
|
||||
|
||||
const handleReorderVaultCipher = useCallback((activeId: string, overId: string): void => {
|
||||
if (!canReorderVaultList || activeId === overId) return;
|
||||
const currentIds = filteredCiphers.map((cipher) => cipher.id);
|
||||
const fromIndex = currentIds.indexOf(activeId);
|
||||
const toIndex = currentIds.indexOf(overId);
|
||||
if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) return;
|
||||
const nextVisibleIds = [...currentIds];
|
||||
const [moved] = nextVisibleIds.splice(fromIndex, 1);
|
||||
nextVisibleIds.splice(toIndex, 0, moved);
|
||||
|
||||
setVaultOrderedIds((prev) => {
|
||||
const validIds = new Set(props.ciphers.map((cipher) => cipher.id));
|
||||
const nextVisibleSet = new Set(nextVisibleIds);
|
||||
const existingHiddenIds = prev.filter((id) => validIds.has(id) && !nextVisibleSet.has(id));
|
||||
const fallbackHiddenIds = props.ciphers
|
||||
.map((cipher) => cipher.id)
|
||||
.filter((id) => validIds.has(id) && !nextVisibleSet.has(id) && !existingHiddenIds.includes(id));
|
||||
const next = [...nextVisibleIds, ...existingHiddenIds, ...fallbackHiddenIds];
|
||||
return next;
|
||||
});
|
||||
if (sortMode !== 'manual') {
|
||||
suppressNextSortScrollRef.current = true;
|
||||
setSortMode('manual');
|
||||
}
|
||||
}, [canReorderVaultList, filteredCiphers, props.ciphers, sortMode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isCreating) return;
|
||||
if (!filteredCiphers.length) {
|
||||
@@ -1121,7 +1033,6 @@ const folderName = useCallback((id: string | null | undefined): string => {
|
||||
sidebarFilter={sidebarFilter}
|
||||
isMobileLayout={isMobileLayout}
|
||||
mobileFabVisible={!isMobileLayout || mobilePanel === 'list'}
|
||||
canReorder={canReorderVaultList}
|
||||
createMenuOpen={createMenuOpen}
|
||||
createMenuRef={createMenuRef}
|
||||
sortMenuRef={sortMenuRef}
|
||||
@@ -1143,7 +1054,6 @@ const folderName = useCallback((id: string | null | undefined): string => {
|
||||
onBulkUnarchive={handleBulkUnarchive}
|
||||
onOpenMove={handleOpenMove}
|
||||
onClearSelection={handleClearSelection}
|
||||
onReorderCipher={handleReorderVaultCipher}
|
||||
onScroll={handleListScroll}
|
||||
onToggleSelected={handleToggleSelected}
|
||||
onSelectCipher={handleSelectCipher}
|
||||
|
||||
@@ -1,27 +1,7 @@
|
||||
import type { JSX, RefObject } from 'preact';
|
||||
import type { RefObject } from 'preact';
|
||||
import { memo } from 'preact/compat';
|
||||
import { createPortal } from 'preact/compat';
|
||||
import { useMemo, useState } from 'preact/hooks';
|
||||
import { Archive, ArrowUpDown, Check, CheckCheck, FolderInput, GripVertical, Plus, RefreshCw, RotateCcw, Trash2, X } from 'lucide-preact';
|
||||
import {
|
||||
closestCenter,
|
||||
DndContext,
|
||||
DragOverlay,
|
||||
type DragEndEvent,
|
||||
type DragStartEvent,
|
||||
PointerSensor,
|
||||
TouchSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
} from '@dnd-kit/core';
|
||||
import {
|
||||
defaultAnimateLayoutChanges,
|
||||
type AnimateLayoutChanges,
|
||||
SortableContext,
|
||||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import { Archive, ArrowUpDown, Check, CheckCheck, FolderInput, Plus, RefreshCw, RotateCcw, Trash2, X } from 'lucide-preact';
|
||||
import type { Cipher } from '@/lib/types';
|
||||
import { t } from '@/lib/i18n';
|
||||
import {
|
||||
@@ -56,7 +36,6 @@ interface VaultListPanelProps {
|
||||
sidebarFilter: SidebarFilter;
|
||||
isMobileLayout: boolean;
|
||||
mobileFabVisible: boolean;
|
||||
canReorder: boolean;
|
||||
createMenuOpen: boolean;
|
||||
createMenuRef: RefObject<HTMLDivElement>;
|
||||
sortMenuRef: RefObject<HTMLDivElement>;
|
||||
@@ -78,47 +57,39 @@ interface VaultListPanelProps {
|
||||
onBulkUnarchive: () => void;
|
||||
onOpenMove: () => void;
|
||||
onClearSelection: () => void;
|
||||
onReorderCipher: (activeId: string, overId: string) => void;
|
||||
onScroll: (top: number) => void;
|
||||
onToggleSelected: (cipherId: string, checked: boolean) => void;
|
||||
onSelectCipher: (cipherId: string) => void;
|
||||
listSubtitle: (cipher: Cipher) => string;
|
||||
}
|
||||
|
||||
interface SortableCipherListItemProps {
|
||||
interface CipherListItemProps {
|
||||
cipher: Cipher;
|
||||
selected: boolean;
|
||||
checked: boolean;
|
||||
canReorder: boolean;
|
||||
subtitle: string;
|
||||
onToggleSelected: (cipherId: string, checked: boolean) => void;
|
||||
onSelectCipher: (cipherId: string) => void;
|
||||
}
|
||||
|
||||
interface CipherListItemBodyProps {
|
||||
cipher: Cipher;
|
||||
checked: boolean;
|
||||
canReorder: boolean;
|
||||
subtitle: string;
|
||||
dragButtonRef?: (element: HTMLButtonElement | null) => void;
|
||||
dragButtonAttributes?: JSX.HTMLAttributes<HTMLButtonElement>;
|
||||
dragButtonListeners?: Record<string, unknown>;
|
||||
onToggleSelected?: (cipherId: string, checked: boolean) => void;
|
||||
onSelectCipher?: (cipherId: string) => void;
|
||||
}
|
||||
|
||||
const CipherListItemBody = memo(function CipherListItemBody(props: CipherListItemBodyProps) {
|
||||
const CipherListItem = memo(function CipherListItem(props: CipherListItemProps) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`list-item ${props.selected ? 'active' : ''}`}
|
||||
onClick={(event) => {
|
||||
const target = event.target as HTMLElement;
|
||||
if (target.closest('.row-check')) return;
|
||||
props.onSelectCipher(props.cipher.id);
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="row-check"
|
||||
checked={props.checked}
|
||||
disabled={!props.onToggleSelected}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onInput={(e) => props.onToggleSelected?.(props.cipher.id, (e.currentTarget as HTMLInputElement).checked)}
|
||||
onInput={(e) => props.onToggleSelected(props.cipher.id, (e.currentTarget as HTMLInputElement).checked)}
|
||||
/>
|
||||
<button type="button" className="row-main" disabled={!props.onSelectCipher} onClick={() => props.onSelectCipher?.(props.cipher.id)}>
|
||||
<button type="button" className="row-main" onClick={() => props.onSelectCipher(props.cipher.id)}>
|
||||
<div className="list-icon-wrap">
|
||||
<VaultListIcon cipher={props.cipher} />
|
||||
</div>
|
||||
@@ -129,126 +100,11 @@ const CipherListItemBody = memo(function CipherListItemBody(props: CipherListIte
|
||||
<span className="list-sub" title={props.subtitle}>{props.subtitle}</span>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
ref={props.dragButtonRef}
|
||||
className="btn btn-secondary small cipher-drag-btn"
|
||||
title={t('txt_drag_to_reorder')}
|
||||
aria-label={t('txt_drag_to_reorder')}
|
||||
disabled={!props.canReorder}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
{...props.dragButtonAttributes}
|
||||
{...props.dragButtonListeners}
|
||||
>
|
||||
<GripVertical size={14} className="btn-icon" />
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
const animateLayoutChanges: AnimateLayoutChanges = (args) =>
|
||||
args.isSorting || args.wasDragging ? defaultAnimateLayoutChanges(args) : false;
|
||||
|
||||
const SortableCipherListItem = memo(function SortableCipherListItem(props: SortableCipherListItemProps) {
|
||||
const { attributes, listeners, setActivatorNodeRef, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: props.cipher.id,
|
||||
disabled: !props.canReorder,
|
||||
animateLayoutChanges,
|
||||
});
|
||||
const dragButtonAttributes = attributes as JSX.HTMLAttributes<HTMLButtonElement>;
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={`list-item ${props.selected ? 'active' : ''}${isDragging ? ' is-dragging is-sorting-source' : ''}`}
|
||||
onClick={(event) => {
|
||||
const target = event.target as HTMLElement;
|
||||
if (target.closest('.row-check') || target.closest('.cipher-drag-btn')) return;
|
||||
props.onSelectCipher(props.cipher.id);
|
||||
}}
|
||||
>
|
||||
<CipherListItemBody
|
||||
cipher={props.cipher}
|
||||
checked={props.checked}
|
||||
canReorder={props.canReorder}
|
||||
subtitle={props.subtitle}
|
||||
dragButtonRef={setActivatorNodeRef}
|
||||
dragButtonAttributes={dragButtonAttributes}
|
||||
dragButtonListeners={listeners}
|
||||
onToggleSelected={props.onToggleSelected}
|
||||
onSelectCipher={props.onSelectCipher}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const PlainCipherListItem = memo(function PlainCipherListItem(props: SortableCipherListItemProps) {
|
||||
return (
|
||||
<div
|
||||
className={`list-item ${props.selected ? 'active' : ''}`}
|
||||
onClick={(event) => {
|
||||
const target = event.target as HTMLElement;
|
||||
if (target.closest('.row-check') || target.closest('.cipher-drag-btn')) return;
|
||||
props.onSelectCipher(props.cipher.id);
|
||||
}}
|
||||
>
|
||||
<CipherListItemBody
|
||||
cipher={props.cipher}
|
||||
checked={props.checked}
|
||||
canReorder={false}
|
||||
subtitle={props.subtitle}
|
||||
onToggleSelected={props.onToggleSelected}
|
||||
onSelectCipher={props.onSelectCipher}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default function VaultListPanel(props: VaultListPanelProps) {
|
||||
const [activeDragId, setActiveDragId] = useState('');
|
||||
const [activeDragWidth, setActiveDragWidth] = useState<number | null>(null);
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: {
|
||||
distance: 6,
|
||||
},
|
||||
}),
|
||||
useSensor(TouchSensor, {
|
||||
activationConstraint: {
|
||||
delay: 120,
|
||||
tolerance: 8,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
const sortableItems = useMemo(() => props.visibleCiphers.map((cipher) => cipher.id), [props.visibleCiphers]);
|
||||
const renderedCiphers = props.visibleCiphers;
|
||||
const activeDragCipher = activeDragId ? props.filteredCiphers.find((cipher) => cipher.id === activeDragId) || null : null;
|
||||
|
||||
const handleDragStart = (event: DragStartEvent) => {
|
||||
setActiveDragId(String(event.active.id));
|
||||
setActiveDragWidth(event.active.rect.current.initial?.width || null);
|
||||
};
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const activeId = String(event.active.id);
|
||||
const overId = event.over ? String(event.over.id) : '';
|
||||
setActiveDragId('');
|
||||
setActiveDragWidth(null);
|
||||
if (!overId || activeId === overId) return;
|
||||
props.onReorderCipher(activeId, overId);
|
||||
};
|
||||
|
||||
const handleDragCancel = () => {
|
||||
setActiveDragId('');
|
||||
setActiveDragWidth(null);
|
||||
};
|
||||
|
||||
const createMenu = (
|
||||
<div className="create-menu-wrap mobile-fab-wrap" ref={props.createMenuRef}>
|
||||
<button
|
||||
@@ -273,22 +129,6 @@ export default function VaultListPanel(props: VaultListPanelProps) {
|
||||
</div>
|
||||
);
|
||||
|
||||
const listItems = renderedCiphers.map((cipher) => {
|
||||
const ItemComponent = props.canReorder ? SortableCipherListItem : PlainCipherListItem;
|
||||
return (
|
||||
<ItemComponent
|
||||
key={cipher.id}
|
||||
cipher={cipher}
|
||||
selected={props.selectedCipherId === cipher.id}
|
||||
checked={!!props.selectedMap[cipher.id]}
|
||||
canReorder={props.canReorder}
|
||||
subtitle={props.listSubtitle(cipher)}
|
||||
onToggleSelected={props.onToggleSelected}
|
||||
onSelectCipher={props.onSelectCipher}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<section className="list-col">
|
||||
<div className="list-head">
|
||||
@@ -396,25 +236,17 @@ export default function VaultListPanel(props: VaultListPanelProps) {
|
||||
<div className="list-panel" ref={props.listPanelRef} onScroll={(event) => props.onScroll((event.currentTarget as HTMLDivElement).scrollTop)}>
|
||||
{!!props.filteredCiphers.length && (
|
||||
<div style={{ paddingTop: `${props.virtualRange.padTop}px`, paddingBottom: `${props.virtualRange.padBottom}px` }}>
|
||||
{props.canReorder ? (
|
||||
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragStart={handleDragStart} onDragEnd={handleDragEnd} onDragCancel={handleDragCancel}>
|
||||
<SortableContext items={sortableItems} strategy={verticalListSortingStrategy}>
|
||||
{listItems}
|
||||
</SortableContext>
|
||||
<DragOverlay adjustScale={false}>
|
||||
{activeDragCipher ? (
|
||||
<div className="list-item cipher-drag-overlay" style={activeDragWidth ? { width: `${activeDragWidth}px` } : undefined}>
|
||||
<CipherListItemBody
|
||||
cipher={activeDragCipher}
|
||||
checked={!!props.selectedMap[activeDragCipher.id]}
|
||||
canReorder={true}
|
||||
subtitle={props.listSubtitle(activeDragCipher)}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
) : listItems}
|
||||
{props.visibleCiphers.map((cipher) => (
|
||||
<CipherListItem
|
||||
key={cipher.id}
|
||||
cipher={cipher}
|
||||
selected={props.selectedCipherId === cipher.id}
|
||||
checked={!!props.selectedMap[cipher.id]}
|
||||
subtitle={props.listSubtitle(cipher)}
|
||||
onToggleSelected={props.onToggleSelected}
|
||||
onSelectCipher={props.onSelectCipher}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{!props.filteredCiphers.length && <div className="empty">{t('txt_no_items')}</div>}
|
||||
|
||||
@@ -12,7 +12,7 @@ import { t } from '@/lib/i18n';
|
||||
import type { Cipher, CipherAttachment, CustomFieldType, VaultDraft, VaultDraftField, VaultDraftLoginUri } from '@/lib/types';
|
||||
|
||||
export type TypeFilter = 'login' | 'card' | 'identity' | 'note' | 'ssh';
|
||||
export type VaultSortMode = 'manual' | 'edited' | 'created' | 'name';
|
||||
export type VaultSortMode = 'edited' | 'created' | 'name';
|
||||
export type SidebarFilter =
|
||||
| { kind: 'all' }
|
||||
| { kind: 'favorite' }
|
||||
@@ -36,18 +36,16 @@ export const CREATE_TYPE_OPTIONS: TypeOption[] = [
|
||||
];
|
||||
|
||||
export const VAULT_SORT_STORAGE_KEY = 'nodewarden.vault.sort.v1';
|
||||
export const VAULT_ORDER_STORAGE_KEY = 'nodewarden.vault-order.v1';
|
||||
export const FOLDER_SORT_STORAGE_KEY = 'nodewarden.folder-sort.v1';
|
||||
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 }> = [
|
||||
{ value: 'manual', label: t('txt_sort_manual') },
|
||||
{ value: 'edited', label: t('txt_sort_last_edited') },
|
||||
{ value: 'created', label: t('txt_sort_created') },
|
||||
{ value: 'name', label: t('txt_sort_name') },
|
||||
];
|
||||
export const FOLDER_SORT_OPTIONS: Array<{ value: Exclude<VaultSortMode, 'manual'>; label: string }> = [
|
||||
export const FOLDER_SORT_OPTIONS: Array<{ value: VaultSortMode; label: string }> = [
|
||||
{ value: 'edited', label: t('txt_sort_last_edited') },
|
||||
{ value: 'created', label: t('txt_sort_created') },
|
||||
{ value: 'name', label: t('txt_sort_name') },
|
||||
@@ -436,18 +434,27 @@ export function firstPasskeyCreationTime(cipher: Cipher | null): string | null {
|
||||
}
|
||||
|
||||
const failedIconHosts = new Set<string>();
|
||||
const loadedIconHosts = new Set<string>();
|
||||
const ICON_LOAD_ROOT_MARGIN = '180px 0px';
|
||||
|
||||
export function VaultListIcon({ cipher }: { cipher: Cipher }) {
|
||||
const host = useMemo(() => hostFromUri(firstCipherUri(cipher)), [cipher]);
|
||||
const iconStackRef = useRef<HTMLSpanElement | null>(null);
|
||||
const [errored, setErrored] = useState(() => (host ? failedIconHosts.has(host) : false));
|
||||
const [shouldLoad, setShouldLoad] = useState(() => !host);
|
||||
const [shouldLoad, setShouldLoad] = useState(() => {
|
||||
if (!host) return true;
|
||||
if (loadedIconHosts.has(host)) return true;
|
||||
return false;
|
||||
});
|
||||
const markIconError = () => {
|
||||
if (host) failedIconHosts.add(host);
|
||||
if (host) {
|
||||
failedIconHosts.add(host);
|
||||
loadedIconHosts.delete(host);
|
||||
}
|
||||
setErrored(true);
|
||||
};
|
||||
const hideFallback = () => {
|
||||
if (host) loadedIconHosts.add(host);
|
||||
const stack = iconStackRef.current;
|
||||
if (stack) {
|
||||
const fallback = stack.querySelector('.list-icon-fallback') as HTMLElement | null;
|
||||
@@ -460,9 +467,16 @@ export function VaultListIcon({ cipher }: { cipher: Cipher }) {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setErrored(host ? failedIconHosts.has(host) : false);
|
||||
setShouldLoad(!host);
|
||||
// Reset fallback visibility so it shows while loading the new icon
|
||||
if (!host) {
|
||||
setErrored(false);
|
||||
setShouldLoad(true);
|
||||
} else if (failedIconHosts.has(host)) {
|
||||
setErrored(true);
|
||||
setShouldLoad(false);
|
||||
} else {
|
||||
setErrored(false);
|
||||
setShouldLoad(loadedIconHosts.has(host));
|
||||
}
|
||||
const fallback = iconStackRef.current?.querySelector('.list-icon-fallback') as HTMLElement | null;
|
||||
if (fallback) fallback.style.display = '';
|
||||
}, [host]);
|
||||
|
||||
@@ -653,7 +653,7 @@ const messages: Record<Locale, Record<string, string>> = {
|
||||
txt_clear_search: "Clear search",
|
||||
txt_clear_search_esc: "Clear search (Esc)",
|
||||
txt_sort: "Sort",
|
||||
txt_sort_manual: "Custom",
|
||||
|
||||
txt_sort_last_edited: "Modified",
|
||||
txt_sort_created: "Created",
|
||||
txt_sort_name: "A-Z",
|
||||
@@ -1413,7 +1413,7 @@ const zhCNOverrides: Record<string, string> = {
|
||||
txt_security_code: '安全码',
|
||||
txt_security_code_cvv: '安全码 (CVV)',
|
||||
txt_sort: '排序',
|
||||
txt_sort_manual: '自定义',
|
||||
|
||||
txt_sort_last_edited: '最近修改',
|
||||
txt_sort_created: '最近创建',
|
||||
txt_sort_name: 'A-Z',
|
||||
|
||||
@@ -354,31 +354,6 @@
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.list-item.is-dragging {
|
||||
@apply z-[2];
|
||||
border-color: rgba(37, 99, 235, 0.3);
|
||||
background: color-mix(in srgb, var(--panel) 88%, white 12%);
|
||||
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
|
||||
}
|
||||
|
||||
.list-item.is-sorting-source {
|
||||
opacity: 0.28;
|
||||
}
|
||||
|
||||
.cipher-drag-overlay {
|
||||
@apply mb-0;
|
||||
cursor: grabbing;
|
||||
border-color: rgba(37, 99, 235, 0.34);
|
||||
background: color-mix(in srgb, var(--panel) 92%, white 8%);
|
||||
box-shadow: 0 20px 42px rgba(15, 23, 42, 0.18);
|
||||
}
|
||||
|
||||
.cipher-drag-overlay .row-main,
|
||||
.cipher-drag-overlay .cipher-drag-btn,
|
||||
.cipher-drag-overlay .row-check {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.row-check {
|
||||
@apply relative z-[2] h-4 w-4 cursor-pointer;
|
||||
}
|
||||
@@ -394,42 +369,6 @@
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.cipher-drag-btn {
|
||||
@apply relative z-[2] h-[34px] w-6 min-w-6 cursor-grab self-center overflow-visible rounded-[10px] p-0 opacity-[0.82];
|
||||
color: var(--muted);
|
||||
touch-action: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.cipher-drag-btn:hover {
|
||||
color: var(--primary-strong);
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cipher-drag-btn:active {
|
||||
cursor: grabbing;
|
||||
border-color: transparent;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.cipher-drag-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.cipher-drag-btn::before {
|
||||
content: '';
|
||||
@apply absolute -inset-2.5 rounded-xl;
|
||||
}
|
||||
|
||||
.list-icon-wrap {
|
||||
@apply grid h-6 w-6 shrink-0 place-items-center;
|
||||
transition: transform 240ms var(--ease-out-soft), filter 240ms var(--ease-out-soft);
|
||||
|
||||
Reference in New Issue
Block a user