`views/public/papers-list.ejs`

64 lines
<%- include('../partials/head', { title }) %>
<%- include('../partials/header') %>

<section class="papers-page" style="max-width:980px;margin:0 auto;padding:48px 24px">
  <div style="margin-bottom:32px">
    <h1 class="display-sm" style="margin:0 0 10px">Paper threads</h1>
    <p class="lede" style="margin:0;max-width:680px">Working installers — not marketing copy — talking about the install quirks of the papers that matter. Drop %, paste type, soak time, what fails in humid environments, what to bring on the second visit.</p>
  </div>

  <% if (categories && categories.length) { %>
    <nav class="papers-cats" aria-label="Filter by category" style="display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px;padding:0 0 18px;border-bottom:1px solid var(--border,#ddd)">
      <a href="/papers" class="<%= !activeCategory ? 'is-current' : '' %>"
         style="padding:6px 14px;border:1px solid <%= !activeCategory ? '#0e0e0e' : 'var(--border,#ddd)' %>;border-radius:18px;font-size:13px;color:<%= !activeCategory ? '#fff' : 'inherit' %>;background:<%= !activeCategory ? '#0e0e0e' : 'transparent' %>;text-decoration:none">
        All
      </a>
      <% categories.forEach(function(c){ %>
        <a href="/papers?category=<%= encodeURIComponent(c.category) %>"
           style="padding:6px 14px;border:1px solid <%= activeCategory === c.category ? '#0e0e0e' : 'var(--border,#ddd)' %>;border-radius:18px;font-size:13px;color:<%= activeCategory === c.category ? '#fff' : 'inherit' %>;background:<%= activeCategory === c.category ? '#0e0e0e' : 'transparent' %>;text-decoration:none;text-transform:capitalize">
          <%= c.category %> <span style="opacity:0.6">· <%= c.n %></span>
        </a>
      <% }); %>
    </nav>
  <% } %>

  <% if (!threads || !threads.length) { %>
    <div class="callout">
      <p style="margin:0">No threads here yet.<% if (activeCategory) { %> <a href="/papers">See all papers →</a><% } %></p>
    </div>
  <% } else { %>
    <ul style="list-style:none;padding:0;margin:0;display:grid;gap:14px">
      <% threads.forEach(function(t){ %>
        <li>
          <a href="/papers/<%= t.slug %>" style="display:block;padding:20px 22px;border:1px solid var(--border,#ddd);border-radius:8px;text-decoration:none;color:inherit;transition:border-color 0.15s">
            <div style="display:flex;justify-content:space-between;align-items:start;gap:16px;flex-wrap:wrap">
              <div style="flex:1;min-width:220px">
                <div style="font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:#888"><%= t.brand %></div>
                <h2 style="margin:4px 0 0;font-size:20px;letter-spacing:0.01em"><%= t.paper_name %></h2>
                <% if (t.description) { %>
                  <p class="muted" style="margin:8px 0 0;font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden"><%= t.description %></p>
                <% } %>
              </div>
              <div style="text-align:right;font-size:13px">
                <% if (t.category) { %>
                  <div class="muted" style="text-transform:capitalize;margin-bottom:4px"><%= t.category %></div>
                <% } %>
                <% if (t.paste_type) { %>
                  <div class="muted">paste: <%= t.paste_type %></div>
                <% } %>
                <div style="margin-top:8px;font-weight:500"><%= t.comment_count %> <%= t.comment_count === 1 ? 'note' : 'notes' %></div>
              </div>
            </div>
          </a>
        </li>
      <% }); %>
    </ul>
  <% } %>

  <p class="muted" style="margin-top:36px;font-size:13px;line-height:1.6;max-width:680px">
    Threads are public-readable. Only verified installer members can post — the goal is craft-quality, signal-rich exchange between practitioners. If a paper you work with isn't here yet, <a href="/login">log in</a> and add it.
  </p>
</section>

<%- include('../partials/footer') %>