feat: enhance backup process with lease management and attachment deletion

- Implemented a backup runner lease mechanism to prevent concurrent backup executions.
- Added `deleteAllAttachmentsForCiphers` function to delete attachments for multiple ciphers efficiently.
- Introduced `bulkDeleteAttachmentsByIds` method in storage to handle batch deletion of attachments.
- Updated backup execution logic to utilize the new lease management and ensure timely updates during the backup process.
- Refactored cipher deletion to handle attachments more effectively.
- Improved website icon loading with a dedicated caching mechanism for better performance.
- Added new index on `ciphers` table for `folder_id` to optimize queries related to folder management.
- Enhanced response handling for CORS policy to allow credentials for specific origins.

webapp/src/components/TotpCodesPage.tsx

@@ -22,7 +22,8 @@ import { calcTotpNow } from '@/lib/crypto';
 import { t } from '@/lib/i18n';
 import type { Cipher } from '@/lib/types';
 import LoadingState from '@/components/LoadingState';
-import { hostFromUri, isCipherVisibleInNormalVault, websiteIconUrl } from '@/components/vault/vault-page-helpers';
+import WebsiteIcon from '@/components/vault/WebsiteIcon';
+import { isCipherVisibleInNormalVault } from '@/components/vault/vault-page-helpers';
 
 interface TotpCodesPageProps {
   ciphers: Cipher[];
@@ -35,10 +36,6 @@ const TOTP_RING_RADIUS = 14;
 const TOTP_RING_CIRCUMFERENCE = 2 * Math.PI * TOTP_RING_RADIUS;
 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);
   return {
@@ -54,115 +51,8 @@ function formatTotp(code: string): string {
   return `${code.slice(0, 3)} ${code.slice(3, 6)}`;
 }
 
-function firstCipherUri(cipher: Cipher): string {
-  const uris = cipher.login?.uris || [];
-  for (const uri of uris) {
-    const raw = uri.decUri || uri.uri || '';
-    if (raw.trim()) return raw.trim();
-  }
-  return '';
-}
-
 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(() => {
-    if (!host) return true;
-    if (loadedIconHosts.has(host)) return true;
-    return false;
-  });
-  const markIconError = () => {
-    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;
-      if (fallback) fallback.style.display = 'none';
-    }
-  };
-  const handleImgRef = (img: HTMLImageElement | null) => {
-    if (!img || !img.complete) return;
-    if (img.naturalWidth > 0) hideFallback();
-  };
-
-  useEffect(() => {
-    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]);
-
-  useEffect(() => {
-    if (!host || errored || shouldLoad) return;
-    const node = iconStackRef.current;
-    if (!node) return;
-    if (typeof IntersectionObserver !== 'function') {
-      setShouldLoad(true);
-      return;
-    }
-
-    let cancelled = false;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (!entry.isIntersecting && entry.intersectionRatio <= 0) continue;
-          if (!cancelled) setShouldLoad(true);
-          observer.disconnect();
-          break;
-        }
-      },
-      { rootMargin: ICON_LOAD_ROOT_MARGIN }
-    );
-
-    observer.observe(node);
-    return () => {
-      cancelled = true;
-      observer.disconnect();
-    };
-  }, [host, errored, shouldLoad]);
-
-  if (host && !errored) {
-    return (
-      <span className="list-icon-stack" ref={iconStackRef}>
-        <span className="list-icon-fallback">
-          <Globe size={18} />
-        </span>
-        {shouldLoad && (
-          <img
-            className="list-icon loaded"
-            src={websiteIconUrl(host)}
-            alt=""
-            loading="lazy"
-            decoding="async"
-            referrerPolicy="no-referrer"
-            ref={handleImgRef}
-            onLoad={hideFallback}
-            onError={markIconError}
-          />
-        )}
-      </span>
-    );
-  }
-  return (
-    <span className="list-icon-fallback">
-      <Globe size={18} />
-    </span>
-  );
+  return <WebsiteIcon cipher={cipher} fallback={<Globe size={18} />} />;
 }
 
 interface SortableTotpRowProps {