Skip to content

Make chat resize smoother #5534

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
gettinToasty merged 2 commits into from
Aug 22, 2025
Merged

Make chat resize smoother #5534

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
7c6033b
Make chat resize smoother
gettinToasty Aug 22, 2025
906137e
Fix left dock behavior and styling
gettinToasty Aug 22, 2025
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
2 changes: 1 addition & 1 deletion app/components-react/root/ResizeBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export default function ResizeBar(p: React.PropsWithChildren<ResizeBarProps>) {
resizableProps = {
height: Infinity,
width: p.value,
resizeHandles: ['w'],
resizeHandles: [p.position === 'left' ? 'e' : 'w'],
minConstraints: [p.min, Infinity],
maxConstraints: [p.max, Infinity],
axis: 'x',
Expand Down
19 changes: 13 additions & 6 deletions app/components-react/windows/Main.m.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,11 +107,10 @@
width: 100%;
min-width: 0;
border-left: 1px solid var(--border);
}

.live-dock-container.left {
border-left: none;
border-right: 1px solid var(--border);
&.left {
border-right: 1px solid var(--border);
}
}

.live-dock-collapsed {
Expand All @@ -122,9 +121,12 @@
border-left: 1px solid var(--border);
box-sizing: border-box;

.live-dock-collapsed.left {
border-left: none;
&.left {
border-right: 1px solid var(--border);

.live-dock-chevron.left {
left: 50%;
}
}

.live-dock-chevron {
Expand All @@ -150,6 +152,11 @@
transform: translate(-50%, -50%) rotate(-90deg);
}
}

&.left {
left: auto;
right: 0;
}
}

/deep/ .creator-sites-container .s-loader {
Expand Down
53 changes: 31 additions & 22 deletions app/components-react/windows/Main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,14 @@ export default function Main() {

const page = useRealmObject(Services.NavigationService.state).currentPage;
const params = useRealmObject(Services.NavigationService.state).params;
const dockWidth = useRealmObject(Services.CustomizationService.state).livedockSize;
const realmDockWidth = useRealmObject(Services.CustomizationService.state).livedockSize;
const isDockCollapsed = useRealmObject(Services.CustomizationService.state).livedockCollapsed;
const realmTheme = useRealmObject(Services.CustomizationService.state).theme;
const leftDock = useRealmObject(Services.CustomizationService.state).leftDock;

// Provides smooth chat resizing instead of writing to realm every tick while resizing
const [dockWidth, setDockWidth] = useState(realmDockWidth);

const {
errorAlert,
applicationLoading,
Expand Down Expand Up @@ -157,15 +160,11 @@ export default function Main() {
setMinEditorWidth(width);
});

const setLiveDockWidth = useCallback((width: number) => {
CustomizationService.actions.setSettings({ livedockSize: width });
}, []);

const updateLiveDockWidth = useCallback(() => {
let constrainedWidth = Math.max(minDockWidth, dockWidth);
constrainedWidth = Math.min(maxDockWidth, dockWidth);

if (dockWidth !== constrainedWidth) setLiveDockWidth(dockWidth);
if (dockWidth !== constrainedWidth) setDockWidth(dockWidth);
}, []);

const setCollapsed = useCallback((livedockCollapsed: boolean) => {
Expand Down Expand Up @@ -216,6 +215,8 @@ export default function Main() {
return () => {
window.removeEventListener('resize', windowSizeHandler);
modalChangedSub.unsubscribe();
// Sync persisted live dock width in the db
CustomizationService.actions.setSettings({ livedockSize: dockWidth });
};
}, []);

Expand All @@ -238,7 +239,7 @@ export default function Main() {
// migrate from old percentage value to the pixel value
const appRect = mainWindowEl.current.getBoundingClientRect();
const defaultWidth = appRect.width * 0.28;
setLiveDockWidth(defaultWidth);
setDockWidth(defaultWidth);
}
}, [uiReady]);

Expand Down Expand Up @@ -276,10 +277,11 @@ export default function Main() {
)}
{renderDock && leftDock && (
<LiveDockContainer
maxDockWidth={maxDockWidth}
minDockWidth={minDockWidth}
max={maxDockWidth}
min={minDockWidth}
width={dockWidth}
setCollapsed={setCollapsed}
setLiveDockWidth={setLiveDockWidth}
setLiveDockWidth={setDockWidth}
onLeft
/>
)}
Expand All @@ -303,10 +305,11 @@ export default function Main() {
</div>
{renderDock && !leftDock && (
<LiveDockContainer
maxDockWidth={maxDockWidth}
minDockWidth={minDockWidth}
max={maxDockWidth}
min={minDockWidth}
width={dockWidth}
setCollapsed={setCollapsed}
setLiveDockWidth={setLiveDockWidth}
setLiveDockWidth={setDockWidth}
/>
)}
</div>
Expand All @@ -323,20 +326,23 @@ export default function Main() {
}

interface ILiveDockContainerProps {
maxDockWidth: number;
minDockWidth: number;
max: number;
min: number;
width: number;
setCollapsed: (val: boolean) => void;
setLiveDockWidth: (val: number) => void;
onLeft?: boolean;
}

function LiveDockContainer(p: ILiveDockContainerProps) {
const dockWidth = useRealmObject(Services.CustomizationService.state).livedockSize;
const isDockCollapsed = useRealmObject(Services.CustomizationService.state).livedockCollapsed;

function Chevron() {
return (
<div className={styles.liveDockChevron} onClick={() => p.setCollapsed(!isDockCollapsed)}>
<div
className={cx(styles.liveDockChevron, p.onLeft && styles.left)}
onClick={() => p.setCollapsed(!isDockCollapsed)}
>
<i
className={cx({
'icon-back': (!p.onLeft && isDockCollapsed) || (p.onLeft && !isDockCollapsed),
Expand All @@ -358,21 +364,24 @@ function LiveDockContainer(p: ILiveDockContainerProps) {
return (
<Animation transitionName={transitionName} transitionAppear>
{isDockCollapsed && (
<div className={styles.liveDockCollapsed} key="collapsed">
<div className={cx(styles.liveDockCollapsed, p.onLeft && styles.left)} key="collapsed">
<Chevron />
</div>
)}
{!isDockCollapsed && (
<ResizeBar
position={p.onLeft ? 'left' : 'right'}
onInput={(val: number) => p.setLiveDockWidth(val)}
max={p.maxDockWidth}
min={p.minDockWidth}
value={dockWidth}
max={p.max}
min={p.min}
value={p.width}
transformScale={1}
key="expanded"
>
<div className={styles.liveDockContainer} style={{ width: `${dockWidth}px` }}>
<div
className={cx(styles.liveDockContainer, p.onLeft && styles.left)}
style={{ width: `${p.width}px` }}
>
<LiveDock />
<Chevron />
</div>
Expand Down
Loading