Merge pull request gitbutlerapp#2909 from gitbutlerapp/Update-project…

…-settings-page New projects setting page and components UI
alabhyajindal · Feb 25, 2024 · 889f8ac · 889f8ac
2 parents c83e39e + 84f0453
commit 889f8ac
Show file tree

Hide file tree

Showing 19 changed files with 568 additions and 375 deletions.
diff --git a/gitbutler-ui/src/lib/components/Board.svelte b/gitbutler-ui/src/lib/components/Board.svelte
@@ -1,4 +1,5 @@
 <script lang="ts" async="true">
+	import FullscreenLoading from './FullscreenLoading.svelte';
 	import NewBranchDropZone from './NewBranchDropZone.svelte';
 	import BranchLane from '$lib/components/BranchLane.svelte';
 	import Icon from '$lib/components/Icon.svelte';
@@ -39,7 +40,7 @@
 {#if branchesError}
 	<div class="p-4" data-tauri-drag-region>Something went wrong...</div>
 {:else if !branches}
-	<div class="loading" data-tauri-drag-region><Icon name="spinner" /></div>
+	<FullscreenLoading />
 {:else}
 	<div
 		class="board"
@@ -213,13 +214,6 @@
 		height: 100%;
 	}
 
-	.loading {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		width: 100%;
-	}
-
 	/* Empty board */
 
 	.empty-board {

diff --git a/gitbutler-ui/src/lib/components/Button.svelte b/gitbutler-ui/src/lib/components/Button.svelte
@@ -4,10 +4,12 @@
 
 <script lang="ts">
 	import Icon from '$lib/components/Icon.svelte';
+	import { pxToRem } from '$lib/utils/pxToRem';
 	import { tooltip } from '$lib/utils/tooltip';
 	import { onMount } from 'svelte';
 	import type iconsJson from '$lib/icons/icons.json';
 
+	export let size: 'medium' | 'large' = 'medium';
 	export let icon: keyof typeof iconsJson | undefined = undefined;
 	export let iconAlign: 'left' | 'right' = 'right';
 	export let color: ButtonColor = 'primary';
@@ -21,6 +23,7 @@
 	export let grow = false;
 	export let align: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'auto' = 'auto';
 	export let help = '';
+	export let width: number | undefined = undefined;
 
 	export let element: HTMLAnchorElement | HTMLButtonElement | HTMLElement | null = null;
 
@@ -37,6 +40,8 @@
 
 <button
 	class={`btn ${className}`}
+	class:medium={size == 'medium'}
+	class:large={size == 'large'}
 	class:error-outline={color == 'error' && kind == 'outlined'}
 	class:primary-outline={color == 'primary' && kind == 'outlined'}
 	class:warn-outline={color == 'warn' && kind == 'outlined'}
@@ -51,6 +56,7 @@
 	class:grow
 	class:not-clickable={notClickable}
 	style:align-self={align}
+	style:width={width ? pxToRem(width) : undefined}
 	use:tooltip={help}
 	bind:this={element}
 	disabled={disabled || loading}
@@ -177,4 +183,16 @@
 			border: 1px solid color-mix(in srgb, var(--clr-theme-err-outline), var(--darken-mid));
 		}
 	}
+
+	/* SIZE MODIFIERS */
+
+	.btn.medium {
+		height: var(--size-btn-m);
+		padding: var(--space-4) var(--space-6);
+	}
+
+	.btn.large {
+		height: var(--size-btn-l);
+		padding: var(--space-6) var(--space-8);
+	}
 </style>
diff --git a/gitbutler-ui/src/lib/components/Checkbox.svelte b/gitbutler-ui/src/lib/components/Checkbox.svelte
@@ -26,6 +26,7 @@
 	class="checkbox"
 	class:small
 	{value}
+	id={name}
 	{name}
 	{disabled}
 />

diff --git a/gitbutler-ui/src/lib/components/ClickableCard.svelte b/gitbutler-ui/src/lib/components/ClickableCard.svelte
@@ -3,19 +3,34 @@
 
 	export let padding: string = 'var(--space-16)';
 	export let disabled = false;
