Added initial integration setup on settings page

src/lib/components/forms/FormButton.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	import { Update } from 'radix-icons-svelte';
+	export let type: 'base' | 'success' | 'error' = 'base';
+	export let loading = false;
+	export let disabled = false;
+</script>
+
+<button
+	on:click
+	class={classNames(
+		'p-1.5 px-4 text-sm text-zinc-200 rounded-lg border border-zinc-800',
+		'hover:bg-opacity-30 transition-colors',
+		'flex items-center gap-2',
+		{
+			'bg-green-600 bg-opacity-20 text-green-200 border-green-800': type === 'success',
+			'bg-red-600 bg-opacity-20 text-red-200 border-red-800': type === 'error',
+			'bg-zinc-600 bg-opacity-20': type === 'base',
+			'cursor-not-allowed opacity-75 pointer-events-none': disabled || loading
+		},
+		$$restProps.class
+	)}
+>
+	{#if loading}
+		<Update class="animate-spin" size={14} />
+	{/if}
+	<slot />
+</button>

src/lib/components/forms/Input.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import classNames from 'classnames';
+
+	export let type: 'text' | 'number' = 'text';
+	export let value: any = type === 'text' ? '' : 0;
+	export let placeholder = '';
+
+	const baseStyles =
+		'appearance-none p-1 px-3 selectable border border-zinc-800 rounded-lg bg-zinc-600 bg-opacity-20 text-zinc-200';
+</script>
+
+<div class="relative">
+	{#if type === 'text'}
+		<input type="text" {placeholder} bind:value class={classNames(baseStyles, $$restProps.class)} />
+	{:else if type === 'number'}
+		<input
+			type="number"
+			{placeholder}
+			bind:value
+			class={classNames(baseStyles, 'w-28', $$restProps.class)}
+		/>
+	{/if}
+</div>

src/lib/components/forms/Select.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	import { CaretDown } from 'radix-icons-svelte';
+
+	export let value: any = '';
+	export let disabled = false;
+</script>
+
+<div
+	class={classNames('relative w-max min-w-[8rem]', {
+		'opacity-50': disabled
+	})}
+>
+	<select
+		on:change
+		bind:value
+		class={classNames(
+			'appearance-none p-1 pl-3 pr-8 selectable border border-zinc-800 rounded-lg bg-zinc-600 bg-opacity-20 w-full',
+			{
+				'cursor-not-allowed pointer-events-none': disabled
+			}
+		)}
+	>
+		<slot />
+	</select>
+	<div class="absolute inset-y-0 right-2 flex items-center justify-center">
+		<CaretDown size={20} />
+	</div>
+</div>

src/lib/components/forms/Toggle.svelte

@@ -0,0 +1,11 @@
+<script>
+	export let checked = false;
+</script>
+
+<label class="relative inline-flex items-center cursor-pointer w-min h-min">
+	<input type="checkbox" bind:checked class="sr-only peer" />
+	<div
+		class="w-11 h-6 rounded-full peer bg-zinc-600 bg-opacity-20 peer-checked:bg-amber-200 peer-checked:bg-opacity-30 peer-selectable
+        after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px]"
+	/>
+</label>