Merge pull request #86 from devonthesofa/refactor/settings-with-tabs

Refactor/settings with tabs

components/SettingsUI/UISettings.tsx

@@ -1,5 +1,5 @@
-import { PluginSettings } from "@/types/pluginSettings";
 import React from "react";
+import { PluginSettings } from "@/types/pluginSettings";
 import { Input } from "../atoms/Input";
 import { Select } from "../atoms/Select";
 import { SettingItem } from "./SettingItem";
@@ -10,15 +10,14 @@ export type Props = {
 	onChange: (key: keyof PluginSettings, value: unknown) => void;
 };
 
-export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
-	const handleChange =
+export const StatusBarSettings: React.FC<Props> = ({ settings, onChange }) => {
+	const handleCheckbox =
 		(key: keyof PluginSettings) =>
-		(e: React.ChangeEvent<HTMLInputElement>) => {
+		(e: React.ChangeEvent<HTMLInputElement>) =>
 			onChange(key, e.target.checked);
-		};
 
 	return (
-		<div className="ui-settings">
+		<div className="ui-settings__group">
 			<h3>Status Bar</h3>
 
 			<SettingItem
@@ -28,7 +27,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				<input
 					type="checkbox"
 					checked={settings.showStatusBar}
-					onChange={handleChange("showStatusBar")}
+					onChange={handleCheckbox("showStatusBar")}
 				/>
 			</SettingItem>
 
@@ -39,7 +38,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				<input
 					type="checkbox"
 					checked={settings.autoHideStatusBar}
-					onChange={handleChange("autoHideStatusBar")}
+					onChange={handleCheckbox("autoHideStatusBar")}
 				/>
 			</SettingItem>
 
@@ -50,7 +49,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				<input
 					type="checkbox"
 					checked={settings.enableStatusOverviewPopup ?? true}
-					onChange={handleChange("enableStatusOverviewPopup")}
+					onChange={handleCheckbox("enableStatusOverviewPopup")}
 				/>
 			</SettingItem>
 
@@ -142,7 +141,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				<input
 					type="checkbox"
 					checked={settings.statusBarShowNoStatusIcon || false}
-					onChange={handleChange("statusBarShowNoStatusIcon")}
+					onChange={handleCheckbox("statusBarShowNoStatusIcon")}
 				/>
 			</SettingItem>
 
@@ -153,11 +152,25 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				<input
 					type="checkbox"
 					checked={settings.statusBarShowNoStatusText ?? true}
-					onChange={handleChange("statusBarShowNoStatusText")}
+					onChange={handleCheckbox("statusBarShowNoStatusText")}
 				/>
 			</SettingItem>
+		</div>
+	);
+};
 
