helpful stuff

package-lock.json

@@ -9,7 +9,7 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"aws-sdk": "^2.1628.0",
-				"bits-ui": "^0.21.7",
+				"bits-ui": "^0.21.10",
 				"clsx": "^2.1.1",
 				"dotenv": "^16.4.5",
 				"tailwind-merge": "^2.3.0",
@@ -1468,9 +1468,9 @@
 			}
 		},
 		"node_modules/bits-ui": {
-			"version": "0.21.7",
+			"version": "0.21.10",
-			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.7.tgz",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.10.tgz",
-			"integrity": "sha512-1PKp90ly1R6jexIiAUj1Dk4u2pln7ok+L8Vc0rHMY7pi7YZvadFNZvkp1G5BtmL8qh2xsn4MVNgKjPAQMCxW0A==",
+			"integrity": "sha512-KuweEOKO0Rr8XX87dQh46G9mG0bZSmTqNxj5qBazz4OTQC+oPKui04/wP/ISsCOSGFomaRydTULqh4p+nsyc2g==",
 			"dependencies": {
 				"@internationalized/date": "^3.5.1",
 				"@melt-ui/svelte": "0.76.2",

package.json

@@ -18,6 +18,9 @@
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@tabler/icons-svelte": "^3.3.0",
 		"autoprefixer": "^10.4.16",
+		"formsnap": "^1.0.0",
+		"lucide-svelte": "^0.373.0",
+		"mode-watcher": "^0.3.0",
 		"postcss": "^8.4.32",
 		"postcss-load-config": "^5.0.2",
 		"prettier": "^3.1.1",
@@ -27,23 +30,20 @@
 		"svelte-awesome-color-picker": "^3.0.6",
 		"svelte-check": "^3.6.0",
 		"svelte-legos": "^0.2.2",
-		"tailwindcss": "^3.3.6",
-		"timeago.js": "^4.0.2",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.3",
-		"formsnap": "^1.0.0",
-		"lucide-svelte": "^0.373.0",
-		"mode-watcher": "^0.3.0",
 		"svelte-markdown": "^0.4.1",
 		"svelte-motion": "^0.12.2",
 		"svelte-radix": "^1.1.0",
 		"svelte-sonner": "^0.3.22",
-		"sveltekit-superforms": "^2.12.6"
+		"sveltekit-superforms": "^2.12.6",
+		"tailwindcss": "^3.3.6",
+		"timeago.js": "^4.0.2",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.3"
 	},
 	"type": "module",
 	"dependencies": {
 		"aws-sdk": "^2.1628.0",
-		"bits-ui": "^0.21.7",
+		"bits-ui": "^0.21.10",
 		"clsx": "^2.1.1",
 		"dotenv": "^16.4.5",
 		"tailwind-merge": "^2.3.0",

src/lib/components/ui/collapsible/collapsible-content.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+	import { slide } from "svelte/transition";
+	export let transition = slide;
+	export let transitionConfig = {
+		duration: 150,
+	};
+</script>
+
+<CollapsiblePrimitive.Content {transition} {transitionConfig} {...$$restProps}>
+	<slot />
+</CollapsiblePrimitive.Content>

src/lib/components/ui/collapsible/index.js

@@ -0,0 +1,13 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+import Content from "./collapsible-content.svelte";
+const Root = CollapsiblePrimitive.Root;
+const Trigger = CollapsiblePrimitive.Trigger;
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger,
+};

src/routes/(app)/articles/createArticleDialog.svelte

@@ -141,16 +141,16 @@
 								</Select.Trigger>
 								<Select.Content>
 									<Select.Group>
-										<Select.Item value="700" label="Short (~700 words)"
+										<Select.Item value="700" label="Short"
-											>Short (~700 words)</Select.Item
+											>Short</Select.Item
 										>
-										<Select.Item value="1500" label="Medium (~1500 words)"
+										<Select.Item value="1500" label="Medium"
-											>Medium (~1500 words)
+											>Medium
 											<!-- <ProBadge /> -->
 										</Select.Item>
 										<!-- disabled={['free', 'basic'].includes(tier)} -->
-										<Select.Item value="2500" label="Long (~2500 words)"
+										<Select.Item value="2500" label="Long"
-											>Long (~2500 words)
+											>Long
 											<!-- <ProBadge /> -->
 										</Select.Item>
 									</Select.Group>

src/routes/(app)/website/+page.svelte

@@ -11,6 +11,10 @@
 	import { Textarea } from '$lib/components/ui/textarea';
 	import * as Tooltip from '$lib/components/ui/tooltip';
 	import { config } from '$lib';
+	import { QuestionMarkCircled } from 'svelte-radix';
+	import ChevronsUpDown from 'lucide-svelte/icons/chevrons-up-down';
+	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
 
 	/** @type {import("./$types").PageServerData} */
 	export let data;
@@ -71,15 +75,28 @@
 	}
 
 	let disable_freebies = !$formData.use_freebie;
+	let disable_autopublish = !$formData.auto_publish;
 	$: disable_freebies = !$formData.use_freebie;
+	$: disable_autopublish = !$formData.auto_publish;
 </script>
 
 <div class="w-full max-w-7xl">
 	<form method="post" use:enhance enctype="multipart/form-data">
 		<input type="text" value={data.blog_info.id} name="id" readonly class="hidden" />
