<%!-- 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 --%>

<%!-- 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 %>

<%!-- 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". --%> <%= if @current_folder do %>

{@current_folder.name}

<% end %> <%!-- Search Bar (toggleable) --%> <%= if @show_search or @search_query != "" do %> <% end %> <%!-- Header --%>

<%= if @select_mode do %> <%!-- Selection Mode Header --%>

{ngettext( "%{count} selected", "%{count} selected", MapSet.size(@selected_files) + MapSet.size(@selected_folders) )} <%= if MapSet.size(@selected_files) + MapSet.size(@selected_folders) > 0 do %> <% end %>

<% else %> <%!-- Normal Header --%>

<%= cond do %> <% @filter_trash -> %> {gettext("Trash")} <% @filter_orphaned -> %> {gettext("Orphaned Files")} <% @file_view == "all" -> %> {gettext("All Files")} <% @current_folder -> %> {@current_folder.name} <% true -> %> {@scope_folder_name} <% end %>

<%= if @filter_trash do %> <%= if @select_mode and MapSet.size(@selected_files) > 0 do %> <% end %> <%= if @total_count > 0 do %> <% end %> <% end %> <%= unless @show_upload or @filter_trash do %> <% end %> <%!-- Orphan filter is only meaningful at the global root (no scope set) --%> <%= if is_nil(@scope_folder_id) do %> <%= if @filter_orphaned && @total_count > 0 do %> <% end %> <% end %>

<% end %>

<%= if @total_count > 0 do %>

<.pagination_info page={@current_page} per_page={@per_page} total_count={@total_count} /> <% end %>

<%!-- 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")}

<% @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 %> <%= if @renaming_folder == folder.uuid && @renaming_source == "content" do %> <%!-- Inline rename --%> <.icon name="hero-folder" class="w-20 h-20 mb-2" /> <% else %> <.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")} />

