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, open_new_folder_modal,
start_rename_folder, rename_folder_input, rename_folder,
cancel_rename_folder, toggle_trash_filter

From a plain LiveView, pass myself={nil}: HEEx omits a nil attribute, so no phx-target is rendered and the events arrive at the LiveView. The event names are not configurable — implement this vocabulary rather than fork the component.

The drag-drop data attributes (data-drop-folder, data-draggable-folder, data-draggable-file, data-drop-trash) are emitted unless enable_drag={false}; consumers that wire up the MediaDragDrop JS hook get drag-drop for free, others can ignore them.

Showing what is in the folders

By default this is a tree of folders and nothing else, which is what a media browser wants — its files live in a grid beside the tree. A consumer whose leaves are the point (a vault of notes, a file manager) passes items and an :item slot, and the leaves render inside their folders the way Obsidian and Finder show them:

<.folder_explorer
  folder_tree={@folder_tree}
  items={%{"root" => @root_notes, folder_uuid => @notes_in_folder}}
  …
>
  <:item :let={note}>
    <.link patch={~p"/notes/#{note.id}"}>{note.label}</.link>
  </:item>
</.folder_explorer>

Items are keyed by folder uuid, with "root" for the top level, and each needs an :id — that is what data-draggable-file carries, so a leaf is draggable on the same terms as a folder. A folder holding only leaves still gets a chevron.

Right-click menus

Every folder row and leaf row carries the attributes Core.ContextMenu reads, so a consumer gets right-click / touch-and-hold menus by declaring the menus — the explorer needs no flag and no slot:

<.context_menu
  id="folder-menu"
  selector="[data-context-kind=folder]"
  value_name={["folder-uuid", "folder_uuid"]}
>
  <.context_menu_button phx-click="start_rename_folder" phx-value-source="sidebar" … />
</.context_menu>

data-context-kind is "folder" or "item", data-context-value is the uuid, data-context-label the name. They sit on the folder row <div> and the leaf <li> — never on the wrapping <li> of a folder — so a right-click on a nested row resolves to that row and not to its ancestor folder.

Consumers that declare no menu pay three attributes per row and get the browser's own menu, unchanged.

A consumer's folder is its own

folder.color is read through folder_color/1 (Map.get/2), because a consumer's folder schema is not PhoenixKit.Media.Folder and need not have the concept. Reading the field directly raised KeyError and took the page down the moment such a consumer had one folder.

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.