<%!-- Scope-invalid guard: scope folder was deleted --%> <%= if @scope_invalid do %>

<.icon name="hero-exclamation-triangle" class="w-5 h-5 shrink-0" /> {gettext( "The configured scope folder no longer exists. The media browser is disabled until the scope is reconfigured." )}

<% else %> <%!-- Upload Section --%> <%= if @show_upload and assigns[:parent_uploads] do %>

{gettext("Upload Media")}

<%= if @has_buckets do %> <.file_upload upload={@parent_uploads.media_files} label={gettext("Upload Media Files")} icon="hero-cloud-arrow-up" accept_description={gettext("All file types supported")} max_size_description={gettext("%{mb}MB per file", mb: @max_upload_size_mb)} /> <% else %>

<.icon name="hero-exclamation-triangle" class="w-6 h-6" />

{gettext("No Storage Buckets Configured")}

<.link navigate={PhoenixKit.Utils.Routes.path("/admin/settings/media")} class="link link-primary font-semibold" > {gettext("Configure Storage Buckets")}

<% end %>

<% end %> <%!-- Main Layout: Sidebar + Content in a unified card --%> <%!-- `isolate` confines the hero header's `z-30` (and the toolbar dropdowns' `z-20`) to this card's own stacking context, so they no longer paint over the mobile drawer/navbar. Modals live outside this card and are unaffected. --%>

<%!-- Folder Sidebar --%> <.folder_explorer id="media-browser-sidebar" 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} /> <%!-- Main content area --%>

<%!-- Hidden upload input for folder drag-drop (always in DOM when in a folder) --%> <%= if @has_buckets && !@show_upload && assigns[:parent_uploads] do %> <% end %>

<%!-- The single scroll area for the whole content column — breadcrumbs, folder hero header, toolbar, and the file grid all scroll together (the grid wrapper below is NOT its own scroll region). The list view's sticky column header pins to the top of this scrollport once the header scrolls past. --%>

<%!-- Inline upload progress for drag-drop (no modal) --%> <%= if !@show_upload && assigns[:parent_uploads] && length(@parent_uploads.media_files.entries) > 0 do %>

<%= for entry <- @parent_uploads.media_files.entries do %>

{entry.client_name}

{entry.progress}% {entry.progress}%

<% end %>

<% end %> <%!-- Breadcrumbs. `@breadcrumbs` is the full ancestor chain INCLUDING the current folder (with the scope folder dropped when scoped), so we iterate `Enum.drop(@breadcrumbs, -1)` for the clickable middle and render the current folder once at the end. When scoped, the leading "root" button shows the scope folder's name (e.g. "banana") instead of "All Media". --%> <%!-- Breadcrumb — ALWAYS rendered so it stays in the same place across root and folder views (no disappearing row / layout jump). At root the leading crumb is the current, non-link item ("All Media", or the scope folder's name when scoped); inside a folder it becomes a clickable button followed by the ancestor path and the current folder. --%> <%!-- `!py-0` strips daisyUI's default breadcrumb padding and the removed top padding above lets this row sit flush with the sidebar's "Folders" header; `mb-3` matches that header's bottom gap so the rows below line up too. --%>

{@current_folder.name}
{if @scope_folder_id, do: @scope_folder_name, else: gettext("All Media")}

<%!-- Folder hero header: a cover image (or a soft folder-color gradient when none is set) as the background, faded to the page at the bottom, with the title + created-by/file-count and the "Edit header" action overlaid. Non-folder views (Trash / Orphaned / All Files / root) just show a plain title. The cover-image upload itself lives in the Edit-header modal. --%> <%!-- Unified header: a hero block (cover image / folder-color gradient for folders, neutral gradient otherwise) that also holds the toolbar at the bottom. `overflow-hidden` is avoided so the toolbar dropdown menus aren't clipped — the background layers are each rounded instead. --%> <%!-- The folder whose header customizations to display. Falls back to the scope folder only at the effective root of an embedded (scoped) browser — never under the all-files / orphaned / trash / search views, where the `

