Drive: custom right-click context menu, themed scrollbars & text selection

softpython2884 · softpython2884 · commit cf83632f4e39 · 2026-06-22T10:43:13.000Z
- Right-click anywhere in a space opens a custom context menu: on a file/folder
  it mirrors that item's actions (and shows bulk actions when right-clicking
  inside a multi-selection); on empty space it offers New file / New folder /
  Import / Paste / Select all. Portal-rendered, clamped to the viewport, closes
  on outside-click, Escape, scroll or resize. Overflow '⋮' menu and context menu
  now share the same item builders so they never drift.
- Scrollbars restyled (slim, violet-on-hover, padded thumb) and a violet ::selection
  highlight, both app-wide via globals.css.
diff --git a/apps/web/src/app/(app)/drive/page.tsx b/apps/web/src/app/(app)/drive/page.tsx
@@ -64,12 +64,13 @@ import {
 } from '@/lib/zk';
 import { fileVisual } from '@/lib/fileType';
 import { FileViewer, type ViewerSource } from '@/components/FileViewer';
-import { Menu } from '@/components/ui/Menu';
 import { confirm, prompt, choose, toast } from '@/components/ui/overlays';
 import { DropOverlay } from '@/components/drive/DropOverlay';
 import { CommandPalette, type PaletteItem } from '@/components/drive/CommandPalette';
 import { ShortcutsHelp } from '@/components/drive/ShortcutsHelp';
 import { VersionHistory } from '@/components/drive/VersionHistory';
+import { ContextMenu } from '@/components/drive/ContextMenu';
+import { Menu, type MenuItem } from '@/components/ui/Menu';
 
 interface ZkFile {
   id: string;
@@ -135,6 +136,7 @@ export default function EspacesPage() {
   const [clipboard, setClipboard] = useState<Clipboard | null>(null);
   const [paletteOpen, setPaletteOpen] = useState(false);
   const [helpOpen, setHelpOpen] = useState(false);
+  const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; items: MenuItem[] } | null>(null);
 
   // passphrase prompt
   const [askPass, setAskPass] = useState<PublicFolder | null>(null);
@@ -871,10 +873,70 @@ export default function EspacesPage() {
     }
   }
 