-			<h3>Editor</h3>
+export const EditorToolbarSettings: React.FC<Props> = ({
+	settings,
+	onChange,
+}) => {
+	const handleCheckbox =
+		(key: keyof PluginSettings) =>
+		(e: React.ChangeEvent<HTMLInputElement>) =>
+			onChange(key, e.target.checked);
+
+	return (
+		<div className="ui-settings__group">
+			<h3>Editor Toolbar</h3>
 
 			<SettingItem
 				name="Show editor toolbar button"
@@ -166,7 +179,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				<input
 					type="checkbox"
 					checked={settings.showEditorToolbarButton ?? true}
-					onChange={handleChange("showEditorToolbarButton")}
+					onChange={handleCheckbox("showEditorToolbarButton")}
 				/>
 			</SettingItem>
 
@@ -176,10 +189,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 			>
 				<Select
 					options={[
-						{
-							value: "left",
-							display: "Left side of toolbar",
-						},
+						{ value: "left", display: "Left side of toolbar" },
 						{
 							value: "right",
 							display: "Right side (after all buttons)",
@@ -204,14 +214,8 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 			>
 				<Select
 					options={[
-						{
-							value: "all-notes",
-							display: "All open notes",
-						},
-						{
-							value: "active-only",
-							display: "Active note only",
-						},
+						{ value: "all-notes", display: "All open notes" },
+						{ value: "active-only", display: "Active note only" },
 					]}
 					defaultValue={
 						settings.editorToolbarButtonDisplay || "all-notes"
@@ -221,7 +225,21 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 					}
 				/>
 			</SettingItem>
+		</div>
+	);
+};
 
+export const FileExplorerSettings: React.FC<Props> = ({
+	settings,
+	onChange,
+}) => {
+	const handleCheckbox =
+		(key: keyof PluginSettings) =>
+		(e: React.ChangeEvent<HTMLInputElement>) =>
+			onChange(key, e.target.checked);
+
+	return (
+		<div className="ui-settings__group">
 			<h3>File Explorer</h3>
 
 			<SettingItem
@@ -231,7 +249,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				<input
 					type="checkbox"
 					checked={settings.showStatusIconsInExplorer}
-					onChange={handleChange("showStatusIconsInExplorer")}
+					onChange={handleCheckbox("showStatusIconsInExplorer")}
 				/>
 			</SettingItem>
 
@@ -259,7 +277,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				<input
 					type="checkbox"
 					checked={settings.hideUnknownStatusInExplorer || false}
-					onChange={handleChange("hideUnknownStatusInExplorer")}
+					onChange={handleCheckbox("hideUnknownStatusInExplorer")}
 				/>
 			</SettingItem>
 
@@ -270,7 +288,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				<input
 					type="checkbox"
 					checked={settings.fileExplorerColorFileName || false}
-					onChange={handleChange("fileExplorerColorFileName")}
+					onChange={handleCheckbox("fileExplorerColorFileName")}
 				/>
 			</SettingItem>
 
@@ -281,7 +299,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				<input
 					type="checkbox"
 					checked={settings.fileExplorerColorBlock || false}
-					onChange={handleChange("fileExplorerColorBlock")}
+					onChange={handleCheckbox("fileExplorerColorBlock")}
 				/>
 			</SettingItem>
 
@@ -294,7 +312,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				<input
 					type="checkbox"
 					checked={settings.fileExplorerLeftBorder || false}
-					onChange={handleChange("fileExplorerLeftBorder")}
+					onChange={handleCheckbox("fileExplorerLeftBorder")}
 				/>
 			</SettingItem>
 
@@ -305,7 +323,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				<input
 					type="checkbox"
 					checked={settings.fileExplorerStatusDot || false}
-					onChange={handleChange("fileExplorerStatusDot")}
+					onChange={handleCheckbox("fileExplorerStatusDot")}
 				/>
 			</SettingItem>
 
@@ -316,7 +334,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				<input
 					type="checkbox"
 					checked={settings.fileExplorerUnderlineFileName || false}
-					onChange={handleChange("fileExplorerUnderlineFileName")}
+					onChange={handleCheckbox("fileExplorerUnderlineFileName")}
 				/>
 			</SettingItem>
 
@@ -346,10 +364,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 							value: "status",
 							display: "Use custom status colors",
 						},
-						{
-							value: "theme",
-							display: "Use theme default colors",
-						},
+						{ value: "theme", display: "Use theme default colors" },
 					]}
 					defaultValue={
 						settings.fileExplorerIconColorMode || "status"
@@ -359,7 +374,61 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 					}
 				/>
 			</SettingItem>
+		</div>
+	);
+};
 
