refactor: remove settings panels and inline all form fields

- Delete ArticleSettings, MemberSettings, ProjectSettings components
- Move slug, cover image, category, URLs inline into editors
- Move author/visibility to header dropdown menus
- Add delete option to "..." menu in headers
- Remove competitive view counts from dashboard (Top Articles/Projects/Members)
- Fix nested scrolling by using native browser scroll
- leadMemberId dropdown always visible (not conditional on isNew)

Author: aster-void

src/lib/components/ArticleForm.svelte

@@ -5,7 +5,7 @@
 	import { triggerSubmit } from "$lib/utils/form";
 	import { onSaveShortcut } from "$lib/utils/keyboard";
 	import { snapshot } from "$lib/utils/snapshot.svelte";
-	import { ArticleEditor, ArticleFormHeader, ArticleSettings } from "./article-form";
+	import { ArticleEditor, ArticleFormHeader } from "./article-form";
 	import { confirm } from "$lib/components/confirm-modal.svelte";
 
 	let {
@@ -23,7 +23,6 @@
 		submitLabel = "Save",
 		isSubmitting = $bindable(false),
 		articleId = null,
-		viewCount = 0,
 	}: {
 		initialData?: ArticleData;
 		authors?: Author[];
@@ -32,12 +31,10 @@
 		submitLabel?: string;
 		isSubmitting?: boolean;
 		articleId?: string | null;
-		viewCount?: number;
 	} = $props();
 
 	let formData = $state(snapshot(() => initialData));
 	let errors = $state<Record<string, string>>({});
-	let showSettings = $state(false);
 	let saveSuccess = $state(false);
 	let createRedirect = $state(false);
 
@@ -64,8 +61,6 @@
 		errors = validator.getErrors();
 
 		if (validator.hasErrors()) {
-			// Show settings panel if there are errors in settings fields
-			if (errors.slug) showSettings = true;
 			return;
 		}
 
@@ -95,46 +90,33 @@
 			window.open(`/admin/articles/${articleId}/preview`, "_blank");
 		}
 	}
-
 </script>
 
 <svelte:window onkeydown={onSaveShortcut(() => triggerSubmit(handleSubmit, isSubmitting))} />
 
-<form onsubmit={handleSubmit} class="flex h-full flex-col">
+<form onsubmit={handleSubmit} class="flex min-h-screen flex-col">
 	<ArticleFormHeader
 		bind:published={formData.published}
-		bind:showSettings
+		bind:authorId={formData.authorId}
 		bind:saveSuccess
+		{authors}
 		{isSubmitting}
 		{submitLabel}
 		{articleId}
+		{onDelete}
 		onPreview={openPreviewPage}
 	/>
 
-	<div class="flex flex-1 overflow-hidden">
-		<ArticleEditor
-			bind:title={formData.title}
-			bind:content={formData.content}
-			slug={formData.slug}
-			coverUrl={formData.coverUrl}
-			titleError={errors["title"]}
-			contentError={errors["content"]}
-			onTitleChange={handleTitleChange}
-			onOpenSettings={() => (showSettings = true)}
-		/>
-
-		<ArticleSettings
-			bind:show={showSettings}
-			bind:published={formData.published}
-			bind:slug={formData.slug}
-			bind:authorId={formData.authorId}
-			bind:coverUrl={formData.coverUrl}
-			bind:createRedirect
-			initialSlug={initialData.slug}
-			{authors}
-			slugError={errors["slug"]}
-			{onDelete}
-			{viewCount}
-		/>
-	</div>
+	<ArticleEditor
+		bind:title={formData.title}
+		bind:content={formData.content}
+		bind:slug={formData.slug}
+		bind:coverUrl={formData.coverUrl}
+		bind:createRedirect
+		initialSlug={initialData.slug}
+		titleError={errors["title"]}
+		contentError={errors["content"]}
+		slugError={errors["slug"]}
+		onTitleChange={handleTitleChange}
+	/>
 </form>

src/lib/components/MemberForm.svelte

@@ -5,27 +5,24 @@
 	import { triggerSubmit } from "$lib/utils/form";
 	import { onSaveShortcut } from "$lib/utils/keyboard";
 	import { snapshot } from "$lib/utils/snapshot.svelte";
-	import { MemberEditor, MemberFormHeader, MemberSettings } from "./member-form";
+	import { MemberEditor, MemberFormHeader } from "./member-form";
 
 	let {
 		initialData = { slug: "", name: "", bio: "", imageUrl: "", pageContent: "" },
 		onSubmit,
 		onDelete = null,
 		submitLabel = "Save",
 		isSubmitting = $bindable(false),
-		viewCount = 0,
 	}: {
 		initialData?: MemberData;
 		onSubmit: (data: MemberData) => Promise<void>;
 		onDelete?: (() => Promise<void>) | null;
 		submitLabel?: string;
 		isSubmitting?: boolean;
-		viewCount?: number;
 	} = $props();
 
 	let formData = $state(snapshot(() => initialData));
 	let errors = $state<Record<string, string>>({});
