settings-to-modal (#10139)

* feat(settings): settings modals via UI state hooks

* feat(ui): simplify project settings and tweak UI copy and overlays

* refactor(routes): remove unused settings routes and to simplify routing

Author: PavelLaptev

apps/desktop/src/components/AccountLink.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { newSettingsPath } from '$lib/routes/routes.svelte';
+	import { useSettingsModal } from '$lib/settings/settingsModal.svelte';
 	import { USER } from '$lib/user/user';
 	import { inject } from '@gitbutler/core/context';
 	import { Icon } from '@gitbutler/ui';
@@ -13,13 +12,14 @@
 	const { pop = false, isNavCollapsed = false }: Props = $props();
 
 	const user = inject(USER);
+	const { openGeneralSettings } = useSettingsModal();
 </script>
 
 <button
 	type="button"
 	class="btn"
 	class:pop
-	onclick={async () => goto(newSettingsPath())}
+	onclick={async () => openGeneralSettings()}
 	class:collapsed={isNavCollapsed}
 >
 	{#if !isNavCollapsed}

apps/desktop/src/components/AiCredentialCheck.svelte

@@ -231,13 +231,12 @@
 								</span>
 							{/if}
 						{:else}
-							<div class="text-12 text-body success-text">
-								<h4 class="text-bold">Response:</h4>
+							<div class="text-12 text-body ai-response">
 								<pre class:streaming={isStreaming}>{isStreaming
 										? streamingResult
 											? streamingResult.trim()
 											: 'Loading...'
-										: result?.trim()}
+										: `Response:\n\n${result?.trim()}`}
 								</pre>
 							</div>
 						{/if}
@@ -304,16 +303,23 @@
 		display: flex;
 		flex-direction: column;
 		margin-top: 4px;
+		overflow-x: auto;
 		gap: 4px;
 	}
 
-	.success-text {
+	.ai-response {
 		display: flex;
 		flex-direction: column;
-		padding: 14px;
 		gap: 10px;
 		border-radius: var(--radius-m);
 		background-color: var(--clr-bg-1);
+
+		pre {
+			max-width: 100%;
+			padding: 14px;
+			overflow-x: auto;
+			white-space: pre;
+		}
 	}
 
 	/* DEBUG SECTION */

apps/desktop/src/components/AnalyticsSettings.svelte

@@ -12,13 +12,13 @@
 <div class="analytics-settings__content">
 	<p class="text-13 text-body analytics-settings__text">
 		GitButler uses telemetry strictly to help us improve the client. We do not collect any personal
-		information, unless explicitly allowed below (<Link
+		information, unless explicitly allowed below. <Link
 			target="_blank"
 			rel="noreferrer"
 			href="https://gitbutler.com/privacy"
 		>
-			privacy policy
-		</Link>).
+			Privacy policy
+		</Link>
 	</p>
 	<p class="text-13 text-body analytics-settings__text">
 		We kindly ask you to consider keeping these settings enabled as it helps us catch issues more

apps/desktop/src/components/AuthorizationBanner.svelte

@@ -9,7 +9,7 @@
 
 	const {
 		title: titleLabel = 'Authorization Required',
-		message = 'You need to authorize GitButler to access this service.'
+		message = 'Authorize GitButler to use this service'
 	}: Props = $props();
 </script>
 

apps/desktop/src/components/ChromeSidebar.svelte

@@ -8,16 +8,14 @@
 		ircPath,
 		isBranchesPath,
 		isIrcPath,
-		isNewProjectSettingsPath,
 		isWorkspacePath,
 		historyPath,
 		isHistoryPath,
-		newProjectSettingsPath,
-		newSettingsPath,
 		workspacePath,
 		isCodegenPath,
 		codegenPath
 	} from '$lib/routes/routes.svelte';
+	import { useSettingsModal } from '$lib/settings/settingsModal.svelte';
 	import { SETTINGS } from '$lib/settings/userSettings';
 	import { USER } from '$lib/user/user';
 	import { USER_SERVICE } from '$lib/user/userService';
@@ -44,6 +42,7 @@
 
 	const userService = inject(USER_SERVICE);
 	const userSettings = inject(SETTINGS);
+	const { openGeneralSettings, openProjectSettings } = useSettingsModal();
 </script>
 
 <div class="sidebar">
@@ -271,20 +270,13 @@
 	<div class="bottom">
 		<div class="bottom__primary-actions">
 			<div>
