# `PhoenixKitWeb.Components.FolderExplorer`
[🔗](https://github.com/BeamLabEU/phoenix_kit/blob/v1.7.165/lib/phoenix_kit_web/components/folder_explorer.ex#L1)

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

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.

# `folder_bg_style`

# `folder_color_hex`

# `folder_explorer`

## Attributes

* `id` (`:string`) - Defaults to `"folder-explorer"`.
* `myself` (`:any`) (required)
* `folder_tree` (`:any`) (required)
* `current_folder` (`:any`) - Defaults to `nil`.
* `expanded_folders` (`:any`) (required)
* `scope_folder_id` (`:any`) - Defaults to `nil`.
* `scope_folder_name` (`:string`) - Defaults to `"Root"`.
* `renaming_folder` (`:any`) - Defaults to `nil`.
* `renaming_source` (`:any`) - Defaults to `nil`.
* `renaming_text` (`:string`) - Defaults to `""`.
* `filter_trash` (`:boolean`) - Defaults to `false`.
* `file_view` (`:string`) - Defaults to `nil`.
* `sidebar_collapsed` (`:boolean`) - Defaults to `false`.
* `trash_count` (`:integer`) - Defaults to `0`.
* `show_create` (`:boolean`) - Defaults to `true`.
* `show_all_files` (`:boolean`) - Defaults to `true`.
* `show_trash` (`:boolean`) - Defaults to `true`.

# `folder_icon_style`

# `folder_tree_node`

## 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 to `MapSet.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 to `nil`.
* `renaming_text` (`:string`) - Defaults to `""`.
* `renaming_source` (`:any`) - Defaults to `nil`.
* `filter_trash` (`:boolean`) - Defaults to `false`.
* `depth` (`:integer`) - Defaults to `0`.
* `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 to `true`.
* `enable_drag` (`:boolean`) - Emit drag-drop data attributes. Defaults to `true`.
* `hover_class` (`:string`) - Row hover background utility. Defaults to `"hover:bg-base-200"`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*