#+TITLE: Resource Loader
#+OPTIONS: num:nil title:nil toc:nil
#+NO_SIDENOTES: t
#+DATE: <2026-08-19 Wed>

#+BEGIN_EXPORT html
<main class="rl-app" id="resource-loader" aria-labelledby="rl-title">
  <header class="rl-hero">
    <div class="rl-hero__copy">
      <p class="rl-eyebrow">Private synced library</p>
      <h1 id="rl-title">Resource Loader</h1>
      <p>Keep books, papers, articles, and videos together. Metadata and covers follow you across devices.</p>
    </div>
    <div class="rl-hero__actions">
      <label class="rl-vault-picker" for="rl-vault-select">
        <span>Current vault</span>
        <select id="rl-vault-select" aria-label="Current vault"></select>
      </label>
      <button type="button" class="rl-icon-button" id="rl-manage-vaults">Manage vaults</button>
    </div>
  </header>

  <section class="rl-summary" aria-label="Vault summary">
    <div><span id="rl-stat-total">0</span><small>resources</small></div>
    <div><span id="rl-stat-active">0</span><small>active</small></div>
    <div><span id="rl-stat-backlog">0</span><small>backlog</small></div>
    <div><span id="rl-stat-completed">0</span><small>completed</small></div>
    <div class="rl-summary__privacy" id="rl-sync-status" data-state="syncing"><span aria-hidden="true">●</span><small>connecting…</small></div>
  </section>

  <section class="rl-command-bar" aria-label="Resource actions">
    <button type="button" class="rl-primary" id="rl-add-resource">Add resource</button>
    <button type="button" id="rl-import-pdf">Import PDF</button>
    <button type="button" id="rl-import-json">Import JSON</button>
    <button type="button" id="rl-export-json">Export JSON</button>
    <button type="button" id="rl-storage-button">Storage</button>
    <input class="visually-hidden" id="rl-pdf-input" type="file" accept="application/pdf,.pdf" />
    <input class="visually-hidden" id="rl-json-input" type="file" accept="application/json,.json" />
  </section>

  <div class="rl-workspace">
    <aside class="rl-sidebar" aria-label="Library folders">
      <div class="rl-sidebar__head">
        <div>
          <p class="rl-eyebrow">Browse</p>
          <h2>Folders</h2>
        </div>
        <button type="button" class="rl-icon-button" id="rl-add-folder" aria-label="Add folder">+ Add</button>
      </div>
      <nav class="rl-folder-list" id="rl-folder-list"></nav>
    </aside>

    <section class="rl-library" aria-labelledby="rl-library-title">
      <header class="rl-library__toolbar">
        <div>
          <p class="rl-eyebrow" id="rl-context-label">All resources</p>
          <h2 id="rl-library-title">Library</h2>
        </div>
        <div class="rl-view-toggle" aria-label="Display mode">
          <button type="button" id="rl-view-list" class="is-active" aria-pressed="true">List</button>
          <button type="button" id="rl-view-grid" aria-pressed="false">Grid</button>
        </div>
      </header>

      <div class="rl-filters">
        <label class="rl-search">
          <span class="visually-hidden">Search resources</span>
          <input id="rl-search" type="search" placeholder="Search title, creator, tag…" autocomplete="off" />
        </label>
        <label><span class="visually-hidden">Resource type</span><select id="rl-filter-type">
          <option value="">All types</option><option value="book">Books</option><option value="article">Articles</option><option value="video">Videos</option>
        </select></label>
        <label><span class="visually-hidden">Resource status</span><select id="rl-filter-status">
          <option value="">All statuses</option><option value="backlog">Backlog</option><option value="shelf">Shelf</option><option value="active">Active</option><option value="completed">Completed</option><option value="archived">Archived</option>
        </select></label>
        <label><span class="visually-hidden">Resource tag</span><select id="rl-filter-tag"><option value="">All tags</option></select></label>
        <label><span class="visually-hidden">Sort resources</span><select id="rl-sort">
          <option value="updated">Recently updated</option><option value="title">Title</option><option value="progress">Progress</option>
        </select></label>
      </div>

      <div class="rl-resource-list" id="rl-resource-list" aria-live="polite"></div>
    </section>
  </div>
