Skip to content

refactor(app): simplify sidebar active state and tighten density #237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Astro-Han merged 2 commits into from
Apr 26, 2026
Merged

refactor(app): simplify sidebar active state and tighten density #237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
877f2e1
refactor(app): simplify sidebar active state and tighten density
Astro-Han Apr 25, 2026
b82ea0c
refactor(app): align pin button and skeleton gap with new sidebar den…
Astro-Han Apr 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/app/src/pages/layout/pawwork-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,7 @@ export const PawworkSidebar = (props: {
props.onTogglePinnedSession(session.id)
}}
classList={{
"inline-flex size-6 items-center justify-center rounded transition-colors": true,
"inline-flex size-5 items-center justify-center rounded transition-colors": true,
"text-text-strong opacity-100 pointer-events-auto": isPinned(),
"text-text-weak opacity-0 pointer-events-none group-hover/session:opacity-100 group-hover/session:pointer-events-auto group-focus-within/session:opacity-100 group-focus-within/session:pointer-events-auto hover:text-text-base":
!isPinned(),
Expand Down Expand Up @@ -295,9 +295,9 @@ export const PawworkSidebar = (props: {
when={props.sessions().length > 0}
fallback={<div class="px-2 text-13-regular text-text-weak">{language.t("sidebar.pawwork.empty.sessions")}</div>}
>
<nav class="flex flex-col gap-1">
<nav class="flex flex-col gap-0.5">
<Show when={pinnedRows().length > 0}>
<section data-component="pawwork-sidebar-pinned" class="flex flex-col gap-1">
<section data-component="pawwork-sidebar-pinned" class="flex flex-col gap-0.5">
<div class="px-2 pb-1 text-11-medium text-text-weak">{language.t("sidebar.pawwork.pinned")}</div>
<For each={pinnedRows()}>{(entry) => renderSessionItem(entry)}</For>
</section>
Expand Down Expand Up @@ -327,7 +327,7 @@ export const PawworkSidebar = (props: {
<Show when={props.sortMode() === "project"}>
<For each={groupedRows()}>
{(group) => (
<section class="flex flex-col gap-1">
<section class="flex flex-col gap-0.5">
<div data-component="pawwork-group-header" class="px-2 pt-3 pb-1 text-11-medium font-mono text-text-weak">
{group.label}
</div>
Expand Down
12 changes: 6 additions & 6 deletions packages/app/src/pages/layout/sidebar-items.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ const SessionRow = (props: {
}}
>
<div
class="shrink-0 size-6 flex items-center justify-center"
class="shrink-0 size-5 flex items-center justify-center"
Comment thread
Astro-Han marked this conversation as resolved.
Comment thread
Astro-Han marked this conversation as resolved.
style={{ color: props.tint() ?? "var(--icon-interactive-base)" }}
>
{indicator()}
Expand Down Expand Up @@ -204,7 +204,7 @@ export const SessionItem = (props: SessionItemProps): JSX.Element => {
<>
<div
data-session-id={props.session.id}
class="group/session relative w-full min-w-0 rounded-md cursor-default pr-3 transition-colors hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active has-[.active]:shadow-[inset_2px_0_0_var(--color-accent-brand)]"
class="group/session relative w-full min-w-0 rounded-xl cursor-default pr-3 transition-colors hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[[data-expanded]]:bg-surface-raised-base-hover has-[.active]:bg-surface-raised-base-hover"
style={{ "padding-left": `${8 + (props.level ?? 0) * 16}px` }}
>
<div class="flex min-w-0 items-center gap-1">
Expand Down Expand Up @@ -294,15 +294,15 @@ export const NewSessionItem = (props: {
props.clearHoverProjectSoon()
}}
>
<div class="shrink-0 size-6 flex items-center justify-center">
<div class="shrink-0 size-5 flex items-center justify-center">
<Icon name="new-session" size="small" class="text-icon-weak" />
</div>
<span class="text-14-regular text-text-strong min-w-0 flex-1 truncate">{label}</span>
</A>
)

return (
<div class="group/session relative w-full min-w-0 rounded-md cursor-default transition-colors pl-2 pr-3 hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[.active]:bg-surface-base-active">
<div class="group/session relative w-full min-w-0 rounded-xl cursor-default transition-colors pl-2 pr-3 hover:bg-surface-raised-base-hover [&:has(:focus-visible)]:bg-surface-raised-base-hover has-[.active]:bg-surface-raised-base-hover">
<Show
when={!tooltip()}
fallback={
Expand All @@ -320,9 +320,9 @@ export const NewSessionItem = (props: {
export const SessionSkeleton = (props: { count?: number }): JSX.Element => {
const items = Array.from({ length: props.count ?? 4 }, (_, index) => index)
return (
<div class="flex flex-col gap-1">
<div class="flex flex-col gap-0.5">
<For each={items}>
{() => <div class="h-8 w-full rounded-md bg-surface-raised-base opacity-60 animate-pulse" />}
{() => <div class="h-8 w-full rounded-xl bg-surface-raised-base opacity-60 animate-pulse" />}
Comment thread
Astro-Han marked this conversation as resolved.
</For>
</div>
)
Expand Down
Loading