feat: add shareable meme permalinks

public/index.html

@@ -108,7 +108,30 @@
         <button class="icon-action" id="close-lightbox" type="button" aria-label="Close">X</button>
       </div>
       <img id="lightbox-image" alt="">
-      <a class="primary-action lightbox-download" id="lightbox-download" href="#"><span class="material-symbols-outlined" aria-hidden="true">download</span><span>DOWNLOAD</span></a>
+      <div class="lightbox-actions">
+        <a class="text-action icon-only-action" id="lightbox-download" href="#" aria-label="Download meme" title="Download meme"><span class="material-symbols-outlined" aria-hidden="true">download</span></a>
+        <button class="text-action icon-only-action" id="lightbox-share" type="button" aria-label="Share meme" title="Share meme"><span class="material-symbols-outlined" aria-hidden="true">share</span></button>
+      </div>
+    </dialog>
+
+    <dialog class="modal" id="share-modal" aria-labelledby="share-title">
+      <div class="modal-panel share-panel">
+        <div class="modal-header">
+          <h2 id="share-title">SHARE_MEME</h2>
+          <button class="icon-action" id="close-share" type="button" aria-label="Close">X</button>
+        </div>
+        <div class="share-body">
+          <label for="share-link">MEME_LINK</label>
+          <div class="share-link-row">
+            <input id="share-link" type="text" readonly spellcheck="false" aria-describedby="share-status">
+            <button class="primary-action share-copy" id="copy-share-link" type="button">
+              <span class="material-symbols-outlined" data-copy-icon aria-hidden="true">content_copy</span>
+              <span data-copy-label>COPY</span>
+            </button>
+          </div>
+          <p class="share-status" id="share-status" role="status" aria-live="polite"></p>
+        </div>
+      </div>
     </dialog>
   </body>
 </html>