fix(file_browser): Tailwind v4 opacity fix, selection toggle, hover colors, and cleanup

[kirangadhave]

Summary

Closes #9157

• There was a bug with selection checkbox disappearing immediately on hover
  • Cause by tailwind 4 upgrade. we were using an old class bg-opacity-*. Replaced with newer bg-primary/25. The fully saturated blue hid the checkbox
• But with toggling the selection using checkbox when multiple=False. The checkbox let you select, but no deselect.
• Hovering now uses hover:bg-accent which is more inline with rest of the styles
• Removed some deadcode, extracted some code to a file level component for readability.
• label is a prop and was being mutated, fixed that

Before

Screen.Recording.2026-04-17.at.7.26.25.PM.mov

After

Screen.Recording.2026-04-17.at.7.28.03.PM.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	Apr 18, 2026 2:30am

[Copilot]

Pull request overview

Fixes FileBrowser selection/hover UX issues introduced by the Tailwind v4 upgrade, and improves selection toggling behavior for multiple=false.

Changes:

• Replace deprecated Tailwind opacity utilities with bg-*/NN syntax and adjust hover/selected row colors.
• Fix single-selection toggling so the checkbox can deselect the current selection.
• Refactor checkbox/icon rendering into a small component and avoid mutating the label prop.

Comments suppressed due to low confidence (2)

frontend/src/plugins/impl/FileBrowserPlugin.tsx:324

• selectAllFiles() currently only skips directories when canSelectDirectories is false, but it never skips regular files when canSelectFiles is false (e.g. selectionMode === "directory"). This will cause “Select all” to select files even when only directory selection is allowed; add the symmetric !canSelectFiles && !file.is_directory guard (or reuse the selectable list).

    for (const file of files) {
      if (!canSelectDirectories && file.is_directory) {
        continue;
      }
      if (selectedPaths.has(file.path)) {
        continue;
      }

frontend/src/plugins/impl/FileBrowserPlugin.tsx:330

• In selectAllFiles(), selection/deduping uses file.path directly, but row rendering normalizes paths that start with "//" (see filePath = filePath.slice(1)). If the backend returns "//..." paths, “Select all” can add a differently-normalized path than click-selection, leading to inconsistent selectedPaths.has(...) results and duplicates. Normalize file.path the same way in selectAllFiles() before checking/adding.

    for (const file of files) {
      if (!canSelectDirectories && file.is_directory) {
        continue;
      }
      if (selectedPaths.has(file.path)) {
        continue;
      }
      const fileInfo = createFileInfo({
        path: file.path,
        name: file.name,
        isDirectory: file.is_directory,
      });
      filesInView.push(fileInfo);

[github-actions]

🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.23.2-dev54