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/vault/WebsiteIcon.tsx

@@ -0,0 +1,123 @@
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import type { ComponentChildren } from 'preact';
+import { Globe } from 'lucide-preact';
+import type { Cipher } from '@/lib/types';
+import {
+  getWebsiteIconStatus,
+  markWebsiteIconErrored,
+  markWebsiteIconLoaded,
+  preloadWebsiteIcon,
+  subscribeWebsiteIconStatus,
+} from '@/lib/website-icon-cache';
+
+const ICON_LOAD_ROOT_MARGIN = '180px 0px';
+
+interface WebsiteIconProps {
+  cipher: Cipher;
+  fallback?: ComponentChildren;
+}
+
+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 hostFromUri(uri: string): string {
+  if (!uri.trim()) return '';
+  try {
+    const normalized = /^https?:\/\//i.test(uri) ? uri : `https://${uri}`;
+    return new URL(normalized).hostname || '';
+  } catch {
+    return '';
+  }
+}
+
+function websiteIconUrl(host: string): string {
+  return `/icons/${encodeURIComponent(host)}/icon.png?fallback=404`;
+}
+
+export default function WebsiteIcon(props: WebsiteIconProps) {
+  const host = useMemo(() => hostFromUri(firstCipherUri(props.cipher)), [props.cipher]);
+  const src = host ? websiteIconUrl(host) : '';
+  const nodeRef = useRef<HTMLSpanElement | null>(null);
+  const [shouldLoad, setShouldLoad] = useState(() => (host ? getWebsiteIconStatus(host) === 'loaded' : true));
+  const [status, setStatus] = useState(() => (host ? getWebsiteIconStatus(host) : 'idle'));
+
+  useEffect(() => {
+    if (!host) {
+      setShouldLoad(true);
+      setStatus('idle');
+      return;
+    }
+    const nextStatus = getWebsiteIconStatus(host);
+    setShouldLoad(nextStatus === 'loaded');
+    setStatus(nextStatus);
+    return subscribeWebsiteIconStatus(host, setStatus);
+  }, [host]);
+
+  useEffect(() => {
+    if (!host || shouldLoad || status === 'loaded' || status === 'error') return;
+    const node = nodeRef.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, shouldLoad, status]);
+
+  useEffect(() => {
+    if (!host || !src || !shouldLoad || status === 'loaded' || status === 'error') return;
+    let disposed = false;
+    void preloadWebsiteIcon(host, src).then((nextStatus) => {
+      if (!disposed) setStatus(nextStatus);
+    });
+    return () => {
+      disposed = true;
+    };
+  }, [host, src, shouldLoad, status]);
+
+  if (!host || status === 'error') {
+    return <span className="list-icon-fallback">{props.fallback ?? <Globe size={18} />}</span>;
+  }
+
+  return (
+    <span className="list-icon-stack" ref={nodeRef}>
+      {status !== 'loaded' && <span className="list-icon-fallback">{props.fallback ?? <Globe size={18} />}</span>}
+      {status === 'loaded' && (
+        <img
+          className="list-icon loaded"
+          src={src}
+          alt=""
+          loading="lazy"
+          decoding="async"
+          referrerPolicy="no-referrer"
+          onLoad={() => markWebsiteIconLoaded(host)}
+          onError={() => markWebsiteIconErrored(host)}
+        />
+      )}
+    </span>
+  );
+}