feat: remove drag-and-drop functionality for TOTP and website rows; update styles and translations for improved user experience

webapp/src/components/TotpCodesPage.tsx

@@ -1,22 +1,5 @@
-import type { JSX } from 'preact';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
-import { Clipboard, Globe, GripVertical } from 'lucide-preact';
-import {
-  closestCenter,
-  DndContext,
-  type DragEndEvent,
-  PointerSensor,
-  TouchSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  rectSortingStrategy,
-  SortableContext,
-  useSortable,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
+import { Clipboard, Globe } from 'lucide-preact';
 import { copyTextToClipboard as copyTextWithFeedback } from '@/lib/clipboard';
 import { calcTotpNow } from '@/lib/crypto';
 import { t } from '@/lib/i18n';
@@ -34,7 +17,6 @@ interface TotpCodesPageProps {
 const TOTP_PERIOD_SECONDS = 30;
 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;
 function getTotpTimeState(): { windowId: number; remain: number } {
   const epoch = Math.floor(Date.now() / 1000);
@@ -55,39 +37,18 @@ function TotpListIcon({ cipher }: { cipher: Cipher }) {
   return <WebsiteIcon cipher={cipher} fallback={<Globe size={18} />} />;
 }
 
-interface SortableTotpRowProps {
+interface TotpRowProps {
   cipher: Cipher;
   live: { code: string; remain: number } | null;
   onCopy: (value: string) => void;
 }
 
-function SortableTotpRow(props: SortableTotpRowProps) {
-  const { attributes, listeners, setActivatorNodeRef, setNodeRef, transform, transition, isDragging } = useSortable({
-    id: props.cipher.id,
-  });
-  const dragButtonAttributes = attributes as JSX.HTMLAttributes<HTMLButtonElement>;
-
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-  };
-
+function TotpRow(props: TotpRowProps) {
   const name = props.cipher.decName || props.cipher.name || t('txt_no_name');
   const username = props.cipher.login?.decUsername || '';
 
   return (
-    <div ref={setNodeRef} style={style} className={`totp-code-row${isDragging ? ' is-dragging' : ''}`}>
-      <button
-        type="button"
-        ref={setActivatorNodeRef}
-        className="btn btn-secondary small totp-drag-btn"
-        title={t('txt_drag_to_reorder')}
-        aria-label={t('txt_drag_to_reorder')}
-        {...dragButtonAttributes}
-        {...listeners}
-      >
-        <GripVertical size={14} className="btn-icon" />
-      </button>
+    <div className="totp-code-row">
       <div className="totp-code-info">
         <div className="list-icon-wrap">
           <TotpListIcon cipher={props.cipher} />
@@ -135,30 +96,7 @@ export default function TotpCodesPage(props: TotpCodesPageProps) {
   const [totpCodes, setTotpCodes] = useState<Record<string, string | null>>({});
   const [remainingSeconds, setRemainingSeconds] = useState(() => getTotpTimeState().remain);
   const [columnCount, setColumnCount] = useState(1);
-  const [orderedIds, setOrderedIds] = useState<string[]>(() => {
-    if (typeof window === 'undefined') return [];
-    try {
-      const parsed = JSON.parse(String(window.localStorage.getItem(TOTP_ORDER_STORAGE_KEY) || '[]'));
-      return Array.isArray(parsed) ? parsed.map((id) => String(id || '').trim()).filter(Boolean) : [];
-    } catch {
-      return [];
-    }
-  });
   const listRef = useRef<HTMLDivElement | null>(null);
-  const hasLoadedTotpItemsRef = useRef(false);
-  const sensors = useSensors(
-    useSensor(PointerSensor, {
-      activationConstraint: {
-        distance: 6,
-      },
-    }),
-    useSensor(TouchSensor, {
-      activationConstraint: {
-        delay: 120,
-        tolerance: 8,
-      },
-    }),
-  );
 
   async function copyToClipboard(value: string): Promise<void> {
     await copyTextWithFeedback(value, { successMessage: t('txt_code_copied') });
@@ -169,7 +107,7 @@ export default function TotpCodesPage(props: TotpCodesPageProps) {
     []
   );
 
-  const baseTotpItems = useMemo(
+  const totpItems = useMemo(
     () =>
       props.ciphers
         .filter((cipher) => isCipherVisibleInNormalVault(cipher) && !!cipher.login?.decTotp)
@@ -181,46 +119,6 @@ export default function TotpCodesPage(props: TotpCodesPageProps) {
     [props.ciphers, nameCollator]
   );
 
-  const totpItems = useMemo(() => {
-    if (!baseTotpItems.length) return [];
-    const orderMap = new Map(orderedIds.map((id, index) => [id, index]));
-    return [...baseTotpItems].sort((a, b) => {
-      const orderA = orderMap.get(a.id);
-      const orderB = orderMap.get(b.id);
-      if (orderA != null && orderB != null) return orderA - orderB;
-      if (orderA != null) return -1;
-      if (orderB != null) return 1;
-      const nameA = (a.decName || a.name || '').trim();
-      const nameB = (b.decName || b.name || '').trim();
-      return nameCollator.compare(nameA, nameB);
-    });
-  }, [baseTotpItems, orderedIds, nameCollator]);
-
-  const sortableTotpItems = useMemo(() => totpItems.map((cipher) => cipher.id), [totpItems]);
-
-  useEffect(() => {
-    if (!baseTotpItems.length) return;
-    hasLoadedTotpItemsRef.current = true;
-    const validIds = new Set(baseTotpItems.map((cipher) => cipher.id));
-    setOrderedIds((prev) => {
-      const filtered = prev.filter((id) => validIds.has(id));
-      const missing = baseTotpItems.map((cipher) => cipher.id).filter((id) => !filtered.includes(id));
-      const next = [...filtered, ...missing];
-      if (next.length === prev.length && next.every((id, index) => id === prev[index])) return prev;
-      return next;
-    });
-  }, [baseTotpItems]);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') return;
-    if (!hasLoadedTotpItemsRef.current) return;
-    try {
-      window.localStorage.setItem(TOTP_ORDER_STORAGE_KEY, JSON.stringify(orderedIds));
-    } catch {
-      // ignore storage write failures
-    }
-  }, [orderedIds]);
-
   useEffect(() => {
     if (!totpItems.length) {
       setTotpCodes({});
@@ -307,16 +205,6 @@ export default function TotpCodesPage(props: TotpCodesPageProps) {
     return () => observer.disconnect();
   }, []);
 
-  const handleDragEnd = (event: DragEndEvent) => {
-    const activeId = String(event.active.id);
-    const overId = event.over ? String(event.over.id) : null;
-    if (!overId || activeId === overId) return;
-    const fromIndex = orderedIds.indexOf(activeId);
-    const toIndex = orderedIds.indexOf(overId);
-    if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) return;
-    setOrderedIds((prev) => arrayMove(prev, fromIndex, toIndex));
-  };
-
   return (
     <div className="totp-codes-page">
       <div className="card">
@@ -330,18 +218,14 @@ export default function TotpCodesPage(props: TotpCodesPageProps) {
         >
           {!totpItems.length && props.loading && <LoadingState lines={6} />}
           {!totpItems.length && !props.loading && <div className="empty">{t('txt_no_verification_codes')}</div>}
-          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-            <SortableContext items={sortableTotpItems} strategy={rectSortingStrategy}>
-              {totpItems.map((cipher) => (
-                <SortableTotpRow
-                  key={cipher.id}
-                  cipher={cipher}
-                  live={totpCodes[cipher.id] ? { code: totpCodes[cipher.id] || '', remain: remainingSeconds } : null}
-                  onCopy={(value) => void copyToClipboard(value)}
-                />
-              ))}
-            </SortableContext>
-          </DndContext>
+          {totpItems.map((cipher) => (
+            <TotpRow
+              key={cipher.id}
+              cipher={cipher}
+              live={totpCodes[cipher.id] ? { code: totpCodes[cipher.id] || '', remain: remainingSeconds } : null}
+              onCopy={(value) => void copyToClipboard(value)}
+            />
+          ))}
         </div>
       </div>
     </div>