ui-fixes-133 (#10151)

* feat(ui/codegen): replace settings icon with mixer and log todos in UI

* refactor(right-sidebar): simplify sidebar rendering and compute todos once per render

* fix(drawer): prevent header from shrinking causing layout collapse

Author: PavelLaptev

apps/desktop/src/components/Drawer.svelte

@@ -199,6 +199,7 @@
 	.drawer-header {
 		display: flex;
 		position: relative;
+		flex-shrink: 0;
 		align-items: center;
 		justify-content: space-between;
 		height: 42px;

apps/desktop/src/components/codegen/CodegenPage.svelte

@@ -394,7 +394,7 @@
 				reversedDirection
 				onclick={() => createBranchModal?.show()}>Add new</Button
 			>
-			<Button kind="ghost" icon="settings" size="tag" onclick={() => settingsModal?.show()} />
+			<Button kind="ghost" icon="mixer" size="tag" onclick={() => settingsModal?.show()} />
 		{/snippet}
 
 		{#snippet content()}
@@ -534,7 +534,7 @@
 						{/snippet}
 					</CodegenChatLayout>
 
-					{@render rightSidebar(events, formattedMessages.length > 0)}
+					{@render rightSidebar(events)}
 				{/snippet}
 			</ReduxResult>
 		{:else}
@@ -551,9 +551,9 @@
 	</div>
 {/snippet}
 
-{#snippet rightSidebar(events: ClaudeMessage[], hasMessages: boolean)}
+{#snippet rightSidebar(events: ClaudeMessage[])}
 	<div class="right-sidebar" bind:this={rightSidebarRef}>
-		{#if !hasMessages}
+		{#if !branchChanges || !selectedBranch || (branchChanges.current?.data && branchChanges.current.data.changes.length === 0 && getTodos(events).length === 0)}
 			<div class="right-sidebar__placeholder">
 				<EmptyStatePlaceholder
 					image={filesAndChecksSvg}
@@ -567,12 +567,12 @@
 				</EmptyStatePlaceholder>
 			</div>
 		{:else}
+			{@const todos = getTodos(events)}
 			{#if branchChanges && selectedBranch}
 				<ReduxResult result={branchChanges.current} {projectId}>
 					{#snippet children({ changes }, { projectId })}
-						{@const todos = getTodos(events)}
 						<Drawer
-							bottomBorder
+							bottomBorder={todos.length > 0}
 							grow
 							defaultCollapsed={todos.length > 0}
 							notFoldable
@@ -608,7 +608,6 @@
 				</ReduxResult>
 			{/if}
 
-			{@const todos = getTodos(events)}
 			{#if todos.length > 0}
 				<Drawer defaultCollapsed={false} noshrink>
 					{#snippet header()}

packages/ui/src/lib/data/icons.json

@@ -242,5 +242,6 @@
 	"clear-small": "M8.75 4.9082H11L11.2041 4.91895C12.2126 5.02119 12.9998 5.87275 13 6.9082V10.3809C13 11.6046 12.7429 12.8152 12.2461 13.9336L11.9902 14.5107L10.6191 13.9014L10.876 13.3242C11.2874 12.3977 11.5 11.3946 11.5 10.3809V9.9082H10.1641V10.3809C10.1641 11.6046 9.90696 12.8152 9.41016 13.9336L9.1543 14.5107L7.7832 13.9014L8.04004 13.3242C8.4515 12.3977 8.66406 11.3946 8.66406 10.3809V9.9082H7.32812V10.3809C7.32812 11.6046 7.07102 12.8152 6.57422 13.9336L6.31836 14.5107L4.94727 13.9014L5.2041 13.3242C5.61557 12.3977 5.82812 11.3946 5.82812 10.3809V9.9082H4.49219V10.3809C4.49219 11.6046 4.23509 12.8152 3.73828 13.9336L3.48242 14.5107L2.11133 13.9014L2.36816 13.3242C2.77963 12.3977 2.99219 11.3946 2.99219 10.3809V9.24121H3V6.9082C3.00022 5.87275 3.78736 5.02119 4.7959 4.91895L5 4.9082H7.25V1H8.75V4.9082ZM5 6.4082C4.724 6.4082 4.50023 6.63226 4.5 6.9082V8.4082H11.5V6.9082C11.4998 6.66668 11.3284 6.46447 11.1006 6.41797L11 6.4082H5Z",
 	"cut": "M3.99972 2.50041C2.61901 2.50042 1.49998 3.61944 1.49998 5.00014C1.50019 6.38067 2.61914 7.49987 3.99972 7.49988C4.58536 7.49988 5.12247 7.29647 5.54858 6.95919L7.3343 8.24911L5.54858 9.53902C5.12257 9.20204 4.58507 8.99972 3.99972 8.99972C2.61911 8.99972 1.50016 10.1189 1.49998 11.4995C1.49998 12.8802 2.619 13.9992 3.99972 13.9992C5.38043 13.9992 6.49945 12.8802 6.49945 11.4995C6.49942 11.249 6.46235 11.0073 6.3938 10.7792L8.61524 9.17373L14.0608 13.107L14.9392 11.8917L9.89618 8.24911L14.9392 4.60792L14.0608 3.39258L8.61593 7.32379L6.3938 5.71899C6.46212 5.49126 6.49941 5.25011 6.49945 5.00014C6.49945 3.61943 5.38043 2.50041 3.99972 2.50041ZM2.99982 11.4995C3 10.9473 3.44754 10.4996 3.99972 10.4996C4.55189 10.4996 4.99943 10.9473 4.99961 11.4995C4.99961 12.0517 4.552 12.4993 3.99972 12.4993C3.44743 12.4993 2.99982 12.0517 2.99982 11.4995ZM2.99982 5.00014C2.99982 4.44786 3.44744 4.00026 3.99972 4.00025C4.552 4.00025 4.99961 4.44786 4.99961 5.00014C4.9994 5.55225 4.55187 6.00004 3.99972 6.00004C3.44757 6.00003 3.00003 5.55225 2.99982 5.00014Z",
 	"move-up": "M12.45 7.6163L8.73029 3.89658L8.73029 10.086C8.73037 11.3286 9.7377 12.336 10.9803 12.336L12.9608 12.336L12.9608 13.836L10.9803 13.836C8.90927 13.836 7.23037 12.157 7.23029 10.086L7.23029 3.89658L3.51056 7.6163L2.45001 6.55576L6.74298 2.26279C7.42638 1.57947 8.53419 1.57947 9.21759 2.26279L13.5106 6.55576L12.45 7.6163Z",
-	"move-down": "M3.51056 7.9696L7.23029 11.6893L7.23029 5.49988C7.2302 4.25731 6.22288 3.24988 4.98029 3.24988L2.99982 3.24988L2.99982 1.74988L4.98029 1.74988C7.0513 1.74988 8.7302 3.42888 8.73029 5.49988L8.73029 11.6893L12.45 7.9696L13.5106 9.03015L9.21759 13.3231C8.53419 14.0064 7.42638 14.0064 6.74298 13.3231L2.45001 9.03015L3.51056 7.9696Z"
+	"move-down": "M3.51056 7.9696L7.23029 11.6893L7.23029 5.49988C7.2302 4.25731 6.22288 3.24988 4.98029 3.24988L2.99982 3.24988L2.99982 1.74988L4.98029 1.74988C7.0513 1.74988 8.7302 3.42888 8.73029 5.49988L8.73029 11.6893L12.45 7.9696L13.5106 9.03015L9.21759 13.3231C8.53419 14.0064 7.42638 14.0064 6.74298 13.3231L2.45001 9.03015L3.51056 7.9696Z",
+	"mixer": "M5.5 14.5H4V8H5.5V14.5ZM12 14.5H10.5V11.5H7.75V9.5H14.75V11.5H12V14.5ZM12 8.5H10.5V1.5H12V8.5ZM5.5 5H8.25V7H1.25V5H4V1.5H5.5V5Z"
 }