Ctrl K
ComunidadGuías…

mockups/discussion_detail_locked.html

Rama main · réplica de lectura del repositorio original.

Archivo original ↗Preguntar a KiBot
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Should we drop Go 1.22 support in the next minor release? · mkappworks/cloudzilla — Cloudzilla</title>
<link rel="stylesheet" href="/assets/tailwind.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600&display=swap" rel="stylesheet" />
</head>
<body class="min-h-screen antialiased">
<a href="#main-content" class="skip-link">Skip to main content</a>

<div id="cz-header" data-repo-tab="discussions"></div>
<script src="shell.js"></script>

<main id="main-content" tabindex="-1" class="max-w-[1400px] mx-auto px-6 pt-6 pb-20">

<div>
  <section class="mb-6 border-b border-border pb-6">
    <p class="font-mono text-[11px] text-muted-foreground uppercase tracking-wider mb-2">
      <a href="repo.html" class="hover:underline">cloudzilla</a>
      <span aria-hidden="true">·</span>
      <a href="discussions.html" class="hover:underline">Discussions</a>
      <span aria-hidden="true">·</span>
      <span aria-current="page">#31</span>
    </p>
    <div class="mb-3">
      <div id="title-view">
       <div class="flex items-start justify-between gap-3">
        <h1 class="text-2xl font-semibold tracking-tight min-w-0">
          <span id="title-text">Should we drop Go 1.22 support in the next minor release?</span>
          <span class="text-muted-foreground font-normal font-mono">#31</span>
        </h1>
        <button type="button" id="edit-title-btn" class="shrink-0 inline-flex items-center h-8 px-3 text-[13px] rounded-md border border-border text-muted-foreground hover:bg-muted hover:text-foreground">Edit</button>
       </div>
      </div>
      <div id="title-edit" hidden>
       <div class="flex items-center gap-2">
        <input id="dd-title-input" type="text" value="Should we drop Go 1.22 support in the next minor release?" class="flex-1 min-w-0 h-9 rounded-md border border-border bg-transparent px-3 text-sm"/>
        <button type="button" id="title-save" class="inline-flex items-center h-9 px-4 text-[13px] rounded-md font-medium bg-foreground text-background">Save</button>
        <button type="button" id="title-cancel" class="inline-flex items-center h-9 px-3 text-[13px] rounded-md text-muted-foreground hover:underline">Cancel</button>
       </div>
      </div>
    </div>
    <div class="flex flex-wrap items-center gap-1.5 text-[13px] text-muted-foreground">
      <span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-5 w-5 text-[10px]" aria-hidden="true">K</span>
      <span><strong class="text-foreground">kiyo</strong> started this discussion</span>
      <time>May 9, 2026</time>
      <span class="opacity-50 mx-1" aria-hidden="true">·</span>
      <span>2 replies</span>
      <span class="opacity-50 mx-1" aria-hidden="true">·</span>
      <span id="hdr-cat" class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium border border-border bg-muted text-muted-foreground">General</span>
      <span id="hdr-labels" class="contents"><span class="inline-block max-w-full truncate align-middle rounded-full border px-2 py-px text-[11px] leading-4 font-medium border-(color:--label-border) bg-(color:--label-bg) text-(color:--label-fg) dark:border-(color:--label-dark-border) dark:bg-(color:--label-dark-bg) dark:text-(color:--label-dark-fg)" style="--label-bg:#4ade80;--label-fg:#1f2328;--label-border:#41c371;--label-dark-bg:#4ade802e;--label-dark-border:#4ade8066;--label-dark-fg:#4ade80">tooling</span></span>
          <span class="inline-flex items-center gap-1.5 h-[22px] px-2 rounded-full border text-[11px] font-medium bg-secondary text-secondary-foreground border-transparent">Locked</span>
    </div>
  </section>
  <div class="grid grid-cols-1 lg:grid-cols-[1fr_280px] gap-8">
    <div class="space-y-5 min-w-0">
      <article id="discussion-description" class="rounded-md border border-border bg-card overflow-hidden">
        <header class="px-4 py-2.5 border-b border-border bg-blue-500/10 flex items-center gap-2 flex-wrap text-[12.5px]">
          <span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-6 w-6 text-[10px]" role="img" aria-label="kiyo">K</span>
          <strong class="text-foreground">kiyo</strong>
          <span class="text-muted-foreground">started the discussion</span>
          <time class="text-muted-foreground">May 9, 2026</time>
          <button type="button" id="edit-desc-btn" class="ml-auto inline-flex items-center gap-1 h-7 px-2 rounded-md border border-border hover:bg-accent text-[12px] text-muted-foreground">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 113 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
            Edit
          </button>
        </header>
        <div class="px-4 py-4">
          <div id="desc-rendered" class="prose prose-sm dark:prose-invert max-w-none">
            <p>Go 1.23 has been our minimum since the transport rewrite, but <code>go.mod</code> still lists 1.22 as the floor for the CLI package.</p>
            <p>Dropping 1.22 lets us use the new <code>slices</code> / <code>maps</code> stdlib helpers directly and remove the <code>golang.org/x/exp</code> shim. Any reason to keep 1.22 around for the next minor?</p>
          </div>
          <form id="desc-editor" hidden>
            <div class="rounded-md border border-border overflow-hidden">
              <div data-markdown-editor data-rows="12" data-placeholder="Edit the description…"><textarea>Go 1.23 has been our minimum since the transport rewrite, but `go.mod` still lists 1.22 as the floor for the CLI package.

