diff options
| -rw-r--r-- | packages/desktop/src/pages/layout.tsx | 71 |
1 files changed, 37 insertions, 34 deletions
diff --git a/packages/desktop/src/pages/layout.tsx b/packages/desktop/src/pages/layout.tsx index 7da920c5f..9bc878dd6 100644 --- a/packages/desktop/src/pages/layout.tsx +++ b/packages/desktop/src/pages/layout.tsx @@ -318,22 +318,20 @@ export default function Layout(props: ParentProps) { ) } return ( - <A - href={`${slug()}/session/${session.id}`} - class="group/session focus:outline-none cursor-default" + <div + class="group/session relative w-full pl-4 pr-1 py-1 rounded-md cursor-default transition-colors + hover:bg-surface-raised-base-hover focus-within:bg-surface-raised-base-hover has-[.active]:bg-surface-raised-base-hover" > - <Tooltip placement="right" value={session.title}> - <div - class="relative w-full pl-4 pr-1 py-1 rounded-md - group-[.active]/session:bg-surface-raised-base-hover - group-hover/session:bg-surface-raised-base-hover - group-focus/session:bg-surface-raised-base-hover" + <Tooltip placement="right" value={session.title} gutter={10}> + <A + href={`${slug()}/session/${session.id}`} + class="flex flex-col min-w-0 text-left w-full focus:outline-none" > - <div class="flex items-center self-stretch gap-6 justify-between"> + <div class="flex items-center self-stretch gap-6 justify-between transition-[padding] group-hover/session:pr-7 group-focus-within/session:pr-7 group-active/session:pr-7"> <span class="text-14-regular text-text-strong overflow-hidden text-ellipsis truncate"> {session.title} </span> - <div class="shrink-0 group-hover/session:hidden mr-1"> + <div class="shrink-0 group-hover/session:hidden group-active/session:hidden group-focus-within/session:hidden"> <Switch> <Match when={hasError()}> <div class="size-1.5 mr-1.5 rounded-full bg-text-diff-delete-base" /> @@ -358,12 +356,6 @@ export default function Layout(props: ParentProps) { </Match> </Switch> </div> - <div class="hidden group-hover/session:flex group-active/session:flex text-text-base gap-1"> - {/* <IconButton icon="dot-grid" variant="ghost" /> */} - <Tooltip placement="right" value="Archive session"> - <IconButton icon="archive" variant="ghost" onClick={() => archive(session)} /> - </Tooltip> - </div> </div> <Show when={session.summary?.files}> <div class="flex justify-between items-center self-stretch"> @@ -371,29 +363,40 @@ export default function Layout(props: ParentProps) { <Show when={session.summary}>{(summary) => <DiffChanges changes={summary()} />}</Show> </div> </Show> - </div> + </A> </Tooltip> - </A> + <div class="hidden group-hover/session:flex group-active/session:flex group-focus-within/session:flex text-text-base gap-1 items-center absolute top-1 right-1"> + {/* <IconButton icon="dot-grid" variant="ghost" /> */} + <Tooltip placement="right" value="Archive session"> + <IconButton icon="archive" variant="ghost" onClick={() => archive(session)} /> + </Tooltip> + </div> + </div> ) }} </For> <Show when={sessions().length === 0}> - <A href={`${slug()}/session`} class="group/session focus:outline-none cursor-default"> - <Tooltip placement="right" value="New session"> - <div - class="relative w-full pl-4 pr-1 py-1 rounded-md - group-[.active]/session:bg-surface-raised-base-hover - group-hover/session:bg-surface-raised-base-hover - group-focus/session:bg-surface-raised-base-hover" - > - <div class="flex items-center self-stretch gap-6 justify-between"> - <span class="text-14-regular text-text-strong overflow-hidden text-ellipsis truncate"> - New session - </span> - </div> + <div + class="group/session relative w-full pl-4 pr-1 py-1 rounded-md cursor-default transition-colors + hover:bg-surface-raised-base-hover focus-within:bg-surface-raised-base-hover has-[.active]:bg-surface-raised-base-hover" + > + <div class="flex items-center self-stretch w-full"> + <div class="flex-1 min-w-0"> + <Tooltip placement="right" value="New session"> + <A + href={`${slug()}/session`} + class="flex flex-col gap-1 min-w-0 text-left w-full focus:outline-none" + > + <div class="flex items-center self-stretch gap-6 justify-between"> + <span class="text-14-regular text-text-strong overflow-hidden text-ellipsis truncate"> + New session + </span> + </div> + </A> + </Tooltip> </div> - </Tooltip> - </A> + </div> + </div> </Show> </nav> </Collapsible.Content> |