daonanchao/vibe-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dev server disabled tooltip (vibe-kanban) (#245)

Browse Source 
* Great! The build was successful. The tooltip has been updated to show "Add a dev server script in project settings to enable this feature" when the dev server is disabled, which provides a clearer message to users about what they need to do to enable the dev server functionality.

The change I made:
- Updated the tooltip text from "Configure a dev server command in project settings" to "Add a dev server script in project settings to enable this feature"
- This makes it clearer that the user needs to add a script, not just configure one
- The tooltip now explicitly mentions enabling the feature

The tooltip will now properly remind users to add a dev server script in project settings when the dev server button is disabled.

* Excellent! The build is successful. Now the tooltip will show even when the dev server button is disabled because:

1. The `TooltipTrigger` now wraps the outer `div` instead of the disabled `Button`
2. The `div` can receive mouse events even when the button inside is disabled
3. The tooltip will display "Add a dev server script in project settings to enable this feature" when `projectHasDevScript` is false

This solves the issue where the tooltip wasn't showing when the button was disabled, providing users with the helpful reminder about configuring the dev server script in project settings.

* prettier
This commit is contained in:
Louis Knight-Webb
2025-07-18 10:02:22 +01:00
committed by GitHub
parent 37e030e23c
commit 48e608993a
1 changed files with 38 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/src/components/tasks/Toolbar/CurrentAttempt.tsx
View File

@@ -587,14 +587,14 @@ function CurrentAttempt({
<div className="col-span-4 flex flex-wrap items-center justify-between gap-2"> <div className="col-span-4 flex flex-wrap items-center justify-between gap-2">
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">
<div <TooltipProvider>
className={!projectHasDevScript ? 'cursor-not-allowed' : ''} <Tooltip>
onMouseEnter={() => setIsHoveringDevServer(true)} <TooltipTrigger asChild>
onMouseLeave={() => setIsHoveringDevServer(false)} <div
> className={!projectHasDevScript ? 'cursor-not-allowed' : ''}
<TooltipProvider> onMouseEnter={() => setIsHoveringDevServer(true)}
<Tooltip> onMouseLeave={() => setIsHoveringDevServer(false)}
<TooltipTrigger asChild> >
<Button <Button
variant={runningDevServer ? 'destructive' : 'outline'} variant={runningDevServer ? 'destructive' : 'outline'}
size="sm" size="sm"
@@ -614,33 +614,36 @@ function CurrentAttempt({
</> </>
)} )}
</Button> </Button>
</TooltipTrigger> </div>
<TooltipContent </TooltipTrigger>
className={runningDevServer ? 'max-w-2xl p-4' : ''} <TooltipContent
side="top" className={runningDevServer ? 'max-w-2xl p-4' : ''}
align="center" side="top"
avoidCollisions={true} align="center"
> avoidCollisions={true}
{!projectHasDevScript ? ( >
<p>Configure a dev server command in project settings</p> {!projectHasDevScript ? (
) : runningDevServer && devServerDetails ? ( <p>
<div className="space-y-2"> Add a dev server script in project settings to enable this
<p className="text-sm font-medium"> feature
Dev Server Logs (Last 10 lines): </p>
</p> ) : runningDevServer && devServerDetails ? (
<pre className="text-xs bg-muted p-2 rounded max-h-64 overflow-y-auto whitespace-pre-wrap"> <div className="space-y-2">
{processedDevServerLogs} <p className="text-sm font-medium">
</pre> Dev Server Logs (Last 10 lines):
</div> </p>
) : runningDevServer ? ( <pre className="text-xs bg-muted p-2 rounded max-h-64 overflow-y-auto whitespace-pre-wrap">
<p>Stop the running dev server</p> {processedDevServerLogs}
) : ( </pre>
<p>Start the dev server</p> </div>
)} ) : runningDevServer ? (
</TooltipContent> <p>Stop the running dev server</p>
</Tooltip> ) : (
</TooltipProvider> <p>Start the dev server</p>
</div> )}
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div> </div>
<div className="flex items-center gap-2 flex-wrap"> <div className="flex items-center gap-2 flex-wrap">