mirror of
https://github.com/devonthesofa/obsidian-note-status.git
synced 2026-07-22 05:45:04 +00:00
feat: reestructured settings
This commit is contained in:
Aleix Soler
parent
8ab5212a2c
commit
af606fddbe
4 changed files with 203 additions and 108 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,16 @@
|
|||
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;
|
||||
|
|
@ -12,11 +18,14 @@ export type Props = {
|
|||
};
|
||||
|
||||
type SectionId =
|
||||
| "templates"
|
||||
| "ui"
|
||||
| "behaviour"
|
||||
| "custom-statuses"
|
||||
| "quick-commands";
|
||||
| "templates-statuses"
|
||||
| "quick-actions"
|
||||
| "status-bar"
|
||||
| "editor-toolbar"
|
||||
| "file-explorer"
|
||||
| "unknown-appearance"
|
||||
| "behavior-storage"
|
||||
| "experimental-features";
|
||||
|
||||
type SectionDefinition = {
|
||||
id: SectionId;
|
||||
|
|
@ -42,28 +51,85 @@ const SettingsUI: React.FC<Props> = ({ settings, onChange }) => {
|
|||
|
||||
const sections: SectionDefinition[] = [
|
||||
{
|
||||
id: "templates",
|
||||
label: "Templates",
|
||||
description: "Enable predefined flows or build your own.",
|
||||
id: "templates-statuses",
|
||||
label: "Templates & Statuses",
|
||||
description:
|
||||
"Enable predefined workflows or define your own statuses.",
|
||||
content: (
|
||||
<TemplateSettings
|
||||
<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: "ui",
|
||||
label: "UI & Explorer",
|
||||
description: "Status bar, editor, and file explorer visuals.",
|
||||
id: "status-bar",
|
||||
label: "Status Bar",
|
||||
description:
|
||||
"Icon, popup, badge style/content, and no-status behavior.",
|
||||
content: (
|
||||
<UISettings settings={localSettings} onChange={handleChange} />
|
||||
<StatusBarSettings
|
||||
settings={localSettings}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "behaviour",
|
||||
label: "Behavior",
|
||||
description: "Frontmatter storage and validation rules.",
|
||||
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}
|
||||
|
|
@ -72,22 +138,11 @@ const SettingsUI: React.FC<Props> = ({ settings, onChange }) => {
|
|||
),
|
||||
},
|
||||
{
|
||||
id: "custom-statuses",
|
||||
label: "Custom Statuses",
|
||||
description: "Create and manage your own statuses.",
|
||||
id: "experimental-features",
|
||||
label: "Experimental Features",
|
||||
description: "Opt into dashboard and grouped view previews.",
|
||||
content: (
|
||||
<CustomStatusSettings
|
||||
settings={localSettings}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "quick-commands",
|
||||
label: "Quick Commands",
|
||||
description: "Choose statuses with command palette shortcuts.",
|
||||
content: (
|
||||
<QuickCommandsSettings
|
||||
<ExperimentalSettings
|
||||
settings={localSettings}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
|
|
@ -129,7 +184,7 @@ const SettingsUI: React.FC<Props> = ({ settings, onChange }) => {
|
|||
className="note-status-section__chevron"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{isOpen ? "▾" : "▸"}
|
||||
{isOpen ? "v" : ">"}
|
||||
</span>
|
||||
</button>
|
||||
{isOpen ? (
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -58,6 +58,12 @@
|
|||
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%;
|
||||
|
|
|
|||
Loading…
Reference in a new issue