</main>

<dialog class="rl-dialog rl-resource-dialog" id="rl-resource-dialog">
  <form method="dialog" class="rl-dialog__shell" id="rl-resource-form">
    <header class="rl-dialog__head">
      <div><p class="rl-eyebrow">Library record</p><h2 id="rl-resource-dialog-title">Add resource</h2></div>
      <button type="button" class="rl-close" data-close-dialog aria-label="Close">×</button>
    </header>
    <div class="rl-dialog__body">
      <input type="hidden" id="rl-resource-id" />
      <input type="hidden" id="rl-attachment-id" />
      <input type="hidden" id="rl-thumbnail-id" />
      <div class="rl-cover-preview" id="rl-cover-preview" data-resource-types="book" aria-label="Cover preview"><span>Cover</span></div>
      <div class="rl-form-grid">
        <label class="rl-field rl-field--wide">Title <input id="rl-field-title" required maxlength="300" /></label>
        <label class="rl-field rl-field--wide"><span id="rl-creators-label">Creators</span><input id="rl-field-creators" placeholder="Separate names with commas" /></label>
        <label class="rl-field">Type <select id="rl-field-type"><option value="book">Book</option><option value="article">Article</option><option value="video">Video</option></select></label>
        <label class="rl-field" data-resource-types="book">Format <select id="rl-field-format"><option value="physical">Physical</option><option value="pdf">PDF</option><option value="web">Web</option></select></label>
        <label class="rl-field">Status <select id="rl-field-status"><option value="backlog">Backlog</option><option value="shelf">Shelf</option><option value="active">Active</option><option value="completed">Completed</option><option value="archived">Archived</option></select></label>
        <label class="rl-field">Folder <select id="rl-field-folder"><option value="">Unfiled</option></select></label>
        <label class="rl-field" data-resource-types="book">Pages <input id="rl-field-pages" type="number" min="0" inputmode="numeric" /></label>
        <label class="rl-field" data-resource-types="video">Duration (minutes) <input id="rl-field-duration" type="number" min="0" inputmode="numeric" /></label>
        <label class="rl-field rl-field--wide">URL <input id="rl-field-url" type="url" placeholder="https://…" /></label>
        <label class="rl-field"><span id="rl-publisher-label">Publisher / channel</span><input id="rl-field-publisher" /></label>
        <label class="rl-field">Published <input id="rl-field-published" placeholder="Year or date" /></label>
        <label class="rl-field rl-field--wide">Tags <input id="rl-field-tags" placeholder="Separate tags with commas" /></label>
        <label class="rl-field rl-field--wide" data-resource-types="book">Description <textarea id="rl-field-description" rows="3"></textarea></label>
        <label class="rl-field rl-field--wide">Notes <textarea id="rl-field-notes" rows="4"></textarea></label>
      </div>
      <section class="rl-sessions" id="rl-session-section" hidden>
        <div class="rl-sessions__head"><h3>Progress sessions</h3><button type="button" id="rl-add-session">Log session</button></div>
        <div id="rl-session-list"></div>
      </section>
    </div>
    <footer class="rl-dialog__foot">
      <button type="button" class="rl-danger" id="rl-delete-resource" hidden>Delete</button>
      <span class="rl-dialog__spacer"></span>
      <button type="button" id="rl-open-resource" hidden>Open</button>
      <button type="button" data-close-dialog>Cancel</button>
      <button type="submit" class="rl-primary">Save resource</button>
    </footer>
  </form>
</dialog>