+		
 		<div class="grid grid-cols-1 gap-16 md:grid-cols-2 md:grid-rows-1">
 			<div>
+				<Collapsible.Root class="space-y-2">
+					<div class="flex items-center justify-between space-x-4 border-b px-4">
 						<h2 class="mb-4 text-2xl font-bold">Basics</h2>
+						<Collapsible.Trigger asChild let:builder>
+							<Button builders={[builder]} variant="ghost" size="sm" class="w-9 p-0">
+								<ChevronsUpDown class="h-4 w-4" />
+								<span class="sr-only">Toggle</span>
+							</Button>
+						</Collapsible.Trigger>
+					</div>
+					<Collapsible.Content class="space-y-2">
 						<Form.Field {form} name="name">
 							<Form.Control let:attrs>
 								<Form.Label>Blog name</Form.Label>
@@ -104,7 +121,6 @@
 							<Form.Description />
 							<Form.FieldErrors />
 						</Form.Field>
-
 						<Form.Field {form} name="primary_color_hex">
 							<Form.Control let:attrs>
 								<Form.Label>Primary color</Form.Label>
@@ -163,23 +179,21 @@
 							{/if}
 							<Form.FieldErrors />
 						</Form.Field>
-				<Form.Field {form} name="auto_publish">
+					</Collapsible.Content>
-					<Form.Control let:attrs>
+				</Collapsible.Root>
-						<Tooltip.Root>
-							<Tooltip.Trigger>
-								<Form.Label>Auto Publish</Form.Label>
-							</Tooltip.Trigger>
-							<Tooltip.Content>
-								<p>Automatically creates a blog post for you when you upload a video</p>
-							</Tooltip.Content>
-						</Tooltip.Root>
-						<Switch {...attrs} bind:checked={$formData.auto_publish} />
-					</Form.Control>
-					<Form.FieldErrors />
-				</Form.Field>
 			</div>
 			<div>
+				<Collapsible.Root class="space-y-2">
+					<div class="flex items-center justify-between space-x-4 border-b px-4">
 						<h2 class="mb-4 text-2xl font-bold">Freebies</h2>
+						<Collapsible.Trigger asChild let:builder>
+							<Button builders={[builder]} variant="ghost" size="sm" class="w-9 p-0">
+								<ChevronsUpDown class="h-4 w-4" />
+								<span class="sr-only">Toggle</span>
+							</Button>
+						</Collapsible.Trigger>
+					</div>
+					<Collapsible.Content class="space-y-2">
 						<Form.Field {form} name="use_freebie">
 							<Form.Control let:attrs>
 								<Form.Label class="text-right">Send freebie</Form.Label>
@@ -262,9 +276,70 @@
 								>The text displayed next to the signup form on your blog.</Form.Description
 							>
 						</Form.Field>
+					</Collapsible.Content>
+				</Collapsible.Root>
+			</div>
+			<div>
+				<Collapsible.Root class="space-y-2">
+					<div class="flex items-center justify-between space-x-4 border-b px-4">
+						<h2 class="mb-4 text-2xl font-bold">Auto publish</h2>
+						<Collapsible.Trigger asChild let:builder>
+							<Button builders={[builder]} variant="ghost" size="sm" class="w-9 p-0">
+								<ChevronsUpDown class="h-4 w-4" />
+								<span class="sr-only">Toggle</span>
+							</Button>
+						</Collapsible.Trigger>
+					</div>
+					<Collapsible.Content class="space-y-2">
+						<Form.Field {form} name="auto_publish">
+							<Form.Control let:attrs>
+								<Form.Label>Auto Publish</Form.Label>
+								<div class="flex items-center justify-start">
+									<Switch {...attrs} bind:checked={$formData.auto_publish} />
+								</div>
+							</Form.Control>
+							<Form.FieldErrors />
+							<Form.Description
+								>Automatically creates a blog post for you when you upload a video</Form.Description
+							>
+						</Form.Field>
+						<Form.Field {form} name="freebie_name">
+							<Form.Control let:attrs>
+								<Form.Label class="text-right">Freebie Name</Form.Label>
+								<div class="flex items-center justify-start">
+									<Input
+										{...attrs}
+										bind:value={$formData.freebie_name}
+										bind:readonly={disable_freebies}
+									/>
+								</div>
+							</Form.Control>
+							<Form.FieldErrors />
+						</Form.Field>
+						<Form.Field {form} name="freebie_url">
+							<Form.Control let:attrs>
+								<Form.Label class="text-right">Freebie file</Form.Label>
+								<div class="flex items-center justify-start">
+									<Input
+										type="file"
+										on:input={(e) =>
+											handleFileChange(e, $formData.freebie_url).then((x) => {
+												$formData.freebie_url = x;
+											})}
+										bind:disabled={disable_freebies}
+									/>
+									<Input {...attrs} class="hidden" bind:value={$formData.freebie_url} readonly />
+								</div>
+							</Form.Control>
+							<Form.Description>Maximum size of 5MB (TEMPORARY)</Form.Description>
+							<Form.FieldErrors />
+						</Form.Field>
+					</Collapsible.Content>
+				</Collapsible.Root>
 			</div>
 		</div>
-
+		<div class="mt-4">
 			<Form.Button disabled={!isTainted($tainted)}>Submit</Form.Button>
+		</div>
 	</form>
 </div>