-	let showSettings = $state(false);
 
 	function handleNameChange() {
 		if (!formData.slug || formData.slug === generateSlug(initialData.name)) {
@@ -47,7 +44,6 @@
 		errors = validator.getErrors();
 
 		if (validator.hasErrors()) {
-			if (errors.slug) showSettings = true;
 			return;
 		}
 
@@ -62,32 +58,17 @@
 
 <svelte:window onkeydown={onSaveShortcut(() => triggerSubmit(handleSubmit, isSubmitting))} />
 
-<form onsubmit={handleSubmit} class="flex h-full flex-col">
-	<MemberFormHeader
-		bind:showSettings
-		{isSubmitting}
-		{submitLabel}
-	/>
-
-	<div class="flex flex-1 overflow-hidden">
-		<MemberEditor
-			bind:name={formData.name}
-			bind:bio={formData.bio}
-			bind:pageContent={formData.pageContent}
-			slug={formData.slug}
-			imageUrl={formData.imageUrl}
-			nameError={errors["name"]}
-			onNameChange={handleNameChange}
-			onOpenSettings={() => (showSettings = true)}
-		/>
+<form onsubmit={handleSubmit} class="flex min-h-screen flex-col">
+	<MemberFormHeader {isSubmitting} {submitLabel} {onDelete} />
 
-		<MemberSettings
-			bind:show={showSettings}
-			bind:slug={formData.slug}
-			bind:imageUrl={formData.imageUrl}
-			slugError={errors["slug"]}
-			{viewCount}
-			{onDelete}
-		/>
-	</div>
+	<MemberEditor
+		bind:name={formData.name}
+		bind:slug={formData.slug}
+		bind:bio={formData.bio}
+		bind:imageUrl={formData.imageUrl}
+		bind:pageContent={formData.pageContent}
+		nameError={errors["name"]}
+		slugError={errors["slug"]}
+		onNameChange={handleNameChange}
+	/>
 </form>

src/lib/components/ProjectForm.svelte

@@ -7,7 +7,6 @@
 	import { snapshot } from "$lib/utils/snapshot.svelte";
 	import ProjectEditor from "./project-form/ProjectEditor.svelte";
 	import ProjectFormHeader from "./project-form/ProjectFormHeader.svelte";
-	import ProjectSettings from "./project-form/ProjectSettings.svelte";
 
 	let {
 		initialData = {
@@ -27,7 +26,6 @@
 		submitLabel = "Save",
 		isSubmitting = $bindable(false),
 		isNew = false,
-		viewCount = 0,
 	}: {
 		initialData?: ProjectData;
 		members?: Member[];
@@ -36,12 +34,11 @@
 		submitLabel?: string;
 		isSubmitting?: boolean;
 		isNew?: boolean;
-		viewCount?: number;
 	} = $props();
 
 	let formData = $state(snapshot(() => initialData));
 	let errors = $state<Record<string, string>>({});
-	let showSettings = $state(false);
+	let saveSuccess = $state(false);
 
 	function handleNameChange() {
 		if (!formData.slug || formData.slug === generateSlug(initialData.name)) {
@@ -62,19 +59,19 @@
 
 		if (isNew && !formData.leadMemberId) {
 			validator.validate("leadMemberId", "", () => "Lead member is required");
-			showSettings = true;
 		}
 
 		errors = validator.getErrors();
 
 		if (validator.hasErrors()) {
-			if (errors.slug || errors.leadMemberId) showSettings = true;
 			return;
 		}
 
 		isSubmitting = true;
+		saveSuccess = false;
 		try {
 			await onSubmit(formData);
+			saveSuccess = true;
 		} finally {
 			isSubmitting = false;
 		}
@@ -83,41 +80,26 @@
 
 <svelte:window onkeydown={onSaveShortcut(() => triggerSubmit(handleSubmit, isSubmitting))} />
 
-<form onsubmit={handleSubmit} class="flex h-full flex-col">
+<form onsubmit={handleSubmit} class="flex min-h-screen flex-col">
 	<ProjectFormHeader
-		category={formData.category}
-		bind:showSettings
+		bind:leadMemberId={formData.leadMemberId}
+		bind:saveSuccess
+		{members}
 		{isSubmitting}
 		{submitLabel}
-		onToggleSettings={() => (showSettings = !showSettings)}
+		{onDelete}
 	/>
 
-	<div class="flex flex-1 overflow-hidden">
-		<ProjectEditor
-			bind:name={formData.name}
-			bind:description={formData.description}
-			bind:content={formData.content}
-			slug={formData.slug}
-			coverUrl={formData.coverUrl}
-			{errors}
-			onNameChange={handleNameChange}
-			onOpenSettings={() => (showSettings = true)}
-		/>
-
-		<ProjectSettings
-			show={showSettings}
-			bind:category={formData.category}
-			bind:slug={formData.slug}
-			bind:leadMemberId={formData.leadMemberId}
-			bind:coverUrl={formData.coverUrl}
-			bind:repoUrl={formData.repoUrl}
-			bind:demoUrl={formData.demoUrl}
-			{members}
-			{errors}
-			{isNew}
-			{viewCount}
-			onClose={() => (showSettings = false)}
-			{onDelete}
-		/>
-	</div>
+	<ProjectEditor
+		bind:name={formData.name}
+		bind:description={formData.description}
+		bind:content={formData.content}
+		bind:slug={formData.slug}
+		bind:coverUrl={formData.coverUrl}
+		bind:category={formData.category}
+		bind:repoUrl={formData.repoUrl}
+		bind:demoUrl={formData.demoUrl}
+		{errors}
+		onNameChange={handleNameChange}
+	/>
 </form>