+	export let checked = false;
+	export let hasTopRadius = true;
+	export let hasBottomRadius = true;
+	export let hasBottomLine = true;
 
 	const SLOTS = $$props.$$slots;
 
-	const dispatch = createEventDispatcher<{
+	const dispatchClick = createEventDispatcher<{
 		click: void;
 	}>();
+
+	const dispatchChange = createEventDispatcher<{
+		change: boolean;
+	}>();
 </script>
 
 <button
 	class="clickable-card"
+	class:has-top-radius={hasTopRadius}
+	class:has-bottom-radius={hasBottomRadius}
+	class:has-bottom-line={hasBottomLine}
 	style="padding: {padding}"
 	on:click={() => {
-		dispatch('click');
+		dispatchClick('click');
+
+		dispatchChange('change', checked);
+
+		checked = !checked;
 	}}
 	class:card-disabled={disabled}
 	{disabled}
@@ -43,8 +58,8 @@
 	.clickable-card {
 		display: flex;
 		gap: var(--space-16);
-		border-radius: var(--radius-l);
-		border: 1px solid var(--clr-theme-container-outline-light);
+		border-left: 1px solid var(--clr-theme-container-outline-light);
+		border-right: 1px solid var(--clr-theme-container-outline-light);
 		background-color: var(--clr-theme-container-light);
 		transition:
 			background-color var(--transition-fast),
@@ -84,4 +99,21 @@
 		display: flex;
 		flex-shrink: 0;
 	}
+
+	/* MODIFIERS */
+
+	.has-top-radius {
+		border-top: 1px solid var(--clr-theme-container-outline-light);
+		border-top-left-radius: var(--radius-l);
+		border-top-right-radius: var(--radius-l);
+	}
+
+	.has-bottom-radius {
+		border-bottom-left-radius: var(--radius-l);
+		border-bottom-right-radius: var(--radius-l);
+	}
+
+	.has-bottom-line {
+		border-bottom: 1px solid var(--clr-theme-container-outline-light);
+	}
 </style>
diff --git a/gitbutler-ui/src/lib/components/CloudForm.svelte b/gitbutler-ui/src/lib/components/CloudForm.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { getCloudApiClient, type User } from '$lib/backend/cloud';
-	import Checkbox from '$lib/components/Checkbox.svelte';
+	import ClickableCard from '$lib/components/ClickableCard.svelte';
 	import Link from '$lib/components/Link.svelte';
-	import Login from '$lib/components/Login.svelte';
+	import Spacer from '$lib/components/Spacer.svelte';
+	import Toggle from '$lib/components/Toggle.svelte';
+	import WelcomeSigninAction from '$lib/components/WelcomeSigninAction.svelte';
 	import { projectAiGenEnabled } from '$lib/config/config';
 	import { projectAiGenAutoBranchNamingEnabled } from '$lib/config/config';
 	import * as toasts from '$lib/utils/toasts';
@@ -47,87 +49,82 @@
 			toasts.error('Failed to update project sync status');
 		}
 	};
+
+	const aiGenToggle = () => {
+		$aiGenEnabled = !$aiGenEnabled;
+		$aiGenAutoBranchNamingEnabled = $aiGenEnabled;
+	};
+
+	const aiGenBranchNamesToggle = () => {
+		$aiGenAutoBranchNamingEnabled = !$aiGenAutoBranchNamingEnabled;
+	};
 </script>
 
