Reusable folder explorer sidebar — folder tree, navigation buttons, inline rename, and (optional) Trash / All Files / New Folder controls.

Extracted from PhoenixKitWeb.Components.MediaBrowser so other LiveViews can embed folder navigation (folder pickers, category browsers, etc.) without duplicating the markup.

Ownership model

Pure presentation function component. The consumer owns all state and event handlers; FolderExplorer just renders. Every interactive control fires phx-target={@myself} back to the consumer, so the consumer must implement the relevant handle_event/3 clauses:

navigate_folder, navigate_root, navigate_view_all,
toggle_folder_expand, toggle_sidebar, create_untitled_folder,
start_rename_folder, rename_folder_input, rename_folder,
cancel_rename_folder, toggle_trash_filter

The drag-drop data attributes (data-drop-folder, data-draggable-folder, data-drop-trash) are present unconditionally; consumers that wire up the MediaDragDrop JS hook get drag-drop for free, others can ignore them.

Usage

<.folder_explorer
  id="my-folder-explorer"
  myself={@myself}
  folder_tree={@folder_tree}
  current_folder={@current_folder}
  expanded_folders={@expanded_folders}
  scope_folder_id={@scope_folder_id}
  scope_folder_name={@scope_folder_name}
  renaming_folder={@renaming_folder}
  renaming_source={@renaming_source}
  renaming_text={@renaming_text}
  filter_trash={@filter_trash}
  file_view={@file_view}
  sidebar_collapsed={@sidebar_collapsed}
  trash_count={@trash_count}
/>

Config flags

• show_create (default true) — show the + toolbar button.
• show_all_files (default true) — show the "All Files" flat-view button (only renders when scope_folder_id is nil; the flag gates that branch).
• show_trash (default true) — show the Trash button + badge.

Folder-color helpers (folder_color_hex/1, folder_icon_style/2, folder_bg_style/1) live here too since the sidebar and the grid/list folder cards in MediaBrowser both consume them.