` title below would disagree with the scope folder's metadata. See `header_folder_target/6`. --%> <% header_folder = header_folder_target( @current_folder, @file_view, @filter_orphaned, @search_query, @filter_trash, @scope_folder ) %> <% hero_hex = header_folder && folder_color_hex(header_folder.color) %> <%!-- Folder-header customization (Edit header): size + per-element visibility toggles. Non-folder views ignore them (defaults). --%> <% header_min_h = header_folder && case header_folder.header_size do "small" -> "min-h-[100px] sm:min-h-[140px]" "large" -> "min-h-[160px] sm:min-h-[320px]" _ -> "min-h-[130px] sm:min-h-[200px]" end %> <% show_background = !header_folder || header_folder.header_show_background %> <% show_logo = header_folder && header_folder.header_show_icon && @folder_logo_url %> <% show_title = !header_folder || header_folder.header_show_title %> <% show_creator = header_folder && header_folder.header_show_creator && @folder_creator_name %> <% show_date = header_folder && header_folder.header_show_date %> <% show_file_count = header_folder && header_folder.header_show_file_count %> <% show_creation_info = show_creator || show_date || show_file_count %> <% show_description = header_folder && header_folder.header_show_description %> <%!-- `relative z-30` lifts the whole header above the file area below (same scroll container, later in the DOM), so the toolbar dropdowns open over the sticky table header (z-10) instead of being painted behind it. --%>
<%!-- Background: cover image (when shown), folder-color gradient, or neutral --%> <%= cond do %> <%!-- `header_folder &&` gates the cover so a scope-folder cover URL still held in assigns (it's only refreshed on the nav path) can't bleed into the all-files / trash / orphaned / search views where `header_folder` is nil. --%> <% header_folder && show_background && @folder_cover_url -> %> <%!-- The wrapper is the size container so a quarter-turned cover can swap its dimensions via cq units — see `cover_image_class/1`. --%>

<% hero_hex -> %>

<% true -> %>

<% end %> <%!-- Bottom fade to the page background for the clean, faded-out look and readable overlaid text. --%>

<%!-- Action(s), top-right. `z-20` keeps it above the content block (also z-10, but later in the DOM) so a tall header with lots of content can't cover the button's click area. --%> <%= if @current_folder do %>
<%!-- Edit-header editor as a popover dropping from the button (not a centered modal). Closes on click-away, except while the image picker is open. --%> <%= if @editing_folder_header do %>

<.icon name="hero-pencil-square" class="w-4 h-4 text-primary" /> {gettext("Edit header")}

<%!-- 1. Name + description (saved on Save below; the other sections apply instantly). --%>

{gettext("Name")}

{gettext("Description")} {@folder_header_description}

<%!-- 2. Icon + background image --%>
{gettext("Icon")}

{gettext("Pick or upload a small icon image.")}
<%= if @folder_logo_url do %> <% end %>

{gettext("Background image")} <%= if @folder_cover_url do %> <% end %>
<%!-- 3. Header size --%>
{gettext("Header size")}
<%= for {val, label} <- [ {"small", gettext("Small")}, {"medium", gettext("Medium")}, {"large", gettext("Large")} ] do %> <% end %>

<%!-- 4. Element visibility toggles --%>
<%= for {opt, label, icon, on} <- [ {"title", gettext("Show title"), "hero-bars-3-bottom-left", @current_folder.header_show_title}, {"icon", gettext("Show icon"), "hero-photo", @current_folder.header_show_icon}, {"creator", gettext("Show creator"), "hero-user", @current_folder.header_show_creator}, {"date", gettext("Show date created"), "hero-calendar", @current_folder.header_show_date}, {"file_count", gettext("Show file count"), "hero-document", @current_folder.header_show_file_count}, {"description", gettext("Show description"), "hero-document-text", @current_folder.header_show_description}, {"background", gettext("Show background"), "hero-swatch", @current_folder.header_show_background} ] do %> <.icon name={icon} class="w-4 h-4 text-base-content/50 shrink-0" /> {label} <% end %>

<%!-- Save / Cancel — pinned as a non-scrolling footer (shrink-0) so the buttons stay reachable however tall/scrolled the body is. Save submits the name/description form above (the rest applied live). --%>

<% end %>
<% end %> <%!-- Title + meta, bottom-left over the faded area. The description must NOT use `whitespace-pre-line` — the HEEx-indented `{...}` would render its leading newline as a blank line ("crazy top padding"). --%> <%!-- Content (title / description / meta / toolbar) over the faded bottom area. The toolbar is folded in below. --%>
<% small_header = header_folder && header_folder.header_size == "small" %> <%!-- Logo + text. On a SMALL header the logo sits to the LEFT of the title/description (so it can be larger despite the short header); otherwise it sits above them. --%>
<%= if show_logo do %> <%!-- Transparent logos (e.g. PNG) show the header background through, not a solid square: no bg, object-contain (full logo, uncropped), and a drop-shadow that follows the logo's alpha shape. --%> "w-12 h-12 sm:w-16 sm:h-16" "large" -> "w-14 h-14 sm:w-20 sm:h-20" _ -> "w-10 h-10 sm:w-14 sm:h-14" end ]} /> <% end %>
<%= if show_title do %>
<%= cond do %> <% @filter_trash -> %> {gettext("Trash")} <% @filter_orphaned -> %> {gettext("Orphaned Files")} <% @file_view == "all" -> %> {gettext("All Files")} <% @current_folder -> %> <%!-- Live-preview the sidebar rename so the header title tracks what's being typed, then settles on the saved name. --%> <%= if @renaming_folder == @current_folder.uuid && @renaming_text != "" do %> {@renaming_text} <% else %> {@current_folder.name} <% end %> <% true -> %> {if @scope_folder_id, do: @scope_folder_name, else: gettext("All Media")} <% end %>
<% end %> <%= if header_folder do %> <%!-- Description (folders only). Must NOT use whitespace-pre-line (the HEEx-indented expression's leading newline would render as a blank line). --%> <%= if show_description do %> <%= if header_folder.description not in [nil, ""] do %>
{header_folder.description}
<% else %> <%!-- Placeholder so users see where a description would appear and how to add one. Opens the Edit header panel (description field) on click. Only shown when actually inside a folder (editable) — at a scoped root the header is read-only. --%> <% end %> <% end %> <%= if show_creation_info do %>
<%!-- Creator / date / file-count are independent toggles; bullets render only between two visible pieces so the row never starts/ends with one. --%> {gettext("Created by %{name}", name: @folder_creator_name)} • <.icon name="hero-calendar" class="w-3.5 h-3.5" /> {Calendar.strftime(header_folder.inserted_at, "%b %d, %Y")} • <.icon name="hero-document" class="w-3.5 h-3.5" /> {ngettext("%{count} file", "%{count} files", @total_count)}
<% end %> <% end %>

<%!-- Toolbar area: in select mode it's the selection header (exit + count + select-all/clear on the left, bulk Move/Download/Delete on the right); otherwise the normal Display/Sort/Filter + search + Add Media row. Both live inside the hero so the controls don't jump on toggle. --%> <%= if @select_mode do %> <% selected_count = MapSet.size(@selected_files) + MapSet.size(@selected_folders) %>
<%!-- Count on the left; every control sits in the right-aligned cluster (Select all / Clear, the bulk actions, then Done) to match the actions-on-the-right convention used across the toolbars. --%> {ngettext("%{count} selected", "%{count} selected", selected_count)}
<%= if selected_count > 0 do %> <% end %> <%!-- Bulk actions, only with a selection --%> <%= if selected_count > 0 do %> <%= if MapSet.size(@selected_files) > 0 do %> <% end %> <% end %> <%!-- Cancel, not "Done": the ✕ exits selection mode without applying anything — "Done" reads like a confirm/apply, which this button never does. --%>

<% else %> <% display_options = [ {"grid", gettext("Grid"), "hero-squares-2x2"}, {"list", gettext("List"), "hero-bars-3-bottom-left"}, {"stacks", gettext("Stacks"), "hero-square-3-stack-3d"} ] %> <% {_current_view, current_view_label, current_view_icon} = Enum.find(display_options, fn {v, _, _} -> v == @view_mode end) || hd(display_options) %> <% sort_options = [ {"newest", gettext("Newest first")}, {"oldest", gettext("Oldest first")}, {"name_asc", gettext("Name A–Z")}, {"name_desc", gettext("Name Z–A")}, {"largest", gettext("Largest first")}, {"smallest", gettext("Smallest first")} ] %> <% filter_options = [ {"all", gettext("All types")}, {"image", gettext("Images")}, {"video", gettext("Videos")}, {"document", gettext("Documents")}, {"audio", gettext("Audio")}, {"archive", gettext("Archives")}, {"other", gettext("Other")} ] %> <% sort_label = sort_options |> Enum.find(fn {v, _} -> v == @sort_by end) |> then(&(&1 && elem(&1, 1))) %> <% filter_label = filter_options |> Enum.find(fn {v, _} -> v == @file_type_filter end) |> then(&(&1 && elem(&1, 1))) %>
<%= if not @filter_trash and not @filter_orphaned do %> <%!-- Display / Sort / Filter group. On mobile this hides while the search field is open so search fills the toolbar row as a single clean bar. --%>
<%!-- Display (grid/list) --%>

<.icon name={current_view_icon} class="w-4 h-4" /> {current_view_label} <.icon name="hero-chevron-down" class="hidden sm:inline-block w-3.5 h-3.5 opacity-60" />

<%= for {val, label, icon} <- display_options do %>

<% end %>

<%!-- Sort --%>

<.icon name="hero-arrows-up-down" class="w-4 h-4" /> {sort_label || gettext("Sort")} <.icon name="hero-chevron-down" class="hidden sm:inline-block w-3.5 h-3.5 opacity-60" />

<%= for {val, label} <- sort_options do %>

<% end %>

<%!-- Filter (file type) --%>

<.icon name="hero-funnel" class="w-4 h-4" /> {if @file_type_filter == "all", do: gettext("Filter"), else: filter_label} <.icon name="hero-chevron-down" class="hidden sm:inline-block w-3.5 h-3.5 opacity-60" />

<%= for {val, label} <- filter_options do %>

<% end %>

<% end %> <%!-- Actions, pushed to the right. Contextual destructive actions + Search + the primary Add Media; secondary actions (Select, New folder) live in the ⋯ overflow. On mobile, opening search hides every sibling button (and the filter group above) and the cluster goes `w-full`, so the search field becomes a single clean full-width bar instead of squeezing the icon toolbar. --%>
<%!-- Empty Trash (trash view) --%> <%= if @filter_trash and @total_count > 0 do %> <% end %> <%!-- Delete all orphaned (orphaned view, global root only) --%> <%= if is_nil(@scope_folder_id) and @filter_orphaned and @total_count > 0 do %> <% end %> <%!-- Search: collapsed magnifier that expands in place into an input. Collapses back when emptied (✕) or blurred while empty. --%> <%= if @show_search or @search_query != "" do %>
<.icon name="hero-magnifying-glass" class="w-4 h-4 text-base-content/40 shrink-0" />
<% else %> <% end %> <%!-- Add Media ⇄ Cancel: stays in place (fixed min-width) so the toolbar doesn't shift when the uploader opens. --%> <%= unless @filter_trash do %> <% end %> <%!-- Overflow: secondary actions --%>

<.icon name="hero-ellipsis-vertical" class="w-5 h-5" />
<%!-- The complete list of this page's media actions. Add Media + Search also have prominent quick-access controls (the primary button and the magnifier) — they're duplicated here so the ⋯ is a single place that holds everything, which also keeps them reachable when the toolbar wraps tight. Contextual destructive actions (Empty Trash / Delete all orphaned) live only on their own view's red button — not duplicated into the menu. --%>

<% end %>
<%!-- /content --%>
<%!-- /hero header (search now lives inline in the toolbar) --%> <%!-- Main-area drop target. Dropping a folder or file onto the body wraps the move into `@current_folder` (or the scope root when at the top of a scoped browser). Outline-only via `data-drop-no-bg` — a 10% primary tint across the whole content area is overwhelming compared to the folder cards. Omitted in trash / all-files views: the `if` produces `nil` and `data-drop-folder={nil}` strips the attribute, so the wrapper isn't a drop target there. --%>
<%= if @uploaded_files == [] && (@folders == [] or @file_view == "all") do %> <%!-- Empty state --%>
<%= cond do %> <% @filter_trash -> %> <.icon name="hero-trash" class="w-12 h-12 mx-auto text-base-content/30 mb-2" />
{gettext("Trash is empty.")}

{gettext("Deleted files will appear here")}
<% @search_query != "" -> %> <%!-- Zero search results is not "no media" — files exist, they just don't match. --%> <.icon name="hero-magnifying-glass" class="w-12 h-12 mx-auto text-base-content/30 mb-2" />
{gettext("No files match your search.")}

{gettext("Try a different term or clear the search")}
<% @current_folder -> %> <.icon name="hero-cloud-arrow-up" class="w-12 h-12 mx-auto text-base-content/30 mb-2" />
{gettext("This folder is empty.")}

{gettext("Drop files here or click \"Add Media\" to upload")}
<% @file_view == "all" -> %> <.icon name="hero-folder-open" class="w-12 h-12 mx-auto text-base-content/30 mb-2" />
{gettext("No files found.")}
<% true -> %> <.icon name="hero-folder-open" class="w-12 h-12 mx-auto text-base-content/30 mb-2" />
{gettext("No media uploaded yet. Upload your first file above!")}
<% end %>
<% else %> <%= if @view_mode == "grid" do %> <%!-- Grid View --%>
<%!-- Folders --%> <%= for folder <- if(@file_view == "all", do: [], else: @folders) do %>
<%= if @select_mode do %> <% end %> <%= cond do %> <% @editing_folder_description == folder.uuid -> %> <%!-- Inline description edit (from the card kebab) --%> <.icon name="hero-folder" class="w-12 h-12 mb-1" />
{@folder_description_text}

<% @renaming_folder == folder.uuid && @renaming_source == "content" -> %> <%!-- Inline rename --%> <.icon name="hero-folder" class="w-20 h-20 mb-2" />

<% true -> %> <.table_row_menu id={"folder-kebab-grid-#{folder.uuid}"} class="!absolute top-1 right-1 opacity-0 group-hover:opacity-100" > <.table_row_menu_button phx-click="start_rename_folder" phx-target={@myself} phx-value-folder-uuid={folder.uuid} icon="hero-pencil" label={gettext("Rename")} /> <.table_row_menu_button phx-click="start_edit_folder_description" phx-target={@myself} phx-value-folder-uuid={folder.uuid} icon="hero-document-text" label={ if folder.description in [nil, ""], do: gettext("Add description"), else: gettext("Edit description") } />

{gettext("Color")}
<%= for color <- PhoenixKit.Modules.Storage.Folder.colors() do %> <% end %>

<.table_row_menu_button phx-click="prepare_move_folder" phx-target={@myself} phx-value-folder-uuid={folder.uuid} icon="hero-folder-arrow-down" label={gettext("Move")} /> <.table_row_menu_button phx-click="delete_folder" phx-target={@myself} phx-value-id={folder.uuid} data-confirm={ if @filter_trash, do: gettext( "Permanently delete '%{name}' and all its contents? This cannot be undone.", name: folder.name ), else: gettext("Move '%{name}' and all its contents to trash?", name: folder.name ) } icon="hero-trash" label={gettext("Delete")} variant="error" /> <% end %>
<% end %> <%!-- Files --%> <%= for file <- @uploaded_files do %>
<%= if @select_mode do %> <% end %>
<.thumbnail_url :let={url} file={file} size={:card}> <%= if url do %>

<.icon name="hero-photo" class="w-12 h-12 mb-2 text-error" />
{gettext("Image Missing")}

<% else %>

<.icon name={file_icon_for(file)} class="w-12 h-12 mb-2" />
{file_type_label(file)}

<% end %> <%= if file.file_type == "video" do %>
<.icon name="hero-play-solid" class="w-4 h-4" />
<% end %> <%= if file.mime_type == "application/pdf" do %>
PDF
<% end %>
{format_file_size(file.size)}

<%!-- Per-file kebab menu. Sibling of the click target so its buttons don't fire `click_file`. Mirrors the folder kebab pattern: hidden by default, fades in on hover. Always shows Delete; shows Download only when an "original" URL is present. --%> <%= unless @select_mode do %> <.table_row_menu id={"file-kebab-grid-#{file.file_uuid}"} class="!absolute top-1 right-1 opacity-0 group-hover:opacity-100" trigger_class="!bg-black/40 hover:!bg-black/60 !text-white !border-0" > <.table_row_menu_button :if={ Map.get(file.urls || %{}, "original") || Map.get(file.urls || %{}, :original) } phx-click="download_file" phx-target={@myself} phx-value-file-uuid={file.file_uuid} icon="hero-arrow-down-tray" label={gettext("Download")} /> <%!-- Rotate the saved orientation ±90 (images only). Persists like the viewer's rotate button; the thumbnail reorients live. --%> <.table_row_menu_button :if={file.file_type == "image"} phx-click="rotate_file" phx-target={@myself} phx-value-file-uuid={file.file_uuid} phx-value-dir="left" icon="hero-arrow-uturn-left" label={gettext("Rotate left")} /> <.table_row_menu_button :if={file.file_type == "image"} phx-click="rotate_file" phx-target={@myself} phx-value-file-uuid={file.file_uuid} phx-value-dir="right" icon="hero-arrow-uturn-right" label={gettext("Rotate right")} /> <.table_row_menu_button phx-click="prepare_move_file" phx-target={@myself} phx-value-file-uuid={file.file_uuid} icon="hero-folder-arrow-down" label={gettext("Move")} /> <.table_row_menu_button phx-click="delete_file" phx-target={@myself} phx-value-file-uuid={file.file_uuid} data-confirm={ if @filter_trash, do: gettext( "Permanently delete '%{name}'? This cannot be undone.", name: file.filename ) } icon="hero-trash" label={ if @filter_trash, do: gettext("Delete Permanently"), else: gettext("Move to Trash") } variant="error" /> <% end %>
<% end %>
<% end %> <%= if @view_mode == "stacks" do %> <%!-- Stacks View — folders as photo piles up top, loose files under "Everything else" (Basecamp-style). StackMemory persists which stacks are open in localStorage and reopens them on remount/refresh. --%>
<%!-- Folder stacks + the New folder tile --%>
<%= for folder <- @folders do %> <% data = Map.get(@stack_previews, folder.uuid, %{previews: [], count: 0}) %> <.stack_tile folder={folder} previews={data.previews} count={data.count} expanded={folder.uuid in @expanded_stacks} myself={@myself} /> <% end %>
<%!-- Each expanded stack's grid (multiple can be open) --%> <%!-- Iterate the ordered open list (newest first) rather than @folders, so stacks render in the order opened with the latest on top. --%> <%= for folder_uuid <- @expanded_stacks, folder = Enum.find(@folders, &(&1.uuid == folder_uuid)), folder do %>

<.icon name="hero-folder-open" class="w-5 h-5 text-base-content/60" />
{folder.name}

<% files = Map.get(@stack_files, folder.uuid, []) %> <% stack_total = Map.get(@stack_previews, folder.uuid, %{count: 0}).count %> <%= if files == [] do %>
{gettext("No images")}
<% else %>
<%= for {file, i} <- Enum.with_index(files) do %> <.file_card file={file} index={i} select_mode={@select_mode} selected_files={@selected_files} filter_trash={@filter_trash} myself={@myself} /> <% end %>
<% end %> <%!-- Per-stack pagination: a stack only loads one page at a time (never the whole folder), so a huge folder stays fast. Load more appends the next page. --%>

{gettext("Showing %{loaded} of %{total} %{noun}", loaded: length(files), total: stack_total, noun: gettext("files") )}

<% end %> <%!-- Everything else: loose files in this folder (orphaned files at the root). Always a drop target so media can be dragged back out of a folder; shows a drop hint when empty (as long as there are folders). --%> <%= if @uploaded_files != [] or @folders != [] do %>

{gettext("Everything else")}
<%= if @uploaded_files == [] do %>
{gettext("Drop media here to remove it from a folder")}
<% else %>
<%= for file <- @uploaded_files do %> <.file_card file={file} select_mode={@select_mode} selected_files={@selected_files} filter_trash={@filter_trash} myself={@myself} /> <% end %>
<% end %>
<% end %> <%= if @folders == [] and @uploaded_files == [] do %>
{gettext("No media yet.")}
<% end %>
<% end %> <%= if @view_mode == "list" do %> <%!-- List View --%> <%!-- Horizontal scroll handled by the outer scroll area (not a nested overflow div) so the sticky header below pins to the top of that area while scrolling. --%>
<%!-- Sticky column header: stays glued to the top of the scroll area. `th`-level sticky (not `thead`) is the cross-browser-safe form; each cell needs an opaque bg so rows scroll under it. --%> <%= if @select_mode do %> <% end %> <%!-- All folders rendered below share the same parent (children of @current_folder, or of @scope when we're at the scoped root), so the Path column shows the same string for every row. Pre-compute once per render — previously each row called the breadcrumbs walk independently, an N+1 over identical work. --%> <% folders_path = folder_list_path(@current_folder, @scope_folder_id) %> <%!-- Folders --%> <%= for folder <- if(@file_view == "all", do: [], else: @folders) do %> <%= cond do %> <% @editing_folder_description == folder.uuid -> %> <%= if @select_mode do %> <% end %> <% @renaming_folder == folder.uuid && @renaming_source == "content" -> %> <%= if @select_mode do %> <% end %> <% true -> %> <%= if @select_mode do %> <% end %> <% end %> <% end %> <%!-- Files --%> <%= for file <- @uploaded_files do %> <%= if @select_mode do %> <% end %> <% end %>

{gettext("Name")} {gettext("Path")} {gettext("Description")} {gettext("Type")} {gettext("Size")} {gettext("Date")}

<.icon name="hero-folder" class="w-10 h-10" />

{@folder_description_text}

<.icon name="hero-folder" class="w-10 h-10" />

<.icon name="hero-folder" class="w-10 h-10" />
<%= if @renaming_folder == folder.uuid && @renaming_text != "" do %> {@renaming_text} <% else %> {folder.name} <% end %> <%!-- Mobile-only meta line: the hidden Type/Date columns folded under the name so the row stays readable without horizontal scroll. --%>
{gettext("Folder")} · {Calendar.strftime(folder.inserted_at, "%b %d, %Y")}
<%= if folders_path do %> {folders_path} <% else %> / <% end %> <%= if folder.description not in [nil, ""] do %> {folder.description} <% else %> — <% end %> {gettext("Folder")} {Calendar.strftime(folder.inserted_at, "%b %d, %Y")} <.table_row_menu id={"folder-kebab-list-#{folder.uuid}"}> <.table_row_menu_button phx-click="start_rename_folder" phx-target={@myself} phx-value-folder-uuid={folder.uuid} icon="hero-pencil" label={gettext("Rename")} /> <.table_row_menu_button phx-click="start_edit_folder_description" phx-target={@myself} phx-value-folder-uuid={folder.uuid} icon="hero-document-text" label={ if folder.description in [nil, ""], do: gettext("Add description"), else: gettext("Edit description") } />

{gettext("Color")}
<%= for color <- PhoenixKit.Modules.Storage.Folder.colors() do %> <% end %>

<.table_row_menu_button phx-click="prepare_move_folder" phx-target={@myself} phx-value-folder-uuid={folder.uuid} icon="hero-folder-arrow-down" label={gettext("Move")} /> <.table_row_menu_button phx-click="delete_folder" phx-target={@myself} phx-value-id={folder.uuid} data-confirm={ if @filter_trash, do: gettext( "Permanently delete '%{name}' and all its contents? This cannot be undone.", name: folder.name ), else: gettext( "Move '%{name}' and all its contents to trash?", name: folder.name ) } icon="hero-trash" label={gettext("Delete")} variant="error" />

<.thumbnail_url :let={url} file={file} size={:small}> <%= if url do %> <% else %>
<.icon name={file_icon_for(file)} class="w-5 h-5" />
<% end %>
{file.filename} <%!-- Mobile-only meta line: the hidden Type/Size/Date columns folded under the filename so the row stays readable without horizontal scroll. --%>
{file_type_label(file)} · {format_file_size(file.size)} · {Calendar.strftime(file.inserted_at, "%b %d, %Y")}
<%= if file.folder_path do %> {file.folder_path} <% else %> / <% end %> — {file_type_label(file)} {format_file_size(file.size)} {Calendar.strftime(file.inserted_at, "%b %d, %Y")} <%!-- Per-file kebab. `phx-click="noop"` on the wrapper intercepts the bubble so clicks on the dropdown trigger don't also fire the row's `click_file`. Same pattern the folder list-view kebab uses above. --%> <%= unless @select_mode do %> <.table_row_menu id={"file-kebab-list-#{file.file_uuid}"}> <.table_row_menu_button :if={ Map.get(file.urls || %{}, "original") || Map.get(file.urls || %{}, :original) } phx-click="download_file" phx-target={@myself} phx-value-file-uuid={file.file_uuid} icon="hero-arrow-down-tray" label={gettext("Download")} /> <%!-- Rotate the saved orientation ±90 (images only). Persists like the viewer; the thumbnail reorients live. --%> <.table_row_menu_button :if={file.file_type == "image"} phx-click="rotate_file" phx-target={@myself} phx-value-file-uuid={file.file_uuid} phx-value-dir="left" icon="hero-arrow-uturn-left" label={gettext("Rotate left")} /> <.table_row_menu_button :if={file.file_type == "image"} phx-click="rotate_file" phx-target={@myself} phx-value-file-uuid={file.file_uuid} phx-value-dir="right" icon="hero-arrow-uturn-right" label={gettext("Rotate right")} /> <.table_row_menu_button phx-click="prepare_move_file" phx-target={@myself} phx-value-file-uuid={file.file_uuid} icon="hero-folder-arrow-down" label={gettext("Move")} /> <.table_row_menu_button phx-click="delete_file" phx-target={@myself} phx-value-file-uuid={file.file_uuid} data-confirm={ if @filter_trash, do: gettext( "Permanently delete '%{name}'? This cannot be undone.", name: file.filename ) } icon="hero-trash" label={ if @filter_trash, do: gettext("Delete Permanently"), else: gettext("Move to Trash") } variant="error" /> <% end %>

<% end %> <% end %>
<%!-- Pagination (event-based; URL sync deferred to Task 3) --%> <%= if @total_count > @per_page do %>
<%= if @current_page > 1 do %> <% end %> {@current_page} / {@total_pages} <%= if @current_page < @total_pages do %> <% end %>
<% end %>

	{gettext("Name")}	{gettext("Path")}	{gettext("Description")}	{gettext("Type")}	{gettext("Size")}	{gettext("Date")}
<.icon name="hero-folder" class="w-10 h-10" />	{@folder_description_text}
<.icon name="hero-folder" class="w-10 h-10" />
<.icon name="hero-folder" class="w-10 h-10" />	<%= if @renaming_folder == folder.uuid && @renaming_text != "" do %> {@renaming_text} <% else %> {folder.name} <% end %> <%!-- Mobile-only meta line: the hidden Type/Date columns folded under the name so the row stays readable without horizontal scroll. --%> {gettext("Folder")} · {Calendar.strftime(folder.inserted_at, "%b %d, %Y")}	<%= if folders_path do %> {folders_path} <% else %> / <% end %>	<%= if folder.description not in [nil, ""] do %> {folder.description} <% else %> — <% end %>	{gettext("Folder")}		{Calendar.strftime(folder.inserted_at, "%b %d, %Y")}	<.table_row_menu id={"folder-kebab-list-#{folder.uuid}"}> <.table_row_menu_button phx-click="start_rename_folder" phx-target={@myself} phx-value-folder-uuid={folder.uuid} icon="hero-pencil" label={gettext("Rename")} /> <.table_row_menu_button phx-click="start_edit_folder_description" phx-target={@myself} phx-value-folder-uuid={folder.uuid} icon="hero-document-text" label={ if folder.description in [nil, ""], do: gettext("Add description"), else: gettext("Edit description") } /> {gettext("Color")} <%= for color <- PhoenixKit.Modules.Storage.Folder.colors() do %> <% end %> <.table_row_menu_button phx-click="prepare_move_folder" phx-target={@myself} phx-value-folder-uuid={folder.uuid} icon="hero-folder-arrow-down" label={gettext("Move")} /> <.table_row_menu_button phx-click="delete_folder" phx-target={@myself} phx-value-id={folder.uuid} data-confirm={ if @filter_trash, do: gettext( "Permanently delete '%{name}' and all its contents? This cannot be undone.", name: folder.name ), else: gettext( "Move '%{name}' and all its contents to trash?", name: folder.name ) } icon="hero-trash" label={gettext("Delete")} variant="error" />
<.thumbnail_url :let={url} file={file} size={:small}> <%= if url do %> <% else %> <.icon name={file_icon_for(file)} class="w-5 h-5" /> <% end %>	{file.filename} <%!-- Mobile-only meta line: the hidden Type/Size/Date columns folded under the filename so the row stays readable without horizontal scroll. --%> {file_type_label(file)} · {format_file_size(file.size)} · {Calendar.strftime(file.inserted_at, "%b %d, %Y")}	<%= if file.folder_path do %> {file.folder_path} <% else %> / <% end %>	—	{file_type_label(file)}	{format_file_size(file.size)}	{Calendar.strftime(file.inserted_at, "%b %d, %Y")}	<%!-- Per-file kebab. `phx-click="noop"` on the wrapper intercepts the bubble so clicks on the dropdown trigger don't also fire the row's `click_file`. Same pattern the folder list-view kebab uses above. --%> <%= unless @select_mode do %> <.table_row_menu id={"file-kebab-list-#{file.file_uuid}"}> <.table_row_menu_button :if={ Map.get(file.urls \|\| %{}, "original") \|\| Map.get(file.urls \|\| %{}, :original) } phx-click="download_file" phx-target={@myself} phx-value-file-uuid={file.file_uuid} icon="hero-arrow-down-tray" label={gettext("Download")} /> <%!-- Rotate the saved orientation ±90 (images only). Persists like the viewer; the thumbnail reorients live. --%> <.table_row_menu_button :if={file.file_type == "image"} phx-click="rotate_file" phx-target={@myself} phx-value-file-uuid={file.file_uuid} phx-value-dir="left" icon="hero-arrow-uturn-left" label={gettext("Rotate left")} /> <.table_row_menu_button :if={file.file_type == "image"} phx-click="rotate_file" phx-target={@myself} phx-value-file-uuid={file.file_uuid} phx-value-dir="right" icon="hero-arrow-uturn-right" label={gettext("Rotate right")} /> <.table_row_menu_button phx-click="prepare_move_file" phx-target={@myself} phx-value-file-uuid={file.file_uuid} icon="hero-folder-arrow-down" label={gettext("Move")} /> <.table_row_menu_button phx-click="delete_file" phx-target={@myself} phx-value-file-uuid={file.file_uuid} data-confirm={ if @filter_trash, do: gettext( "Permanently delete '%{name}'? This cannot be undone.", name: file.filename ) } icon="hero-trash" label={ if @filter_trash, do: gettext("Delete Permanently"), else: gettext("Move to Trash") } variant="error" /> <% end %>

<%!-- Move to Folder Modal --%> <%= if @show_move_modal do %> <% end %> <%!-- New Folder Modal — name the folder before it's created; Cancel (button / backdrop / Esc) adds nothing. The placeholder is the next default name, used as-is when the field is left blank. --%> <%= if @show_new_folder_modal do %> <% end %> <% end %> <%!-- ── Cover-image media picker ─────────────────────────────────────────── Reuses the shared MediaSelectorModal, scoped to the folder being edited, so the user can pick an existing image from the folder or upload a new one. Single-select; the choice is reported back to this component via `notify`, where set_cover_from_selection/2 records it as the cover. --%> <%= if @editing_folder_header do %> <.live_component module={PhoenixKitWeb.Live.Components.MediaSelectorModal} id={"#{@id}-cover-selector"} show={@selecting_cover} mode={:single} file_type_filter={:image} scope_folder_id={@editing_folder_header} selected_uuids={[]} phoenix_kit_current_user={assigns[:phoenix_kit_current_user]} notify={{PhoenixKitWeb.Components.MediaBrowser, @id}} /> <% end %> <%!-- ── Read-only modal viewer ──────────────────────────────────────────── --%> <%!-- Default click target for non-select_mode browsers — the click_file --%> <%!-- handler stashes the clicked file in :viewer_file and this block --%> <%!-- renders the preview + metadata + Download. Admin browsers get the --%> <%!-- same popup plus an "Open details page" sidebar button (details_path). --%> <%!-- Pickers reach bulk-select via the toolbar's Select button --%> <%!-- (`select_mode` toggle). Closes via X / Esc / backdrop click. --%> <%= if assigns[:viewer_file] do %> <% f = @viewer_file %> <%!-- Step through the list the viewer was opened from (the page's files, or an expanded stack's own) — not always `@uploaded_files`, which doesn't contain files that live inside a stack. --%> <% siblings = @viewer_siblings %> <% viewer_idx = Enum.find_index(siblings, &(&1.file_uuid == f.file_uuid)) %> <% has_prev = is_integer(viewer_idx) and viewer_idx > 0 %> <% has_next = is_integer(viewer_idx) and viewer_idx < length(siblings) - 1 %>

<%!-- Mobile: pin the modal-box directly to the viewport via --%> <%!-- position: fixed; inset: 0; --%> <%!-- This bypasses daisyUI's grid layout AND iOS Safari's 100vh / --%> <%!-- 100dvh quirks — the box just covers top:0 right:0 bottom:0 --%> <%!-- left:0 of whatever the visual viewport is, no math involved. --%> <%!-- `w-auto h-auto` lets the inset declarations actually drive the --%> <%!-- size; otherwise an intrinsic width/height could win. --%> <%!-- --%> <%!-- lg+: revert to a normal centred modal with 95vw × 90vh + soft --%> <%!-- rounded corners. --%> <%!-- --%> <%!-- The `!` (important) prefix is required because daisyUI v5's --%> <%!-- .modal-box defaults (width: calc(11/12 * 100%), max-width: --%> <%!-- 32rem, max-height: 100vh) win the cascade over plain Tailwind --%> <%!-- utilities. --%>

<%!-- Per-file content (close button, prev/next chevrons, --%> <%!-- canvas/video/pdf/icon renderer, composer popover, sidebar --%> <%!-- with filename + Download + metadata + comments thread) is --%> <%!-- owned by the MediaCanvasViewer child LiveComponent. Its id --%> <%!-- includes the file uuid so prev/next destroys and remounts --%> <%!-- on file change (clean canvas re-hydration), plus the dims --%> <%!-- + variant count so a processing-completion refresh (see --%> <%!-- refresh_processed_file/2) remounts with the real canvas --%> <%!-- instead of the 1000x1000 placeholder. --%> <%!-- persist_rotation is unconditional: rotation is the file's --%> <%!-- shared orientation, so anyone who can open the viewer and --%> <%!-- rotate saves it for everyone (not admin-only). The Details --%> <%!-- link stays admin-only — it targets the admin detail page. --%> <.live_component module={PhoenixKitWeb.Components.MediaCanvasViewer} id={"media-canvas-viewer-#{f.file_uuid}-#{f.width || 0}x#{f.height || 0}-#{map_size(f.urls)}"} file={f} current_user={assigns[:phoenix_kit_current_user]} parent_id={@id} has_prev={has_prev} has_next={has_next} persist_rotation={true} details_path={if @admin, do: Routes.path("/admin/media/#{f.file_uuid}")} />

<% end %>

{gettext("Upload Media")}

{gettext("No Storage Buckets Configured")}

<.icon name="hero-pencil-square" class="w-4 h-4 text-primary" /> {gettext("Edit header")}

{folder.name}

{gettext("Everything else")}

<.icon name="hero-folder-plus" class="w-5 h-5 text-primary" /> {gettext("New folder")}