move InfoMessage into UI and update login error messages

PavelLaptev · PavelLaptev · commit 52ce2db4ef4d · 2025-09-19T11:36:04.000+02:00
diff --git a/apps/desktop/src/components/AiCredentialCheck.svelte b/apps/desktop/src/components/AiCredentialCheck.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import { AI_SERVICE, type DiffInput } from '$lib/ai/service';
 	import { ModelKind } from '$lib/ai/types';
 	import { USER_SERVICE } from '$lib/user/userService';
 	import { inject } from '@gitbutler/core/context';
-	import { Button, Link } from '@gitbutler/ui';
+	import { Button, InfoMessage, Link } from '@gitbutler/ui';
 	import { slide } from 'svelte/transition';
 
 	const aiService = inject(AI_SERVICE);
diff --git a/apps/desktop/src/components/BaseBranchSwitch.svelte b/apps/desktop/src/components/BaseBranchSwitch.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import { BASE_BRANCH_SERVICE } from '$lib/baseBranch/baseBranchService.svelte';
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
 	import { inject } from '@gitbutler/core/context';
-	import { Button, SectionCard, Select, SelectItem } from '@gitbutler/ui';
+	import { Button, InfoMessage, SectionCard, Select, SelectItem } from '@gitbutler/ui';
 
 	const { projectId }: { projectId: string } = $props();
 
diff --git a/apps/desktop/src/components/ChecksPolling.svelte b/apps/desktop/src/components/ChecksPolling.svelte
@@ -4,8 +4,7 @@
 	import { UI_STATE } from '$lib/state/uiState.svelte';
 	import { inject } from '@gitbutler/core/context';
 
-	import { Badge, TestId } from '@gitbutler/ui';
-	import type { MessageStyle } from '$components/InfoMessage.svelte';
+	import { Badge, TestId, type MessageStyle } from '@gitbutler/ui';
 	import type iconsJson from '@gitbutler/ui/data/icons.json';
 	import type { ComponentColorType } from '@gitbutler/ui/utils/colorTypes';
 
diff --git a/apps/desktop/src/components/ChromeErrorBoundary.svelte b/apps/desktop/src/components/ChromeErrorBoundary.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import DecorativeSplitView from '$components/DecorativeSplitView.svelte';
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import ProjectNotFound from '$components/ProjectNotFound.svelte';
 	import loadErrorSvg from '$lib/assets/illustrations/load-error.svg?raw';
 	import { parseQueryError } from '$lib/error/error';
 	import { Code } from '$lib/error/knownErrors';
