Moku/Work
1
0
Fork 0
Code Issues Pull Requests Activity

Feat: persist project tree hierarchy

Browse Source
This commit is contained in:
MangoPig
2026-06-24 01:28:50 +01:00
parent 5b9e14b442
commit 5758074f6f
9 changed files with 489 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.module.scss
+65 -14
View File
@@ -187,30 +187,53 @@
width: 100%;
min-width: 0;
display: grid;
position: relative;
isolation: isolate;
grid-template-columns: auto auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-2);
min-height: calc(var(--control-size-lg) - var(--space-2));
padding: var(--space-2) var(--space-3);
padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
border: 1px solid transparent;
border-radius: var(--radius-lg);
border: 0;
border-radius: 0;
background: transparent;
color: var(--color-text-muted);
text-align: left;
transition:
background 160ms var(--easing-standard),
color 160ms var(--easing-standard),
border-color 160ms var(--easing-standard),
box-shadow 160ms var(--easing-standard),
transform 180ms var(--easing-standard);
&::after {
content: "";
position: absolute;
inset: 0;
border: 1px solid transparent;
border-radius: var(--radius-lg);
background: transparent;
transition:
background 160ms var(--easing-standard),
border-color 160ms var(--easing-standard),
box-shadow 160ms var(--easing-standard);
pointer-events: none;
z-index: 0;
}
> * {
position: relative;
z-index: 1;
}
}
.treeItem:hover,
.treeItem:focus-visible {
background: color-mix(in srgb, var(--color-surface-hover) 80%, var(--color-accent-soft) 20%);
color: var(--color-text);
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
&::after {
background: color-mix(in srgb, var(--color-surface-hover) 80%, var(--color-accent-soft) 20%);
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
}
}
.treeItemFolder {
@@ -224,18 +247,43 @@
}
.treeItemDropBefore {
box-shadow: inset 0 2px 0 color-mix(in srgb, var(--color-accent-strong) 78%, transparent);
&::before {
content: "";
position: absolute;
left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
right: var(--space-3);
top: calc((var(--space-1) * -0.5) - 1px);
height: 2px;
border-radius: 999px;
background: color-mix(in srgb, var(--color-accent-strong) 78%, transparent);
pointer-events: none;
z-index: 2;
}
}
.treeItemDropAfter {
box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--color-accent-strong) 78%, transparent);
&::before {
content: "";
position: absolute;
left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
right: var(--space-3);
bottom: calc((var(--space-1) * -0.5) - 1px);
height: 2px;
border-radius: 999px;
background: color-mix(in srgb, var(--color-accent-strong) 78%, transparent);
pointer-events: none;
z-index: 2;
}
}
.treeItemDropInside {
border-color: color-mix(in srgb, var(--color-accent-strong) 55%, transparent);
background: color-mix(in srgb, var(--color-accent-soft) 36%, var(--color-surface));
color: var(--color-text);
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
&::after {
border-color: color-mix(in srgb, var(--color-accent-strong) 55%, transparent);
background: color-mix(in srgb, var(--color-accent-soft) 36%, var(--color-surface));
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
}
}
.folderChevron {
@@ -248,10 +296,13 @@
}
.treeItemActive {
border-color: var(--color-border);
background: var(--color-surface);
color: var(--color-text);
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
&::after {
border-color: var(--color-border);
background: var(--color-surface);
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
}
}
.navItemActive {