{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={ gettext("Delete '%{name}'? Files move to parent.", 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={:small}> <%= if url do %> {file.filename}

<% else %>

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

{String.upcase(file.file_type)}

<% 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")} /> <.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 == "list" do %> <%!-- List View --%>

<%= 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 %> <%= if @renaming_folder == folder.uuid && @renaming_source == "content" do %> <%= if @select_mode do %> <% end %> <% else %> <%= if @select_mode do %> <% end %> <% end %> <% end %> <%!-- Files --%> <%= for file <- @uploaded_files do %> <%= if @select_mode do %> <% end %> <% end %>

	{gettext("Name")}	{gettext("Path")}	{gettext("Type")}	{gettext("Size")}	{gettext("Date")}
<.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 %>	<%= if folders_path do %> {folders_path} <% 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")} /> {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={ gettext("Delete '%{name}'? Files move to parent.", 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(file.file_type)} class="w-5 h-5" /> <% end %>	{file.filename}	<%= if file.folder_path do %> {file.folder_path} <% else %> / <% end %>	{String.upcase(file.file_type)}	{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")} /> <.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 %>

<%!-- Move to Folder Modal --%> <%= if @show_move_modal do %> <% end %> <% end %> <%!-- ── Read-only modal viewer ──────────────────────────────────────────── --%> <%!-- Default click target for non-admin, non-select_mode browsers — the --%> <%!-- click_file handler stashes the clicked file in :viewer_file and this --%> <%!-- block renders the preview + metadata + Download. 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 %> <% viewer_idx = Enum.find_index(@uploaded_files, &(&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(@uploaded_files) - 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. --%>

<%!-- Close button — top-right of modal-box. Solid bg-base-100 + ring + --%> <%!-- shadow-lg keeps it visible against any image content (the previous --%> <%!-- bg-base-100/80 blended into light photos and disappeared). z-30 --%> <%!-- sits above the chevron buttons (z-10) and the comments thread. --%>

<%!-- Viewer (image / video / pdf / icon) --%>

<%!-- Chevron positioning sits on a wrapper div, not the button. --%> <%!-- daisyUI's active-state CSS replaces `transform` with --%> <%!-- `scale(0.97)` on click, which would clobber a -translate-y-1/2 --%> <%!-- on the button itself and make it jump down 50% of its height. --%> <%= if has_prev do %>

<% end %> <%= if has_next do %>

<% end %> <%= cond do %> <% is_binary(f.mime_type) and String.starts_with?(f.mime_type, "image/") -> %> <%!-- Fresco hosts the viewer (pan + zoom + nav + viewport --%> <%!-- clamping + smooth animations). Tessera attaches as a layer --%> <%!-- that adds a DZI source provider + multi-layer progressive --%> <%!-- zoom — starts on `medium` and swaps up as the user zooms: --%> <%!-- --%> <%!-- small image → [medium, dzi] --%> <%!-- 4K+ image → [medium, large, dzi] --%> <%!-- --%> <%!-- Tessera 0.2 split the viewer into a Fresco OpenSeadragon --%> <%!-- viewer + a Tessera layer that swaps between source --%> <%!-- qualities. Fresco renders the initial cheap source; the --%> <%!-- Tessera layer attaches via fresco_id and takes over the --%> <%!-- per-zoom layer-swap logic, preserving viewport bounds. --%> <%!-- Etcher's annotation overlay attaches to the same Fresco --%> <%!-- viewer and adds the pencil button to its nav column. --%> <%= with sources <- tessera_sources(f), fresco_src <- (case sources do [first | _] -> first.url [] -> f.urls["original"] || f.urls["medium"] end) do %> f.file_uuid} src={fresco_src} class="w-full h-full lg:rounded" rotate theme={:inherit} /> <%!-- Tessera only attaches when there's something to --%> <%!-- swap between — files without medium/large/dzi --%> <%!-- variants (variant generator hasn't run yet, etc.) --%> <%!-- get plain Fresco without progressive zoom. --%> <%= if sources != [] do %> f.file_uuid} sources={sources} /> <% end %> <%!-- Etcher attaches to any Fresco viewer regardless --%> <%!-- of Tessera; annotations work even on files that --%> <%!-- skip the progressive-zoom layer. --%> f.file_uuid} target_type="file" target_uuid={f.file_uuid} initial_annotations={@viewer_annotations} tools={[ :rectangle, :circle, :polygon, :freehand, :callout, :text, :dimension, :eraser ]} /> <% end %> <% is_binary(f.mime_type) and String.starts_with?(f.mime_type, "video/") -> %>

<% f.mime_type == "application/pdf" -> %> <% true -> %>

<.icon name={file_icon(f.file_type)} class="w-32 h-32 mb-4" />

{String.upcase(f.file_type || gettext("FILE"))}

{f.mime_type}

<% end %> <%!-- Floating annotation composer — anchored to the shape's --%> <%!-- bottom-left in container px (supplied by etcher.js in --%> <%!-- the etcher:created event). Sidebar comments stay visible --%> <%!-- alongside; this popover is for the new shape only. --%> <%= if @composing_annotation_uuid && assigns[:phoenix_kit_current_user] do %> <%!-- The AnnotationComposerPosition hook clamps left/top --%> <%!-- after mount + updates + window resize so the popover --%> <%!-- never extends past the viewer's right edge or bottom --%> <%!-- (the server-set anchor is the shape's bottom-left, so a --%> <%!-- shape drawn near a boundary would otherwise place the --%> <%!-- popover off-screen). --%> <% end %>

<%!-- Sidebar --%>

{f.filename}

<%= if f.urls["original"] do %> <.icon name="hero-arrow-down-tray" class="w-4 h-4" /> {gettext("Download")} <% end %>

{gettext("Type:")} {String.upcase(f.file_type || gettext("FILE"))}

{gettext("MIME:")} {f.mime_type}

{gettext("Size:")} {format_file_size(f.size)}

{gettext("Uploaded:")} {Calendar.strftime(f.inserted_at, "%b %d, %Y at %H:%M")}

<%!-- Comments section — gated on the Comments module being --%> <%!-- installed AND enabled, plus a logged-in user. Keyed by --%> <%!-- file_uuid so prev/next remounts the component cleanly. --%> <%!-- --%> <%!-- The wrapper applies a compact-mode override: shrinks the --%> <%!-- comments component's typography, paddings, and avatars --%> <%!-- via descendant selectors so it fits inside the sidebar --%> <%!-- without truncation. The component itself isn't modified. --%> <%= if comments_enabled?() and assigns[:phoenix_kit_current_user] do %>

<.live_component module={PhoenixKitComments.Web.CommentsComponent} id={"media-comments-" <> f.file_uuid} resource_type="file" resource_uuid={f.file_uuid} current_user={@phoenix_kit_current_user} show_likes={true} title={gettext("Comments")} />

<% end %>