feat: enhance mobile layout and accessibility across components

- Added mobile layout support in AdminPage, SecurityDevicesPage, SendsPage, and VaultPage. - Implemented responsive design adjustments including mobile sidebar and panel transitions. - Updated table structures to include data labels for better accessibility. - Introduced new translations for mobile-specific UI elements. - Enhanced styles for mobile views, including button adjustments and sidebar behaviors.
2026-06-20 21:00:41 +00:00 · 2026-03-08 17:07:21 +08:00
parent 0e1152a0b9
commit 68583821fe
7 changed files with 1139 additions and 153 deletions
@@ -56,11 +56,11 @@ export default function AdminPage(props: AdminPageProps) {
          <tbody>
            {props.users.map((user) => (
              <tr key={user.id}>
-                <td>{user.email}</td>
-                <td>{user.name || t('txt_dash')}</td>
-                <td>{roleText(user.role)}</td>
-                <td>{statusText(user.status)}</td>
-                <td>
+                <td data-label={t('txt_email')}>{user.email}</td>
+                <td data-label={t('txt_name')}>{user.name || t('txt_dash')}</td>
+                <td data-label={t('txt_role')}>{roleText(user.role)}</td>
+                <td data-label={t('txt_status')}>{statusText(user.status)}</td>
+                <td data-label={t('txt_actions')}>
                  <div className="actions">
                    <button
                      type="button"
@@ -126,10 +126,10 @@ export default function AdminPage(props: AdminPageProps) {
          <tbody>
            {pagedInvites.map((invite) => (
              <tr key={invite.code}>
-                <td>{invite.code}</td>
-                <td>{statusText(invite.status)}</td>
-                <td>{formatExpiresAt(invite.expiresAt)}</td>
-                <td>
+                <td data-label={t('txt_code')}>{invite.code}</td>
+                <td data-label={t('txt_status')}>{statusText(invite.status)}</td>
+                <td data-label={t('txt_expires_at')}>{formatExpiresAt(invite.expiresAt)}</td>
+                <td data-label={t('txt_actions')}>
                  <div className="actions invite-row-actions">
                    <button
                      type="button"
@@ -79,14 +79,14 @@ export default function SecurityDevicesPage(props: SecurityDevicesPageProps) {
          <tbody>
            {props.devices.map((device) => (
              <tr key={device.identifier}>
-                <td>
+                <td data-label={t('txt_device')}>
                  <div>{device.name || t('txt_unknown_device')}</div>
                  <div className="muted-inline">{device.identifier}</div>
                </td>
-                <td>{mapDeviceTypeName(device.type)}</td>
-                <td>{formatDateTime(device.creationDate)}</td>
-                <td>{formatDateTime(device.revisionDate)}</td>
-                <td>
+                <td data-label={t('txt_type')}>{mapDeviceTypeName(device.type)}</td>
+                <td data-label={t('txt_added')}>{formatDateTime(device.creationDate)}</td>
+                <td data-label={t('txt_last_seen')}>{formatDateTime(device.revisionDate)}</td>
+                <td data-label={t('txt_trusted_until')}>
                  {device.trusted ? (
                    <div className="trusted-cell">
                      <Clock3 size={13} />
@@ -96,7 +96,7 @@ export default function SecurityDevicesPage(props: SecurityDevicesPageProps) {
                    <span className="muted-inline">{t('txt_not_trusted')}</span>
                  )}
                </td>
-                <td>
+                <td data-label={t('txt_actions')}>
                  <div className="actions">
                    <button
                      type="button"
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'preact/hooks';
-import { CheckCheck, Copy, Eye, EyeOff, File, FileText, LayoutGrid, Pencil, Plus, RefreshCw, Save, Send as SendIcon, Trash2, X } from 'lucide-preact';
+import { CheckCheck, ChevronLeft, Copy, Eye, EyeOff, File, FileText, LayoutGrid, Pencil, Plus, RefreshCw, Save, Send as SendIcon, Trash2, X } from 'lucide-preact';
 import type { Send, SendDraft } from '@/lib/types';
 import { t } from '@/lib/i18n';

@@ -16,6 +16,7 @@ interface SendsPageProps {

 type SendTypeFilter = 'all' | 'text' | 'file';
 const AUTO_COPY_KEY = 'nodewarden.send.auto_copy_link.v1';
+const MOBILE_LAYOUT_QUERY = '(max-width: 900px)';

 function daysFromNow(iso: string | null | undefined, fallback: number): string {
  if (!iso) return String(fallback);
@@ -67,6 +68,9 @@ 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 [mobilePanel, setMobilePanel] = useState<'list' | 'detail' | 'edit'>('list');
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
  const [autoCopyLink, setAutoCopyLink] = useState<boolean>(() => {
    try {
      return localStorage.getItem(AUTO_COPY_KEY) === '1';
@@ -75,6 +79,27 @@ export default function SendsPage(props: SendsPageProps) {
    }
  });

+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
+    const media = window.matchMedia(MOBILE_LAYOUT_QUERY);
+    const sync = () => setIsMobileLayout(media.matches);
+    sync();
+    if (typeof media.addEventListener === 'function') {
+      media.addEventListener('change', sync);
+      return () => media.removeEventListener('change', sync);
+    }
+    media.addListener(sync);
+    return () => media.removeListener(sync);
+  }, []);
+
+  useEffect(() => {
+    const onToggleSidebar = () => {
+      setMobileSidebarOpen((open) => !open);
+    };
+    window.addEventListener('nodewarden:toggle-sidebar', onToggleSidebar);
+    return () => window.removeEventListener('nodewarden:toggle-sidebar', onToggleSidebar);
+  }, []);
+
  useEffect(() => {
    try {
      localStorage.setItem(AUTO_COPY_KEY, autoCopyLink ? '1' : '0');
@@ -83,6 +108,19 @@ export default function SendsPage(props: SendsPageProps) {
    }
  }, [autoCopyLink]);

+  useEffect(() => {
+    if (!isMobileLayout) {
+      setMobilePanel('list');
+      setMobileSidebarOpen(false);
+      return;
+    }
+    if (isEditing) {
+      setMobilePanel('edit');
+    } else if (!selectedId) {
+      setMobilePanel('list');
+    }
+  }, [isMobileLayout, isEditing, selectedId]);
+
  const filteredSends = useMemo(() => {
    const q = search.trim().toLowerCase();
    return props.sends.filter((send) => {
@@ -141,6 +179,7 @@ export default function SendsPage(props: SendsPageProps) {
      setIsCreating(false);
      setDraft(null);
      setShowPassword(false);
+      if (isMobileLayout) setMobilePanel('detail');
    } finally {
      setBusy(false);
    }
@@ -153,6 +192,7 @@ export default function SendsPage(props: SendsPageProps) {
      if (selectedId === send.id) setSelectedId(null);
      setIsEditing(false);
      setDraft(null);
+      if (isMobileLayout) setMobilePanel('list');
    } finally {
      setBusy(false);
    }
@@ -176,8 +216,17 @@ export default function SendsPage(props: SendsPageProps) {
  }

  return (
-    <div className="vault-grid">
-      <aside className="sidebar">
+    <div className={`vault-grid ${isMobileLayout ? `mobile-panel-${mobilePanel}` : ''}`}>
+      {isMobileLayout && mobileSidebarOpen && <div className="mobile-sidebar-mask" onClick={() => setMobileSidebarOpen(false)} />}
+      <aside className={`sidebar ${isMobileLayout ? 'mobile-sidebar-sheet' : ''} ${isMobileLayout && mobileSidebarOpen ? 'open' : ''}`}>
+        {isMobileLayout && (
+          <div className="mobile-sidebar-head">
+            <div className="mobile-sidebar-title">{t('txt_all_sends')}</div>
+            <button type="button" className="mobile-sidebar-close" onClick={() => setMobileSidebarOpen(false)} aria-label={t('txt_close')}>
+              <X size={16} />
+            </button>
+          </div>
+        )}
        <div className="sidebar-block">
          <div className="sidebar-title">{t('txt_all_sends')}</div>
          <button type="button" className={`tree-btn ${typeFilter === 'all' ? 'active' : ''}`} onClick={() => setTypeFilter('all')}>
@@ -206,7 +255,7 @@ export default function SendsPage(props: SendsPageProps) {
            value={search}
            onInput={(e) => setSearch((e.currentTarget as HTMLInputElement).value)}
          />
-          <button type="button" className="btn btn-secondary small" disabled={busy || props.loading} onClick={() => void props.onRefresh()}>
+          <button type="button" className="btn btn-secondary small list-icon-btn" disabled={busy || props.loading} onClick={() => void props.onRefresh()}>
            <RefreshCw size={14} className="btn-icon" /> {t('txt_refresh')}
          </button>
        </div>
@@ -235,16 +284,20 @@ export default function SendsPage(props: SendsPageProps) {
          )}
          <button
            type="button"
-            className="btn btn-primary small"
+            className="btn btn-primary small mobile-fab-trigger"
            disabled={busy}
+            aria-label={t('txt_add')}
+            title={t('txt_add')}
            onClick={() => {
              setIsCreating(true);
              setIsEditing(true);
              setDraft(buildDefaultDraft());
              setShowPassword(false);
+              if (isMobileLayout) setMobilePanel('edit');
+              setMobileSidebarOpen(false);
            }}
          >
-            <Plus size={14} className="btn-icon" /> {t('txt_add')}
+            <Plus size={14} className="btn-icon" />
          </button>
        </div>
        <div className="list-panel">
@@ -269,6 +322,8 @@ export default function SendsPage(props: SendsPageProps) {
                  setIsEditing(false);
                  setIsCreating(false);
                  setDraft(null);
+                  if (isMobileLayout) setMobilePanel('detail');
+                  setMobileSidebarOpen(false);
                }}
              >
                <div className="list-icon-wrap">
@@ -289,7 +344,29 @@ export default function SendsPage(props: SendsPageProps) {
        </div>
      </section>

-      <section className="detail-col">
+      <section className={`detail-col ${isMobileLayout ? 'mobile-detail-sheet' : ''} ${isMobileLayout && mobilePanel !== 'list' ? 'open' : ''}`}>
+        {isMobileLayout && mobilePanel !== 'list' && (
+          <div className="mobile-panel-head">
+            <button
+              type="button"
+              className="btn btn-secondary small mobile-panel-back"
+              onClick={() => {
+                if (isEditing) {
+                  setIsEditing(false);
+                  setIsCreating(false);
+                  setDraft(null);
+                  setShowPassword(false);
+                  setMobilePanel(selectedSend ? 'detail' : 'list');
+                } else {
+                  setMobilePanel('list');
+                }
+              }}
+            >
+              <ChevronLeft size={14} className="btn-icon" />
+              {t('txt_back')}
+            </button>
+          </div>
+        )}
        {isEditing && draft && (
          <div className="card">
            <h3 className="detail-title">{isCreating ? t('txt_new_send') : t('txt_edit_send')}</h3>
@@ -369,7 +446,18 @@ export default function SendsPage(props: SendsPageProps) {
              <button type="button" className="btn btn-primary small" disabled={busy} onClick={() => void saveDraft()}>
                <Save size={14} className="btn-icon" /> {t('txt_save')}
              </button>
-              <button type="button" className="btn btn-secondary small" disabled={busy} onClick={() => { setIsEditing(false); setIsCreating(false); setDraft(null); setShowPassword(false); }}>
+              <button
+                type="button"
+                className="btn btn-secondary small"
+                disabled={busy}
+                onClick={() => {
+                  setIsEditing(false);
+                  setIsCreating(false);
+                  setDraft(null);
+                  setShowPassword(false);
+                  if (isMobileLayout) setMobilePanel(selectedSend ? 'detail' : 'list');
+                }}
+              >
                <X size={14} className="btn-icon" /> {t('txt_cancel')}
              </button>
            </div>
@@ -6,6 +6,7 @@ import {
  ArrowUpDown,
  Check,
  CheckCheck,
+  ChevronLeft,
  Clipboard,
  CreditCard,
  Download,
@@ -76,6 +77,7 @@ const CREATE_TYPE_OPTIONS: TypeOption[] = [
 ];

 const VAULT_SORT_STORAGE_KEY = 'nodewarden.vault.sort.v1';
+const MOBILE_LAYOUT_QUERY = '(max-width: 900px)';
 const VAULT_SORT_OPTIONS: Array<{ value: VaultSortMode; label: string }> = [
  { value: 'edited', label: t('txt_sort_last_edited') },
  { value: 'created', label: t('txt_sort_created') },
@@ -398,12 +400,36 @@ 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 [mobilePanel, setMobilePanel] = useState<'list' | 'detail' | 'edit'>('list');
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
  const createMenuRef = useRef<HTMLDivElement | null>(null);
  const sortMenuRef = useRef<HTMLDivElement | null>(null);
  const attachmentInputRef = useRef<HTMLInputElement | null>(null);
  const sshSeedTicketRef = useRef(0);
  const sshFingerprintTicketRef = useRef(0);

+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;
+    const media = window.matchMedia(MOBILE_LAYOUT_QUERY);
+    const sync = () => setIsMobileLayout(media.matches);
+    sync();
+    if (typeof media.addEventListener === 'function') {
+      media.addEventListener('change', sync);
+      return () => media.removeEventListener('change', sync);
+    }
+    media.addListener(sync);
+    return () => media.removeListener(sync);
+  }, []);
+
+  useEffect(() => {
+    const onToggleSidebar = () => {
+      setMobileSidebarOpen((open) => !open);
+    };
+    window.addEventListener('nodewarden:toggle-sidebar', onToggleSidebar);
+    return () => window.removeEventListener('nodewarden:toggle-sidebar', onToggleSidebar);
+  }, []);
+
  useEffect(() => {
    const onQuickAdd = () => {
      startCreate(1);
@@ -475,6 +501,19 @@ export default function VaultPage(props: VaultPageProps) {
    setRepromptOpen(false);
  }, [selectedCipherId]);

+  useEffect(() => {
+    if (!isMobileLayout) {
+      setMobilePanel('list');
+      setMobileSidebarOpen(false);
+      return;
+    }
+    if (isEditing) {
+      setMobilePanel('edit');
+    } else if (!selectedCipherId) {
+      setMobilePanel('list');
+    }
+  }, [isMobileLayout, isEditing, selectedCipherId]);
+
  useEffect(() => {
    if (searchComposing) return;
    const timer = window.setTimeout(() => setSearchQuery(searchInput.trim().toLowerCase()), 90);
@@ -613,6 +652,8 @@ function folderName(id: string | null | undefined): string {
    setLocalError('');
    setAttachmentQueue([]);
    setRemovedAttachmentIds({});
+    if (isMobileLayout) setMobilePanel('edit');
+    setMobileSidebarOpen(false);
    if (type === 5) void seedSshDefaults();
  }

@@ -625,15 +666,19 @@ function folderName(id: string | null | undefined): string {
    setLocalError('');
    setAttachmentQueue([]);
    setRemovedAttachmentIds({});
+    if (isMobileLayout) setMobilePanel('edit');
+    setMobileSidebarOpen(false);
  }

  function cancelEdit(): void {
+    const returnToDetail = isMobileLayout && !isCreating && !!selectedCipher;
    setDraft(null);
    setIsEditing(false);
    setIsCreating(false);
    setLocalError('');
    setAttachmentQueue([]);
    setRemovedAttachmentIds({});
+    if (isMobileLayout) setMobilePanel(returnToDetail ? 'detail' : 'list');
  }

  function updateDraft(patch: Partial<VaultDraft>): void {
@@ -755,6 +800,7 @@ function folderName(id: string | null | undefined): string {
      setLocalError('');
      setAttachmentQueue([]);
      setRemovedAttachmentIds({});
+      if (isMobileLayout) setMobilePanel('detail');
    } finally {
      setBusy(false);
    }
@@ -767,6 +813,7 @@ function folderName(id: string | null | undefined): string {
      await props.onDelete(pendingDelete);
      setPendingDelete(null);
      cancelEdit();
+      if (isMobileLayout) setMobilePanel('list');
    } finally {
      setBusy(false);
    }
@@ -862,8 +909,17 @@ function folderName(id: string | null | undefined): string {

  return (
    <>
-      <div className="vault-grid">
-        <aside className="sidebar">
+      <div className={`vault-grid ${isMobileLayout ? `mobile-panel-${mobilePanel}` : ''}`}>
+        {isMobileLayout && mobileSidebarOpen && <div className="mobile-sidebar-mask" onClick={() => setMobileSidebarOpen(false)} />}
+        <aside className={`sidebar ${isMobileLayout ? 'mobile-sidebar-sheet' : ''} ${isMobileLayout && mobileSidebarOpen ? 'open' : ''}`}>
+          {isMobileLayout && (
+            <div className="mobile-sidebar-head">
+              <div className="mobile-sidebar-title">{t('txt_folders')}</div>
+              <button type="button" className="mobile-sidebar-close" onClick={() => setMobileSidebarOpen(false)} aria-label={t('txt_close')}>
+                <X size={16} />
+              </button>
+            </div>
+          )}
          <div className="sidebar-block">
            <button type="button" className={`tree-btn ${sidebarFilter.kind === 'all' ? 'active' : ''}`} onClick={() => setSidebarFilter({ kind: 'all' })}>
              <LayoutGrid size={14} className="tree-icon" /> <span className="tree-label">{t('txt_all_items')}</span>
@@ -978,7 +1034,7 @@ function folderName(id: string | null | undefined): string {
                </div>
              )}
            </div>
-            <button type="button" className="btn btn-secondary small" disabled={busy || props.loading} onClick={() => void syncVault()}>
+            <button type="button" className="btn btn-secondary small list-icon-btn" disabled={busy || props.loading} onClick={() => void syncVault()}>
              <RefreshCw size={14} className="btn-icon" /> {t('txt_sync_vault')}
            </button>
          </div>
@@ -998,9 +1054,15 @@ function folderName(id: string | null | undefined): string {
            >
              <CheckCheck size={14} className="btn-icon" /> {t('txt_select_all')}
            </button>
-            <div className="create-menu-wrap" ref={createMenuRef}>
-              <button type="button" className="btn btn-primary small" onClick={() => setCreateMenuOpen((x) => !x)}>
-                <Plus size={14} className="btn-icon" /> {t('txt_add')}
+            <div className="create-menu-wrap mobile-fab-wrap" ref={createMenuRef}>
+              <button
+                type="button"
+                className="btn btn-primary small mobile-fab-trigger"
+                aria-label={t('txt_add')}
+                title={t('txt_add')}
+                onClick={() => setCreateMenuOpen((x) => !x)}
+              >
+                <Plus size={14} className="btn-icon" />
              </button>
              {createMenuOpen && (
                <div className="create-menu">
@@ -1056,6 +1118,8 @@ function folderName(id: string | null | undefined): string {
                    }
                    setSelectedCipherId(cipher.id);
                    setRepromptApprovedCipherId(null);
+                    if (isMobileLayout) setMobilePanel('detail');
+                    setMobileSidebarOpen(false);
                  }}
                >
                  <div className="list-icon-wrap">
@@ -1072,7 +1136,22 @@ function folderName(id: string | null | undefined): string {
          </div>
        </section>

-        <section className="detail-col">
+        <section className={`detail-col ${isMobileLayout ? 'mobile-detail-sheet' : ''} ${isMobileLayout && mobilePanel !== 'list' ? 'open' : ''}`}>
+          {isMobileLayout && mobilePanel !== 'list' && (
+            <div className="mobile-panel-head">
+              <button
+                type="button"
+                className="btn btn-secondary small mobile-panel-back"
+                onClick={() => {
+                  if (isEditing) cancelEdit();
+                  else setMobilePanel('list');
+                }}
+              >
+                <ChevronLeft size={14} className="btn-icon" />
+                {t('txt_back')}
+              </button>
+            </div>
+          )}
          {isEditing && draft && (
            <>
              <div className="card">