docs: add comments feature implementation plan

docs/plans/2025-12-28-comments-feature.md

···
+# Comments Feature Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Add Instagram-style bottom sheet for viewing and posting comments on galleries.
+
+**Architecture:** Bottom sheet component opens when comment icon is tapped, shows paginated comment list with threaded replies (single indent level), and a fixed input bar at bottom with user avatar and send button. Login required to view comments.
+
+**Tech Stack:** Lit 3, Web Components, GraphQL (quickslice), CSS custom properties
+
+---
+
+## Task 1: Add createComment to mutations service
+
+**Files:**
+- Modify: `src/services/mutations.js`
+
+**Step 1: Add createComment method**
+
+Add after the `toggleFollow` method in `src/services/mutations.js`:
+
+```javascript
+async createComment(galleryUri, text, replyToUri = null) {
+  const client = auth.getClient();
+  const input = {
+    subject: galleryUri,
+    text,
+    createdAt: new Date().toISOString()
+  };
+
+  if (replyToUri) {
+    input.replyTo = replyToUri;
+  }
+
+  const result = await client.mutate(`
+    mutation CreateComment($input: SocialGrainCommentInput!) {
+      createSocialGrainComment(input: $input) { uri }
+    }
+  `, { input });
+
+  return result.createSocialGrainComment.uri;
+}
+```
+
+**Step 2: Verify the file saves correctly**
+
+Run: `head -20 src/services/mutations.js`
+
+**Step 3: Commit**
+
+```bash
+git add src/services/mutations.js
+git commit -m "feat: add createComment mutation"
+```
+
+---
+
+## Task 2: Add getComments method to grain-api service
+
+**Files:**
+- Modify: `src/services/grain-api.js`
+
+**Step 1: Add getComments method**
+
+Add before the closing brace of the class in `src/services/grain-api.js`:
+
+```javascript
+async getComments(galleryUri, { first = 20, after = null } = {}) {
+  const query = `
+    query GetComments($galleryUri: String!, $first: Int, $after: String) {
+      socialGrainComment(
+        first: $first
+        after: $after
+        where: { subject: { eq: $galleryUri } }
+        sortBy: [{ field: createdAt, direction: ASC }]
+      ) {
+        edges {
+          node {
+            uri
+            text
+            createdAt
+            actorHandle
+            replyTo
+            socialGrainActorProfileByDid {
+              displayName
+              avatar { url(preset: "avatar") }
+            }
+          }
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+        totalCount
+      }
+    }
+  `;
+
+  const response = await this.#execute(query, { galleryUri, first, after });
+  const connection = response.data?.socialGrainComment;
+
+  if (!connection) {
+    return { comments: [], pageInfo: { hasNextPage: false, endCursor: null }, totalCount: 0 };
+  }
+
+  const comments = connection.edges.map(edge => {
+    const node = edge.node;
+    const profile = node.socialGrainActorProfileByDid;
+    return {
+      uri: node.uri,
+      text: node.text,
+      createdAt: node.createdAt,
+      handle: node.actorHandle,
+      displayName: profile?.displayName || '',
+      avatarUrl: profile?.avatar?.url || '',
+      replyToUri: node.replyTo || null
+    };
+  });
+
+  return {
+    comments,
+    pageInfo: connection.pageInfo || { hasNextPage: false, endCursor: null },
+    totalCount: connection.totalCount || 0
+  };
+}
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/services/grain-api.js
+git commit -m "feat: add getComments query to grain-api"
+```
+
+---
+
+## Task 3: Create grain-comment-input component
+
+**Files:**
+- Create: `src/components/molecules/grain-comment-input.js`
+
+**Step 1: Create the component file**
+
+```javascript
+import { LitElement, html, css } from 'lit';
+import '../atoms/grain-avatar.js';
+import '../atoms/grain-spinner.js';
+
+export class GrainCommentInput extends LitElement {
+  static properties = {
+    avatarUrl: { type: String },
+    value: { type: String },
+    placeholder: { type: String },
+    disabled: { type: Boolean },
+    loading: { type: Boolean }
+  };
+
+  static styles = css`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+      padding: var(--space-sm);
+      border-top: 1px solid var(--color-border);
+      background: var(--color-bg-primary);
+    }
+    .input-wrapper {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: var(--space-sm);
+      background: var(--color-bg-secondary);
+      border-radius: 20px;
+      padding: var(--space-xs) var(--space-sm);
+    }
+    input {
+      flex: 1;
+      background: none;
+      border: none;
+      outline: none;
+      font-size: var(--font-size-sm);
+      color: var(--color-text-primary);
+      font-family: inherit;
+    }
+    input::placeholder {
+      color: var(--color-text-secondary);
+    }
+    input:disabled {
+      opacity: 0.5;
+    }
+    .send-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      padding: var(--space-xs);
+      cursor: pointer;
+      color: var(--color-accent);
+      font-size: var(--font-size-sm);
+      font-weight: var(--font-weight-semibold);
+    }
+    .send-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    grain-spinner {
+      --spinner-size: 16px;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.avatarUrl = '';
+    this.value = '';
+    this.placeholder = 'Add a comment...';
+    this.disabled = false;
+    this.loading = false;
+  }
+
+  #handleInput(e) {
+    this.value = e.target.value;
+    this.dispatchEvent(new CustomEvent('input-change', {
+      detail: { value: this.value }
+    }));
+  }
+
+  #handleSend() {
+    if (!this.value.trim() || this.disabled || this.loading) return;
+    this.dispatchEvent(new CustomEvent('send', {
+      detail: { value: this.value.trim() }
+    }));
+  }
+
+  focus() {
+    this.shadowRoot.querySelector('input')?.focus();
+  }
+
+  clear() {
+    this.value = '';
+  }
+
+  render() {
+    const canSend = this.value.trim() && !this.disabled && !this.loading;
+
+    return html`
+      <grain-avatar src=${this.avatarUrl} size="32"></grain-avatar>
+      <div class="input-wrapper">
+        <input
+          type="text"
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled || this.loading}
+          @input=${this.#handleInput}
+        />
+        <button
+          class="send-button"
+          type="button"
+          ?disabled=${!canSend}
+          @click=${this.#handleSend}
+        >
+          ${this.loading ? html`<grain-spinner></grain-spinner>` : 'Post'}
+        </button>
+      </div>
+    `;
+  }
+}
+
+customElements.define('grain-comment-input', GrainCommentInput);
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/components/molecules/grain-comment-input.js
+git commit -m "feat: add grain-comment-input component"
+```
+
+---
+
+## Task 4: Update grain-comment to support replies and tap handling
+
+**Files:**
+- Modify: `src/components/molecules/grain-comment.js`
+
+**Step 1: Update the component**
+
+Replace the entire file content:
+
+```javascript
+import { LitElement, html, css } from 'lit';
+import { router } from '../../router.js';
+import '../atoms/grain-avatar.js';
+
+export class GrainComment extends LitElement {
+  static properties = {
+    uri: { type: String },
+    handle: { type: String },
+    displayName: { type: String },
+    avatarUrl: { type: String },
+    text: { type: String },
+    createdAt: { type: String },
+    isReply: { type: Boolean }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      padding: var(--space-xs) 0;
+    }
+    :host([is-reply]) {
+      padding-left: 40px;
+    }
+    .comment {
+      display: flex;
+      gap: var(--space-sm);
+      cursor: pointer;
+    }
+    .content {
+      flex: 1;
+      min-width: 0;
+    }
+    .text-line {
+      font-size: var(--font-size-sm);
+      color: var(--color-text-primary);
+      line-height: 1.4;
+    }
+    .handle {
+      font-weight: var(--font-weight-semibold);
+      cursor: pointer;
+    }
+    .handle:hover {
+      text-decoration: underline;
+    }
+    .text {
+      margin-left: var(--space-xs);
+      word-break: break-word;
+    }
+    .meta {
+      display: flex;
+      gap: var(--space-sm);
+      margin-top: var(--space-xxs);
+    }
+    .time {
+      font-size: var(--font-size-xs);
+      color: var(--color-text-secondary);
+    }
+    .reply-btn {
+      font-size: var(--font-size-xs);
+      color: var(--color-text-secondary);
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      font-family: inherit;
+      font-weight: var(--font-weight-semibold);
+    }
+    .reply-btn:hover {
+      color: var(--color-text-primary);
+    }
+  `;
+
+  constructor() {
+    super();
+    this.uri = '';
+    this.handle = '';
+    this.displayName = '';
+    this.avatarUrl = '';
+    this.text = '';
+    this.createdAt = '';
+    this.isReply = false;
+  }
+
+  #handleProfileClick(e) {
+    e.stopPropagation();
+    router.push(`/profile/${this.handle}`);
+  }
+
+  #handleReplyClick(e) {
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('reply', {
+      detail: { uri: this.uri, handle: this.handle },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  #formatTime(iso) {
+    const date = new Date(iso);
+    const now = new Date();
+    const diffMs = now - date;
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'now';
+    if (diffMins < 60) return `${diffMins}m`;
+    if (diffHours < 24) return `${diffHours}h`;
+    if (diffDays < 7) return `${diffDays}d`;
+    return `${Math.floor(diffDays / 7)}w`;
+  }
+
+  render() {
+    return html`
+      <div class="comment">
+        <grain-avatar
+          src=${this.avatarUrl}
+          size="28"
+          @click=${this.#handleProfileClick}
+        ></grain-avatar>
+        <div class="content">
+          <div class="text-line">
+            <span class="handle" @click=${this.#handleProfileClick}>
+              ${this.handle}
+            </span>
+            <span class="text">${this.text}</span>
+          </div>
+          <div class="meta">
+            <span class="time">${this.#formatTime(this.createdAt)}</span>
+            <button class="reply-btn" @click=${this.#handleReplyClick}>Reply</button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('grain-comment', GrainComment);
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/components/molecules/grain-comment.js
+git commit -m "feat: update grain-comment with avatar, reply button, and time"
+```
+
+---
+
+## Task 5: Create grain-comment-sheet component
+
+**Files:**
+- Create: `src/components/organisms/grain-comment-sheet.js`
+
+**Step 1: Create the component file**
+
+```javascript
+import { LitElement, html, css } from 'lit';
+import { grainApi } from '../../services/grain-api.js';
+import { mutations } from '../../services/mutations.js';
+import { auth } from '../../services/auth.js';
+import { recordCache } from '../../services/record-cache.js';
+import '../molecules/grain-comment.js';
+import '../molecules/grain-comment-input.js';
+import '../atoms/grain-spinner.js';
+import '../atoms/grain-icon.js';
+
+export class GrainCommentSheet extends LitElement {
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    galleryUri: { type: String },
+    _comments: { state: true },
+    _loading: { state: true },
+    _loadingMore: { state: true },
+    _posting: { state: true },
+    _inputValue: { state: true },
+    _replyToUri: { state: true },
+    _replyToHandle: { state: true },
+    _pageInfo: { state: true },
+    _totalCount: { state: true }
+  };
+
+  static styles = css`
+    :host {
+      display: none;
+    }
+    :host([open]) {
+      display: block;
+    }
+    .overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 1000;
+    }
+    .sheet {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      max-height: 70vh;
+      background: var(--color-bg-primary);
+      border-radius: 12px 12px 0 0;
+      display: flex;
+      flex-direction: column;
+      z-index: 1001;
+      animation: slideUp 0.2s ease-out;
+    }
+    @keyframes slideUp {
+      from { transform: translateY(100%); }
+      to { transform: translateY(0); }
+    }
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--space-sm) var(--space-md);
+      border-bottom: 1px solid var(--color-border);
+      position: relative;
+    }
+    .header h2 {
+      margin: 0;
+      font-size: var(--font-size-md);
+      font-weight: var(--font-weight-semibold);
+    }
+    .close-button {
+      position: absolute;
+      right: var(--space-sm);
+      background: none;
+      border: none;
+      padding: var(--space-sm);
+      cursor: pointer;
+      color: var(--color-text-primary);
+    }
+    .comments-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--space-sm) var(--space-md);
+      -webkit-overflow-scrolling: touch;
+    }
+    .load-more {
+      display: flex;
+      justify-content: center;
+      padding: var(--space-sm);
+    }
+    .load-more-btn {
+      background: none;
+      border: none;
+      color: var(--color-text-secondary);
+      font-size: var(--font-size-sm);
+      cursor: pointer;
+      padding: var(--space-xs) var(--space-sm);
+    }
+    .load-more-btn:hover {
+      color: var(--color-text-primary);
+    }
+    .empty {
+      text-align: center;
+      padding: var(--space-xl);
+      color: var(--color-text-secondary);
+      font-size: var(--font-size-sm);
+    }
+    .loading {
+      display: flex;
+      justify-content: center;
+      padding: var(--space-xl);
+    }
+    grain-comment-input {
+      flex-shrink: 0;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.open = false;
+    this.galleryUri = '';
+    this._comments = [];
+    this._loading = false;
+    this._loadingMore = false;
+    this._posting = false;
+    this._inputValue = '';
+    this._replyToUri = null;
+    this._replyToHandle = null;
+    this._pageInfo = { hasNextPage: false, endCursor: null };
+    this._totalCount = 0;
+  }
+
+  updated(changedProps) {
+    if (changedProps.has('open') && this.open && this.galleryUri) {
+      this.#loadComments();
+    }
+  }
+
+  async #loadComments() {
+    this._loading = true;
+    this._comments = [];
+
+    try {
+      const result = await grainApi.getComments(this.galleryUri, { first: 20 });
+      this._comments = this.#organizeComments(result.comments);
+      this._pageInfo = result.pageInfo;
+      this._totalCount = result.totalCount;
+    } catch (err) {
+      console.error('Failed to load comments:', err);
+    } finally {
+      this._loading = false;
+    }
+  }
+
+  async #loadMore() {
+    if (this._loadingMore || !this._pageInfo.hasNextPage) return;
+
+    this._loadingMore = true;
+    try {
+      const result = await grainApi.getComments(this.galleryUri, {
+        first: 20,
+        after: this._pageInfo.endCursor
+      });
+      const newComments = this.#organizeComments(result.comments);
+      this._comments = [...this._comments, ...newComments];
+      this._pageInfo = result.pageInfo;
+    } catch (err) {
+      console.error('Failed to load more comments:', err);
+    } finally {
+      this._loadingMore = false;
+    }
+  }
+
+  #organizeComments(comments) {
+    // Group replies under their parents
+    const roots = [];
+    const replyMap = new Map();
+
+    comments.forEach(comment => {
+      if (comment.replyToUri) {
+        const replies = replyMap.get(comment.replyToUri) || [];
+        replies.push({ ...comment, isReply: true });
+        replyMap.set(comment.replyToUri, replies);
+      } else {
+        roots.push(comment);
+      }
+    });
+
+    // Flatten: root, then its replies
+    const organized = [];
+    roots.forEach(root => {
+      organized.push(root);
+      const replies = replyMap.get(root.uri) || [];
+      replies.forEach(reply => organized.push(reply));
+    });
+
+    return organized;
+  }
+
+  #handleClose() {
+    this.open = false;
+    this._replyToUri = null;
+    this._replyToHandle = null;
+    this._inputValue = '';
+    this.dispatchEvent(new CustomEvent('close'));
+  }
+
+  #handleOverlayClick(e) {
+    if (e.target === e.currentTarget) {
+      this.#handleClose();
+    }
+  }
+
+  #handleInputChange(e) {
+    this._inputValue = e.detail.value;
+  }
+
+  async #handleSend(e) {
+    const text = e.detail.value;
+    if (!text || this._posting) return;
+
+    this._posting = true;
+    try {
+      const commentUri = await mutations.createComment(
+        this.galleryUri,
+        text,
+        this._replyToUri
+      );
+
+      // Add new comment to list
+      const newComment = {
+        uri: commentUri,
+        text,
+        createdAt: new Date().toISOString(),
+        handle: auth.user?.handle || '',
+        displayName: auth.user?.displayName || '',
+        avatarUrl: auth.user?.avatarUrl || '',
+        replyToUri: this._replyToUri,
+        isReply: !!this._replyToUri
+      };
+
+      if (this._replyToUri) {
+        // Insert after parent
+        const parentIndex = this._comments.findIndex(c => c.uri === this._replyToUri);
+        if (parentIndex >= 0) {
+          // Find last reply of this parent
+          let insertIndex = parentIndex + 1;
+          while (insertIndex < this._comments.length && this._comments[insertIndex].isReply) {
+            insertIndex++;
+          }
+          this._comments = [
+            ...this._comments.slice(0, insertIndex),
+            newComment,
+            ...this._comments.slice(insertIndex)
+          ];
+        } else {
+          this._comments = [...this._comments, newComment];
+        }
+      } else {
+        this._comments = [...this._comments, newComment];
+      }
+
+      this._totalCount++;
+
+      // Update comment count in cache
+      recordCache.set(this.galleryUri, {
+        commentCount: this._totalCount
+      });
+
+      // Clear input
+      this._inputValue = '';
+      this._replyToUri = null;
+      this._replyToHandle = null;
+      this.shadowRoot.querySelector('grain-comment-input')?.clear();
+    } catch (err) {
+      console.error('Failed to post comment:', err);
+    } finally {
+      this._posting = false;
+    }
+  }
+
+  #handleReply(e) {
+    const { uri, handle } = e.detail;
+    this._replyToUri = uri;
+    this._replyToHandle = handle;
+    this._inputValue = `@${handle} `;
+
+    // Scroll comment into view
+    const commentEl = this.shadowRoot.querySelector(`grain-comment[uri="${uri}"]`);
+    commentEl?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+
+    // Focus input
+    this.shadowRoot.querySelector('grain-comment-input')?.focus();
+  }
+
+  render() {
+    const userAvatarUrl = auth.user?.avatarUrl || '';
+
+    return html`
+      <div class="overlay" @click=${this.#handleOverlayClick}>
+        <div class="sheet">
+          <div class="header">
+            <h2>Comments</h2>
+            <button class="close-button" @click=${this.#handleClose}>
+              <grain-icon name="close" size="20"></grain-icon>
+            </button>
+          </div>
+
+          <div class="comments-list">
+            ${this._loading ? html`
+              <div class="loading"><grain-spinner></grain-spinner></div>
+            ` : this._comments.length === 0 ? html`
+              <div class="empty">No comments yet. Be the first!</div>
+            ` : html`
+              ${this._pageInfo.hasNextPage ? html`
+                <div class="load-more">
+                  ${this._loadingMore ? html`
+                    <grain-spinner></grain-spinner>
+                  ` : html`
+                    <button class="load-more-btn" @click=${this.#loadMore}>
+                      Load earlier comments
+                    </button>
+                  `}
+                </div>
+              ` : ''}
+              ${this._comments.map(comment => html`
+                <grain-comment
+                  uri=${comment.uri}
+                  handle=${comment.handle}
+                  displayName=${comment.displayName}
+                  avatarUrl=${comment.avatarUrl}
+                  text=${comment.text}
+                  createdAt=${comment.createdAt}
+                  ?is-reply=${comment.isReply}
+                  @reply=${this.#handleReply}
+                ></grain-comment>
+              `)}
+            `}
+          </div>
+
+          <grain-comment-input
+            avatarUrl=${userAvatarUrl}
+            .value=${this._inputValue}
+            ?loading=${this._posting}
+            @input-change=${this.#handleInputChange}
+            @send=${this.#handleSend}
+          ></grain-comment-input>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('grain-comment-sheet', GrainCommentSheet);
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/components/organisms/grain-comment-sheet.js
+git commit -m "feat: add grain-comment-sheet bottom sheet component"
+```
+
+---
+
+## Task 6: Make comment icon interactive in engagement bar
+
+**Files:**
+- Modify: `src/components/organisms/grain-engagement-bar.js`
+
+**Step 1: Add galleryUri prop if not already present, and emit comment-click event**
+
+The component already has `galleryUri` prop. Add click handler to comment stat:
+
+Find this block:
+```javascript
+<grain-stat-count
+  icon="comment"
+  count=${this.commentCount}
+></grain-stat-count>
+```
+
+Replace with:
+```javascript
+<grain-stat-count
+  icon="comment"
+  count=${this.commentCount}
+  ?interactive=${true}
+  @stat-click=${this.#handleCommentClick}
+></grain-stat-count>
+```
+
+**Step 2: Add the handler method**
+
+Add after `#handleFavoriteClick`:
+
+```javascript
+#handleCommentClick() {
+  this.dispatchEvent(new CustomEvent('comment-click', {
+    bubbles: true,
+    composed: true
+  }));
+}
+```
+
+**Step 3: Commit**
+
+```bash
+git add src/components/organisms/grain-engagement-bar.js
+git commit -m "feat: make comment icon interactive in engagement bar"
+```
+
+---
+
+## Task 7: Integrate comment sheet into gallery detail page
+
+**Files:**
+- Modify: `src/components/pages/grain-gallery-detail.js`
+
+**Step 1: Add import**
+
+Add at top with other imports:
+```javascript
+import '../organisms/grain-comment-sheet.js';
+```
+
+**Step 2: Add state property**
+
+Add to `static properties`:
+```javascript
+_commentSheetOpen: { state: true }
+```
+
+**Step 3: Initialize in constructor**
+
+Add to constructor:
+```javascript
+this._commentSheetOpen = false;
+```
+
+**Step 4: Add handler methods**
+
+Add after `#handleBack`:
+
+```javascript
+#handleCommentClick() {
+  if (!auth.isAuthenticated) {
+    this.#showLoginDialog();
+    return;
+  }
+  this._commentSheetOpen = true;
+}
+
+#handleCommentSheetClose() {
+  this._commentSheetOpen = false;
+}
+
+#showLoginDialog() {
+  // Dispatch event to show login at page level
+  this.dispatchEvent(new CustomEvent('show-login', {
+    bubbles: true,
+    composed: true
+  }));
+}
+```
+
+**Step 5: Add event listener to engagement bar**
+
+Find:
+```javascript
+<grain-engagement-bar
+```
+
+Add the event handler:
+```javascript
+<grain-engagement-bar
+  ...existing props...
+  @comment-click=${this.#handleCommentClick}
+></grain-engagement-bar>
+```
+
+**Step 6: Add comment sheet to render**
+
+Add before the closing `</grain-feed-layout>`:
+
+```javascript
+<grain-comment-sheet
+  ?open=${this._commentSheetOpen}
+  galleryUri=${this._gallery?.uri || ''}
+  @close=${this.#handleCommentSheetClose}
+></grain-comment-sheet>
+```
+
+**Step 7: Commit**
+
+```bash
+git add src/components/pages/grain-gallery-detail.js
+git commit -m "feat: integrate comment sheet into gallery detail page"
+```
+
+---
+
+## Task 8: Add close icon to grain-icon if missing
+
+**Files:**
+- Modify: `src/components/atoms/grain-icon.js`
+
+**Step 1: Check if close icon exists**
+
+Read the file and check if 'close' is in the icons object. If not, add it.
+
+The close icon SVG path:
+```javascript
+close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'
+```
+
+**Step 2: Commit (if changes made)**
+
+```bash
+git add src/components/atoms/grain-icon.js
+git commit -m "feat: add close icon to grain-icon"
+```
+
+---
+
+## Task 9: Remove old grain-comment-list from gallery detail
+
+**Files:**
+- Modify: `src/components/pages/grain-gallery-detail.js`
+
+**Step 1: Remove import**
+
+Remove this line:
+```javascript
+import '../organisms/grain-comment-list.js';
+```
+
+**Step 2: Remove usage**
+
+Remove this block from render:
+```javascript
+<grain-comment-list
+  .comments=${this._gallery.comments}
+  totalCount=${this._gallery.commentCount}
+></grain-comment-list>
+```
+
+**Step 3: Commit**
+
+```bash
+git add src/components/pages/grain-gallery-detail.js
+git commit -m "refactor: remove inline comment list in favor of sheet"
+```
+
+---
+
+## Task 10: Test the feature manually
+
+**Steps:**
+1. Run `npm run dev`
+2. Navigate to a gallery detail page
+3. Tap the comment icon
+4. Verify login dialog shows if not logged in
+5. Log in, tap comment icon again
+6. Verify bottom sheet opens with comments (or empty state)
+7. Type a comment and tap Post
+8. Verify comment appears in list
+9. Tap Reply on a comment
+10. Verify input populates with @handle and cursor is focused
+11. Post a reply
+12. Verify reply appears indented under parent
+13. Close sheet and verify comment count updated
+
+---
+
+## Summary
+
+**New files:**
+- `src/components/molecules/grain-comment-input.js`
+- `src/components/organisms/grain-comment-sheet.js`
+
+**Modified files:**
+- `src/services/mutations.js` - added `createComment`
+- `src/services/grain-api.js` - added `getComments`
+- `src/components/molecules/grain-comment.js` - added avatar, reply, time
+- `src/components/organisms/grain-engagement-bar.js` - made comment clickable
+- `src/components/pages/grain-gallery-detail.js` - integrated sheet
+- `src/components/atoms/grain-icon.js` - added close icon (if needed)