+export const UnknownStatusAppearanceSettings: React.FC<Props> = ({
+	settings,
+	onChange,
+}) => (
+	<div className="ui-settings__group">
+		<h3>Unknown / No-Status Appearance</h3>
+
+		<SettingItem
+			name="Icon for unknown status"
+			description="Emoji or Lucide icon name displayed whenever a note does not have a status."
+			vertical
+		>
+			<IconSelectionField
+				emojiValue={settings.unknownStatusIcon}
+				onEmojiChange={(value) => onChange("unknownStatusIcon", value)}
+				emojiPlaceholder="❓"
+				emojiHint="Type any emoji or text fallback."
+				lucideValue={settings.unknownStatusLucideIcon || ""}
+				onLucideChange={(value) =>
+					onChange("unknownStatusLucideIcon", value)
+				}
+				lucidePlaceholder="Choose Lucide icon"
+				lucideHint="Matches the Obsidian toolbar style."
+			/>
+		</SettingItem>
+
+		<SettingItem
+			name="Color for unknown status"
+			description="Hex color used for unknown statuses (e.g., #8b949e)."
+		>
+			<Input
+				variant="color"
+				value={settings.unknownStatusColor || "#8b949e"}
+				onChange={(value) => onChange("unknownStatusColor", value)}
+				placeholder="No status"
+			/>
+		</SettingItem>
+	</div>
+);
+
+export const ExperimentalSettings: React.FC<Props> = ({
+	settings,
+	onChange,
+}) => {
+	const handleCheckbox =
+		(key: keyof PluginSettings) =>
+		(e: React.ChangeEvent<HTMLInputElement>) =>
+			onChange(key, e.target.checked);
+
+	return (
+		<div className="ui-settings__group">
 			<h3>Experimental features</h3>
 
 			<SettingItem
@@ -369,7 +438,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 				<input
 					type="checkbox"
 					checked={settings.enableExperimentalFeatures || false}
-					onChange={handleChange("enableExperimentalFeatures")}
+					onChange={handleCheckbox("enableExperimentalFeatures")}
 				/>
 			</SettingItem>
 
@@ -381,7 +450,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 					type="checkbox"
 					disabled={!settings.enableExperimentalFeatures}
 					checked={settings.enableStatusDashboard || false}
-					onChange={handleChange("enableStatusDashboard")}
+					onChange={handleCheckbox("enableStatusDashboard")}
 				/>
 			</SettingItem>
 
@@ -393,42 +462,7 @@ export const UISettings: React.FC<Props> = ({ settings, onChange }) => {
 					type="checkbox"
 					disabled={!settings.enableExperimentalFeatures}
 					checked={settings.enableGroupedStatusView || false}
-					onChange={handleChange("enableGroupedStatusView")}
-				/>
-			</SettingItem>
-
-			<h3>Behavior & Other</h3>
-
-			<SettingItem
-				name="Icon for unknown status"
-				description="Emoji or Lucide icon name displayed whenever a note does not have a status."
-				vertical
-			>
-				<IconSelectionField
-					emojiValue={settings.unknownStatusIcon}
-					onEmojiChange={(value) =>
-						onChange("unknownStatusIcon", value)
-					}
-					emojiPlaceholder="❓"
-					emojiHint="Type any emoji or text fallback."
-					lucideValue={settings.unknownStatusLucideIcon || ""}
-					onLucideChange={(value) =>
-						onChange("unknownStatusLucideIcon", value)
-					}
-					lucidePlaceholder="Choose Lucide icon"
-					lucideHint="Matches the Obsidian toolbar style."
-				/>
-			</SettingItem>
-
-			<SettingItem
-				name="Color for unknown status"
-				description="Hex color used for unknown statuses (e.g., #8b949e)."
-			>
-				<Input
-					variant="color"
-					value={settings.unknownStatusColor || "#8b949e"}
-					onChange={(value) => onChange("unknownStatusColor", value)}
-					placeholder="No status"
+					onChange={handleCheckbox("enableGroupedStatusView")}
 				/>
 			</SettingItem>
 		</div>

components/SettingsUI/index.tsx

@@ -1,18 +1,44 @@
-import { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { PluginSettings } from "@/types/pluginSettings";
-import { UISettings } from "./UISettings";
 import { TemplateSettings } from "./TemplateSettings";
 import { BehaviourSettings } from "./BehaviourSettings";
 import { CustomStatusSettings } from "./CustomStatusSettings";
 import { QuickCommandsSettings } from "./QuickCommandsSettings";
+import {
+	EditorToolbarSettings,
+	ExperimentalSettings,
+	FileExplorerSettings,
+	StatusBarSettings,
+	UnknownStatusAppearanceSettings,
+} from "./UISettings";
 
 export type Props = {
 	settings: PluginSettings;
 	onChange: (key: keyof PluginSettings, value: unknown) => void;
 };
 
+type SectionId =
+	| "templates-statuses"
+	| "quick-actions"
+	| "status-bar"
+	| "editor-toolbar"
+	| "file-explorer"
+	| "unknown-appearance"
+	| "behavior-storage"
+	| "experimental-features";
+
+type SectionDefinition = {
+	id: SectionId;
+	label: string;
+	description: string;
+	content: React.ReactNode;
+};
+
 const SettingsUI: React.FC<Props> = ({ settings, onChange }) => {
 	const [localSettings, setLocalSettings] = useState(settings);
+	const [expandedSections, setExpandedSections] = useState<
+		Partial<Record<SectionId, boolean>>
+	>({});
 
 	useEffect(() => {
 		setLocalSettings(settings);
@@ -23,16 +49,152 @@ const SettingsUI: React.FC<Props> = ({ settings, onChange }) => {
 		onChange(key, value);
 	};
 
+	const sections: SectionDefinition[] = [
+		{
+			id: "templates-statuses",
+			label: "Templates & Statuses",
+			description:
+				"Enable predefined workflows or define your own statuses.",
+			content: (
+				<div className="note-status-settings__stack">
+					<TemplateSettings
+						settings={localSettings}
+						onChange={handleChange}
+					/>
+					<CustomStatusSettings
+						settings={localSettings}
+						onChange={handleChange}
+					/>
+				</div>
+			),
+		},
+		{
+			id: "quick-actions",
+			label: "Quick Actions",
+			description: "Choose statuses with command palette shortcuts.",
+			content: (
+				<QuickCommandsSettings
+					settings={localSettings}
+					onChange={handleChange}
+				/>
+			),
+		},
+		{
+			id: "status-bar",
+			label: "Status Bar",
+			description:
+				"Icon, popup, badge style/content, and no-status behavior.",
+			content: (
+				<StatusBarSettings
+					settings={localSettings}
+					onChange={handleChange}
+				/>
+			),
+		},
+		{
+			id: "editor-toolbar",
+			label: "Editor Toolbar",
+			description: "Button placement and visibility across panes.",
+			content: (
+				<EditorToolbarSettings
+					settings={localSettings}
+					onChange={handleChange}
+				/>
+			),
+		},
+		{
+			id: "file-explorer",
+			label: "File Explorer",
+			description:
+				"Icon placement, hiding unknown, and visual styling options.",
+			content: (
+				<FileExplorerSettings
+					settings={localSettings}
+					onChange={handleChange}
+				/>
+			),
+		},
+		{
+			id: "unknown-appearance",
+			label: "Unknown / No-Status Appearance",
+			description: "Fallback icon and color when a note lacks status.",
+			content: (
+				<UnknownStatusAppearanceSettings
+					settings={localSettings}
+					onChange={handleChange}
+				/>
+			),
+		},
+		{
+			id: "behavior-storage",
+			label: "Behavior & Storage",
+			description:
+				"Multi-status mode, tag key, mappings, and vault safeguards.",
+			content: (
+				<BehaviourSettings
+					settings={localSettings}
+					onChange={handleChange}
+				/>
+			),
+		},
+		{
+			id: "experimental-features",
+			label: "Experimental Features",
+			description: "Opt into dashboard and grouped view previews.",
+			content: (
+				<ExperimentalSettings
+					settings={localSettings}
+					onChange={handleChange}
+				/>
+			),
+		},
+	];
+
 	return (
 		<div className="note-status-settings">
-			<TemplateSettings settings={settings} onChange={handleChange} />
-			<UISettings settings={localSettings} onChange={handleChange} />
-			<BehaviourSettings settings={settings} onChange={handleChange} />
-			<CustomStatusSettings settings={settings} onChange={handleChange} />
-			<QuickCommandsSettings
-				settings={settings}
-				onChange={handleChange}
-			/>
+			{sections.map((section) => {
+				const isOpen = expandedSections[section.id] ?? false;
+				return (
+					<div
+						key={section.id}
+						className={`note-status-section ${
+							isOpen ? "is-open" : ""
+						}`}
+					>
+						<button
+							type="button"
+							className="note-status-section__header"
+							aria-expanded={isOpen}
+							onClick={() =>
+								setExpandedSections((prev) => ({
+									...prev,
+									[section.id]: !prev[section.id],
+								}))
+							}
+						>
+							<div className="note-status-section__title-block">
+								<div className="setting-item-name">
+									{section.label}
+								</div>
+								<div className="setting-item-description">
+									{section.description}
+								</div>
+							</div>
+							<span
+								className="note-status-section__chevron"
+								aria-hidden="true"
+							>
+								{isOpen ? "v" : ">"}
+							</span>
+						</button>
+						{isOpen ? (
+							<div className="note-status-section__content">
+								{section.content}
+							</div>
+						) : null}
+					</div>
+				);
+			})}
 		</div>
 	);
 };

styles/components/settings.css

@@ -4,6 +4,66 @@
 
 /* Settings use Obsidian's built-in classes mostly */
 
+.note-status-section {
+	border: 1px solid var(--background-modifier-border);
+	border-radius: var(--radius-m);
+	background: var(--background-primary);
+	margin-bottom: var(--size-4-3);
+	overflow: hidden;
+}
+
+.note-status-section__header {
+	width: 100%;
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: var(--size-4-1);
+	padding: var(--size-4-2) var(--size-4-3);
+	background: var(--background-secondary);
+	border: none;
+	color: inherit;
+	cursor: pointer;
+	text-align: left;
+}
+
+.note-status-section__header:hover {
+	background: var(--background-modifier-hover);
+}
+
+.note-status-section__title-block {
+	flex: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+	gap: var(--size-2-1);
+}
+
+.note-status-section__title-block .setting-item-name,
+.note-status-section__title-block .setting-item-description {
+	white-space: normal;
+	line-height: 1.4;
+}
+
+.note-status-section__title-block .setting-item-description {
+	color: var(--text-muted);
+}
+
+.note-status-section__chevron {
+	font-size: var(--font-ui-medium);
+	color: var(--text-muted);
+}
+
+.note-status-section__content {
+	padding: var(--size-4-3);
+	border-top: 1px solid var(--background-modifier-border);
+}
+
+.note-status-settings__stack {
+	display: flex;
+	flex-direction: column;
+	gap: var(--size-4-3);
+}
+
 /* Custom additions for Note Status settings */
 .setting-item-full {
 	width: 100%;