feat(ui): simplify Claude unavailable banner and add settings warning (#10275)

Author: PavelLaptev

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import loadErrorSvg from '$lib/assets/empty-state/load-error.svg?raw';
 	import { Icon, Button } from '@gitbutler/ui';
 
 	interface Props {
@@ -9,63 +8,46 @@
 	const { onSettingsBtnClick }: Props = $props();
 </script>
 
-<section class="not-available-banner__wrap">
+<div class="not-available-banner__wrapper">
 	<div class="not-available-banner">
-		<div class="not-available-banner__image">
-			{@html loadErrorSvg}
-		</div>
 		<div class="not-available-banner__content">
 			<h3 class="text-16 text-semibold">
 				<span class="not-available-banner__icon">
 					<Icon name="warning" />
 				</span> Claude code can't be found
 			</h3>
-			<p class="text-13 text-body clr-text-2 m-bottom-8">
+			<p class="text-13 text-body clr-text-2">
 				Connect Claude Code to keep going with this session.
-				<br />
-				This can be configured in the settings.
 			</p>
-			<Button kind="outline" style="neutral" icon="mixer" type="button" onclick={onSettingsBtnClick}
-				>Configure Claude Code…</Button
-			>
 		</div>
+		<Button kind="outline" style="neutral" icon="mixer" type="button" onclick={onSettingsBtnClick}
+			>Set up connection…</Button
+		>
 	</div>
-</section>
+</div>
 
 <style lang="postcss">
-	.not-available-banner__wrap {
+	.not-available-banner__wrapper {
 		display: flex;
-		position: relative;
-		padding: 12px;
-		padding-top: 0;
-
-		&::before {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			height: calc(100% + 60px);
-			background: linear-gradient(0deg, var(--clr-bg-1-muted) 70%, transparent 100%);
-			content: '';
-			pointer-events: none;
-		}
+		z-index: var(--z-ground);
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		justify-content: center;
+		width: 100%;
+		padding: 16px;
 	}
-
 	.not-available-banner {
 		display: flex;
-		z-index: var(--z-ground);
-		align-items: center;
-		width: 100%;
-		padding: 28px;
+		bottom: 16px;
+		width: fit-content;
+		padding: 16px;
 		overflow: hidden;
 		gap: 28px;
 		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-ml);
 		background-color: var(--clr-bg-1);
-	}
-
-	.not-available-banner__image {
-		flex-shrink: 0;
+		box-shadow: var(--fx-shadow-l);
 	}
 
 	.not-available-banner__content {
@@ -82,22 +64,10 @@
 		color: var(--clr-theme-warn-element);
 	}
 
-	@container chat (min-width: 800px) {
-		.not-available-banner__wrap {
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			justify-content: center;
-			width: 100%;
-
-			&::before {
-				display: none;
-			}
-		}
-
+	@container chat (max-width: 600px) {
 		.not-available-banner {
-			width: auto;
-			max-width: 560px;
+			flex-direction: column;
+			gap: 16px;
 		}
 	}
 </style>

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

@@ -363,15 +363,15 @@
 	<ReduxResult result={claudeAvailable.current} {projectId}>
 		{#snippet children(claudeAvailable, { projectId })}
 			{#if claudeAvailable.status === 'available' || hasExistingSessions}
-				{@render main({ projectId })}
+				{@render main({ projectId, available: claudeAvailable.status === 'available' })}
 			{:else}
 				{@render claudeNotAvailable()}
 			{/if}
 		{/snippet}
 	</ReduxResult>
 </div>
 
-{#snippet main({ projectId }: { projectId: string })}
+{#snippet main({ projectId, available }: { projectId: string; available?: boolean })}
 	<CodegenSidebar>
 		{#snippet actions()}
 			<Button
@@ -381,7 +381,23 @@
 				reversedDirection
 				onclick={() => createBranchModal?.show()}>Add new</Button
 			>
-			<Button kind="outline" icon="mixer" size="tag" onclick={() => settingsModal?.show()} />
+			<div class="flex relative">
+				{#if !available}
+					<svg
+						viewBox="0 0 10 10"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+						class="settings-warning-icon"
+					>
+						<path
+							d="M3.70898 1.66797C4.28964 0.685942 5.71035 0.685941 6.29102 1.66797L9.28613 6.7373C9.87685 7.7372 9.15651 8.99999 7.99512 9H2.00488C0.843494 8.99999 0.123153 7.7372 0.713867 6.7373L3.70898 1.66797Z"
+							fill="#E89910"
+						/>
+					</svg>
+				{/if}
+
+				<Button kind="outline" icon="mixer" size="tag" onclick={() => settingsModal?.show()} />
+			</div>
 		{/snippet}
 
 		{#snippet content()}
@@ -1026,4 +1042,13 @@
 		padding: 0 16px;
 		gap: 16px;
 	}
+
+	.settings-warning-icon {
+		z-index: 1;
+		position: absolute;
+		top: -2px;
+		right: -3px;
+		width: 9px;
+		height: 9px;
+	}
 </style>