-	import { Button } from '@gitbutler/ui';
+	import { Button, InfoMessage } from '@gitbutler/ui';
 
 	type Props = {
 		projectId: string;
diff --git a/apps/desktop/src/components/CloneForm.svelte b/apps/desktop/src/components/CloneForm.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import InfoMessage, { type MessageStyle } from '$components/InfoMessage.svelte';
 	import Section from '$components/Section.svelte';
 	import { OnboardingEvent, POSTHOG_WRAPPER } from '$lib/analytics/posthog';
 	import { BACKEND } from '$lib/backend';
@@ -11,7 +10,7 @@
 	import { parseRemoteUrl } from '$lib/url/gitUrl';
 	import { inject } from '@gitbutler/core/context';
 	import { persisted } from '@gitbutler/shared/persisted';
-	import { Button, Spacer, Textbox } from '@gitbutler/ui';
+	import { Button, InfoMessage, type MessageStyle, Spacer, Textbox } from '@gitbutler/ui';
 
 	import * as Sentry from '@sentry/sveltekit';
 	import { onMount } from 'svelte';
diff --git a/apps/desktop/src/components/CommitSigningForm.svelte b/apps/desktop/src/components/CommitSigningForm.svelte
@@ -1,11 +1,19 @@
 <script lang="ts">
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import Section from '$components/Section.svelte';
 	import SectionCardDisclaimer from '$components/SectionCardDisclaimer.svelte';
 	import { GIT_CONFIG_SERVICE } from '$lib/config/gitConfigService';
 	import { GIT_SERVICE } from '$lib/git/gitService';
 	import { inject } from '@gitbutler/core/context';
-	import { Button, Link, SectionCard, Select, SelectItem, Textbox, Toggle } from '@gitbutler/ui';
+	import {
+		Button,
+		InfoMessage,
+		Link,
+		SectionCard,
+		Select,
+		SelectItem,
+		Textbox,
+		Toggle
+	} from '@gitbutler/ui';
 
 	import { onMount } from 'svelte';
 
diff --git a/apps/desktop/src/components/CredentialCheck.svelte b/apps/desktop/src/components/CredentialCheck.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import SectionCardDisclaimer from '$components/SectionCardDisclaimer.svelte';
 	import { OnboardingEvent, POSTHOG_WRAPPER } from '$lib/analytics/posthog';
 	import { GIT_CONFIG_SERVICE } from '$lib/config/gitConfigService';
 	import { inject } from '@gitbutler/core/context';
-	import { Button, Icon, Link } from '@gitbutler/ui';
+	import { Button, Icon, InfoMessage, Link } from '@gitbutler/ui';
 	import { slide } from 'svelte/transition';
 
 	interface Props {
diff --git a/apps/desktop/src/components/ProjectNotFound.svelte b/apps/desktop/src/components/ProjectNotFound.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import DecorativeSplitView from '$components/DecorativeSplitView.svelte';
-	import InfoMessage, { type MessageStyle } from '$components/InfoMessage.svelte';
 	import ProjectSwitcher from '$components/ProjectSwitcher.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
 	import RemoveProjectButton from '$components/RemoveProjectButton.svelte';
 	import notFoundSvg from '$lib/assets/illustrations/not-found.svg?raw';
 	import { PROJECTS_SERVICE } from '$lib/project/projectsService';
 	import { inject } from '@gitbutler/core/context';
-	import { Button, Spacer, TestId } from '@gitbutler/ui';
+	import { Button, InfoMessage, type MessageStyle, Spacer, TestId } from '@gitbutler/ui';
 
 	interface Props {
 		projectId: string;
diff --git a/apps/desktop/src/components/ReduxResult.svelte b/apps/desktop/src/components/ReduxResult.svelte
@@ -4,10 +4,9 @@
 </script>
 
 <script lang="ts" generics="A, B extends string | undefined">
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import { isParsedError } from '$lib/error/parser';
 
-	import { Icon } from '@gitbutler/ui';
+	import { Icon, InfoMessage } from '@gitbutler/ui';
 	import { QueryStatus } from '@reduxjs/toolkit/query';
 	import type { Result } from '$lib/state/helpers';
 	import type { Snippet } from 'svelte';
diff --git a/apps/desktop/src/components/ReloadWarning.svelte b/apps/desktop/src/components/ReloadWarning.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import InfoMessage from '$components/InfoMessage.svelte';
+	import { InfoMessage } from '@gitbutler/ui';
 
 	// Number of events received.
 	let count = $state(0);
diff --git a/apps/desktop/src/components/SomethingWentWrong.svelte b/apps/desktop/src/components/SomethingWentWrong.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import DecorativeSplitView from '$components/DecorativeSplitView.svelte';
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import ProjectSwitcher from '$components/ProjectSwitcher.svelte';
 	import loadErrorSvg from '$lib/assets/illustrations/load-error.svg?raw';
+	import { InfoMessage } from '@gitbutler/ui';
 
 	interface Props {
 		projectId?: string;
diff --git a/apps/desktop/src/components/ToastController.svelte b/apps/desktop/src/components/ToastController.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import { dismissToast, toastStore } from '$lib/notifications/toasts';
-	import { Markdown, TestId } from '@gitbutler/ui';
+	import { InfoMessage, Markdown, TestId } from '@gitbutler/ui';
 	import { slide } from 'svelte/transition';
 </script>
 
diff --git a/apps/desktop/src/components/profileSettings/AiSettings.svelte b/apps/desktop/src/components/profileSettings/AiSettings.svelte
@@ -2,7 +2,6 @@
 	import AIPromptEdit from '$components/AIPromptEdit.svelte';
 	import AiCredentialCheck from '$components/AiCredentialCheck.svelte';
 	import AuthorizationBanner from '$components/AuthorizationBanner.svelte';
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import Section from '$components/Section.svelte';
 	import { AISecretHandle, AI_SERVICE, GitAIConfigKey, KeyOption } from '$lib/ai/service';
 	import { OpenAIModelName, AnthropicModelName, ModelKind } from '$lib/ai/types';
@@ -12,6 +11,7 @@
 	import { inject } from '@gitbutler/core/context';
 	import {
 		Icon,
+		InfoMessage,
 		Link,
 		RadioButton,
 		SectionCard,
diff --git a/apps/desktop/src/lib/notifications/toasts.ts b/apps/desktop/src/lib/notifications/toasts.ts
@@ -8,7 +8,7 @@ import {
 } from '$lib/error/parser';
 import posthog from 'posthog-js';
 import { writable, type Writable } from 'svelte/store';
-import type { MessageStyle } from '$components/InfoMessage.svelte';
+import type { MessageStyle } from '@gitbutler/ui';
 
 type ExtraAction = {
 	label: string;
diff --git a/apps/web/src/routes/(app)/login/+page.svelte b/apps/web/src/routes/(app)/login/+page.svelte
@@ -6,7 +6,7 @@
 	import { inject } from '@gitbutler/core/context';
 	import { LOGIN_SERVICE } from '@gitbutler/shared/login/loginService';
 	import { WEB_ROUTES_SERVICE } from '@gitbutler/shared/routing/webRoutes.svelte';
-	import { Button, EmailTextbox, Textbox } from '@gitbutler/ui';
+	import { Button, EmailTextbox, Textbox, InfoMessage } from '@gitbutler/ui';
 	import { env } from '$env/dynamic/public';
 
 	let email = $state<string>();
@@ -90,27 +90,24 @@
 			<Button type="submit" style="pop" disabled={!isFormValid}>Log in</Button>
 
 			{#if error}
-				<div class="error-message">
-					<span>
-						{error}
-					</span>
-				</div>
-				{#if errorCode === 'email_not_verified'}
-					<span>
-						Please verify your email address before logging in. Check your inbox for a verification
-						email or
-					</span>
-					<Button
-						type="button"
-						onclick={resendConfirmationEmail}
-						disabled={!email}
-						tooltip={!email
-							? 'Please enter your email in the field above to resend the confirmation email.'
-							: 'Resend confirmation email'}
-					>
-						resend the confirmation email</Button
-					>
-				{/if}
+				<InfoMessage filled outlined={false} style="error" class="m-top-16">
+					{#snippet content()}
+						{#if errorCode === 'email_not_verified'}
+							<p>
+								Verify your email before logging in. Check your inbox or <button
+									type="button"
+									class="resend-confirm-btn"
+									onclick={resendConfirmationEmail}
+									disabled={!email}
+								>
+									resend the confirmation email</button
+								>.
+							</p>
+						{:else}
+							<p>{error}</p>
+						{/if}
+					{/snippet}
+				</InfoMessage>
 			{/if}
 
 			<div class="login-form__social">
@@ -206,6 +203,12 @@
 		}
 	}
 
+	.resend-confirm-btn {
+		text-decoration: underline;
+		text-decoration-style: dotted;
+		cursor: pointer;
+	}
+
 	.error-message {
 		display: flex;
 		flex-direction: column;
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -122,6 +122,7 @@
 		"@giphy/js-fetch-api": "^5.7.0",
 		"@giphy/js-types": "^5.1.0",
 		"@giphy/svelte-components": "^1.1.0",
+		"@gitbutler/shared": "workspace:*",
 		"@lexical/link": "0.27.1",
 		"@lexical/list": "0.27.1",
 		"@lexical/markdown": "0.27.1",
diff --git a/packages/ui/src/lib/components/InfoMessage.svelte b/packages/ui/src/lib/components/InfoMessage.svelte
@@ -1,13 +1,13 @@
 <script lang="ts" module>
-	import type { ComponentColorType } from '@gitbutler/ui/utils/colorTypes';
 	export type MessageStyle = 'info' | 'warning' | 'error' | 'success';
 </script>
 
 <script lang="ts">
+	import Button from '$components/Button.svelte';
+	import Icon from '$components/Icon.svelte';
 	import { copyToClipboard } from '@gitbutler/shared/clipboard';
-
-	import { Button, Icon } from '@gitbutler/ui';
-	import type iconsJson from '@gitbutler/ui/data/icons.json';
+	import type iconsJson from '$lib/data/icons.json';
+	import type { ComponentColorType } from '$lib/utils/colorTypes';
 	import type { Snippet } from 'svelte';
 
 	type IconColor = ComponentColorType | undefined;
@@ -18,6 +18,7 @@
 		style?: MessageStyle;
 		outlined?: boolean;
 		filled?: boolean;
+		class?: string;
 		primaryLabel?: string | undefined;
 		primaryIcon?: IconName | undefined;
 		primaryTestId?: string | undefined;
@@ -42,6 +43,7 @@
 		style = 'info',
 		outlined = true,
 		filled = false,
+		class: className = '',
 		primaryLabel = '',
 		primaryIcon,
 		primaryTestId,
@@ -87,7 +89,7 @@
 
 <div
 	data-testid={testId}
-	class="info-message {style}"
+	class="info-message {style} {className}"
 	class:has-border={outlined}
 	class:has-background={filled}
 	class:shadow
diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
@@ -18,6 +18,7 @@ export { default as EmptyStatePlaceholder } from '$components/EmptyStatePlacehol
 export { default as HunkDiff, type LineClickParams } from '$components/hunkDiff/HunkDiff.svelte';
 export { default as Icon, type IconName } from '$components/Icon.svelte';
 export { default as InfoButton } from '$components/InfoButton.svelte';
+export { default as InfoMessage, type MessageStyle } from '$components/InfoMessage.svelte';
 export {
 	default as IntegrationSeriesRow,
 	type BranchShouldBeDeletedMap
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
