Skip to content

Add copy buttons to result boxes #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
simonw wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Add copy buttons to result boxes #21

simonw wants to merge 4 commits into from

Conversation

@simonw
Copy link
Owner

@simonw simonw commented Dec 29, 2025

In every box that this tool produces - on both index and page-X.html and the search results - I want there to be a small "Copy text" or "Copy JSON" or "Copy Markdown" button positioned directly to the left of the 08:43 timestamp. Clicking that button should copy the relevant content to the clipboard - that content can go in a data attribute (since the Markdown has already been rendered to HTML when the page loads). It should be data-content="markdown content here" for the Markdown and data-content-from="CSS selector here" for JSON or plain text that is already shown on the page and can be copied from innerText instead. Clicking a copy button should change the text on the button to "Copied!" for 2s. Use a single WebComponent for this that gets reused in all of those places.

@claude
Add copy buttons to all message boxes and index items
bcf8af2 
Add a <copy-button> WebComponent that copies content to clipboard:
- Uses data-content attribute for markdown content (stored at render time)
- Uses data-content-from attribute with CSS selector for JSON/text content
- Button shows "Copied!" for 2 seconds after successful copy
- Different button labels: "Copy Markdown", "Copy JSON", "Copy text"

Copy buttons added to:
- Messages in page-X.html (left of timestamp)
- Index items in index.html (left of timestamp)
- Index commits in index.html (left of timestamp)
- Search results in search modal

Includes CSS styling, WebComponent JavaScript, and test coverage.
@claude
Add Playwright browser tests for copy button and search features
8d09b7a 
Add comprehensive Playwright tests that verify:
- Copy buttons are visible in messages and index items
- Clicking copy button changes text to "Copied!" for 2 seconds
- Copy button actually copies content to clipboard
- Search modal exists and search box is hidden on file:// protocol
- Timestamps are formatted by JavaScript

Tests are automatically skipped if Playwright browsers are not installed,
making CI/local development seamless without requiring browser setup.

Added pytest-playwright to dev dependencies in pyproject.toml.
@simonw
Copy link
Owner Author

simonw commented Dec 29, 2025

The JS and CSS should be in Jina templates now, not in __init__.py

simonw and others added 2 commits December 29, 2025 09:16
@simonw
Install and cache Playwright browsers in CI
3a9ba64
@claude
Move CSS and JS from Python strings to Jinja templates
722787b 
Extract the CSS and JavaScript code from __init__.py into proper
template files:
- templates/styles.css: All CSS styles
- templates/scripts.js: Copy button WebComponent and other JS

Add get_css() and get_js() functions to load and render these
templates, replacing the CSS and JS Python string constants.

This improves code organization by keeping frontend assets in
separate files that can be edited independently.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@simonw @claude