feat(desktop): redesign StartView onboarding UI#1081
Conversation
- Simplify Open Project screen with cleaner layout - Add Clone Repository button - Remove StartTopBar in favor of minimal design - Update dropzone behavior and styling
📝 WalkthroughWalkthroughRemoves StartTopBar and refactors StartView: adds a CloneRepoDialog, centralizes clone error handling, tightens drag-and-drop guards to prevent opening projects while dragging, and updates UI/layout for compact open/clone interactions. Changes
Sequence DiagramsequenceDiagram
actor User
participant StartView as StartView
participant CloneDialog as CloneRepoDialog
participant CloneOps as CloneOperation
User->>StartView: Click "Clone Repository"
StartView->>CloneDialog: open(isCloneDialogOpen = true)
activate CloneDialog
User->>CloneDialog: Submit clone details
CloneDialog->>CloneOps: start clone
activate CloneOps
alt success
CloneOps-->>StartView: success
StartView->>CloneDialog: close()
else failure
CloneOps-->>StartView: error
StartView->>StartView: handleCloneError -> show error
end
deactivate CloneOps
deactivate CloneDialog
User->>StartView: Drag project folder over
StartView->>StartView: set isDragOver = true (block open actions)
User->>StartView: Release drag
StartView->>StartView: set isDragOver = false (re-enable opens)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
Use --single-branch and --filter=blob:none for faster cloning. Blobs are fetched on-demand instead of upfront.
This reverts commit 88d5d86.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@apps/desktop/src/renderer/screens/main/components/StartView/index.tsx`:
- Around line 169-171: handleCloneError currently only calls setError and
swallows context; update the StartView.handleCloneError implementation to first
log the error with a prefixed console error (use the pattern "[clone/repo] ...")
including the errorMessage (and the raw error object if you change the
signature), then call setError(errorMessage); reference the function name
handleCloneError and state setter setError when making the change.
- Around line 177-232: The drag-over button style uses an invalid Tailwind
spacing token "py-30" which will be stripped; in the JSX inside StartView (the
button rendered when isDragOver is true, around the onClick={handleOpenProject}
button) replace "py-30" with a valid spacing token such as "py-8" or "py-6"
(choose the desired vertical padding) so the isDragOver branch (className that
currently contains "border-foreground/40 bg-accent/50 py-30") applies the
intended padding at runtime.
🧹 Nitpick comments (1)
apps/desktop/src/renderer/screens/main/components/StartView/index.tsx (1)
10-11: Move StartView toStartView/StartView.tsxwith a barrel export.
This folder is undercomponents, so it should follow the one-component-per-file structure.As per coding guidelines,
**/components/**/*.tsx: Use folder structure with one component per file:ComponentName/ComponentName.tsxwith barrel export inindex.ts.
| const handleCloneError = (errorMessage: string) => { | ||
| setError(errorMessage); | ||
| }; |
There was a problem hiding this comment.
Log clone errors with context before surfacing to UI.
Please add a prefixed log so we don’t lose debugging context.
✅ Suggested change
const handleCloneError = (errorMessage: string) => {
+ console.error(`[start-view/clone] ${errorMessage}`);
setError(errorMessage);
};As per coding guidelines, never swallow errors silently; at minimum log them with context, and use prefixed console logging with pattern [domain/operation] message for all logging.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleCloneError = (errorMessage: string) => { | |
| setError(errorMessage); | |
| }; | |
| const handleCloneError = (errorMessage: string) => { | |
| console.error(`[start-view/clone] ${errorMessage}`); | |
| setError(errorMessage); | |
| }; |
🤖 Prompt for AI Agents
In `@apps/desktop/src/renderer/screens/main/components/StartView/index.tsx` around
lines 169 - 171, handleCloneError currently only calls setError and swallows
context; update the StartView.handleCloneError implementation to first log the
error with a prefixed console error (use the pattern "[clone/repo] ...")
including the errorMessage (and the raw error object if you change the
signature), then call setError(errorMessage); reference the function name
handleCloneError and state setter setError when making the change.
🧹 Preview Cleanup CompleteThe following preview resources have been cleaned up:
Thank you for your contribution! 🎉 |
1 participant
Summary
Test plan
Summary by CodeRabbit
New Features
Improvements
Removals
✏️ Tip: You can customize this high-level summary in your review settings.