Refactor code structure for improved readability and maintainability

2026-06-20 21:00:41 +00:00 · 2026-03-27 00:08:29 +08:00
parent 89308fc8a6
commit 3e5a80e498
8 changed files with 1073 additions and 289 deletions
@@ -25,6 +25,8 @@ interface AppAuthenticatedShellProps {
 }

 export default function AppAuthenticatedShell(props: AppAuthenticatedShellProps) {
+  const routeAnimationKey = props.isImportRoute ? props.importRoute : props.location;
+
  return (
    <div className="app-page">
      <div className="app-shell">
@@ -106,7 +108,9 @@ export default function AppAuthenticatedShell(props: AppAuthenticatedShellProps)
            </Link>
          </aside>
          <main className="content">
-            <AppMainRoutes {...props.mainRoutesProps} />
+            <div key={routeAnimationKey} className="route-stage">
+              <AppMainRoutes {...props.mainRoutesProps} />
+            </div>
          </main>
        </div>

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'preact/hooks';
 import type { ComponentChildren } from 'preact';
 import { t } from '@/lib/i18n';

@@ -19,14 +20,32 @@ interface ConfirmDialogProps {
 }

 export default function ConfirmDialog(props: ConfirmDialogProps) {
-  if (!props.open) return null;
+  const [present, setPresent] = useState(props.open);
+  const [closing, setClosing] = useState(false);
+
+  useEffect(() => {
+    if (props.open) {
+      setPresent(true);
+      setClosing(false);
+      return;
+    }
+    if (!present) return;
+    setClosing(true);
+    const timer = window.setTimeout(() => {
+      setPresent(false);
+      setClosing(false);
+    }, 240);
+    return () => window.clearTimeout(timer);
+  }, [props.open, present]);
+
+  if (!present) return null;
  return (
-    <div className="dialog-mask">
+    <div className={`dialog-mask ${props.open && !closing ? 'open' : ''} ${closing ? 'closing' : ''}`}>
      <form
-        className="dialog-card"
+        className={`dialog-card ${props.open && !closing ? 'open' : ''} ${closing ? 'closing' : ''}`}
        onSubmit={(e) => {
          e.preventDefault();
-          if (props.confirmDisabled) return;
+          if (props.confirmDisabled || closing) return;
          props.onConfirm();
        }}
      >
@@ -62,6 +62,10 @@ function draftFromSend(send: Send): SendDraft {
 }

 export default function SendsPage(props: SendsPageProps) {
+  const getInitialIsMobileLayout = () =>
+    typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+      ? window.matchMedia(MOBILE_LAYOUT_QUERY).matches
+      : false;
  const [search, setSearch] = useState('');
  const [typeFilter, setTypeFilter] = useState<SendTypeFilter>('all');
  const [selectedId, setSelectedId] = useState<string | null>(null);
@@ -71,7 +75,7 @@ export default function SendsPage(props: SendsPageProps) {
  const [draft, setDraft] = useState<SendDraft | null>(null);
  const [showPassword, setShowPassword] = useState(false);
  const [selectedMap, setSelectedMap] = useState<Record<string, boolean>>({});
-  const [isMobileLayout, setIsMobileLayout] = useState(false);
+  const [isMobileLayout, setIsMobileLayout] = useState(getInitialIsMobileLayout);
  const [mobilePanel, setMobilePanel] = useState<'list' | 'detail' | 'edit'>('list');
  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
  const [autoCopyLink, setAutoCopyLink] = useState<boolean>(() => {
@@ -226,7 +230,15 @@ export default function SendsPage(props: SendsPageProps) {

  return (
    <div className={`vault-grid ${isMobileLayout ? `mobile-panel-${mobilePanel}` : ''}`}>
-      {isMobileLayout && mobileSidebarOpen && <div className="mobile-sidebar-mask" onClick={() => setMobileSidebarOpen(false)} />}
+      {isMobileLayout && (
+        <div
+          className={`mobile-sidebar-mask ${mobileSidebarOpen ? 'open' : ''}`}
+          onClick={() => {
+            if (!mobileSidebarOpen) return;
+            setMobileSidebarOpen(false);
+          }}
+        />
+      )}
      <aside className={`sidebar ${isMobileLayout ? 'mobile-sidebar-sheet' : ''} ${isMobileLayout && mobileSidebarOpen ? 'open' : ''}`}>
        {isMobileLayout && (
          <div className="mobile-sidebar-head">
@@ -310,12 +322,27 @@ export default function SendsPage(props: SendsPageProps) {
          </button>
        </div>
        <div className="list-panel">
-          {filteredSends.map((send) => (
-            <div key={send.id} className={`list-item ${selectedId === send.id ? 'active' : ''}`}>
+          {filteredSends.map((send, index) => (
+            <div
+              key={send.id}
+              className={`list-item stagger-item ${selectedId === send.id ? 'active' : ''}`}
+              style={{ animationDelay: `${Math.min(index, 10) * 26}ms` }}
+              onClick={(event) => {
+                const target = event.target as HTMLElement;
+                if (target.closest('.row-check')) return;
+                setSelectedId(send.id);
+                setIsEditing(false);
+                setIsCreating(false);
+                setDraft(null);
+                if (isMobileLayout) setMobilePanel('detail');
+                setMobileSidebarOpen(false);
+              }}
+            >
              <input
                type="checkbox"
                className="row-check"
                checked={!!selectedMap[send.id]}
+                onClick={(event) => event.stopPropagation()}
                onInput={(e) =>
                  setSelectedMap((prev) => ({
                    ...prev,
@@ -377,10 +404,11 @@ export default function SendsPage(props: SendsPageProps) {
          </div>
        )}
        {isEditing && draft && (
-          <div className="card">
-            <h3 className="detail-title">{isCreating ? t('txt_new_send') : t('txt_edit_send')}</h3>
-            {!!props.uploadingSendFileName && <div className="detail-sub">{sendUploadLabel}</div>}
-            <div className="field-grid">
+          <div key={`send-editor-${draft.id || selectedSend?.id || 'new'}-${draft.type}`} className="detail-switch-stage">
+            <div className="card stagger-item" style={{ animationDelay: '0ms' }}>
+              <h3 className="detail-title">{isCreating ? t('txt_new_send') : t('txt_edit_send')}</h3>
+              {!!props.uploadingSendFileName && <div className="detail-sub">{sendUploadLabel}</div>}
+              <div className="field-grid">
              <label className="field field-span-2">
                <span>{t('txt_name')}</span>
                <input className="input" value={draft.name} onInput={(e) => setDraft({ ...draft, name: (e.currentTarget as HTMLInputElement).value })} />
@@ -451,8 +479,8 @@ export default function SendsPage(props: SendsPageProps) {
                  <label><input type="checkbox" checked={autoCopyLink} onInput={(e) => setAutoCopyLink((e.currentTarget as HTMLInputElement).checked)} /> {t('txt_auto_copy_link_after_save')}</label>
                </div>
              </label>
-            </div>
-            <div className="detail-actions">
+              </div>
+              <div className="detail-actions">
              <button type="button" className="btn btn-primary small" disabled={busy} onClick={() => void saveDraft()}>
                <Save size={14} className="btn-icon" /> {t('txt_save')}
              </button>
@@ -470,18 +498,19 @@ export default function SendsPage(props: SendsPageProps) {
              >
                <X size={14} className="btn-icon" /> {t('txt_cancel')}
              </button>
+              </div>
            </div>
          </div>
        )}

        {!isEditing && selectedSend && (
-          <>
-            <div className="card">
+          <div key={`send-detail-${selectedSend.id}`} className="detail-switch-stage">
+            <div className="card stagger-item" style={{ animationDelay: '36ms' }}>
              <h3 className="detail-title">{selectedSend.decName || t('txt_no_name')}</h3>
              <div className="detail-sub">{Number(selectedSend.type) === 1 ? t('txt_file_send') : t('txt_text_send')}</div>
            </div>

-            <div className="card">
+            <div className="card stagger-item" style={{ animationDelay: '72ms' }}>
              <h4>{t('txt_send_details')}</h4>
              <div className="kv-line"><span>{t('txt_access_count')}</span><strong>{selectedSend.accessCount || 0}</strong></div>
              <div className="kv-line"><span>{t('txt_deletion_date')}</span><strong>{selectedSend.deletionDate || t('txt_dash')}</strong></div>
@@ -504,7 +533,7 @@ export default function SendsPage(props: SendsPageProps) {
            </div>

            {!!(selectedSend.decNotes || '').trim() && (
-              <div className="card">
+              <div className="card stagger-item" style={{ animationDelay: '108ms' }}>
                <h4>{t('txt_notes')}</h4>
                <div className="notes">{selectedSend.decNotes || ''}</div>
              </div>
@@ -523,7 +552,7 @@ export default function SendsPage(props: SendsPageProps) {
                <Trash2 size={14} className="btn-icon" /> {t('txt_delete')}
              </button>
            </div>
-          </>
+          </div>
        )}
      </section>
    </div>
@@ -61,6 +61,10 @@ interface VaultPageProps {


 export default function VaultPage(props: VaultPageProps) {
+  const getInitialIsMobileLayout = () =>
+    typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+      ? window.matchMedia(MOBILE_LAYOUT_QUERY).matches
+      : false;
  const [searchInput, setSearchInput] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  const [searchComposing, setSearchComposing] = useState(false);
@@ -97,7 +101,7 @@ export default function VaultPage(props: VaultPageProps) {
  const [repromptOpen, setRepromptOpen] = useState(false);
  const [repromptPassword, setRepromptPassword] = useState('');
  const [repromptApprovedCipherId, setRepromptApprovedCipherId] = useState<string | null>(null);
-  const [isMobileLayout, setIsMobileLayout] = useState(false);
+  const [isMobileLayout, setIsMobileLayout] = useState(getInitialIsMobileLayout);
  const [mobilePanel, setMobilePanel] = useState<'list' | 'detail' | 'edit'>('list');
  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
  const createMenuRef = useRef<HTMLDivElement | null>(null);
@@ -769,7 +773,15 @@ function folderName(id: string | null | undefined): string {
  return (
    <>
      <div className={`vault-grid ${isMobileLayout ? `mobile-panel-${mobilePanel}` : ''}`}>
-        {isMobileLayout && mobileSidebarOpen && <div className="mobile-sidebar-mask" onClick={() => setMobileSidebarOpen(false)} />}
+        {isMobileLayout && (
+          <div
+            className={`mobile-sidebar-mask ${mobileSidebarOpen ? 'open' : ''}`}
+            onClick={() => {
+              if (!mobileSidebarOpen) return;
+              setMobileSidebarOpen(false);
+            }}
+          />
+        )}
        <VaultSidebar
          folders={props.folders}
          sidebarFilter={sidebarFilter}
@@ -878,60 +890,64 @@ function folderName(id: string | null | undefined): string {
            </div>
          )}
          {isEditing && draft && (
-            <VaultEditor
-              draft={draft}
-              isCreating={isCreating}
-              busy={busy}
-              folders={props.folders}
-              selectedCipher={selectedCipher}
-              editExistingAttachments={editExistingAttachments}
-              removedAttachmentIds={removedAttachmentIds}
-              removedAttachmentCount={removedAttachmentCount}
-              attachmentQueue={attachmentQueue}
-              attachmentInputRef={attachmentInputRef}
-              localError={localError}
-              onUpdateDraft={updateDraft}
-              onSeedSshDefaults={(force) => void seedSshDefaults(force)}
-              onUpdateSshPublicKey={updateSshPublicKey}
-              onUpdateDraftLoginUri={updateDraftLoginUri}
-              onUpdateDraftLoginUriMatch={updateDraftLoginUriMatch}
-              onQueueAttachmentFiles={queueAttachmentFiles}
-              onToggleExistingAttachmentRemoval={toggleExistingAttachmentRemoval}
-              onRemoveQueuedAttachment={removeQueuedAttachment}
-              onDownloadAttachment={(cipher, attachmentId) => void props.onDownloadAttachment(cipher, attachmentId)}
-              downloadingAttachmentKey={props.downloadingAttachmentKey}
-              attachmentDownloadPercent={props.attachmentDownloadPercent}
-              uploadingAttachmentName={props.uploadingAttachmentName}
-              attachmentUploadPercent={props.attachmentUploadPercent}
-              onPatchDraftCustomField={patchDraftCustomField}
-              onUpdateDraftCustomFields={updateDraftCustomFields}
-              onOpenFieldModal={() => setFieldModalOpen(true)}
-              onSave={() => void saveDraft()}
-              onCancel={cancelEdit}
-              onDeleteSelected={() => selectedCipher && setPendingDelete(selectedCipher)}
-            />
+            <div key={`editor-${draft.id || selectedCipher?.id || 'new'}-${draft.type}`} className="detail-switch-stage">
+              <VaultEditor
+                draft={draft}
+                isCreating={isCreating}
+                busy={busy}
+                folders={props.folders}
+                selectedCipher={selectedCipher}
+                editExistingAttachments={editExistingAttachments}
+                removedAttachmentIds={removedAttachmentIds}
+                removedAttachmentCount={removedAttachmentCount}
+                attachmentQueue={attachmentQueue}
+                attachmentInputRef={attachmentInputRef}
+                localError={localError}
+                onUpdateDraft={updateDraft}
+                onSeedSshDefaults={(force) => void seedSshDefaults(force)}
+                onUpdateSshPublicKey={updateSshPublicKey}
+                onUpdateDraftLoginUri={updateDraftLoginUri}
+                onUpdateDraftLoginUriMatch={updateDraftLoginUriMatch}
+                onQueueAttachmentFiles={queueAttachmentFiles}
+                onToggleExistingAttachmentRemoval={toggleExistingAttachmentRemoval}
+                onRemoveQueuedAttachment={removeQueuedAttachment}
+                onDownloadAttachment={(cipher, attachmentId) => void props.onDownloadAttachment(cipher, attachmentId)}
+                downloadingAttachmentKey={props.downloadingAttachmentKey}
+                attachmentDownloadPercent={props.attachmentDownloadPercent}
+                uploadingAttachmentName={props.uploadingAttachmentName}
+                attachmentUploadPercent={props.attachmentUploadPercent}
+                onPatchDraftCustomField={patchDraftCustomField}
+                onUpdateDraftCustomFields={updateDraftCustomFields}
+                onOpenFieldModal={() => setFieldModalOpen(true)}
+                onSave={() => void saveDraft()}
+                onCancel={cancelEdit}
+                onDeleteSelected={() => selectedCipher && setPendingDelete(selectedCipher)}
+              />
+            </div>
          )}

          {!isEditing && selectedCipher && (
-            <VaultDetailView
-              selectedCipher={selectedCipher}
-              repromptApprovedCipherId={repromptApprovedCipherId}
-              showPassword={showPassword}
-              totpLive={totpLive}
-              passkeyCreatedAt={passkeyCreatedAt}
-              hiddenFieldVisibleMap={hiddenFieldVisibleMap}
-              folderName={folderName}
-              onOpenReprompt={() => setRepromptOpen(true)}
-              onToggleShowPassword={() => setShowPassword((value) => !value)}
-              onToggleHiddenField={(index) => setHiddenFieldVisibleMap((prev) => ({ ...prev, [index]: !prev[index] }))}
-              onDownloadAttachment={(cipher, attachmentId) => void props.onDownloadAttachment(cipher, attachmentId)}
-              downloadingAttachmentKey={props.downloadingAttachmentKey}
-              attachmentDownloadPercent={props.attachmentDownloadPercent}
-              onStartEdit={startEdit}
-              onDelete={setPendingDelete}
-              onArchive={(cipher) => setPendingArchive(cipher)}
-              onUnarchive={(cipher) => void handleUnarchiveSelected(cipher)}
-            />
+            <div key={`detail-${selectedCipher.id}`} className="detail-switch-stage">
+              <VaultDetailView
+                selectedCipher={selectedCipher}
+                repromptApprovedCipherId={repromptApprovedCipherId}
+                showPassword={showPassword}
+                totpLive={totpLive}
+                passkeyCreatedAt={passkeyCreatedAt}
+                hiddenFieldVisibleMap={hiddenFieldVisibleMap}
+                folderName={folderName}
+                onOpenReprompt={() => setRepromptOpen(true)}
+                onToggleShowPassword={() => setShowPassword((value) => !value)}
+                onToggleHiddenField={(index) => setHiddenFieldVisibleMap((prev) => ({ ...prev, [index]: !prev[index] }))}
+                onDownloadAttachment={(cipher, attachmentId) => void props.onDownloadAttachment(cipher, attachmentId)}
+                downloadingAttachmentKey={props.downloadingAttachmentKey}
+                attachmentDownloadPercent={props.attachmentDownloadPercent}
+                onStartEdit={startEdit}
+                onDelete={setPendingDelete}
+                onArchive={(cipher) => setPendingArchive(cipher)}
+                onUnarchive={(cipher) => void handleUnarchiveSelected(cipher)}
+              />
+            </div>
          )}

          {!isEditing && !selectedCipher && <div className="empty card">{t('txt_select_an_item')}</div>}
@@ -104,38 +104,11 @@ export default function VaultListPanel(props: VaultListPanelProps) {
        </button>
      </div>
      <div className="toolbar actions">
-        <button type="button" className="btn btn-danger small" disabled={!props.selectedCount || props.busy} onClick={props.onOpenBulkDelete}>
-          <Trash2 size={14} className="btn-icon" /> {props.sidebarFilter.kind === 'trash' ? t('txt_delete_permanently') : t('txt_delete_selected')}
-        </button>
        {props.sidebarFilter.kind === 'duplicates' && (
          <button type="button" className="btn btn-secondary small" disabled={!props.filteredCiphers.length || props.busy} onClick={props.onSelectDuplicates}>
            <Check size={14} className="btn-icon" /> {t('txt_select_duplicate_items')}
          </button>
        )}
-        <button type="button" className="btn btn-secondary small" disabled={!props.filteredCiphers.length} onClick={props.onSelectAll}>
-          <CheckCheck size={14} className="btn-icon" /> {t('txt_select_all')}
-        </button>
-        <div className="create-menu-wrap mobile-fab-wrap" ref={props.createMenuRef}>
-          <button
-            type="button"
-            className="btn btn-primary small mobile-fab-trigger"
-            aria-label={t('txt_add')}
-            title={t('txt_add')}
-            onClick={props.onToggleCreateMenu}
-          >
-            <Plus size={14} className="btn-icon" />
-          </button>
-          {props.createMenuOpen && (
-            <div className="create-menu">
-              {CREATE_TYPE_OPTIONS.map((option) => (
-                <button key={option.type} type="button" className="create-menu-item" onClick={() => props.onStartCreate(option.type)}>
-                  <CreateTypeIcon type={option.type} />
-                  <span>{option.label}</span>
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
        {props.selectedCount > 0 && props.sidebarFilter.kind === 'trash' && (
          <button type="button" className="btn btn-secondary small" disabled={props.busy} onClick={props.onBulkRestore}>
            <RefreshCw size={14} className="btn-icon" /> {t('txt_restore')}
@@ -161,17 +134,54 @@ export default function VaultListPanel(props: VaultListPanelProps) {
            <X size={14} className="btn-icon" /> {t('txt_cancel')}
          </button>
        )}
+        <button type="button" className="btn btn-danger small" disabled={!props.selectedCount || props.busy} onClick={props.onOpenBulkDelete}>
+          <Trash2 size={14} className="btn-icon" /> {props.sidebarFilter.kind === 'trash' ? t('txt_delete_permanently') : t('txt_delete_selected')}
+        </button>
+        <button type="button" className="btn btn-secondary small" disabled={!props.filteredCiphers.length} onClick={props.onSelectAll}>
+          <CheckCheck size={14} className="btn-icon" /> {t('txt_select_all')}
+        </button>
+        <div className="create-menu-wrap mobile-fab-wrap" ref={props.createMenuRef}>
+          <button
+            type="button"
+            className="btn btn-primary small mobile-fab-trigger"
+            aria-label={t('txt_add')}
+            title={t('txt_add')}
+            onClick={props.onToggleCreateMenu}
+          >
+            <Plus size={14} className="btn-icon" />
+          </button>
+          {props.createMenuOpen && (
+            <div className="create-menu">
+              {CREATE_TYPE_OPTIONS.map((option) => (
+                <button key={option.type} type="button" className="create-menu-item" onClick={() => props.onStartCreate(option.type)}>
+                  <CreateTypeIcon type={option.type} />
+                  <span>{option.label}</span>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
      </div>

      <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.visibleCiphers.map((cipher) => (
-              <div key={cipher.id} className={`list-item ${props.selectedCipherId === cipher.id ? 'active' : ''}`}>
+            {props.visibleCiphers.map((cipher, index) => (
+              <div
+                key={cipher.id}
+                className={`list-item stagger-item ${props.selectedCipherId === cipher.id ? 'active' : ''}`}
+                style={{ animationDelay: `${Math.min(index, 10) * 26}ms` }}
+                onClick={(event) => {
+                  const target = event.target as HTMLElement;
+                  if (target.closest('.row-check')) return;
+                  props.onSelectCipher(cipher.id);
+                }}
+              >
                <input
                  type="checkbox"
                  className="row-check"
                  checked={!!props.selectedMap[cipher.id]}
+                  onClick={(event) => event.stopPropagation()}
                  onInput={(e) => props.onToggleSelected(cipher.id, (e.currentTarget as HTMLInputElement).checked)}
                />
                <button type="button" className="row-main" onClick={() => props.onSelectCipher(cipher.id)}>