Dropping 1.22 lets us use the new `slices` / `maps` stdlib helpers directly and remove the `golang.org/x/exp` shim. Any reason to keep 1.22 around for the next minor?</textarea></div>
            </div>
            <div class="flex justify-end gap-2 mt-2">
              <button type="button" id="desc-cancel" class="h-8 px-3 text-[13px] rounded-md border border-border hover:bg-accent">Cancel</button>
              <button type="submit" id="desc-save" class="h-8 px-3 text-[13px] rounded-md font-medium bg-foreground text-background">Save</button>
            </div>
          </form>
        </div>
        <footer class="px-4 py-2 border-t border-border">
          <div class="flex flex-wrap items-center gap-1 mt-2">
            <button type="button" class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-sm border transition-colors hover:border-primary/40 bg-background border-border text-muted-foreground">👍 <span class="text-xs font-medium">3</span></button>
            <details class="relative">
              <summary class="list-none inline-flex items-center justify-center w-7 h-7 rounded-full border border-border text-muted-foreground hover:border-primary/40 hover:text-foreground cursor-pointer text-sm transition-colors">+</summary>
              <div class="absolute z-10 left-0 top-8 bg-background border border-border rounded-lg shadow-md p-2 flex gap-1 flex-wrap">
                <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">👍</button>
                <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">👎</button>
                <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">😄</button>
                <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">🎉</button>
                <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">😕</button>
                <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">❤️</button>
                <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">🚀</button>
                <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">👀</button>
              </div>
            </details>
          </div>
        </footer>
      </article>
      <h2 class="font-mono text-[11px] text-muted-foreground uppercase tracking-wider pt-1">
        <span>2 replies</span>
      </h2>
      <div id="discussion-timeline" class="space-y-5">
        <article id="reply-1" class="rounded-md border bg-card overflow-hidden border-border">
          <header class="px-4 py-2.5 border-b flex items-center gap-2 text-[12.5px] border-border bg-muted">
            <span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-6 w-6 text-[10px]" role="img" aria-label="malith">M</span>
            <strong class="text-foreground">malith</strong>
            <span class="text-muted-foreground">replied</span>
            <time class="text-muted-foreground ml-auto">May 9, 2026 at 16:05</time>
          </header>
          <div class="px-4 py-4 prose prose-sm dark:prose-invert max-w-none">
            <p>No strong reason from my side — the SSH and HTTP transports already require 1.23. I'd bump the floor to 1.23 everywhere and drop the <code>x/exp</code> dependency in the same PR.</p>
          </div>
          <footer class="px-4 py-2 border-t border-border flex items-center gap-2">
            <div class="flex flex-wrap items-center gap-1 mt-2">
              <button type="button" class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-sm border transition-colors hover:border-primary/40 bg-background border-border text-muted-foreground">👍 <span class="text-xs font-medium">2</span></button>
              <details class="relative">
                <summary class="list-none inline-flex items-center justify-center w-7 h-7 rounded-full border border-border text-muted-foreground hover:border-primary/40 hover:text-foreground cursor-pointer text-sm transition-colors">+</summary>
                <div class="absolute z-10 left-0 top-8 bg-background border border-border rounded-lg shadow-md p-2 flex gap-1 flex-wrap">
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">👍</button>
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">👎</button>
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">😄</button>
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">🎉</button>
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">😕</button>
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">❤️</button>
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">🚀</button>
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">👀</button>
                </div>
              </details>
            </div>
            <div class="ml-auto flex items-center gap-2">
              <button type="button" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors bg-success text-success-foreground hover:bg-success/90 h-8 px-3 text-[13px]">Mark as answer</button>
            </div>
          </footer>
        </article>
        <article id="reply-2" class="rounded-md border bg-card overflow-hidden border-border">
          <header class="px-4 py-2.5 border-b flex items-center gap-2 text-[12.5px] border-border bg-muted">
            <span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-6 w-6 text-[10px]" role="img" aria-label="daisy">D</span>
            <strong class="text-foreground">daisy</strong>
            <span class="text-muted-foreground">replied</span>
            <time class="text-muted-foreground ml-auto">May 10, 2026 at 09:20</time>
          </header>
          <div class="px-4 py-4 prose prose-sm dark:prose-invert max-w-none">
            <p>Agreed. One packaging note: the Homebrew formula pins the Go version, so the bottle needs updating in lockstep. I'll take that part.</p>
          </div>
          <footer class="px-4 py-2 border-t border-border flex items-center gap-2">
            <div class="flex flex-wrap items-center gap-1 mt-2">
              <button type="button" class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-sm border transition-colors hover:border-primary/40 bg-primary/10 border-primary/40 text-foreground">🎉 <span class="text-xs font-medium">2</span></button>
              <details class="relative">
                <summary class="list-none inline-flex items-center justify-center w-7 h-7 rounded-full border border-border text-muted-foreground hover:border-primary/40 hover:text-foreground cursor-pointer text-sm transition-colors">+</summary>
                <div class="absolute z-10 left-0 top-8 bg-background border border-border rounded-lg shadow-md p-2 flex gap-1 flex-wrap">
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">👍</button>
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">👎</button>
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">😄</button>
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">🎉</button>
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">😕</button>
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">❤️</button>
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">🚀</button>
                  <button type="button" class="text-lg hover:scale-125 transition-transform leading-none">👀</button>
                </div>
              </details>
            </div>
            <div class="ml-auto flex items-center gap-2">
              <button type="button" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors bg-success text-success-foreground hover:bg-success/90 h-8 px-3 text-[13px]">Mark as answer</button>
            </div>
          </footer>
        </article>
      </div>
        <div class="rounded-md border border-border bg-muted p-4 text-[13px] text-muted-foreground flex items-center justify-between gap-3">
          <span>This discussion is locked. No new replies can be added.</span>
          <button type="button" data-href="discussion_detail.html" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors hover:bg-accent hover:text-accent-foreground h-8 px-3 text-[13px]">Unlock discussion</button>
        </div>
    </div>
    <aside class="space-y-6" aria-label="Discussion metadata">
      <section aria-labelledby="dd-category-heading">
        <div class="flex items-center justify-between mb-2">
          <h2 id="dd-category-heading" class="text-[12px] font-medium text-muted-foreground">Category</h2>
          <div class="relative">
            <button type="button" data-pop-btn aria-expanded="false" aria-haspopup="menu" aria-label="Change category" class="text-muted-foreground hover:text-foreground"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 113 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button>
            <div data-pop hidden role="menu" aria-label="Move to category" class="absolute right-0 top-full mt-1.5 z-50 w-56 rounded-md border border-border bg-popover text-popover-foreground shadow-md p-1">
              <div class="px-2 pt-1 pb-0.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">Move to category</div>
              <button type="button" role="menuitemradio" data-cat="General" aria-checked="true" class="flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
                <span class="flex-1 truncate">General</span>
                <span class="cat-check "><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="shrink-0 text-success" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              </button>
              <button type="button" role="menuitemradio" data-cat="Q&amp;A" aria-checked="false" class="flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
                <span class="flex-1 truncate">Q&amp;A</span>
                <span class="cat-check invisible"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="shrink-0 text-success" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              </button>
              <button type="button" role="menuitemradio" data-cat="Ideas" aria-checked="false" class="flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
                <span class="flex-1 truncate">Ideas</span>
                <span class="cat-check invisible"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="shrink-0 text-success" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              </button>
              <button type="button" role="menuitemradio" data-cat="Announcements" aria-checked="false" class="flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
                <span class="flex-1 truncate">Announcements</span>
                <span class="cat-check invisible"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="shrink-0 text-success" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              </button>
            </div>
          </div>
        </div>
        <span id="side-cat" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[12px] font-medium border border-border bg-muted text-foreground">General</span>
      </section>
      <div id="discussion-labels" class="space-y-2">
        <div class="flex items-center justify-between">
          <h3 class="text-[12px] font-medium text-muted-foreground">Labels</h3>
          <div class="relative">
            <button type="button" data-pop-btn aria-expanded="false" aria-haspopup="menu" aria-label="Edit labels" class="text-muted-foreground hover:text-foreground"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 113 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></button>
            <div data-pop hidden role="menu" aria-label="Apply labels" class="absolute right-0 top-full mt-1.5 z-50 w-56 rounded-md border border-border bg-popover text-popover-foreground shadow-md p-1 max-h-72 overflow-y-auto">
              <div class="px-2 pt-1 pb-0.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">Apply labels</div>
              <button type="button" role="menuitemcheckbox" data-lab="observability" data-color="#6ea8fe" aria-checked="false" class="flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
                <span class="h-2.5 w-2.5 rounded-full inline-block shrink-0" style="background-color: #6ea8fe"></span>
                <span class="flex-1 truncate">observability</span>
                <span class="lab-check invisible"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="shrink-0 text-success" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              </button>
              <button type="button" role="menuitemcheckbox" data-lab="rfc" data-color="#c084fc" aria-checked="false" class="flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
                <span class="h-2.5 w-2.5 rounded-full inline-block shrink-0" style="background-color: #c084fc"></span>
                <span class="flex-1 truncate">rfc</span>
                <span class="lab-check invisible"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="shrink-0 text-success" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              </button>
              <button type="button" role="menuitemcheckbox" data-lab="performance" data-color="#fbbf24" aria-checked="false" class="flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
                <span class="h-2.5 w-2.5 rounded-full inline-block shrink-0" style="background-color: #fbbf24"></span>
                <span class="flex-1 truncate">performance</span>
                <span class="lab-check invisible"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="shrink-0 text-success" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              </button>
              <button type="button" role="menuitemcheckbox" data-lab="security" data-color="#f87171" aria-checked="false" class="flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
                <span class="h-2.5 w-2.5 rounded-full inline-block shrink-0" style="background-color: #f87171"></span>
                <span class="flex-1 truncate">security</span>
                <span class="lab-check invisible"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="shrink-0 text-success" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              </button>
              <button type="button" role="menuitemcheckbox" data-lab="tooling" data-color="#4ade80" aria-checked="true" class="flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
                <span class="h-2.5 w-2.5 rounded-full inline-block shrink-0" style="background-color: #4ade80"></span>
                <span class="flex-1 truncate">tooling</span>
                <span class="lab-check "><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="shrink-0 text-success" aria-hidden="true" focusable="false"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
              </button>
              <div role="separator" class="my-1 h-px bg-border"></div>
              <a href="#" role="menuitem" class="flex w-full items-center gap-2 px-2.5 py-1.5 rounded-md text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="shrink-0" aria-hidden="true" focusable="false"><path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"></path><line x1="7" y1="7" x2="7.01" y2="7"></line></svg>
                Create a new label
              </a>
            </div>
          </div>
        </div>
        <div id="side-labels" class="flex flex-wrap gap-1"><span class="inline-block max-w-full truncate align-middle rounded-full border px-2 py-px text-[11px] leading-4 font-medium border-(color:--label-border) bg-(color:--label-bg) text-(color:--label-fg) dark:border-(color:--label-dark-border) dark:bg-(color:--label-dark-bg) dark:text-(color:--label-dark-fg)" style="--label-bg:#4ade80;--label-fg:#1f2328;--label-border:#41c371;--label-dark-bg:#4ade802e;--label-dark-border:#4ade8066;--label-dark-fg:#4ade80">tooling</span></div>
      </div>
      <section>
        <div id="thread-subscription">
          <h3 class="text-[12px] font-medium text-muted-foreground mb-2 flex items-center gap-2">Notifications</h3>
          <button type="button" aria-pressed="true" class="w-full h-8 inline-flex items-center justify-center gap-1.5 rounded-md border border-border bg-accent text-foreground text-[13px] hover:bg-accent/70">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" aria-hidden="true" focusable="false"><path d="M13.7 21a2 2 0 01-3.4 0M18.6 13A17 17 0 0118 8M6.3 6.3A6 6 0 006 8c0 7-3 9-3 9h14M18 8a6 6 0 00-9.3-5M1 1l22 22"></path></svg>
            Unsubscribe
          </button>
          <p class="mt-2 text-[12px] text-muted-foreground">
            <span>You’re receiving notifications. <em>You commented.</em></span>
          </p>
        </div>
      </section>
      <section aria-labelledby="dd-participants-heading">
        <h2 id="dd-participants-heading" class="text-[12px] font-medium text-muted-foreground mb-2">3 participants</h2>
        <ul class="flex flex-wrap gap-1.5">
            <li><span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="kiyo">K</span></li>
            <li><span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="malith">M</span></li>
            <li><span class="inline-grid place-items-center rounded-full bg-muted border border-border font-medium text-muted-foreground h-7 w-7 text-xs" role="img" aria-label="daisy">D</span></li>
        </ul>
      </section>
    </aside>
  </div>
