apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-05-16 18:25:17 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve scenario list ui

Browse source
This commit is contained in:
ramnique 2025-01-23 11:55:37 +05:30
parent 7bf32d6746
commit f739d85cb7
1 changed files with 53 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

103
apps/rowboat/app/projects/[projectId]/playground/scenario-list.tsx
View file

@ -7,7 +7,7 @@ import { Scenario, WithStringId } from "@/app/lib/types";
import { z } from "zod"; import { z } from "zod";
import { EditableField } from "@/app/lib/components/editable-field"; import { EditableField } from "@/app/lib/components/editable-field";
import { HamburgerIcon } from "@/app/lib/components/icons"; import { HamburgerIcon } from "@/app/lib/components/icons";
import { EllipsisVerticalIcon } from "lucide-react"; import { EllipsisVerticalIcon, PlayIcon } from "lucide-react";
export function AddScenarioForm({ export function AddScenarioForm({
onAdd, onAdd,
@ -174,56 +174,59 @@ export function ScenarioList({
{scenarios.length > 0 && <div className="flex flex-col gap-2"> {scenarios.length > 0 && <div className="flex flex-col gap-2">
{scenarios.map((scenario) => ( {scenarios.map((scenario) => (
<div key={scenario._id} className="flex justify-between gap-2 border p-2 rounded-md shadow-sm"> <div key={scenario._id} className="flex flex-col gap-1 rounded-md shadow-sm border border-gray-300">
<div className="flex flex-col gap-1 grow"> <div className="flex justify-between items-start">
<EditableField <div className="grow font-semibold text-lg">
key={'name'} <EditableField
label="Name" key={'name'}
placeholder="Scenario Name" placeholder="Scenario Name"
value={scenario.name} value={scenario.name}
onChange={(value) => handleEditScenario(scenario._id, value, scenario.description)} onChange={(value) => handleEditScenario(scenario._id, value, scenario.description)}
locked={scenario.tmp} locked={scenario.tmp}
/> />
<EditableField </div>
key={'description'} <div className="shrink-0 flex items-center mr-2 bg-gray-100 p-1 rounded-b-md">
label="Description" <button
multiline className="p-1 flex items-center gap-1 text-gray-500 hover:text-blue-500"
markdown onClick={() => onPlay(scenario)}
light
placeholder="Scenario Description"
value={scenario.description}
onChange={(value) => handleEditScenario(scenario._id, scenario.name, value)}
locked={scenario.tmp}
/>
</div>
<button
className="text-sm text-blue-500 hover:text-gray-700 font-semibold uppercase"
onClick={() => onPlay(scenario)}
>
Run &rarr;
</button>
<Dropdown>
<DropdownTrigger>
<button className="text-gray-300 hover:text-gray-700">
<EllipsisVerticalIcon size={16} />
</button>
</DropdownTrigger>
<DropdownMenu
disabledKeys={scenario.tmp ? ['delete'] : ['']}
onAction={(key) => {
if (key === 'delete') {
handleDeleteScenario(scenario._id);
}
}}
>
<DropdownItem
key="delete"
color="danger"
> >
Delete <PlayIcon size={16} />
</DropdownItem> <div className="text-sm font-semibold">Run</div>
</DropdownMenu> </button>
</Dropdown> <Dropdown>
<DropdownTrigger>
<button className="p-1 flex items-center gap-1 text-gray-500 hover:text-gray-700">
<EllipsisVerticalIcon size={16} />
</button>
</DropdownTrigger>
<DropdownMenu
disabledKeys={scenario.tmp ? ['delete'] : ['']}
onAction={(key) => {
if (key === 'delete') {
handleDeleteScenario(scenario._id);
}
}}
>
<DropdownItem
key="delete"
color="danger"
>
Delete
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</div>
<EditableField
key={'description'}
multiline
markdown
light
placeholder="Scenario Description"
value={scenario.description}
onChange={(value) => handleEditScenario(scenario._id, scenario.name, value)}
locked={scenario.tmp}
/>
</div> </div>
))} ))}
</div>} </div>}