diff --git a/src/lib/components/Button/Button.svelte b/src/lib/components/Button/Button.svelte index a73cffd78..8e5195d85 100644 --- a/src/lib/components/Button/Button.svelte +++ b/src/lib/components/Button/Button.svelte @@ -66,7 +66,7 @@ {disabled} {type} class:disabled - on:click + on:click|preventDefault > {#if loading} {#if icon} diff --git a/src/lib/components/Dialog/Dialog.stories.svelte b/src/lib/components/Dialog/Dialog.stories.svelte index 023b11ac8..15bacea95 100644 --- a/src/lib/components/Dialog/Dialog.stories.svelte +++ b/src/lib/components/Dialog/Dialog.stories.svelte @@ -11,50 +11,6 @@ - - count++} - bind:this={dialog} - /> - - - - - count++} - bind:this={dialog} - /> - - - - - count++} - bind:this={dialog} - /> - - - - - count++} - bind:this={dialog} - /> + + diff --git a/src/lib/components/Dialog/Dialog.svelte b/src/lib/components/Dialog/Dialog.svelte index 5af47b0e8..19a18bc7b 100644 --- a/src/lib/components/Dialog/Dialog.svelte +++ b/src/lib/components/Dialog/Dialog.svelte @@ -1,56 +1,32 @@ -
+
-
{title}
+
+ Title +
- {#if content} -

{content}

- {/if} -
- modal.hide()} - rightLabel={primaryActionLabel} - rightAction={primaryAction} - /> +

+ +

+
+ + + +
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte index 964eebb93..7919140e0 100644 --- a/src/lib/components/Modal.svelte +++ b/src/lib/components/Modal.svelte @@ -12,6 +12,7 @@ export const show = () => { open = true; + console.log('lfkjdsflkdsj'); dialog.showModal(); }; export const hide = () => { @@ -22,7 +23,7 @@ export const isOpen = () => open; const handleClick = (event: MouseEvent) => { - if (content && !content.contains(event.target as Node | null)) { + if (content && !content.contains(event.target as Node | null) && !event.defaultPrevented) { hide(); } }; diff --git a/src/lib/components/icons/IconClose.svelte b/src/lib/components/icons/IconClose.svelte new file mode 100644 index 000000000..e3a2a7ada --- /dev/null +++ b/src/lib/components/icons/IconClose.svelte @@ -0,0 +1,20 @@ + + + + + diff --git a/src/lib/components/icons/index.ts b/src/lib/components/icons/index.ts index ee2eff717..3d3a7bebb 100644 --- a/src/lib/components/icons/index.ts +++ b/src/lib/components/icons/index.ts @@ -22,3 +22,4 @@ export { default as IconGitBranch } from './IconGitBranch.svelte'; export { default as IconHome } from './IconHome.svelte'; export { default as IconLoading } from './IconLoading.svelte'; export { default as IconTerminal } from './IconTerminal.svelte'; +export { default as IconClose } from './IconClose.svelte'; diff --git a/src/routes/projects/[projectId]/commit/+page.svelte b/src/routes/projects/[projectId]/commit/+page.svelte index c5f8ed574..14ce8e096 100644 --- a/src/routes/projects/[projectId]/commit/+page.svelte +++ b/src/routes/projects/[projectId]/commit/+page.svelte @@ -8,10 +8,12 @@ import { error, success } from '$lib/toasts'; import { fly } from 'svelte/transition'; import { IconRotateClockwise } from '$lib/components/icons'; + import { Dialog } from '$lib/components'; export let data: PageData; - const { statuses, diffs, user, api, projectId } = data; + const { statuses, diffs, user, api, projectId, project } = data; + let connectToCloudDialog: Dialog; let summary = ''; let description = ''; @@ -58,6 +60,14 @@ }; const onGenerateCommitMessage = async () => { + if (!isLoggedIn) { + // TODO: Modal prompting the user to log in + return; + } + if (!isCloudEnabled) { + connectToCloudDialog.show(); + return; + } if ($user === undefined) return; const partialDiff = Object.fromEntries( @@ -118,10 +128,46 @@ $: isCommitEnabled = summary.length > 0 && $statuses.filter(({ staged }) => staged).length > 0; $: isLoggedIn = $user !== undefined; + $: isCloudEnabled = $project?.api?.sync; $: isSomeFilesSelected = $statuses.some(({ staged }) => staged) && $statuses.length > 0; $: isGenerateCommitEnabled = isLoggedIn && isSomeFilesSelected; + + GitButler Cloud required + +

+ By connecting to GitButler Cloud you'll unlock improved, cloud only features, including + AI-generated commit summaries, and the assurance of never losing your work with synced + project. +

+

+ AI-genearate commits + + This not only saves you time and effort but also ensures consistency in tone and style, + ultimately helping you to boost sales and improve customer satisfaction. + +

+

+ Secure and reliable backup + + GitButler backup guarantees that anything you’ve ever written in your projects are safe, + secure and easily recoverable. + +

+ + + + + +

Commit

diff --git a/src/routes/projects/[projectId]/commit/+page.ts b/src/routes/projects/[projectId]/commit/+page.ts index a49dfd29a..e5eb4711d 100644 --- a/src/routes/projects/[projectId]/commit/+page.ts +++ b/src/routes/projects/[projectId]/commit/+page.ts @@ -2,9 +2,13 @@ import { building } from '$app/environment'; import { readable } from 'svelte/store'; import type { PageLoad } from '../$types'; -export const load: PageLoad = async ({ params }) => { +export const load: PageLoad = async ({ parent, params }) => { + const { project } = await parent(); const diffs = building ? readable>({}) : await import('$lib/git/diffs').then((m) => m.default({ projectId: params.projectId })); - return { diffs }; + return { + diffs, + project + }; };