Drive UX: grid click-to-open, responsive default view, download cue; unlock stuck self-update

- Grid/mosaic: a plain click now OPENS the file (like clicking the name in list view); modifiers
  select, long-press / tap-in-selection toggles. Double-click still opens.
- Default view by screen size when nothing is saved: mosaic on small screens, list on large ones
  (the choice is still persisted in localStorage, as is sort).
- Download cue: a small animated pill rises from the bottom-left when a download starts — useful
  feedback on mobile/PWA where downloads go silently to the tray. Honors prefers-reduced-motion.
- Self-update: a 'running' status older than 10 min is treated as STUCK, so it no longer locks
  the panel forever. The admin sees a 'previous update looks stuck' banner with a Relaunch button
  (and POST /update accepts a retry over a stale status). Lets you test the fixed update flow.

Author: softpython2884

apps/api/src/routes/admin.ts

@@ -17,6 +17,7 @@ import {
   commitsBehind,
   getLocalVersion,
   getRemoteVersion,
+  isUpdateStuck,
   readUpdateStatus,
   startUpdate,
 } from '../services/version.js';
@@ -159,6 +160,8 @@ export const adminRoutes: FastifyPluginAsync = async (app) => {
     const base = {
       current: local,
       status,
+      // True when a "running" status is actually stuck (so the UI can offer a relaunch).
+      stuck: isUpdateStuck(status),
       selfUpdateEnabled: app.ctx.env.SELF_UPDATE_ENABLED,
       repo: app.ctx.env.GITHUB_REPO,
       branch: app.ctx.env.UPDATE_BRANCH,

apps/api/src/services/version.ts

@@ -162,11 +162,24 @@ export interface StartUpdateResult {
   error?: string;
 }
 
+// A real update never takes this long; a "running" status older than this is stuck (e.g. an old
+// build that was killed before the reparent fix) and must not lock out future updates forever.
+const STALE_RUNNING_MS = 10 * 60 * 1000;
+
+/** True when the status is "running" but so old it's clearly stuck, not actually in progress. */
+export function isUpdateStuck(status: UpdateStatus): boolean {
+  return status.state === 'running' && status.startedAt !== null && Date.now() - Date.parse(status.startedAt) > STALE_RUNNING_MS;
+}
+
 /** Spawn the detached self-update script. It survives the PM2 reload it triggers. */
 export function startUpdate(env: Env): StartUpdateResult {
   if (!env.SELF_UPDATE_ENABLED) return { ok: false, error: 'Self-update is disabled on this instance.' };
   if (!repoRoot) return { ok: false, error: 'This deployment is not a git checkout; update it manually.' };
-  if (readUpdateStatus().state === 'running') return { ok: false, error: 'An update is already running.' };
+  const current = readUpdateStatus();
+  // A genuinely in-progress update blocks a second one; a stuck/stale one does not.
+  if (current.state === 'running' && !isUpdateStuck(current)) {
+    return { ok: false, error: 'An update is already running.' };
+  }
 
   const script = join(repoRoot, 'scripts', 'self-update.sh');
   if (!existsSync(script)) return { ok: false, error: 'Update script not found (scripts/self-update.sh).' };

apps/web/src/app/(app)/admin/UpdatePanel.tsx

@@ -36,6 +36,7 @@ interface UpdateStatus {
 interface VersionInfo {
   current: LocalVersion;
   status: UpdateStatus;
+  stuck?: boolean;
   selfUpdateEnabled: boolean;
   repo: string;
   branch: string;
@@ -126,7 +127,9 @@ export function UpdatePanel() {
   }
 
   const { current, status, remote, updateAvailable, behindBy, selfUpdateEnabled } = info;
-  const running = status.state === 'running';
+  // A stuck "running" status (e.g. a previous update killed mid-flight) must not lock the panel.
+  const stuck = !!info.stuck;
+  const running = status.state === 'running' && !stuck;
 
   return (
     <section className="card space-y-4">
@@ -171,6 +174,18 @@ export function UpdatePanel() {
           <Loader2 size={15} className="animate-spin" /> {status.message ?? t('admin.updateRunning')}
         </div>
       )}
+      {stuck && (
+        <div className="flex flex-wrap items-center gap-3 rounded-lg border border-red-500/20 bg-red-500/[0.06] px-3 py-2 text-sm text-red-200">
+          <span className="flex items-center gap-2">
+            <AlertTriangle size={15} /> {t('admin.updateStuck')}
+          </span>
+          {selfUpdateEnabled && (
+            <button className="btn-primary ml-auto px-2.5 py-1 text-xs" onClick={runUpdate} disabled={busy !== null}>
+              <Download size={14} /> {t('admin.updateRelaunch')}
+            </button>
+          )}
+        </div>
+      )}
       {!running && status.state === 'success' && (
         <div className="flex items-center gap-2 rounded-lg border border-emerald-500/20 bg-emerald-500/[0.06] px-3 py-2 text-sm text-emerald-200">
           <CheckCircle2 size={15} /> {status.message ?? t('admin.updateSuccess')}

apps/web/src/app/(app)/drive/page.tsx

@@ -68,6 +68,7 @@ import {
   randomSalt,
 } from '@/lib/zk';
 import { fileVisual } from '@/lib/fileType';
+import { signalDownload } from '@/lib/downloadFx';
 import { FileViewer, type ViewerSource } from '@/components/FileViewer';
 import { confirm, prompt, choose, toast } from '@/components/ui/overlays';
 import { DropOverlay } from '@/components/drive/DropOverlay';
@@ -149,11 +150,13 @@ export default function EspacesPage() {
   const [passInput, setPassInput] = useState('');
   const [passError, setPassError] = useState<string | null>(null);
 
-  // Restore persisted view/sort once on mount.
+  // Restore persisted view/sort once on mount. With no saved choice, default by screen size:
+  // mosaic (grid) on small screens, list on large ones.
   useEffect(() => {
     try {
       const v = localStorage.getItem('ocl_view');
       if (v === 'grid' || v === 'list') setView(v);
+      else setView(window.matchMedia('(max-width: 640px)').matches ? 'grid' : 'list');
       const s = localStorage.getItem('ocl_sort');
       if (s) {
         const parsed = JSON.parse(s) as Sort;
@@ -565,6 +568,7 @@ export default function EspacesPage() {
     a.download = name;
     a.click();
     URL.revokeObjectURL(url);
+    signalDownload(name);
   }
 
   function zkName(f: ZkFile) {
@@ -703,6 +707,21 @@ export default function EspacesPage() {
     e.stopPropagation();
     openEntry(entry);
   }
+  // Grid/mosaic cards have no separate name target, so a plain click OPENS (like clicking the
+  // name in list view); modifiers select, long-press / tap-in-selection toggles.
+  function onCardClick(e: React.MouseEvent, entry: Entry) {
+    if (Date.now() - pressHandledAt.current < 700) return; // click synthesized after a long-press
+    if (pointerType.current === 'touch' && selected.size > 0) {
+      toggleKey(entry.key);
+      setAnchorKey(entry.key);
+      return;
+    }
+    if (e.metaKey || e.ctrlKey || e.shiftKey) {
+      onEntryClick(e, entry);
+      return;
+    }
+    openEntry(entry);
+  }
   function selectAll() {
     setSelected(new Set(entries.map((e) => e.key)));
   }
@@ -857,6 +876,7 @@ export default function EspacesPage() {
       a.href = api.url(`/files/${it.file.id}/download`);
       a.download = it.file.name;
       a.click();
+      signalDownload(it.file.name);
     } else if (it.kind === 'zk') {
       const blob = await decryptZkBlob(it.zk);
       if (blob) saveBlob(blob, zkName(it.zk));
@@ -1450,7 +1470,7 @@ export default function EspacesPage() {
               iconNode={cardIcon(e, isZk)}
               name={e.name}
               sub={e.kind === 'folder' ? undefined : formatBytes(e.size)}
-              onClick={(ev) => onEntryClick(ev, e)}
+              onClick={(ev) => onCardClick(ev, e)}
               onDoubleClick={() => openEntry(e)}
               onContextMenu={(ev) => onEntryContext(ev, e)}
               press={pressProps(e)}
@@ -1495,7 +1515,7 @@ export default function EspacesPage() {
                 ) : e.kind === 'file' ? (
                   <>
                     <IconBtn title={t('drive.open')} icon={Eye} onClick={() => openFile(e.file)} />
-                    <a className="rounded-lg p-1.5 text-zinc-400 hover:bg-white/5 hover:text-zinc-100" title={t('drive.actionDownload')} href={api.url(`/files/${e.file.id}/download`)}>
+                    <a className="rounded-lg p-1.5 text-zinc-400 hover:bg-white/5 hover:text-zinc-100" title={t('drive.actionDownload')} href={api.url(`/files/${e.file.id}/download`)} onClick={() => signalDownload(e.file.name)}>
                       <Download size={16} />
                     </a>
                     <Menu items={fileMenuItems(e.file)} />

apps/web/src/app/(app)/layout.tsx

@@ -10,6 +10,7 @@ import { Wordmark } from '@/components/Wordmark';
 import { LanguageSwitcher } from '@/components/LanguageSwitcher';
 import { StatusBanner } from '@/components/StatusBanner';
 import { OfflineBanner } from '@/components/OfflineBanner';
+import { DownloadIndicator } from '@/components/DownloadIndicator';
 import { formatBytes } from '@opencoperlock/shared/client';
 
 const NAV = [
@@ -170,6 +171,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
         <StatusBanner />
         <main className="mx-auto max-w-5xl px-4 py-6 sm:px-6 md:px-8 md:py-8">{children}</main>
       </div>
+      <DownloadIndicator />
     </div>
   );
 }

apps/web/src/app/globals.css

@@ -111,6 +111,46 @@ body {
   color: #fff;
 }
 
+/* "Download started" cue — rises from the bottom-left and fades. */
+@keyframes ocl-dl-fly {
+  0% {
+    transform: translateY(18px);
+    opacity: 0;
+  }
+  14% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  68% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-72px);
+    opacity: 0;
+  }
+}
+.ocl-dl {
+  animation: ocl-dl-fly 1.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+@keyframes ocl-dl-arrow {
+  0%,
+  100% {
+    transform: translateY(-1px);
+  }
+  50% {
+    transform: translateY(3px);
+  }
+}
+.ocl-dl-arrow {
+  animation: ocl-dl-arrow 0.55s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ocl-dl,
+  .ocl-dl-arrow {
+    animation-duration: 0.01ms;
+  }
+}
+
 @layer components {
   .btn {
     @apply inline-flex items-center justify-center gap-2 rounded-lg px-3.5 py-2 text-sm font-medium transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50;

apps/web/src/components/DownloadIndicator.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+/**
+ * Brief "download started" cue: a small pill that rises from the bottom-left and fades. Triggered
+ * by signalDownload(name) (see lib/downloadFx). Gives feedback that a download began — handy on
+ * mobile/PWA where the browser hides downloads in the notification tray.
+ */
+import { useEffect, useState } from 'react';
+import { DownloadCloud, ArrowDown } from 'lucide-react';
+import { useT } from '@/lib/i18n';
+
+interface Cue {
+  id: number;
+  name: string;
+}
+
+export function DownloadIndicator() {
+  const { t } = useT();
+  const [cues, setCues] = useState<Cue[]>([]);
+
+  useEffect(() => {
+    let n = 0;
+    const onDl = (e: Event) => {
+      const name = (e as CustomEvent<{ name: string }>).detail?.name ?? '';
+      const id = ++n;
+      setCues((c) => [...c, { id, name }]);
+      window.setTimeout(() => setCues((c) => c.filter((x) => x.id !== id)), 1700);
+    };
+    window.addEventListener('ocl:download', onDl);
+    return () => window.removeEventListener('ocl:download', onDl);
+  }, []);
+
+  if (cues.length === 0) return null;
+
+  return (
+    <div className="pointer-events-none fixed bottom-6 left-4 z-[120] flex flex-col-reverse gap-2 sm:left-6">
+      {cues.map((c) => (
+        <div
+          key={c.id}
+          className="ocl-dl flex max-w-[14rem] items-center gap-2 rounded-full border border-violet-400/30 bg-violet-500/15 px-3 py-1.5 text-xs font-medium text-violet-100 shadow-glow backdrop-blur"
+        >
+          <span className="relative grid h-5 w-5 shrink-0 place-items-center text-violet-200">
+            <DownloadCloud size={16} />
+            <ArrowDown size={9} className="ocl-dl-arrow absolute" />
+          </span>
+          <span className="truncate">{c.name || t('download.started')}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

apps/web/src/lib/downloadFx.ts

@@ -0,0 +1,9 @@
+/**
+ * Tiny pub-sub for a "download started" visual cue. Call signalDownload(name) wherever a download
+ * is kicked off; the global <DownloadIndicator/> shows a brief animation. Especially useful on
+ * mobile/PWA where a download silently goes to the notification tray with no in-page feedback.
+ */
+export function signalDownload(name?: string): void {
+  if (typeof window === 'undefined') return;
+  window.dispatchEvent(new CustomEvent('ocl:download', { detail: { name: name ?? '' } }));
+}

apps/web/src/lib/i18n.tsx

@@ -57,6 +57,7 @@ const fr: Dict = {
   'offline.remove': 'Retirer',
   'offline.willSync': 'Ces fichiers seront envoyés et effacés de cet appareil dès le retour du réseau.',
   'offline.synced': '{n} fichier(s) synchronisé(s)',
+  'download.started': 'Téléchargement…',
   // file viewer / editor
   'viewer.preview': 'Aperçu',
   'viewer.source': 'Source',
@@ -429,6 +430,8 @@ const fr: Dict = {
   'admin.currentVersionPre': 'Version actuelle',
   'admin.versionUnknown': 'Version inconnue — ce déploiement n’est pas un dépôt git, mettez à jour manuellement.',
   'admin.updateRunning': 'Mise à jour en cours…',
+  'admin.updateStuck': 'La mise à jour précédente semble bloquée. Vous pouvez la relancer.',
+  'admin.updateRelaunch': 'Relancer la mise à jour',
   'admin.updateSuccess': 'Dernière mise à jour réussie.',
   'admin.updateFailedPre': 'Échec :',
   'admin.updateFailedDefault': 'voir .update.log sur le serveur.',
@@ -577,6 +580,7 @@ const en: Dict = {
   'offline.remove': 'Remove',
   'offline.willSync': 'These files will be uploaded and removed from this device as soon as the network returns.',
   'offline.synced': '{n} file(s) synced',
+  'download.started': 'Downloading…',
   'viewer.preview': 'Preview',
   'viewer.source': 'Source',
   'viewer.runJs': 'JS',
@@ -932,6 +936,8 @@ const en: Dict = {
   'admin.currentVersionPre': 'Current version',
   'admin.versionUnknown': 'Unknown version — this deployment is not a git repository, update manually.',
   'admin.updateRunning': 'Update in progress…',
+  'admin.updateStuck': 'The previous update looks stuck. You can relaunch it.',
+  'admin.updateRelaunch': 'Relaunch update',
   'admin.updateSuccess': 'Last update succeeded.',
   'admin.updateFailedPre': 'Failed:',
   'admin.updateFailedDefault': 'see .update.log on the server.',