diff options
Diffstat (limited to 'packages/desktop/src/components')
| -rw-r--r-- | packages/desktop/src/components/session-list.tsx | 34 |
1 files changed, 22 insertions, 12 deletions
diff --git a/packages/desktop/src/components/session-list.tsx b/packages/desktop/src/components/session-list.tsx index e0819780d..5b6dc0f5a 100644 --- a/packages/desktop/src/components/session-list.tsx +++ b/packages/desktop/src/components/session-list.tsx @@ -1,26 +1,36 @@ import { useSync, useLocal } from "@/context" -import { Button, Tooltip } from "@/ui" +import { Tooltip } from "@/ui" +import { DateTime } from "luxon" import { VList } from "virtua/solid" export default function SessionList() { const sync = useSync() const local = useLocal() - return ( - <VList data={sync.data.session} class="p-2"> + <VList data={sync.data.session} class="p-3"> {(session) => ( <Tooltip placement="right" value={session.title} class="w-full min-w-0"> - <Button - size="sm" - variant="ghost" - classList={{ - "w-full min-w-0 py-1 text-left truncate justify-start text-text-muted text-xs": true, - "text-text!": local.session.active()?.id === session.id, - }} + <button + data-active={local.session.active()?.id === session.id} + class="group w-full min-w-0 text-left truncate justify-start text-xs my-0.5 cursor-pointer + flex flex-col gap-1 rounded-md p-2 border-[0.5px] border-transparent + hover:not-data-[active=true]:bg-background-panel + data-[active=true]:bg-background-element data-[active=true]:border-border-subtle" onClick={() => local.session.setActive(session.id)} > - <span class="truncate">{session.title}</span> - </Button> + <div class="flex gap-1 items-center"> + <div + classList={{ + "text-text/80 min-w-0 grow truncate": true, + "group-data-[active=true]:text-text!": true, + }} + > + {session.title} + </div> + <div class="shrink-0 text-text-muted/60">{DateTime.fromMillis(session.time.updated).toRelative()}</div> + </div> + <span class="text-text-muted truncate">{session.share?.url}</span> + </button> </Tooltip> )} </VList> |