[dev + copy button] add / update local dev w/docker compose; add copy file button #328
Conversation
## Walkthrough
The updates introduce a Docker Compose configuration for running Redis and PostgreSQL in development, revise the contributing guide to reflect these Docker-based setup instructions, and enhance the `FileHeader` component in the web package with a copy-to-clipboard feature for file paths, including visual feedback and toast notifications.
## Changes
| File(s) | Change Summary |
|-----------------------------------------------------|-----------------------------------------------------------------------------------------------|
| CONTRIBUTING.md | Updated installation steps to separate Redis/PostgreSQL setup, now using Docker Compose. |
| docker-compose-dev.yml | Added new Docker Compose file defining Redis and PostgreSQL services with persistent storage. |
| packages/web/src/app/[domain]/components/fileHeader.tsx | Enhanced `FileHeader` with copy-to-clipboard functionality, visual feedback, and notifications.|
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant User
participant FileHeader
participant Clipboard
participant Toast
User->>FileHeader: Clicks Copy button
FileHeader->>Clipboard: Write file path
Clipboard-->>FileHeader: Success
FileHeader->>Toast: Show "Copied file path!"
FileHeader-->>User: Show checkmark icon
Note over FileHeader: After 1.5s, revert icon to copyPoem
|
drew-u410
force-pushed
the
drew/add_dev_add_copy_button
branch
from
edb02a4 to
f415caf
Compare
|
This is awesome thanks!! Good DX change for the development flow. Could you add a entry to the |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (1)
docker-compose-dev.yml (1)
19-22: Consider security implications of default PostgreSQL credentials.While using default credentials (
postgres/postgres/postgres) is acceptable for development, consider documenting this in the README or contributing guide to ensure developers are aware these should never be used in production environments.Add a comment above the environment variables:
environment: + # Development credentials - DO NOT use in production POSTGRES_DB: postgres POSTGRES_USER: postgres POSTGRES_PASSWORD: postgres
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
CONTRIBUTING.md(2 hunks)docker-compose-dev.yml(1 hunks)packages/web/src/app/[domain]/components/fileHeader.tsx(4 hunks)
🧰 Additional context used
🪛 LanguageTool
CONTRIBUTING.md
[uncategorized] ~5-~5: The official spelling of this programming framework is “Node.js”.
Context: ...rg/favicon.ico" width="16" height="16"> NodeJS. Note that a NodeJS version of at l...
(NODE_JS)
[uncategorized] ~5-~5: The official spelling of this programming framework is “Node.js”.
Context: ...6" height="16"> NodeJS. Note that a NodeJS version of at least 21.1.0 is require...
(NODE_JS)
🪛 markdownlint-cli2 (0.17.2)
CONTRIBUTING.md
5-5: Images should have alternate text (alt text)
null
(MD045, no-alt-text)
5-5: Images should have alternate text (alt text)
null
(MD045, no-alt-text)
16-16: Images should have alternate text (alt text)
null
(MD045, no-alt-text)
🔇 Additional comments (4)
docker-compose-dev.yml (1)
1-30: Solid Docker Compose configuration for development environment.The configuration provides a clean development setup with appropriate service definitions and persistent storage. Both services use lightweight Alpine images which is a good choice for development.
packages/web/src/app/[domain]/components/fileHeader.tsx (3)
9-11: Good addition of necessary imports for copy functionality.The imports are appropriate for the copy-to-clipboard feature implementation.
110-121: Excellent implementation of copy button with accessibility and visual feedback.The copy button implementation includes:
- Proper accessibility with
aria-label- Visual feedback with icon toggle
- Appropriate styling and transitions
- Clear user interaction patterns
86-86:❓ Verification inconclusive
Verify layout impact of container structure changes.
The addition of the copy button required restructuring the container to use flexbox. Ensure this doesn't break the layout on different screen sizes or with long file paths.
Test the component with various file path lengths to ensure proper truncation and button positioning:
🏁 Script executed:
#!/bin/bash # Description: Check for other FileHeader usages and similar truncation patterns # Expected: Find consistent truncation handling across components rg -A 5 -B 5 "truncate-start|FileHeader" --type tsx --type tsLength of output: 91
Verify layout impact of FileHeader flex container changes
Please ensure that adding the copy button and wrapping the file name in a flex container doesn’t break truncation or button alignment across different viewports and file-path lengths.
• Manually test the FileHeader component with:
– Very short, medium, and extremely long file paths
– Responsive breakpoints (mobile, tablet, desktop)
– Varying font sizes or zoom levels• Search for other truncation patterns to compare behavior:
rg -g '*.tsx' -g '*.ts' 'truncate' rg -g '*.tsx' -g '*.ts' 'FileHeader'Confirm that:
- The file path consistently truncates (with ellipsis) when it overflows
- The copy button remains aligned and visible
… button to the right of filenames
drew-u410
force-pushed
the
drew/add_dev_add_copy_button
branch
from
f415caf to
f375707
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
CONTRIBUTING.md (1)
37-37: Typographical fix
There’s a typo in “declerative”. It should read “declarative” for accuracy.-7. If you're using a declerative configuration file (the default behavior if you didn't enable auth), ... +7. If you're using a declarative configuration file (the default behavior if you didn't enable auth), ...
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
CHANGELOG.md(1 hunks)CONTRIBUTING.md(2 hunks)docker-compose-dev.yml(1 hunks)packages/web/src/app/[domain]/components/fileHeader.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- docker-compose-dev.yml
- packages/web/src/app/[domain]/components/fileHeader.tsx
🧰 Additional context used
🧠 Learnings (1)
CONTRIBUTING.md (1)
Learnt from: drew-u410
PR: sourcebot-dev/sourcebot#328
File: CONTRIBUTING.md:5-5
Timestamp: 2025-06-03T00:22:00.461Z
Learning: In the sourcebot repository CONTRIBUTING.md file, the maintainer prefers using "NodeJS" spelling instead of the official "Node.js" branding, and prefers not to add alt text to favicon images in the installation instructions.
🪛 LanguageTool
CHANGELOG.md
[duplication] ~10-~10: Possible typo: you repeated a word.
Context: ...pec/v2.0.0.html). ## [Unreleased] ### Added - Added copy button for filenames. [#328](https...
(ENGLISH_WORD_REPEAT_RULE)
CONTRIBUTING.md
[uncategorized] ~5-~5: The official spelling of this programming framework is “Node.js”.
Context: ...rg/favicon.ico" width="16" height="16"> NodeJS. Note that a NodeJS version of at l...
(NODE_JS)
[uncategorized] ~5-~5: The official spelling of this programming framework is “Node.js”.
Context: ...6" height="16"> NodeJS. Note that a NodeJS version of at least 21.1.0 is require...
(NODE_JS)
🪛 markdownlint-cli2 (0.17.2)
CONTRIBUTING.md
5-5: Images should have alternate text (alt text)
null
(MD045, no-alt-text)
5-5: Images should have alternate text (alt text)
null
(MD045, no-alt-text)
16-16: Images should have alternate text (alt text)
null
(MD045, no-alt-text)
🔇 Additional comments (8)
CONTRIBUTING.md (7)
5-5: Clarify prerequisites
Step 1 cleanly scopes the initial requirements to only Go and NodeJS, making it clear which tools are needed for development.🧰 Tools
🪛 LanguageTool
[uncategorized] ~5-~5: The official spelling of this programming framework is “Node.js”.
Context: ...rg/favicon.ico" width="16" height="16"> NodeJS. Note that a NodeJS version of at l...(NODE_JS)
[uncategorized] ~5-~5: The official spelling of this programming framework is “Node.js”.
Context: ...6" height="16"> NodeJS. Note that a NodeJS version of at least21.1.0is require...(NODE_JS)
🪛 markdownlint-cli2 (0.17.2)
5-5: Images should have alternate text (alt text)
null(MD045, no-alt-text)
5-5: Images should have alternate text (alt text)
null(MD045, no-alt-text)
16-20: Document Docker setup
Step 3 clearly instructs contributors to install Docker and launch PostgreSQL/Redis with the provided Compose file, greatly improving the local DX.🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
16-16: Images should have alternate text (alt text)
null(MD045, no-alt-text)
22-25: Repository cloning step updated
Renumbering to step 4 correctly follows the Docker setup and positions the clone command in logical sequence.
27-31: Build & dependency installation
Step 5’smakeinvocation is precise and describes where binaries and modules will be placed, aiding clarity.
35-35: Environment file creation
Step 6 clearly guides users to duplicate and configure the.env.development.localfile.
39-42: Launch command is correct
Step 8 properly documents starting the app withyarn dev, matching the project’s development scripts.
46-46: Access URL instruction
Step 9 succinctly tells contributors where to access the running service in their browser.CHANGELOG.md (1)
10-12: Changelog entries for new features
The “Added” section now correctly documents both the copy button feature and the development Docker Compose setup, adhering to Keep a Changelog format.🧰 Tools
🪛 LanguageTool
[duplication] ~10-~10: Possible typo: you repeated a word.
Context: ...pec/v2.0.0.html). ## [Unreleased] ### Added - Added copy button for filenames. [#328](https...(ENGLISH_WORD_REPEAT_RULE)
CONTRIBUTING.mdto use a Docker Compose for PostegreSQL + Redis to make initial setup / ongoing super easy for folks.copybutton to the right of the filename / path. Animates with a checkmark and adds a toast to be fancy.Light + Dark Modes Tested:
https://github.com/user-attachments/assets/b5ab1a57-5604-4896-91a1-62b60bf1e421
https://github.com/user-attachments/assets/76ce551f-52ac-4459-9f57-482182047227
Summary by CodeRabbit
New Features
Documentation
Chores