-<section class="space-y-2">
-	{#if user}
-		<h2 class="text-xl">GitButler Cloud</h2>
+{#if user}
+	<div class="aigen-wrap">
+		<ClickableCard on:click={aiGenToggle}>
+			<svelte:fragment slot="title">Enable branch and commit message generation</svelte:fragment>
+			<svelte:fragment slot="body">
+				Uses OpenAI's API. If enabled, diffs will sent to OpenAI's servers when pressing the
+				"Generate message" button.
+			</svelte:fragment>
+			<svelte:fragment slot="actions">
+				<Toggle checked={$aiGenEnabled} on:change={aiGenToggle} />
+			</svelte:fragment>
+		</ClickableCard>
 
-		<header>
-			<span class="text-text-subdued"> Summary generation </span>
-		</header>
+		<ClickableCard disabled={!$aiGenEnabled} on:click={aiGenBranchNamesToggle}>
+			<svelte:fragment slot="title">Automatically generate branch names</svelte:fragment>
+			<svelte:fragment slot="actions">
+				<Toggle
+					disabled={!$aiGenEnabled}
+					checked={$aiGenAutoBranchNamingEnabled}
+					on:change={aiGenBranchNamesToggle}
+				/>
+			</svelte:fragment>
+		</ClickableCard>
+	</div>
 
-		<div
-			class="flex flex-row items-center justify-between rounded-lg border border-light-400 p-2 dark:border-dark-500"
-		>
-			<div class="flex flex-col space-x-3">
-				<div class="flex flex-row items-center gap-x-1">
-					<Checkbox
-						name="sync"
-						disabled={user === undefined}
-						checked={$aiGenEnabled}
-						on:change={() => {
-							$aiGenEnabled = !$aiGenEnabled;
-							$aiGenAutoBranchNamingEnabled = $aiGenEnabled;
-						}}
-					/>
-					<label class="ml-2" for="sync">Enable branch and commit message generation.</label>
-				</div>
-				<div class="pl-4 pr-8 text-sm text-light-700 dark:text-dark-200">
-					Uses OpenAI's API. If enabled, diffs will sent to OpenAI's servers when pressing the
-					"Generate message" button.
-				</div>
-				<div class="flex flex-col space-x-3">
-					<div class="flex flex-row items-center gap-x-1">
-						<Checkbox
-							name="sync"
-							disabled={user === undefined || !$aiGenEnabled}
-							checked={$aiGenAutoBranchNamingEnabled}
-							on:change={() => {
-								$aiGenAutoBranchNamingEnabled = !$aiGenAutoBranchNamingEnabled;
-							}}
-						/>
-						<label class="ml-2" for="sync">Automatically generate branch names.</label>
-					</div>
-				</div>
-			</div>
-		</div>
-		{#if user.role === 'admin'}
-			<header>
-				<span class="text-text-subdued"> Full data synchronization </span>
-			</header>
-			<div
-				class="flex flex-row items-center justify-between rounded-lg border border-light-400 p-2 dark:border-dark-500"
-			>
-				<div class="flex flex-row space-x-3">
-					<div class="flex flex-row items-center gap-1">
-						<Checkbox
-							name="sync"
-							disabled={user === undefined}
-							checked={project.api?.sync || false}
-							on:change={onSyncChange}
-						/>
-						<label class="ml-2" for="sync">
-							Sync my history, repository and branch data for backup, sharing and team features.
-						</label>
-					</div>
-				</div>
-			</div>
+	<Spacer />
 
-			{#if project.api}
-				<div class="flex flex-row justify-end space-x-2">
-					<div class="p-1">
-						<Link
-							target="_blank"
-							rel="noreferrer"
-							href="{PUBLIC_API_BASE_URL}projects/{project.api?.repository_id}"
-							>Go to GitButler Cloud Project</Link
-						>
-					</div>
-				</div>
-			{/if}
+	{#if user.role === 'admin'}
+		<h3 class="text-base-15 text-bold">Full data synchronization</h3>
+
+		<ClickableCard on:change={onSyncChange}>
+			<svelte:fragment slot="body">
+				Sync my history, repository and branch data for backup, sharing and team features.
+			</svelte:fragment>
+			<svelte:fragment slot="actions">
+				<Toggle checked={project.api?.sync || false} on:change={onSyncChange} />
+			</svelte:fragment>
+		</ClickableCard>
+
+		{#if project.api}
+			<div class="api-link">
+				<Link
+					target="_blank"
+					rel="noreferrer"
+					href="{PUBLIC_API_BASE_URL}projects/{project.api?.repository_id}"
+					>Go to GitButler Cloud Project</Link
+				>
+			</div>
 		{/if}
-	{:else}
-		<Login {userService} />
+		<Spacer />
 	{/if}
-</section>
+{:else}
+	<WelcomeSigninAction {userService} />
+	<Spacer />
+{/if}
+
+<style lang="post-css">
+	.aigen-wrap {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-4);
+	}
+
+	.api-link {
+		display: flex;
+		justify-content: flex-end;
+	}
+</style>