docs: add create gallery implementation plan

docs/plans/2025-12-25-create-gallery.md

···
+# Create Gallery Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Add a + button to bottom nav that opens a photo picker, then navigates to a create gallery page where users add title/description and publish.
+
+**Architecture:** Photo picker first flow. Files selected in bottom nav are processed (resized under 900KB), stored in draft-gallery service, then create page reads them. Publishing uploads blobs, creates photo records, gallery record, and gallery items.
+
+**Tech Stack:** Lit 3.x, quickslice-client-js for ATProto writes, Canvas API for image resizing
+
+---
+
+### Task 1: Add Plus Icon
+
+**Files:**
+- Modify: `src/components/atoms/grain-icon.js`
+
+**Step 1: Add plus icon to ICONS object**
+
+Add after `logout`:
+
+```javascript
+  plus: 'fa-solid fa-plus'
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/components/atoms/grain-icon.js
+git commit -m "feat: add plus icon"
+```
+
+---
+
+### Task 2: Create Image Resize Utility
+
+**Files:**
+- Create: `src/utils/image-resize.js`
+
+**Step 1: Create the image resize utility**
+
+```javascript
+export function readFileAsDataURL(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+function getBase64Size(base64) {
+  const str = base64.split(',')[1] || base64;
+  return Math.ceil((str.length * 3) / 4);
+}
+
+function createResizedImage(dataUrl, options) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      const scale = Math.min(
+        options.width / img.width,
+        options.height / img.height,
+        1
+      );
+      const w = Math.round(img.width * scale);
+      const h = Math.round(img.height * scale);
+
+      const canvas = document.createElement('canvas');
+      canvas.width = w;
+      canvas.height = h;
+      const ctx = canvas.getContext('2d');
+
+      ctx.fillStyle = '#fff';
+      ctx.fillRect(0, 0, w, h);
+      ctx.imageSmoothingEnabled = true;
+      ctx.imageSmoothingQuality = 'high';
+      ctx.drawImage(img, 0, 0, w, h);
+
+      resolve({
+        dataUrl: canvas.toDataURL('image/jpeg', options.quality),
+        width: w,
+        height: h
+      });
+    };
+    img.onerror = reject;
+    img.src = dataUrl;
+  });
+}
+
+export async function resizeImage(dataUrl, opts) {
+  let bestResult = null;
+  let minQuality = 0;
+  let maxQuality = 100;
+
+  while (maxQuality - minQuality > 1) {
+    const quality = Math.round((minQuality + maxQuality) / 2);
+    const result = await createResizedImage(dataUrl, {
+      width: opts.width,
+      height: opts.height,
+      quality: quality / 100
+    });
+
+    const size = getBase64Size(result.dataUrl);
+    if (size <= opts.maxSize) {
+      bestResult = result;
+      minQuality = quality;
+    } else {
+      maxQuality = quality;
+    }
+  }
+
+  if (!bestResult) {
+    throw new Error('Failed to compress image within size limit');
+  }
+
+  return bestResult;
+}
+
+export async function processPhotos(files) {
+  const processed = [];
+  for (const file of files) {
+    const dataUrl = await readFileAsDataURL(file);
+    const resized = await resizeImage(dataUrl, {
+      width: 2000,
+      height: 2000,
+      maxSize: 900000
+    });
+    processed.push({
+      dataUrl: resized.dataUrl,
+      width: resized.width,
+      height: resized.height
+    });
+  }
+  return processed;
+}
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/utils/image-resize.js
+git commit -m "feat: add image resize utility"
+```
+
+---
+
+### Task 3: Create Draft Gallery Service
+
+**Files:**
+- Create: `src/services/draft-gallery.js`
+
+**Step 1: Create the draft gallery service**
+
+```javascript
+class DraftGalleryService {
+  #photos = [];
+
+  setPhotos(photos) {
+    this.#photos = [...photos];
+  }
+
+  getPhotos() {
+    return this.#photos;
+  }
+
+  clear() {
+    this.#photos = [];
+  }
+
+  get hasPhotos() {
+    return this.#photos.length > 0;
+  }
+}
+
+export const draftGallery = new DraftGalleryService();
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/services/draft-gallery.js
+git commit -m "feat: add draft gallery service"
+```
+
+---
+
+### Task 4: Add Upload Methods to Auth Service
+
+**Files:**
+- Modify: `src/services/auth.js`
+
+**Step 1: Add getClient method**
+
+Add before the closing brace of the class:
+
+```javascript
+  getClient() {
+    return this.#client;
+  }
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/services/auth.js
+git commit -m "feat: expose auth client for record creation"
+```
+
+---
+
+### Task 5: Update Bottom Nav with Plus Button
+
+**Files:**
+- Modify: `src/components/organisms/grain-bottom-nav.js`
+
+**Step 1: Add imports**
+
+Add after line 3 (after auth import):
+
+```javascript
+import { draftGallery } from '../../services/draft-gallery.js';
+import { processPhotos } from '../../utils/image-resize.js';
+```
+
+**Step 2: Add file input ref property**
+
+Update static properties to:
+
+```javascript
+static properties = {
+  _user: { state: true },
+  _processing: { state: true }
+};
+```
+
+**Step 3: Update constructor**
+
+```javascript
+constructor() {
+  super();
+  this._user = auth.user;
+  this._processing = false;
+  this._onNavigate = () => this.requestUpdate();
+}
+```
+
+**Step 4: Add styles for plus button and processing state**
+
+Add to static styles after `button.active`:
+
+```css
+button.plus {
+  background: none;
+  border: none;
+  padding: 8px;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+}
+button.plus:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+input[type="file"] {
+  display: none;
+}
+```
+
+**Step 5: Add handleCreate and handleFilesSelected methods**
+
+Add after `#handleProfile` method:
+
+```javascript
+#handleCreate() {
+  this.shadowRoot.getElementById('photo-input').click();
+}
+
+async #handleFilesSelected(e) {
+  const files = Array.from(e.target.files);
+  e.target.value = '';
+
+  if (files.length === 0) return;
+  if (files.length > 10) {
+    alert('Maximum 10 photos allowed');
+    return;
+  }
+
+  try {
+    this._processing = true;
+    const processed = await processPhotos(files);
+    draftGallery.setPhotos(processed);
+    router.push('/create');
+  } catch (err) {
+    console.error('Failed to process photos:', err);
+    alert('Failed to process photos. Please try again.');
+  } finally {
+    this._processing = false;
+  }
+}
+```
+
+**Step 6: Update render method**
+
+Replace the render method:
+
+```javascript
+render() {
+  return html`
+    <nav>
+      <button
+        class=${this.#isHome ? 'active' : ''}
+        @click=${this.#handleHome}
+      >
+        <grain-icon name=${this.#isHome ? 'home' : 'homeLine'} size="20"></grain-icon>
+      </button>
+      ${this._user ? html`
+        <button
+          class="plus"
+          @click=${this.#handleCreate}
+          ?disabled=${this._processing}
+        >
+          <grain-icon name="plus" size="20"></grain-icon>
+        </button>
+        <input
+          type="file"
+          id="photo-input"
+          accept="image/*"
+          multiple
+          @change=${this.#handleFilesSelected}
+        >
+      ` : ''}
+      <button
+        class=${this.#isOwnProfile ? 'active' : ''}
+        @click=${this.#handleProfile}
+      >
+        <grain-icon name=${this.#isOwnProfile ? 'userFilled' : 'user'} size="20"></grain-icon>
+      </button>
+    </nav>
+  `;
+}
+```
+
+**Step 7: Commit**
+
+```bash
+git add src/components/organisms/grain-bottom-nav.js
+git commit -m "feat: add plus button to bottom nav for gallery creation"
+```
+
+---
+
+### Task 6: Create Gallery Page Component
+
+**Files:**
+- Create: `src/components/pages/grain-create-gallery.js`
+
+**Step 1: Create the create gallery page**
+
+```javascript
+import { LitElement, html, css } from 'lit';
+import { router } from '../../router.js';
+import { auth } from '../../services/auth.js';
+import { draftGallery } from '../../services/draft-gallery.js';
+import '../atoms/grain-icon.js';
+
+export class GrainCreateGallery extends LitElement {
+  static properties = {
+    _photos: { state: true },
+    _title: { state: true },
+    _description: { state: true },
+    _posting: { state: true },
+    _error: { state: true }
+  };
+
+  static styles = css`
+    :host {
+      display: block;
+      min-height: 100vh;
+      min-height: 100dvh;
+    }
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--space-sm);
+      border-bottom: 1px solid var(--color-border);
+    }
+    .back-button {
+      background: none;
+      border: none;
+      padding: 8px;
+      margin-left: -8px;
+      cursor: pointer;
+      color: var(--color-text-primary);
+    }
+    .post-button {
+      background: var(--color-accent, #0066cc);
+      color: white;
+      border: none;
+      padding: 8px 16px;
+      border-radius: 6px;
+      font-weight: var(--font-weight-semibold);
+      cursor: pointer;
+    }
+    .post-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .photo-strip {
+      display: flex;
+      gap: var(--space-xs);
+      padding: var(--space-sm);
+      overflow-x: auto;
+      border-bottom: 1px solid var(--color-border);
+    }
+    .photo-thumb {
+      position: relative;
+      flex-shrink: 0;
+    }
+    .photo-thumb img {
+      width: 80px;
+      height: 80px;
+      object-fit: cover;
+      border-radius: 4px;
+    }
+    .remove-photo {
+      position: absolute;
+      top: -6px;
+      right: -6px;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: var(--color-text-primary);
+      color: var(--color-bg-primary);
+      border: none;
+      cursor: pointer;
+      font-size: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .form {
+      padding: var(--space-sm);
+    }
+    .form input,
+    .form textarea {
+      width: 100%;
+      padding: var(--space-sm);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-bg-primary);
+      color: var(--color-text-primary);
+      font-size: var(--font-size-sm);
+      font-family: inherit;
+      margin-bottom: var(--space-sm);
+      box-sizing: border-box;
+    }
+    .form textarea {
+      min-height: 100px;
+      resize: vertical;
+    }
+    .form input:focus,
+    .form textarea:focus {
+      outline: none;
+      border-color: var(--color-accent, #0066cc);
+    }
+    .error {
+      color: #ff4444;
+      padding: var(--space-sm);
+      text-align: center;
+    }
+    .char-count {
+      font-size: var(--font-size-xs);
+      color: var(--color-text-secondary);
+      text-align: right;
+      margin-top: -8px;
+      margin-bottom: var(--space-sm);
+    }
+  `;
+
+  constructor() {
+    super();
+    this._photos = [];
+    this._title = '';
+    this._description = '';
+    this._posting = false;
+    this._error = null;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._photos = draftGallery.getPhotos();
+    if (!this._photos.length) {
+      router.push('/');
+    }
+  }
+
+  #handleBack() {
+    if (confirm('Discard this gallery?')) {
+      draftGallery.clear();
+      history.back();
+    }
+  }
+
+  #removePhoto(index) {
+    this._photos = this._photos.filter((_, i) => i !== index);
+    if (this._photos.length === 0) {
+      draftGallery.clear();
+      router.push('/');
+    }
+  }
+
+  #handleTitleChange(e) {
+    this._title = e.target.value.slice(0, 100);
+  }
+
+  #handleDescriptionChange(e) {
+    this._description = e.target.value.slice(0, 1000);
+  }
+
+  get #canPost() {
+    return this._title.trim().length > 0 && this._photos.length > 0 && !this._posting;
+  }
+
+  async #handlePost() {
+    if (!this.#canPost) return;
+
+    this._posting = true;
+    this._error = null;
+
+    try {
+      const client = auth.getClient();
+      const now = new Date().toISOString();
+
+      // Upload photos and create photo records
+      const photoUris = [];
+      for (const photo of this._photos) {
+        // Upload blob
+        const base64Data = photo.dataUrl.split(',')[1];
+        const blobResult = await client.uploadBlob(base64Data, 'image/jpeg');
+
+        // Create photo record
+        const photoRecord = await client.createRecord('social.grain.photo', {
+          photo: {
+            $type: 'blob',
+            ref: { $link: blobResult.ref },
+            mimeType: blobResult.mimeType,
+            size: blobResult.size
+          },
+          aspectRatio: {
+            width: photo.width,
+            height: photo.height
+          },
+          createdAt: now
+        });
+
+        photoUris.push(photoRecord.uri);
+      }
+
+      // Create gallery record
+      const galleryRecord = await client.createRecord('social.grain.gallery', {
+        title: this._title.trim(),
+        description: this._description.trim() || undefined,
+        createdAt: now
+      });
+
+      // Create gallery items linking photos to gallery
+      for (let i = 0; i < photoUris.length; i++) {
+        await client.createRecord('social.grain.gallery.item', {
+          gallery: galleryRecord.uri,
+          item: photoUris[i],
+          position: i,
+          createdAt: now
+        });
+      }
+
+      // Clear draft and navigate to new gallery
+      draftGallery.clear();
+      const rkey = galleryRecord.uri.split('/').pop();
+      router.push(`/profile/${auth.user.handle}/gallery/${rkey}`);
+
+    } catch (err) {
+      console.error('Failed to create gallery:', err);
+      this._error = err.message || 'Failed to create gallery. Please try again.';
+    } finally {
+      this._posting = false;
+    }
+  }
+
+  render() {
+    return html`
+      <div class="header">
+        <button class="back-button" @click=${this.#handleBack}>
+          <grain-icon name="back" size="20"></grain-icon>
+        </button>
+        <button
+          class="post-button"
+          ?disabled=${!this.#canPost}
+          @click=${this.#handlePost}
+        >
+          ${this._posting ? 'Posting...' : 'Post'}
+        </button>
+      </div>
+
+      <div class="photo-strip">
+        ${this._photos.map((photo, i) => html`
+          <div class="photo-thumb">
+            <img src=${photo.dataUrl} alt="Photo ${i + 1}">
+            <button class="remove-photo" @click=${() => this.#removePhoto(i)}>x</button>
+          </div>
+        `)}
+      </div>
+
+      ${this._error ? html`<p class="error">${this._error}</p>` : ''}
+
+      <div class="form">
+        <input
+          type="text"
+          placeholder="Add a title..."
+          .value=${this._title}
+          @input=${this.#handleTitleChange}
+          maxlength="100"
+        >
+        <div class="char-count">${this._title.length}/100</div>
+
+        <textarea
+          placeholder="Add a description (optional)..."
+          .value=${this._description}
+          @input=${this.#handleDescriptionChange}
+          maxlength="1000"
+        ></textarea>
+        <div class="char-count">${this._description.length}/1000</div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('grain-create-gallery', GrainCreateGallery);
+```
+
+**Step 2: Commit**
+
+```bash
+git add src/components/pages/grain-create-gallery.js
+git commit -m "feat: add create gallery page"
+```
+
+---
+
+### Task 7: Register Create Route
+
+**Files:**
+- Modify: `src/components/pages/grain-app.js`
+
+**Step 1: Import create gallery page**
+
+Add after grain-settings import:
+
+```javascript
+import './grain-create-gallery.js';
+```
+
+**Step 2: Register route**
+
+Add after settings route, before wildcard:
+
+```javascript
+.register('/create', 'grain-create-gallery')
+```
+
+**Step 3: Commit**
+
+```bash
+git add src/components/pages/grain-app.js
+git commit -m "feat: register create gallery route"
+```
+
+---
+
+### Task 8: Test Create Gallery Flow
+
+**Step 1: Manual testing checklist**
+
+1. Log in to the app
+2. Verify + button appears in center of bottom nav
+3. Tap + button, verify file picker opens
+4. Select 1-3 photos, verify navigation to /create
+5. Verify photos appear in thumbnail strip
+6. Try removing a photo with x button
+7. Enter a title, verify Post button enables
+8. Add optional description
+9. Tap Post, verify loading state
+10. Verify navigation to new gallery detail page
+11. Verify gallery shows in your profile grid
+
+**Step 2: Test edge cases**
+
+1. Select more than 10 photos - should show alert
+2. Navigate to /create directly without photos - should redirect home
+3. Remove all photos on create page - should redirect home
+4. Try posting without title - Post button should stay disabled
+
+**Step 3: Commit any fixes**
+
+```bash
+git add -A
+git commit -m "fix: create gallery flow polish"
+```