<dialog class="rl-dialog" id="rl-session-dialog">
  <form method="dialog" class="rl-dialog__shell rl-dialog__shell--small" id="rl-session-form">
    <header class="rl-dialog__head"><div><p class="rl-eyebrow">Reading activity</p><h2>Log a session</h2></div><button type="button" class="rl-close" data-close-dialog aria-label="Close">×</button></header>
    <div class="rl-dialog__body rl-form-grid">
      <label class="rl-field">Date <input id="rl-session-date" type="date" required /></label>
      <label class="rl-field"><span id="rl-session-start-label">Start page</span><input id="rl-session-start" type="number" min="0" required /></label>
      <label class="rl-field"><span id="rl-session-end-label">End page</span><input id="rl-session-end" type="number" min="0" required /></label>
      <label class="rl-field rl-field--wide">Note <textarea id="rl-session-note" rows="3"></textarea></label>
    </div>
    <footer class="rl-dialog__foot"><button type="button" data-close-dialog>Cancel</button><button type="submit" class="rl-primary">Save session</button></footer>
  </form>
</dialog>

<dialog class="rl-dialog" id="rl-name-dialog">
  <form method="dialog" class="rl-dialog__shell rl-dialog__shell--small" id="rl-name-form">
    <header class="rl-dialog__head"><div><p class="rl-eyebrow" id="rl-name-kicker">Organise</p><h2 id="rl-name-title">Add folder</h2></div><button type="button" class="rl-close" data-close-dialog aria-label="Close">×</button></header>
    <div class="rl-dialog__body"><label class="rl-field">Name <input id="rl-name-input" required maxlength="80" /></label><label class="rl-field" id="rl-colour-field" hidden>Colour <input id="rl-name-colour" type="color" value="#9b6b43" /></label></div>
    <footer class="rl-dialog__foot"><button type="button" class="rl-danger" id="rl-name-delete" hidden>Delete</button><span class="rl-dialog__spacer"></span><button type="button" data-close-dialog>Cancel</button><button type="submit" class="rl-primary">Save</button></footer>
  </form>
</dialog>

<dialog class="rl-dialog" id="rl-vault-dialog">
  <div class="rl-dialog__shell rl-dialog__shell--small">
    <header class="rl-dialog__head"><div><p class="rl-eyebrow">Separate collections</p><h2>Manage vaults</h2></div><button type="button" class="rl-close" data-close-dialog aria-label="Close">×</button></header>
    <div class="rl-dialog__body"><div id="rl-vault-list"></div><button type="button" class="rl-primary" id="rl-add-vault">Add vault</button></div>
  </div>
</dialog>

<dialog class="rl-dialog" id="rl-import-dialog">
  <div class="rl-dialog__shell rl-dialog__shell--small">
    <header class="rl-dialog__head"><div><p class="rl-eyebrow">JSON preview</p><h2>Import library</h2></div><button type="button" class="rl-close" data-close-dialog aria-label="Close">×</button></header>
    <div class="rl-dialog__body"><div class="rl-import-summary" id="rl-import-summary"></div><p class="rl-help">PDF files are not contained in JSON backups and must be reattached in this browser.</p></div>
    <footer class="rl-dialog__foot"><button type="button" data-close-dialog>Cancel</button><button type="button" id="rl-import-replace">Replace all</button><button type="button" class="rl-primary" id="rl-import-merge">Merge</button></footer>
  </div>
</dialog>

<dialog class="rl-dialog" id="rl-storage-dialog">
  <div class="rl-dialog__shell rl-dialog__shell--small">
    <header class="rl-dialog__head"><div><p class="rl-eyebrow">This browser</p><h2>Local storage</h2></div><button type="button" class="rl-close" data-close-dialog aria-label="Close">×</button></header>
    <div class="rl-dialog__body"><p id="rl-storage-summary">Calculating storage use…</p><p class="rl-help">Metadata and thumbnails sync to the server. PDFs remain only in the browser where they were imported.</p><button type="button" id="rl-request-persistence">Request persistent storage</button></div>
    <footer class="rl-dialog__foot"><button type="button" class="rl-danger" id="rl-clear-data">Clear this browser's cache &amp; PDFs</button><button type="button" data-close-dialog>Close</button></footer>
  </div>
</dialog>

<div class="rl-loading" id="rl-loading" role="status"><span></span><p>Opening your library…</p></div>
<div class="rl-toast" id="rl-toast" role="status" aria-live="polite"></div>
#+END_EXPORT