fix(backups): add remove button for selected backup paths

[tvarohohlavy]

Adds an X button to each selected path in the backup schedule form, allowing users to remove paths that no longer exist on the filesystem.

Problem: When files/folders selected for backup are deleted from the volume, they couldn't be removed from the configuration since they don't appear in the file browser to uncheck. This caused backups to always fail with restic errors.

Solution: Added a clickable X button next to each path in the "Selected paths" list for direct removal.

Summary by CodeRabbit

Release Notes

• New Features
  • Added ability to remove selected include paths from backup schedules. Users can now click a delete button next to each path to remove it from their selection, with the form updating automatically.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The changes add functionality to remove selected include paths from a backup schedule form. A new handleRemovePath function removes paths from a set, the X icon from lucide-react is imported for the delete button, and the UI is updated to display each path with a clickable remove button.

Changes

Cohort / File(s)	Summary
Include Path Removal Flow app/client/modules/backups/components/create-schedule-form.tsx	Adds handleRemovePath() function to remove paths from selectedPaths set and update form's includePatterns. Imports X icon from lucide-react. Updates UI to render each selected path as inline-flex element with remove button containing the X icon.

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a remove button for selected backup paths to allow users to deselect paths that no longer exist on the filesystem.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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.}

[Copilot]

Pull request overview

This PR adds a removal button for selected backup paths in the backup schedule form, addressing a critical usability issue where users couldn't remove paths that no longer exist on the filesystem since they wouldn't appear in the file browser.

Key Changes:

• Added an X button next to each selected path for direct removal
• Implemented handleRemovePath callback to handle path deletion from both UI state and form state
• Enhanced UI with hover effects and accessibility labels

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

app/client/modules/backups/components/create-schedule-form.tsx (1)

173-181: LGTM!

The removal logic is correct and properly synchronizes both the local state and form value. The dependency array includes selectedPaths, which is appropriate since the function reads from it.

Optional: Functional update pattern to reduce callback recreation

If you want to optimize callback stability, you could use functional updates to avoid the selectedPaths dependency:

 const handleRemovePath = useCallback(
   (pathToRemove: string) => {
-    const newPaths = new Set(selectedPaths);
-    newPaths.delete(pathToRemove);
-    setSelectedPaths(newPaths);
-    form.setValue("includePatterns", Array.from(newPaths));
+    setSelectedPaths((prev) => {
+      const newPaths = new Set(prev);
+      newPaths.delete(pathToRemove);
+      form.setValue("includePatterns", Array.from(newPaths));
+      return newPaths;
+    });
   },
-  [selectedPaths, form],
+  [form],
 );

However, the current implementation is perfectly fine for this use case.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between eded452 and fdbdf40.

📒 Files selected for processing (1)

• app/client/modules/backups/components/create-schedule-form.tsx

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx,js,jsx,json}

📄 CodeRabbit inference engine (AGENTS.md)

Use Biome for code formatting and linting with bunx biome check --write ., format only with bunx biome format --write ., or lint with bunx biome lint .

Files:

• app/client/modules/backups/components/create-schedule-form.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx,js,jsx}: Use tabs (not spaces) for indentation with a line width of 120 characters
Use double quotes for strings
Do not auto-organize imports - imports organization is disabled in Biome
All imports must include file extensions when targeting Node/Bun, as the project uses "type": "module"

Files:

• app/client/modules/backups/components/create-schedule-form.tsx

app/client/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

app/client/**/*.{ts,tsx}: Client uses TanStack Query for server state management
Client uses Radix UI primitives with custom Tailwind styling
Use Server-Sent Events hook (use-server-events.ts) for real-time updates in the client

Files:

• app/client/modules/backups/components/create-schedule-form.tsx

🧠 Learnings (1)

📚 Learning: 2025-12-28T17:31:39.171Z

Learnt from: CR
Repo: nicotsx/zerobyte PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-28T17:31:39.171Z
Learning: Applies to app/client/**/*.{ts,tsx} : Client uses TanStack Query for server state management

Applied to files:

• app/client/modules/backups/components/create-schedule-form.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Upload results

🔇 Additional comments (2)

app/client/modules/backups/components/create-schedule-form.tsx (2)

5-5: LGTM!

The X icon import is appropriate for the remove button functionality.

---

387-400: LGTM!

The UI implementation for removable path chips is well-designed:

• The inline-flex layout properly aligns the text and button
• type="button" prevents accidental form submission
• The aria-label attribute ensures screen reader accessibility
• Hover states provide clear visual feedback
• The small X icon is appropriately sized for compact chips