feat: screenshots

.github/workflows/screenshots.yml

@@ -0,0 +1,141 @@
+name: Generate Screenshots
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  generate-screenshots:
+    name: Generate Feature Screenshots
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          ref: master
+          persist-credentials: false
+
+      - name: Set up Go
+        uses: actions/setup-go@v6
+        with:
+          go-version: "stable"
+
+      - name: Create Dummy Config
+        run: |
+          mkdir -p ~/.config/matcha
+          cat <<EOF > ~/.config/matcha/config.json
+          {
+            "accounts": [
+              {
+                "id": "demo-user",
+                "name": "Matcha Client",
+                "email": "matcha@floatpane.com",
+                "password": "dummy-password",
+                "service_provider": "custom",
+                "fetch_email": "matcha@floatpane.com"
+              }
+            ]
+          }
+          EOF
+
+      - name: Create Dummy Drafts
+        run: |
+          cat <<EOF > ~/.config/matcha/drafts.json
+          {
+            "drafts": [
+              {
+                "id": "draft-001",
+                "to": "team@example.com",
+                "subject": "Q1 Planning Document",
+                "body": "# Q1 Planning\n\nHere are the key objectives for Q1...",
+                "account_id": "demo-user"
+              },
+              {
+                "id": "draft-002",
+                "to": "alice@example.com",
+                "subject": "Re: Design Review Feedback",
+                "body": "Thanks for the review! I'll address the comments...",
+                "account_id": "demo-user"
+              }
+            ],
+            "updated_at": "2026-01-15T10:00:00Z"
+          }
+          EOF
+
+      - name: Build Matcha
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          LATEST_TAG=$(gh release view --json tagName -q ".tagName" 2>/dev/null || echo "dev")
+          echo "Using version: $LATEST_TAG"
+
+          git fetch --tags 2>/dev/null || true
+
+          COMMIT=$(git rev-parse --short HEAD)
+          DATE=$(date -u +'%Y-%m-%dT%H:%M:%SZ')
+          go build -ldflags="-s -w -X main.version=$LATEST_TAG -X main.commit=$COMMIT -X main.date=$DATE" -o matcha .
+          go build -o email_view ./screenshots/cmd/email_view
+          go build -o inbox_view ./screenshots/cmd/inbox_view
+
+      - name: Prepare Tapes
+        run: |
+          for tape in screenshots/*.tape; do
+            [ "$tape" = "screenshots/common.tape" ] && continue
+            sed -i 's|go run \./screenshots/cmd/email_view|./email_view|' "$tape"
+            sed -i 's|go run \./screenshots/cmd/inbox_view|./inbox_view|' "$tape"
+            sed -i 's|go run \.|./matcha|' "$tape"
+          done
+
+      - name: Install Dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y ffmpeg ttyd
+          mkdir -p ~/.local/share/fonts
+          wget -q https://github.com/ryanoasis/nerd-fonts/releases/download/v3.1.1/JetBrainsMono.zip
+          unzip -o JetBrainsMono.zip -d ~/.local/share/fonts
+          fc-cache -fv
+          go install github.com/charmbracelet/vhs@latest
+
+      - name: Generate Screenshots
+        env:
+          CLICOLOR_FORCE: "1"
+        run: |
+          mkdir -p docs/docs/assets/
+          for tape in screenshots/*.tape; do
+            [ "$tape" = "screenshots/common.tape" ] && continue
+            name=$(basename "$tape" .tape)
+            echo "==> Generating screenshot: $name"
+            TERM=xterm-256color vhs "$tape" || echo "Warning: $name failed"
+          done
+          # Move generated screenshots to public assets, clean up intermediate gifs
+          mv screenshots/*.png docs/docs/assets/ 2>/dev/null || true
+          rm -f screenshots/*.gif 2>/dev/null || true
+          ls -la public/assets/screenshots/
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v8
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          commit-message: "docs: update feature screenshots [skip ci]"
+          title: "docs: update feature screenshots"
+          body: |
+            This PR updates the feature screenshots based on the latest release version.
+
+            Generated automatically by the Generate Screenshots workflow.
+
+            ### Screenshots included:
+            - `main_menu.png` - Main menu / choice screen
+            - `compose_email.png` - Email composition with Markdown
+            - `compose_empty.png` - Clean compose interface
+            - `email_view.png` - HTML email with inline images and attachments
+            - `inbox_view.png` - Inbox with emails from various senders and dates
+            - `settings.png` - Settings / account management
+            - `drafts.png` - Draft management view
+          branch: "update-screenshots"
+          base: "master"
+          add-paths: public/assets/screenshots/

Makefile

@@ -1,4 +1,4 @@
-.PHONY: build test run clean lint fmt vet build-full
+.PHONY: build test run clean lint fmt vet build-full generate_screenshots
 
 BINARY_NAME=matcha
 BUILD_DIR=bin
@@ -8,6 +8,18 @@ generate_gif:
 	vhs demo.tape
 	mv demo.gif public/assets/demo.gif
 
+generate_screenshots:
+	@mkdir -p docs/docs/assets/
+	@for tape in screenshots/*.tape; do \
+		[ "$$(basename $$tape)" = "common.tape" ] && continue; \
+		name=$$(basename "$$tape" .tape); \
+		echo "==> Generating screenshot: $$name"; \
+		vhs "$$tape" || echo "Warning: $$name failed"; \
+	done
+	@mv screenshots/*.png docs/docs/assets/ 2>/dev/null || true
+	@rm -f screenshots/*.gif 2>/dev/null || true
+	@echo "Screenshots saved to public/assets/screenshots/"
+
 build:
 	go build -o $(BUILD_DIR)/$(BINARY_NAME) .
 

docs/docs/Features/COMPOSING.md

@@ -1,5 +1,7 @@
 # Composing Emails
 
+![composer](../assets/compose_email.png) ![Empty Composer](../assets/compose_empty.png)
+
 Matcha provides a clean, intuitive interface for writing emails.
 
 ## Features

docs/docs/Features/DRAFTS.md

@@ -1,5 +1,7 @@
 # Draft Management
 
+![Drafts](../assets/drafts.png)
+
 Manage your unfinished emails with ease.
 
 ## Features

docs/docs/Features/EMAIL_MANAGEMENT.md

@@ -1,5 +1,7 @@
 # Email Management
 
+![settings](../assets/settings.png)
+
 Matcha provides comprehensive tools for managing your emails directly from the terminal.
 
 ## Key Features

docs/docs/index.md

@@ -15,7 +15,7 @@ hide_table_of_contents: true
 
 Ready to dive in? Here are a few places to start:
 
-- 🚀 [Installation Guide](./Getting Started/installation.md) - Get Matcha running on your machine
+- 🚀 [Installation Guide](.//installation.md) - Get Matcha running on your machine
 - 📖 [Usage & Shortcuts](./usage.md) - Learn how to navigate the interface
 - ⚙️ [Configuration](./Configuration.md) - Set up your accounts and preferences
 

screenshots/.gitignore

@@ -0,0 +1,2 @@
+# VHS intermediate output files
+*.gif

screenshots/cmd/email_view/main.go

@@ -0,0 +1,86 @@
+// email_view is a small helper that renders a mock email with inline images
+// for screenshot generation. It creates a bubbletea program displaying a
+// realistic HTML email using the real EmailView component.
+package main
+
+import (
+	"fmt"
+	"os"
+	"time"
+
+	tea "charm.land/bubbletea/v2"
+	"github.com/floatpane/matcha/fetcher"
+	"github.com/floatpane/matcha/tui"
+)
+
+func main() {
+	email := fetcher.Email{
+		UID:       1001,
+		From:      "Sarah Chen <sarah.chen@example.com>",
+		To:        []string{"team@example.com"},
+		Subject:   "New Dashboard Redesign - Preview & Feedback",
+		Date:      time.Now().Add(-2 * time.Hour),
+		MessageID: "<dashboard-redesign-001@example.com>",
+		AccountID: "demo-user",
+		Body: `<html>
+<body>
+<h1>Dashboard Redesign Preview</h1>
+
+<p>Hi team,</p>
+
+<p>I'm excited to share the <b>new dashboard redesign</b> we've been working on!
+Here's a quick overview of the changes:</p>
+
+<h2>What's New</h2>
+
+<ul>
+<li><b>Simplified navigation</b> - We reduced sidebar items from 12 to 6</li>
+<li><b>Dark mode support</b> - Full theme switching with system preference detection</li>
+<li><b>Real-time updates</b> - WebSocket integration for live data refresh</li>
+<li><b>Responsive layout</b> - Optimized for mobile, tablet, and desktop</li>
+</ul>
+
+<h2>Screenshots</h2>
+
+<p>Here's the new main view:</p>
+<img src="cid:dashboard-main" alt="Dashboard main view" />
+
+<p>And the analytics panel:</p>
+<img src="cid:analytics-panel" alt="Analytics panel with charts" />
+
+<h2>Next Steps</h2>
+
+<ol>
+<li>Review the mockups above</li>
+<li>Leave comments in the <a href="https://figma.com/file/example">Figma file</a></li>
+<li>Join the feedback session on <b>Thursday at 3pm</b></li>
+</ol>
+
+<p>Looking forward to your thoughts!</p>
+
+<p>Best,<br/>
+Sarah</p>
+</body>
+</html>`,
+		Attachments: []fetcher.Attachment{
+			{
+				Filename: "dashboard-mockup.png",
+				MIMEType: "image/png",
+				Inline:   false,
+			},
+			{
+				Filename: "analytics-export.csv",
+				MIMEType: "text/csv",
+				Inline:   false,
+			},
+		},
+	}
+
+	ev := tui.NewEmailView(email, 0, 140, 45, tui.MailboxInbox, true)
+
+	p := tea.NewProgram(ev)
+	if _, err := p.Run(); err != nil {
+		fmt.Fprintf(os.Stderr, "Error: %v\n", err)
+		os.Exit(1)
+	}
+}