Skip to content

feat(web): redesign desktop UI and interactions #1857

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
bobleer merged 2 commits into from
Jul 29, 2026
Merged

feat(web): redesign desktop UI and interactions #1857

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
354a229
feat(web): redesign desktop UI and interactions
bobleer Jul 29, 2026
a524b94
fix(web): preserve FlowChat welcome heading scale
bobleer Jul 29, 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
32 changes: 27 additions & 5 deletions src/web-ui/src/app/components/AboutDialog/AboutDialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -374,7 +374,12 @@
cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: all 0.2s ease;
transition:
transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
background-color 150ms ease,
border-color 150ms ease,
color 150ms ease,
box-shadow 150ms ease;
display: flex;
align-items: center;

Expand Down Expand Up @@ -409,7 +414,12 @@
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.25s ease;
transition:
transform 180ms cubic-bezier(0.23, 1, 0.32, 1),
background-color 180ms ease,
border-color 180ms ease,
color 180ms ease,
box-shadow 180ms ease;

&:hover {
background: var(--element-bg-subtle);
Expand All @@ -430,7 +440,11 @@

svg {
color: var(--color-text-muted);
transition: all 0.2s ease;
transition:
transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
background-color 150ms ease,
border-color 150ms ease,
color 150ms ease;
}
}

Expand Down Expand Up @@ -482,7 +496,11 @@
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
transition: all 0.2s ease;
transition:
transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
background-color 150ms ease,
border-color 150ms ease,
color 150ms ease;
min-width: 0;

