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_filterThe 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(defaulttrue) — show the+toolbar button.show_all_files(defaulttrue) — show the "All Files" flat-view button (only renders whenscope_folder_idisnil; the flag gates that branch).show_trash(defaulttrue) — 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.
Summary
Functions
Attributes
id(:string) - Defaults to"folder-explorer".myself(:any) (required)folder_tree(:any) (required)current_folder(:any) - Defaults tonil.expanded_folders(:any) (required)scope_folder_id(:any) - Defaults tonil.scope_folder_name(:string) - Defaults to"Root".renaming_folder(:any) - Defaults tonil.renaming_source(:any) - Defaults tonil.renaming_text(:string) - Defaults to"".filter_trash(:boolean) - Defaults tofalse.file_view(:string) - Defaults tonil.sidebar_collapsed(:boolean) - Defaults tofalse.trash_count(:integer) - Defaults to0.show_create(:boolean) - Defaults totrue.show_all_files(:boolean) - Defaults totrue.show_trash(:boolean) - Defaults totrue.
Attributes
node(:map) (required)current_folder(:any) (required)active_path(:any) - UUIDs from a root folder to the current folder; darkens their connector lines. Defaults toMapSet.new([]).connector_mode(:atom) - How this node's guide line is drawn: normal, a darkened pass-through trunk, or the darkened turn into the active branch. Defaults to:normal. Must be one of:normal,:active_trunk, or:active_turn.expanded_folders(:any) (required)renaming_folder(:any) - Defaults tonil.renaming_text(:string) - Defaults to"".renaming_source(:any) - Defaults tonil.filter_trash(:boolean) - Defaults tofalse.depth(:integer) - Defaults to0.myself(:any) (required)on_navigate(:string) - Event fired when a folder row/name is clicked (sidebar navigates, move modal selects). Defaults to"navigate_folder".on_toggle(:string) - Event fired by the disclosure chevron. Defaults to"toggle_folder_expand".show_rename(:boolean) - Show the inline rename affordance. Defaults totrue.enable_drag(:boolean) - Emit drag-drop data attributes. Defaults totrue.hover_class(:string) - Row hover background utility. Defaults to"hover:bg-base-200".