Feat: Add copy-all button to reduce copy steps on search page

[z-Fng]

Motivation and Context

• Closes Combine add bucket & install into one clipboard operation #69

Users currently need to copy twice on the search page to install an app if the bucket isn’t added.

Description

This PR makes the following changes:

• Feat: Add copy-all button to reduce copy steps on search page.

Summary by CodeRabbit

• New Features

  • Added a “Copy all” button to copy both commands at once.
  • Per-command copy buttons now use consistently constructed command text.

• Style

  • Rearranged the bottom section into a single column with each copy action on its own row for clearer layout.

• Refactor

  • Centralized command construction to replace hard-coded strings, improving consistency and maintainability.

[coderabbitai]

Walkthrough

Refactors SearchResult.tsx to construct command strings via variables, restructures the layout to group per-command copy controls, and adds a new “Copy all” button that copies the combined add-bucket and install commands to the clipboard. No exported/public API changes.

Changes

Cohort / File(s)	Summary of Changes
SearchResult UI refactor & combined copy src/components/SearchResult.tsx	Introduced bucketCommandLine, bucketCommand, appCommand, fullCommand; replaced inline literals. Grouped per-command CopyToClipboardComponent controls into a single column. Added CopyToClipboardButton to copy fullCommand (bucket + newline + app). No public API changes.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant U as User
  participant SR as SearchResult Component
  participant CC1 as CopyToClipboardComponent (Bucket)
  participant CC2 as CopyToClipboardComponent (Install)
  participant CAB as CopyToClipboardButton (Copy all)
  participant CB as Clipboard

  rect rgba(200,220,255,0.2)
    note over SR: On render: build bucketCommand, appCommand, fullCommand
  end

  U->>CC1: Click "Copy add bucket"
  CC1->>CB: Copy bucketCommand
  CB-->>U: Clipboard updated

  U->>CC2: Click "Copy install"
  CC2->>CB: Copy appCommand
  CB-->>U: Clipboard updated

  rect rgba(220,255,220,0.2)
    note right of CAB: New combined action
    U->>CAB: Click "Copy all"
    CAB->>SR: Request fullCommand
    SR-->>CAB: fullCommand (bucket + newline + app)
    CAB->>CB: Copy fullCommand
    CB-->>U: Clipboard updated
  end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Pre-merge checks (5 passed)

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title succinctly and accurately describes the primary change, namely adding a “copy-all” button on the search page to reduce the number of copy steps. It is focused, clear, and highlights the most important enhancement without unnecessary details.
Linked Issues Check	✅ Passed	The pull request implements the core objectives of issue #69 by constructing and combining the add-bucket and install commands into a single “copy-all” clipboard operation and updating the UI to present this option. The code changes define bucketCommand, appCommand, and fullCommand, use them in per-command copy buttons, and introduce a new copy-all component, fully satisfying the linked issue’s requirements.
Out of Scope Changes Check	✅ Passed	All modifications are confined to the SearchResult component’s UI and local command-string logic to enable the combined copy functionality, with no unrelated files, APIs, or external modules altered. There are no extraneous changes beyond the scope of issue #69.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

Poem

I twitched my whiskers, clicked with glee,
Two hops became one, more time for tea.
Bucket, install—now side by side,
A single copy, a smoother ride.
Clip-clop clipboard, swift as the breeze—
Carrots secured with newfound ease. 🥕✨

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/components/SearchResult.tsx (1)

203-219: Nice UX! Add id and aria-label to the “Copy all” button

Great addition and layout. For test hooks and accessibility, add a stable id and aria-label.

Apply this diff:

-                <Col xs="auto" className="copy-command-group ps-1 d-flex">
+                <Col xs="auto" className="copy-command-group ps-1 d-flex">
                   <CopyToClipboardButton
-                    className="copy-command-button"
+                    className="copy-command-button"
+                    id="copy-all-command"
+                    aria-label="Copy both commands to clipboard"
                     title="Copy all to clipboard"
                     variant="outline-secondary"
                     onClick={() => handleCopyToClipboard(`${fullCommand}`)}
                   />
                 </Col>

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d5c758f and 32d5286.

📒 Files selected for processing (1)

• src/components/SearchResult.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

src/components/SearchResult.tsx (2)

src/components/Home.tsx (3)

• SyntaxHighlighterWithCopyBtnProps (77-96)
• newContentToCopy (65-71)
• handleCopyToClipboard (90-90)

src/components/CopyToClipboardButton.tsx (1)

• props (10-35)

[gpailler]

Thanks for the PR, it works well 👍