&:hover {
Expand All @@ -508,7 +526,11 @@
justify-content: center;
background: var(--element-bg-subtle);
border-radius: 6px;
transition: all 0.2s ease;
transition:
transform 150ms cubic-bezier(0.23, 1, 0.32, 1),
background-color 150ms ease,
border-color 150ms ease,
color 150ms ease;

svg {
width: 12px;
Expand Down
64 changes: 39 additions & 25 deletions src/web-ui/src/app/components/GalleryLayout/GalleryLayout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
@use '../../../component-library/styles/tokens' as *;
@use '../../../component-library/styles/btn-primary-tokens.scss' as btn-primary;
@use '../../styles/surface-stagger';

$gutter: clamp(40px, 6vw, 80px);
$content-max: 1480px;
$gutter: clamp(28px, 4vw, 64px);
$content-max: 1360px;

.gallery-layout {
display: flex;
Expand Down Expand Up @@ -45,20 +44,16 @@ $content-max: 1480px;
align-items: flex-start;
gap: $size-gap-4;
width: min(100%, $content-max);
padding: $size-gap-8 $gutter $size-gap-6;
padding: 28px $gutter $size-gap-5;
margin: 0 auto;
box-sizing: border-box;
position: sticky;
top: 0;
z-index: 10;
background: linear-gradient(
to bottom,
var(--color-bg-scene) 0%,
var(--color-bg-scene) 72%,
transparent 100%
);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: color-mix(in srgb, var(--color-bg-scene) 94%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 76%, transparent);
backdrop-filter: blur(16px) saturate(1.08);
-webkit-backdrop-filter: blur(16px) saturate(1.08);

&__identity {
flex: 1;
Expand All @@ -67,7 +62,7 @@ $content-max: 1480px;

&__title {
margin: 0 0 $size-gap-1;
font-size: clamp(18px, 2vw, 22px);
font-size: clamp(20px, 2vw, 24px);
font-weight: $font-weight-semibold;
color: var(--color-text-primary);
letter-spacing: -0.02em;
Expand Down Expand Up @@ -103,17 +98,17 @@ $content-max: 1480px;
.gallery-zones {
display: flex;
flex-direction: column;
gap: $size-gap-8;
gap: 28px;
width: min(100%, $content-max);
padding: $size-gap-6 $gutter $size-gap-8;
padding: $size-gap-5 $gutter $size-gap-8;
margin: 0 auto;
box-sizing: border-box;
}

.gallery-zone {
display: flex;
flex-direction: column;
gap: $size-gap-3;
gap: $size-gap-4;
scroll-margin-top: 152px;

&__header {
Expand Down Expand Up @@ -175,8 +170,7 @@ $content-max: 1480px;
border: 1px solid var(--border-subtle);
position: relative;
overflow: hidden;
animation: gallery-item-in 0.28s $easing-decelerate both;
@include surface-stagger.animation-delay(60ms);
animation: gallery-item-in 180ms cubic-bezier(0.23, 1, 0.32, 1) both;

&::after {
content: '';
Expand All @@ -189,18 +183,21 @@ $content-max: 1480px;
var(--skeleton-shimmer-peak) 50%,
var(--skeleton-shimmer-0) 100%
);
animation: gallery-shimmer 1.6s ease-in-out surface-stagger.delay(0.12s) infinite;
animation: gallery-shimmer 1.2s linear infinite;
}
}

.gallery-empty {
min-height: 180px;
min-height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: $size-gap-3;
padding: $size-gap-8 $size-gap-6;
border: 1px dashed var(--border-subtle);
border-radius: $size-radius-lg;
background: color-mix(in srgb, var(--element-bg-subtle) 72%, transparent);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-align: center;
Expand All @@ -217,7 +214,8 @@ $content-max: 1480px;
.gallery-anchor-btn,
.gallery-cat-chip {
transition:
background $motion-fast $easing-standard,
transform $motion-fast cubic-bezier(0.23, 1, 0.32, 1),
background-color $motion-fast $easing-standard,
color $motion-fast $easing-standard,
border-color $motion-fast $easing-standard;
}
Expand Down Expand Up @@ -248,6 +246,10 @@ $content-max: 1480px;
cursor: not-allowed;
}

&:active:not(:disabled) {
transform: scale(0.975);
}

&:focus-visible {
outline: 2px solid var(--color-accent-500);
outline-offset: -1px;
Expand Down Expand Up @@ -318,7 +320,7 @@ $content-max: 1480px;
gap: $size-gap-1;
height: 24px;
padding: 0 $size-gap-2;
border-radius: $size-radius-full;
border-radius: $size-radius-base;
background: transparent;
color: var(--color-text-muted);
font-size: var(--font-size-xs);
Expand All @@ -334,6 +336,10 @@ $content-max: 1480px;
outline: 2px solid var(--color-accent-500);
outline-offset: -1px;
}

&:active {
transform: scale(0.975);
}
}

.gallery-filter-chip,
Expand Down Expand Up @@ -368,7 +374,7 @@ $content-max: 1480px;
.gallery-filter-count {
height: 16px;
padding: 0 4px;
border-radius: $size-radius-full;
border-radius: $size-radius-sm;
background: var(--element-bg-medium);
color: var(--color-text-muted);
font-size: 10px;
Expand All @@ -378,7 +384,7 @@ $content-max: 1480px;
min-width: 24px;
height: 24px;
padding: 0 8px;
border-radius: $size-radius-full;
border-radius: $size-radius-base;
background: var(--element-bg-medium);
border: 1px solid var(--border-subtle);
font-size: var(--font-size-xs);
Expand All @@ -391,7 +397,7 @@ $content-max: 1480px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: $size-radius-full;
border-radius: $size-radius-sm;
background: color-mix(in srgb, var(--color-success) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--color-success) 28%, transparent);
color: var(--color-success);
Expand Down Expand Up @@ -492,3 +498,11 @@ $content-max: 1480px;
animation: none;
}
}

@media (prefers-reduced-transparency: reduce) {
.gallery-page-header {
background: var(--color-bg-scene);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
78 changes: 29 additions & 49 deletions src/web-ui/src/app/components/NavBar/NavBar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,99 +1,78 @@
/**
* NavBar styles — back/forward + drag region + window controls (32px).
* Compact navigation chrome. Buttons share one geometry and only animate the
* press response; panel and history changes themselves remain immediate.
*/

@use '../../../component-library/styles/tokens.scss' as *;

.bitfun-nav-bar {
display: flex;
align-items: center;
height: 40px;
height: 38px;
flex-shrink: 0;
padding: 0 $size-gap-2;
gap: $size-gap-1;
padding: 0 6px;
gap: 2px;
background: var(--color-bg-primary);
user-select: none;

&--collapsed {
justify-content: flex-start;
// Add tiny horizontal breathing room so edge buttons keep full corner rendering.
padding: 0 calc(#{$size-gap-2} + 1px);
padding-inline: 7px;
}

&--macos {
// Reserve left native titlebar area for traffic lights in overlay mode.
padding-left: calc(#{$size-gap-2} + 72px);
padding-left: 78px;
padding-right: 2px;

}

&--macos#{&}--collapsed {
padding-left: calc(#{$size-gap-2} + 1px);
padding-left: 7px;
padding-right: 2px;
}

// ── Back / Forward buttons ──────────────────────────────

&__btn {
&__btn,
&__panel-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
width: 28px;
height: 28px;
flex-shrink: 0;
padding: 0;
border: none;
border-radius: 4px;
border-radius: $size-radius-sm;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
flex-shrink: 0;
transition: color $motion-fast $easing-standard,
background $motion-fast $easing-standard;

&:hover:not(.is-inactive) {
color: var(--color-text-primary);
background: var(--element-bg-soft);
}
transition:
transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
color 120ms ease,
background 120ms ease;

&.is-inactive {
opacity: 0.3;
opacity: 0.32;
cursor: default;
}

&:active:not(.is-inactive) {
transform: scale(0.96);
background: var(--element-bg-medium);
}

&:focus-visible {
outline: 2px solid var(--color-accent-500);
outline-offset: -1px;
outline-offset: -2px;
}
}

&__panel-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 0;
border: none;
border-radius: 4px;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
transition: color $motion-fast $easing-standard,
background $motion-fast $easing-standard;

&:hover {
@media (hover: hover) and (pointer: fine) {
&__btn:hover:not(.is-inactive),
&__panel-toggle:hover {
color: var(--color-text-primary);
background: var(--element-bg-soft);
}

&:focus-visible {
outline: 2px solid var(--color-accent-500);
outline-offset: -1px;
}
}

// ── WindowControls container ────────────────────────────
// WindowControls renders its own wrapper; just align it here.
.window-controls {
flex-shrink: 0;
}
Expand All @@ -103,5 +82,6 @@
.bitfun-nav-bar__btn,
.bitfun-nav-bar__panel-toggle {
transition: none;
transform: none;
}
}
Loading