github/dbx
4
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-11-15 06:51:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(sidebar): improve pinned item drag ordering

Browse Source
This commit is contained in:
zhangsan authored and GitHub committed 2026-07-27 14:41:04 +08:00
1 parent 4c57520a12
commit d5e0cde7e2
7 files changed
+476 -32
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/lib/__tests__/sidebar/sidebarTreeItemLayout.spec.ts
Vendored
+8 -1
View File
@@ -1,5 +1,5 @@
import { describe, expect, it } from "vitest";
import { alignedSidebarCommentLabelWidths, canTreeNodeShowExpander, sidebarTreeNaturalContentWidth, trailingCommentAvailableWidth, treeLabelWidthClass, usesFullWidthTreeLabel } from "@/lib/sidebar/sidebarTreeItemLayout";
import { alignedCommentLeadingWidth, alignedSidebarCommentLabelWidths, canTreeNodeShowExpander, sidebarTreeNaturalContentWidth, trailingCommentAvailableWidth, treeLabelWidthClass, usesFullWidthTreeLabel } from "@/lib/sidebar/sidebarTreeItemLayout";
describe("sidebar tree item layout", () => {
it("keeps a table row constrained when it displays a comment", () => {
@@ -11,6 +11,13 @@ describe("sidebar tree item layout", () => {
expect(treeLabelWidthClass({ fullWidth: false, hasTrailingComment: true })).toBe("min-w-0 flex-1 truncate");
});
it("keeps a pinned action next to the name while preserving the aligned comment column", () => {
expect(treeLabelWidthClass({ fullWidth: false, hasTrailingComment: true, hasInlineAction: true })).toBe("min-w-0 shrink truncate");
expect(alignedCommentLeadingWidth(100, true)).toBe(124);
expect(alignedCommentLeadingWidth(100, false)).toBe(100);
expect(alignedCommentLeadingWidth(undefined, true)).toBeUndefined();
});
it("renders etcd Keys and Dashboard as aligned leaf actions", () => {
expect(canTreeNodeShowExpander({ type: "etcd-root", childCount: 0 })).toBe(false);
expect(canTreeNodeShowExpander({ type: "etcd-dashboard", childCount: 0 })).toBe(false);
apps/desktop/src/lib/sidebar/sidebarTreeItemLayout.ts
+8 -1
View File
@@ -60,11 +60,17 @@ export function treeItemPaddingLeft(depth: number): string {
}
export const trailingCommentGapPx = 8;
export const sidebarPinnedActionSlotWidthPx = 24;
export function trailingCommentAvailableWidth(containerWidth: number, leadingWidth: number): number {
return Math.max(0, Math.floor(containerWidth - leadingWidth - trailingCommentGapPx));
}
export function alignedCommentLeadingWidth(labelWidth: number | undefined, reservePinnedAction: boolean): number | undefined {
if (labelWidth === undefined) return undefined;
return labelWidth + (reservePinnedAction ? sidebarPinnedActionSlotWidthPx : 0);
}
export interface SidebarCommentAlignmentItem {
id: string;
depth: number;
@@ -132,8 +138,9 @@ export function usesFullWidthTreeLabel(type: TreeNodeType, allowHorizontalScroll
return allowHorizontalScroll && !hasTrailingComment && fullWidthLabelTypes.has(type);
}
export function treeLabelWidthClass({ fullWidth, hasTrailingComment }: { fullWidth: boolean; hasTrailingComment: boolean }): string {
export function treeLabelWidthClass({ fullWidth, hasTrailingComment, hasInlineAction = false }: { fullWidth: boolean; hasTrailingComment: boolean; hasInlineAction?: boolean }): string {
if (fullWidth) return "shrink-0 whitespace-nowrap";
if (hasTrailingComment && hasInlineAction) return "min-w-0 shrink truncate";
return hasTrailingComment ? "min-w-0 flex-1 truncate" : "min-w-0 truncate";
}