-				{#if isNewProjectSettingsPath()}
-					<div class="active-page-indicator" in:slide={{ axis: 'x', duration: 150 }}></div>
-				{/if}
 				<Button
 					kind="outline"
 					onclick={() => {
-						if (isNewProjectSettingsPath()) {
-							goto(workspacePath(projectId));
-						} else {
-							goto(newProjectSettingsPath(projectId));
-						}
+						openProjectSettings(projectId);
 					}}
 					width={34}
-					class={['btn-square', isNewProjectSettingsPath() && 'btn-active']}
+					class="btn-square"
 					tooltipPosition="top"
 					tooltipAlign="start"
 					tooltip="Project settings"
@@ -382,7 +374,7 @@
 		<ContextMenuItem
 			label="Global settings"
 			onclick={() => {
-				goto(newSettingsPath());
+				openGeneralSettings();
 				contextMenuEl?.close();
 			}}
 			keyboardShortcut="⌘,"

apps/desktop/src/components/CloudForm.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import AiPromptSelect from '$components/AIPromptSelect.svelte';
 	import Section from '$components/Section.svelte';
 	import WelcomeSigninAction from '$components/WelcomeSigninAction.svelte';
 	import { projectAiExperimentalFeaturesEnabled, projectAiGenEnabled } from '$lib/config/config';
-	import { newSettingsPath } from '$lib/routes/routes.svelte';
+	import { useSettingsModal } from '$lib/settings/settingsModal.svelte';
 	import { USER_SERVICE } from '$lib/user/userService';
 	import { inject } from '@gitbutler/core/context';
 	import { Button, SectionCard, Spacer, Toggle } from '@gitbutler/ui';
@@ -13,6 +12,7 @@
 
 	const userService = inject(USER_SERVICE);
 	const user = userService.user;
+	const { openGeneralSettings } = useSettingsModal();
 
 	const aiGenEnabled = $derived(projectAiGenEnabled(projectId));
 	const experimentalAiGenEnabled = $derived(projectAiExperimentalFeaturesEnabled(projectId));
@@ -90,7 +90,7 @@
 			You can apply your own custom prompts to the project. By default, the project uses GitButler
 			prompts, but you can create your own prompts in the general settings.
 		</p>
-		<Button kind="outline" icon="edit" onclick={() => goto(newSettingsPath('ai'))}
+		<Button kind="outline" icon="edit" onclick={() => openGeneralSettings('ai')}
 			>Customize prompts</Button
 		>
 	</SectionCard>

apps/desktop/src/components/Feed.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import FeedItem from '$components/FeedItem.svelte';
 	import CliSymLink from '$components/profileSettings/CliSymLink.svelte';
 	import { ACTION_SERVICE } from '$lib/actions/actionService.svelte';
@@ -8,7 +7,7 @@
 	import { SETTINGS_SERVICE } from '$lib/config/appSettingsV2';
 	import { projectAiGenEnabled } from '$lib/config/config';
 	import { FEED_FACTORY } from '$lib/feed/feed';
-	import { newProjectSettingsPath } from '$lib/routes/routes.svelte';
+	import { useSettingsModal } from '$lib/settings/settingsModal.svelte';
 	import { inject } from '@gitbutler/core/context';
 	import { Badge, Button, Icon, RichTextEditor, Spacer, Link } from '@gitbutler/ui';
 	import { tick } from 'svelte';
@@ -28,6 +27,7 @@
 
 	const cliManager = inject(CLI_MANAGER);
 	const [instalCLI, installingCLI] = cliManager.install;
+	const { openProjectSettings } = useSettingsModal();
 
 	const combinedEntries = $derived(feed.combined);
 	const lastAddedId = $derived(feed.lastAddedId);
@@ -132,7 +132,7 @@
 				<Button
 					kind="outline"
 					onclick={() => {
-						goto(newProjectSettingsPath(projectId, 'ai'));
+						openProjectSettings(projectId, 'ai');
 					}}
 				>
 					Enable in settings

apps/desktop/src/components/ForgeForm.svelte

@@ -2,21 +2,22 @@
 	import { DEFAULT_FORGE_FACTORY } from '$lib/forge/forgeFactory.svelte';
 	import { GITLAB_STATE } from '$lib/forge/gitlab/gitlabState.svelte';
 	import { PROJECTS_SERVICE } from '$lib/project/projectsService';
-	import { inject } from '@gitbutler/core/context';
+	import { inject, injectOptional } from '@gitbutler/core/context';
 	import { Link, SectionCard, Select, SelectItem, Spacer, Textbox } from '@gitbutler/ui';
+	import { writable } from 'svelte/store';
 
 	import type { ForgeName } from '$lib/forge/interface/forge';
 	import type { Project } from '$lib/project/project';
 
 	const { projectId }: { projectId: string } = $props();
 
 	const forge = inject(DEFAULT_FORGE_FACTORY);
-	const gitLabState = inject(GITLAB_STATE);
+	const gitLabState = injectOptional(GITLAB_STATE, null);
 	const determinedForgeType = forge.determinedForgeType;
-	const token = gitLabState.token;
-	const forkProjectId = gitLabState.forkProjectId;
-	const upstreamProjectId = gitLabState.upstreamProjectId;
-	const instanceUrl = gitLabState.instanceUrl;
+	const token = gitLabState?.token ?? writable<string | undefined>('');
+	const forkProjectId = gitLabState?.forkProjectId ?? writable<string | undefined>('');
+	const upstreamProjectId = gitLabState?.upstreamProjectId ?? writable<string | undefined>('');
+	const instanceUrl = gitLabState?.instanceUrl ?? writable<string | undefined>('');
 
 	const projectsService = inject(PROJECTS_SERVICE);
 	const projectResult = $derived(projectsService.getProject(projectId));