(maka) branch main updated: fix(desktop): align project session titles with the project name (#3311)

[as...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

Astro-Han pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/maka.git


The following commit(s) were added to refs/heads/main by this push:
     new db0432e56 fix(desktop): align project session titles with the project name (#3311)
db0432e56 is described below

commit db0432e56b1c6f0792b2c522aa2076461990b116
Author: AstroHan <le...@outlook.com>
AuthorDate: Fri Aug 21 03:40:12 2026 +0800

    fix(desktop): align project session titles with the project name (#3311)
    
    * fix(desktop): align project session titles with the project name
    
    Astryx nests icon-less children by 24px so their text meets a parent
    title after a 16px icon + 8px gap. Session rows already spend 8px on
    StatusDot in that slot, so keep the remaining 8px nest instead of a
    full SideNav step.
    
    Generated-by: Maka
    
    * test(desktop): assert project session title alignment
    
    Keep the 8px nest. State it as a product choice against SideNav's fixed
    24px child inset, and check title x in the sidebar e2e instead of only
    the session button edge.
    
    Generated-by: Maka
---
 apps/desktop/e2e/sidebar-project-row.spec.ts           | 18 ++++++++++++++++--
 .../session-project-hierarchy-contract.test.ts         |  8 +++++---
 apps/desktop/src/renderer/styles/sidebar.css           | 18 ++++++++++--------
 packages/ui/src/session-history-list.tsx               |  2 +-
 packages/ui/stories/session-list-panel.stories.tsx     |  4 ++--
 5 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/apps/desktop/e2e/sidebar-project-row.spec.ts b/apps/desktop/e2e/sidebar-project-row.spec.ts
index 0bce21f94..ce26335db 100644
--- a/apps/desktop/e2e/sidebar-project-row.spec.ts
+++ b/apps/desktop/e2e/sidebar-project-row.spec.ts
@@ -36,13 +36,27 @@ test('project navigation and actions follow their visual keyboard order', async
 
   await expect(navigation).toBeVisible();
   await expect(firstSessionControl).toBeVisible();
-  const [projectNavigationBox, firstSessionBox] = await Promise.all([
+  const projectTitle = navigation.getByText(LONG_SIDEBAR_PROJECT_NAME, { exact: true });
+  const sessionTitle = firstSessionControl.getByText('任务 00', { exact: true });
+  await expect(projectTitle).toBeVisible();
+  await expect(sessionTitle).toBeVisible();
+  const [projectNavigationBox, firstSessionBox, projectTitleBox, sessionTitleBox] = await Promise.all([
     navigation.boundingBox(),
     firstSessionControl.boundingBox(),
+    projectTitle.boundingBox(),
+    sessionTitle.boundingBox(),
   ]);
   expect(projectNavigationBox).not.toBeNull();
   expect(firstSessionBox).not.toBeNull();
-  expect(firstSessionBox!.x - projectNavigationBox!.x).toBeGreaterThanOrEqual(20);
+  expect(projectTitleBox).not.toBeNull();
+  expect(sessionTitleBox).not.toBeNull();
+  // Hierarchy is the session button sitting inside the project button. Title
+  // alignment is the product contract: leading content widths differ, so the
+  // inset is not the same as the title column.
+  const sessionInset = firstSessionBox!.x - projectNavigationBox!.x;
+  expect(sessionInset).toBeGreaterThanOrEqual(6);
+  expect(sessionInset).toBeLessThan(16);
+  expect(Math.abs(projectTitleBox!.x - sessionTitleBox!.x)).toBeLessThanOrEqual(2);
 
   await expect(projectRow.locator('button button')).toHaveCount(0);
   await expect(navigation).toHaveAttribute('aria-expanded', 'true');
diff --git a/apps/desktop/src/main/__tests__/session-project-hierarchy-contract.test.ts b/apps/desktop/src/main/__tests__/session-project-hierarchy-contract.test.ts
index 83891075c..e183b0dd7 100644
--- a/apps/desktop/src/main/__tests__/session-project-hierarchy-contract.test.ts
+++ b/apps/desktop/src/main/__tests__/session-project-hierarchy-contract.test.ts
@@ -12,16 +12,18 @@ if (!sidebarCssUrl) throw new Error('Could not locate renderer/styles/sidebar.cs
 const sidebarCss = readFileSync(sidebarCssUrl, 'utf8');
 
 describe('project-grouped session hierarchy', () => {
-  it('visually indents session rows beneath their project', () => {
+  it('aligns session titles with the project name', () => {
     const projectChildrenRule = sidebarCss.match(
       /\.maka-project-row\s*>\s*div\s*>\s*\[role=["']group["']\]\s*>\s*div\s*\{([^}]*)\}/,
     );
 
     assert.ok(projectChildrenRule, 'project children must have an explicit hierarchy rule');
+    // Product contract: 8px nest so session titles share the project title's x.
+    // SideNav's default spacing-6 is a fixed child inset, not that alignment.
     assert.match(
       projectChildrenRule[1] ?? '',
-      /padding-inline-start:\s*var\(--spacing-6\)\s*!important;/,
-      'project sessions must keep one SideNav nesting step (24px)',
+      /padding-inline-start:\s*var\(--spacing-2\)\s*!important;/,
+      'project sessions must keep an 8px hierarchical nest',
     );
   });
 });
diff --git a/apps/desktop/src/renderer/styles/sidebar.css b/apps/desktop/src/renderer/styles/sidebar.css
index c498eaf79..83a8d94a8 100644
--- a/apps/desktop/src/renderer/styles/sidebar.css
+++ b/apps/desktop/src/renderer/styles/sidebar.css
@@ -226,18 +226,20 @@
 }
 
 /*
- * Project groups are a real parent-child hierarchy. Keep Astryx's standard
- * SideNav nesting step (spacing-6 / 24px) so session rows visibly belong to
- * the project above them instead of sharing the project's left edge. Pin the
- * value here because StyleX owns the unlayered default and this relationship
- * is part of the task rail's visual contract. Child combinator only — do not
- * use a descendant selector that would indent deeper nest levels twice if any
- * appear later.
+ * Project groups are a parent-child hierarchy. SideNav always nests children
+ * by spacing-6; that is a fixed inset, not a title-alignment rule. Project
+ * rows lead with a 16px folder, session rows with an 8px StatusDot, so the
+ * default 24px inset puts session titles 16px right of the project name.
+ * Product intent: keep an 8px hierarchical inset (spacing-2) so titles share
+ * one x. The whole session button, including hover/selected fill, moves with
+ * that inset; the right edge stays on the rail. Pin the value because StyleX
+ * owns the unlayered default. Child combinator only — do not use a descendant
+ * selector that would indent deeper nest levels twice if any appear later.
  * DOM: .maka-project-row > SideNavItem root > [role=group] > childrenInner
  */
 .maka-project-row > div > [role="group"] > div {
   /* !important: StyleX childrenInner paddingInlineStart is unlayered. */
-  padding-inline-start: var(--spacing-6) !important;
+  padding-inline-start: var(--spacing-2) !important;
 }
 
 .maka-session-row-end,
diff --git a/packages/ui/src/session-history-list.tsx b/packages/ui/src/session-history-list.tsx
index 0c5a67fa8..eb191b5a8 100644
--- a/packages/ui/src/session-history-list.tsx
+++ b/packages/ui/src/session-history-list.tsx
@@ -346,7 +346,7 @@ function ProjectNavRow(props: {
           ) : undefined
         }
       >
-        {/* sidebar.css preserves one SideNav nesting step for project hierarchy. */}
+        {/* sidebar.css keeps an 8px nest so session titles share the project x. */}
         {hasSessions ? (
           <VStack gap={0.5}>{props.sessions.map((session) => props.renderSession(session))}</VStack>
         ) : undefined}
diff --git a/packages/ui/stories/session-list-panel.stories.tsx b/packages/ui/stories/session-list-panel.stories.tsx
index edafa2174..01bba7a15 100644
--- a/packages/ui/stories/session-list-panel.stories.tsx
+++ b/packages/ui/stories/session-list-panel.stories.tsx
@@ -343,8 +343,8 @@ export const PinnedAndRecentSections: Story = {
   ),
 };
 
-// Real path: group-by-project — collapsible project rows, sessions flush under
-// the project (zero nest padding), worktree mark + count badge.
+// Real path: group-by-project — collapsible project rows, sessions nested 8px
+// under the project so titles share one x, worktree mark + count badge.
 export const ProjectGroups: Story = {
   render: () => {
     const maka = makeProject({


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@maka.apache.org
For additional commands, e-mail: commits-help@maka.apache.org