</div>

</main>

<div id="cz-footer"></div>
<script src="markdown-editor.js"></script>
<script>
(function () {
  function $(id) { return document.getElementById(id); }
  function toggle(a, b, showB) { a.hidden = showB; b.hidden = !showB; }

  var tv = $('title-view'), te = $('title-edit');
  $('edit-title-btn').addEventListener('click', function () { toggle(tv, te, true); $('dd-title-input').focus(); });
  $('title-cancel').addEventListener('click', function () { toggle(tv, te, false); });
  $('title-save').addEventListener('click', function () { $('title-text').textContent = $('dd-title-input').value; toggle(tv, te, false); });

  var rendered = $('desc-rendered'), editor = $('desc-editor'), editBtn = $('edit-desc-btn');
  function editing(on) {
    rendered.hidden = on;
    editor.hidden = !on;
    editBtn.hidden = on;
  }
  editBtn.addEventListener('click', function () { editing(true); });
  $('desc-cancel').addEventListener('click', function () { editing(false); });
  editor.addEventListener('submit', function (e) { e.preventDefault(); editing(false); });

  document.addEventListener('click', function (e) {
    var go = e.target.closest('[data-href]');
    if (go) { location.href = go.getAttribute('data-href'); return; }
    var btn = e.target.closest('[data-pop-btn]');
    document.querySelectorAll('[data-pop]').forEach(function (p) {
      var own = btn && p.parentNode.contains(btn);
      var open = own ? p.hidden : false;
      p.hidden = !open;
      p.parentNode.querySelector('[data-pop-btn]').setAttribute('aria-expanded', String(open));
    });
  });
  document.addEventListener('keydown', function (e) {
    if (e.key !== 'Escape') return;
    document.querySelectorAll('[data-pop]').forEach(function (p) { p.hidden = true; });
  });

  var LABEL_CLS = 'inline-block max-w-full truncate align-middle rounded-full border px-2 py-px text-[11px] leading-4 font-medium border-(color:--label-border) bg-(color:--label-bg) text-(color:--label-fg) dark:border-(color:--label-dark-border) dark:bg-(color:--label-dark-bg) dark:text-(color:--label-dark-fg)';
  var CHIP_STYLES = {
    '#4ade80': '--label-bg:#4ade80;--label-fg:#1f2328;--label-border:#41c371;--label-dark-bg:#4ade802e;--label-dark-border:#4ade8066;--label-dark-fg:#4ade80',
    '#6ea8fe': '--label-bg:#6ea8fe;--label-fg:#1f2328;--label-border:#6194e0;--label-dark-bg:#6ea8fe2e;--label-dark-border:#6ea8fe66;--label-dark-fg:#6ea8fe',
    '#c084fc': '--label-bg:#c084fc;--label-fg:#1f2328;--label-border:#a974de;--label-dark-bg:#c084fc2e;--label-dark-border:#c084fc66;--label-dark-fg:#c084fc',
    '#f87171': '--label-bg:#f87171;--label-fg:#1f2328;--label-border:#da6363;--label-dark-bg:#f871712e;--label-dark-border:#f8717166;--label-dark-fg:#f87171',
    '#fbbf24': '--label-bg:#fbbf24;--label-fg:#1f2328;--label-border:#dda820;--label-dark-bg:#fbbf242e;--label-dark-border:#fbbf2466;--label-dark-fg:#fbbf24'
  };
  function pill(btn) {
    var c = btn.getAttribute('data-color'), s = document.createElement('span');
    s.className = LABEL_CLS;
    s.setAttribute('style', CHIP_STYLES[c]);
    s.textContent = btn.getAttribute('data-lab');
    return s;
  }
  function renderLabels() {
    var side = $('side-labels'), hdr = $('hdr-labels');
    side.replaceChildren(); hdr.replaceChildren();
    document.querySelectorAll('[data-lab][aria-checked="true"]').forEach(function (b) {
      side.appendChild(pill(b)); hdr.appendChild(pill(b));
    });
    if (!side.children.length) {
      var none = document.createElement('span');
      none.className = 'text-xs text-muted-foreground';
      none.textContent = 'None yet';
      side.appendChild(none);
    }
  }
  document.querySelectorAll('[data-lab]').forEach(function (b) {
    b.addEventListener('click', function () {
      var on = b.getAttribute('aria-checked') !== 'true';
      b.setAttribute('aria-checked', String(on));
      b.querySelector('.lab-check').classList.toggle('invisible', !on);
      renderLabels();
    });
  });
  document.querySelectorAll('[data-cat]').forEach(function (b) {
    b.addEventListener('click', function () {
      document.querySelectorAll('[data-cat]').forEach(function (o) {
        var on = o === b;
        o.setAttribute('aria-checked', String(on));
        o.querySelector('.cat-check').classList.toggle('invisible', !on);
      });
      var name = b.getAttribute('data-cat');
      $('hdr-cat').innerHTML = name; $('side-cat').innerHTML = name;
    });
  });
})();
</script>
</body>
</html>