+  // ── Menu items (shared by the "⋮" overflow menu and the right-click context menu) ──
+  function folderMenuItems(folder: PublicFolder): MenuItem[] {
+    return [
+      { label: t('drive.actionRename'), icon: Pencil, onClick: () => void renameFolder(folder) },
+      ...(!isZk ? [{ label: t('drive.actionMove'), icon: FolderInput, onClick: () => void move('folder', folder.id) }] : []),
+      ...(!isZk ? [{ label: t('drive.actionShare'), icon: Share2, onClick: () => void share('folder', folder.id) }] : []),
+      { label: t('drive.actionDelete'), icon: Trash2, danger: true, onClick: () => void deleteFolder(folder.id) },
+    ];
+  }
+  function fileMenuItems(file: PublicFile): MenuItem[] {
+    return [
+      { label: t('drive.actionRename'), icon: Pencil, onClick: () => void renameFile(file) },
+      { label: t('drive.actionMove'), icon: FolderInput, onClick: () => void move('file', file.id) },
+      { label: t('drive.actionDuplicate'), icon: Files, onClick: () => void duplicateFile(file.id, file.name, file.mimeType, currentFolderId!, true).then(reloadCurrent) },
+      { label: t('drive.actionShare'), icon: Share2, onClick: () => void share('file', file.id) },
+      { label: t('drive.actionVersions'), icon: History, onClick: () => setVersionsFor(file) },
+      { label: t('drive.actionDelete'), icon: Trash2, danger: true, onClick: () => void deleteFile(file.id) },
+    ];
+  }
+  function zkMenuItems(zk: ZkFile): MenuItem[] {
+    return [{ label: t('drive.actionDelete'), icon: Trash2, danger: true, onClick: () => void deleteFile(zk.id) }];
+  }
+  function entryMenuItems(e: Entry): MenuItem[] {
+    return e.kind === 'folder' ? folderMenuItems(e.folder) : e.kind === 'file' ? fileMenuItems(e.file) : zkMenuItems(e.zk);
+  }
+  function bulkMenuItems(): MenuItem[] {
+    const items: MenuItem[] = [{ label: t('drive.bulkDownload'), icon: Download, onClick: () => void bulkDownload() }];
+    if (!isZk) {
+      items.push({ label: t('drive.actionCopy'), icon: Copy, onClick: () => buildClip('copy') });
+      items.push({ label: t('drive.actionCut'), icon: Scissors, onClick: () => buildClip('cut') });
+      items.push({ label: t('drive.bulkMove'), icon: FolderInput, onClick: () => void bulkMove() });
+    }
+    items.push({ label: t('drive.bulkDelete'), icon: Trash2, danger: true, onClick: () => void bulkDelete() });
+    return items;
+  }
+  function backgroundMenuItems(): MenuItem[] {
+    const items: MenuItem[] = [
+      { label: t('drive.cmdNewFile'), icon: FilePlus, onClick: () => void createFileDoc() },
+      { label: t('drive.cmdNewFolder'), icon: FolderPlus, onClick: () => void createFolder() },
+      { label: t('drive.cmdImport'), icon: Upload, onClick: () => fileInput.current?.click() },
+    ];
+    if (!isZk && clipboard) items.push({ label: t('drive.scPaste'), icon: ClipboardPaste, onClick: () => void paste() });
+    if (entries.length > 0) items.push({ label: t('drive.scSelectAll'), icon: Check, onClick: () => selectAll() });
+    return items;
+  }
+  function openCtx(ev: React.MouseEvent, items: MenuItem[]) {
+    ev.preventDefault();
+    ev.stopPropagation();
+    if (items.length > 0) setCtxMenu({ x: ev.clientX, y: ev.clientY, items });
+  }
+  function onEntryContext(ev: React.MouseEvent, e: Entry) {
+    if (selected.has(e.key) && selected.size > 1) {
+      openCtx(ev, bulkMenuItems());
+      return;
+    }
+    setSelected(new Set([e.key]));
+    setAnchorKey(e.key);
+    openCtx(ev, entryMenuItems(e));
+  }
+
   // ── Keyboard shortcuts ───────────────────────────────────────────────────────
   // A ref keeps the latest handler so we register the window listener only once.
   const keyHandler = (e: KeyboardEvent) => {
-    if (paletteOpen || helpOpen || viewing || askPass || shareLink || versionsFor) return;
+    if (paletteOpen || helpOpen || viewing || askPass || shareLink || versionsFor || ctxMenu) return;
     if (document.querySelector('[class*="z-[100]"]')) return; // an in-app dialog is open
     const mod = e.metaKey || e.ctrlKey;
     if (mod && e.key.toLowerCase() === 'k') {
@@ -1146,7 +1208,10 @@ export default function EspacesPage() {
       ) : entries.length === 0 ? (
         <Empty icon={Upload} title={t('drive.emptyFolderTitle')} hint={t('drive.emptyFolderHint')} />
       ) : view === 'grid' ? (
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+        <div
+          className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4"
+          onContextMenu={(ev) => !needPass && openCtx(ev, backgroundMenuItems())}
+        >
           {entries.map((e) => (
             <GridCard
               key={e.key}
@@ -1156,11 +1221,12 @@ export default function EspacesPage() {
               sub={e.kind === 'folder' ? undefined : formatBytes(e.size)}
               onClick={(ev) => onEntryClick(ev, e)}
               onDoubleClick={() => openEntry(e)}
+              onContextMenu={(ev) => onEntryContext(ev, e)}
             />
           ))}
         </div>
       ) : (
-        <div className="space-y-2">
+        <div className="space-y-2" onContextMenu={(ev) => !needPass && openCtx(ev, backgroundMenuItems())}>
           {/* column headers */}
           <div className="flex items-center gap-3 px-3 text-xs text-zinc-500">
             <button className="flex items-center gap-1 hover:text-zinc-300" onClick={() => toggleSort('name')}>
@@ -1181,6 +1247,7 @@ export default function EspacesPage() {
               key={e.key}
               onClick={(ev) => onEntryClick(ev, e)}
               onDoubleClick={() => openEntry(e)}
+              onContextMenu={(ev) => onEntryContext(ev, e)}
               className={`row cursor-default ${selected.has(e.key) ? 'bg-accent/[0.08] ring-1 ring-inset ring-accent/40' : ''}`}
             >
               <button className="flex min-w-0 flex-1 items-center gap-3 text-left" onClick={(ev) => onNameClick(ev, e)}>
@@ -1191,36 +1258,20 @@ export default function EspacesPage() {
               <span className="w-20 shrink-0 text-right text-xs text-zinc-500">{e.kind === 'folder' ? '—' : formatBytes(e.size)}</span>
               <div className="flex shrink-0 items-center gap-0.5" onClick={(ev) => ev.stopPropagation()}>
                 {e.kind === 'folder' ? (
-                  <Menu
-                    items={[
-                      { label: t('drive.actionRename'), icon: Pencil, onClick: () => renameFolder(e.folder) },
-                      ...(!isZk ? [{ label: t('drive.actionMove'), icon: FolderInput, onClick: () => move('folder', e.folder.id) }] : []),
-                      ...(!isZk ? [{ label: t('drive.actionShare'), icon: Share2, onClick: () => share('folder', e.folder.id) }] : []),
-                      { label: t('drive.actionDelete'), icon: Trash2, danger: true, onClick: () => deleteFolder(e.folder.id) },
-                    ]}
-                  />
+                  <Menu items={folderMenuItems(e.folder)} />
                 ) : 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`)}>
                       <Download size={16} />
                     </a>
-                    <Menu
-                      items={[
-                        { label: t('drive.actionRename'), icon: Pencil, onClick: () => renameFile(e.file) },
-                        { label: t('drive.actionMove'), icon: FolderInput, onClick: () => move('file', e.file.id) },
-                        { label: t('drive.actionDuplicate'), icon: Files, onClick: () => void duplicateFile(e.file.id, e.file.name, e.file.mimeType, currentFolderId!, true).then(reloadCurrent) },
-                        { label: t('drive.actionShare'), icon: Share2, onClick: () => share('file', e.file.id) },
-                        { label: t('drive.actionVersions'), icon: History, onClick: () => setVersionsFor(e.file) },
-                        { label: t('drive.actionDelete'), icon: Trash2, danger: true, onClick: () => deleteFile(e.file.id) },
-                      ]}
-                    />
+                    <Menu items={fileMenuItems(e.file)} />
                   </>
                 ) : (
                   <>
                     <IconBtn title={t('drive.open')} icon={Eye} onClick={() => openZk(e.zk)} />
                     <IconBtn title={t('drive.actionDownload')} icon={Download} onClick={() => downloadZk(e.zk)} />
-                    <Menu items={[{ label: t('drive.actionDelete'), icon: Trash2, danger: true, onClick: () => deleteFile(e.zk.id) }]} />
+                    <Menu items={zkMenuItems(e.zk)} />
                   </>
                 )}
               </div>
@@ -1286,6 +1337,7 @@ export default function EspacesPage() {
       {paletteOpen && <CommandPalette items={paletteItems} onClose={() => setPaletteOpen(false)} />}
       {helpOpen && <ShortcutsHelp onClose={() => setHelpOpen(false)} />}
       {viewing && <FileViewer source={viewing} onClose={() => setViewing(null)} />}
+      {ctxMenu && <ContextMenu x={ctxMenu.x} y={ctxMenu.y} items={ctxMenu.items} onClose={() => setCtxMenu(null)} />}
       <DropOverlay show={dragging} />
     </div>
   );
@@ -1387,18 +1439,21 @@ function GridCard({
   selected,
   onClick,
   onDoubleClick,
+  onContextMenu,
 }: {
   iconNode: React.ReactNode;
   name: string;
   sub?: string;
   selected?: boolean;
   onClick?: (e: React.MouseEvent) => void;
   onDoubleClick?: () => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
 }) {
   return (
     <div
       onClick={onClick}
       onDoubleClick={onDoubleClick}
+      onContextMenu={onContextMenu}
       className={`card flex cursor-default select-none flex-col items-center gap-2 py-5 text-center transition hover:border-white/15 hover:bg-white/[0.04] ${
         selected ? 'bg-accent/[0.08] ring-1 ring-inset ring-accent/40' : ''
       }`}
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
@@ -73,18 +73,42 @@ body {
   background-attachment: fixed;
 }
 
-/* Thin, unobtrusive scrollbars */
+/* Custom scrollbars — slim, accent-aware, fade-to-violet on hover. */
 * {
   scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
+  scrollbar-color: rgba(139, 92, 246, 0.35) transparent;
 }
 *::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 11px;
+  height: 11px;
+}
+*::-webkit-scrollbar-track {
+  background: transparent;
 }
 *::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.13);
   border-radius: 9999px;
+  /* transparent border carves a little breathing room around the thumb */
+  border: 3px solid transparent;
+  background-clip: padding-box;
+  transition: background-color 0.15s;
+}
+*::-webkit-scrollbar-thumb:hover {
+  background: rgba(139, 92, 246, 0.55);
+  background-clip: padding-box;
+}
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* Custom text selection — violet tint to match the accent. */
+::selection {
+  background: rgba(139, 92, 246, 0.32);
+  color: #fff;
+}
+::-moz-selection {
+  background: rgba(139, 92, 246, 0.32);
+  color: #fff;
 }
 
 @layer components {
diff --git a/apps/web/src/components/drive/ContextMenu.tsx b/apps/web/src/components/drive/ContextMenu.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+/**
+ * Custom right-click context menu. Rendered in a portal at the cursor, clamped to the viewport,
+ * and closed on outside-click, Escape, scroll, resize, or another right-click. Reuses the same
+ * MenuItem shape as the overflow "⋮" menu so actions stay consistent between the two.
+ */
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import type { MenuItem } from '@/components/ui/Menu';
+
+export function ContextMenu({
+  x,
+  y,
+  items,
+  onClose,
+}: {
+  x: number;
+  y: number;
+  items: MenuItem[];
+  onClose: () => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState({ x, y });
+
+  // Keep the menu fully on screen.
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const { width, height } = el.getBoundingClientRect();
+    const pad = 8;
+    setPos({
+      x: Math.min(x, window.innerWidth - width - pad),
+      y: Math.min(y, window.innerHeight - height - pad),
+    });
+  }, [x, y]);
+
+  useEffect(() => {
+    const onDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
+    };
+    const onKey = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
+    document.addEventListener('mousedown', onDown);
+    document.addEventListener('keydown', onKey);
+    window.addEventListener('scroll', onClose, true);
+    window.addEventListener('resize', onClose);
+    return () => {
+      document.removeEventListener('mousedown', onDown);
+      document.removeEventListener('keydown', onKey);
+      window.removeEventListener('scroll', onClose, true);
+      window.removeEventListener('resize', onClose);
+    };
+  }, [onClose]);
+
+  if (typeof document === 'undefined') return null;
+
+  return createPortal(
+    <div
+      ref={ref}
+      style={{ left: pos.x, top: pos.y }}
+      className="fixed z-[95] w-52 overflow-hidden rounded-lg border border-white/10 bg-[#15151d] py-1 shadow-2xl ring-1 ring-black/40"
+      onContextMenu={(e) => e.preventDefault()}
+    >
+      {items.map((it, i) => (
+        <button
+          key={i}
+          onClick={() => {
+            onClose();
+            it.onClick();
+          }}
+          className={`flex w-full items-center gap-2.5 px-3 py-2 text-left text-[13px] transition hover:bg-white/[0.06] ${
+            it.danger ? 'text-red-300' : 'text-zinc-200'
+          }`}
+        >
+          <it.icon size={15} className={it.danger ? 'text-red-300' : 'text-zinc-400'} />
+          {it.label}
+        </button>
+      ))}
+    </div>,
+    document.body,
+  );
+}
