Automatically scroll tab header into view when using keyboard navigation

locale/de.json

@@ -63,5 +63,7 @@
 	"Share feedback, issues, and ideas with our feedback form.": "Teile Feedback, Probleme und Ideen mit unserem Feedback Formular!",
 	"Consider donating to support development.": "Spende um die Entwicklung zu unterstützen.",
 	"Save": "Speichern",
-	"This Command is not available on this device.": "Dieser Befehl ist auf diesem Gerät nicht verfügbar."
+	"This Command is not available on this device.": "Dieser Befehl ist auf diesem Gerät nicht verfügbar.",
+	"Show": "Anzeigen",
+	"Hide": "Verstecken"
 }

locale/en.json

@@ -63,5 +63,7 @@
 	"Share feedback, issues, and ideas with our feedback form.": "Share feedback, issues, and ideas with our feedback form.",
 	"Consider donating to support development.": "Consider donating to support development.",
 	"Save": "Save",
-	"This Command is not available on this device.": "This Command is not available on this device."
+	"This Command is not available on this device.": "This Command is not available on this device.",
+	"Show": "Show",
+	"Hide": "Hide"
 }

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "cmdr",
 	"name": "Commander",
-	"version": "0.0.19",
+	"version": "0.0.20",
 	"minAppVersion": "0.15.0",
 	"description": "Customize your workspace by adding commands /everywhere/.",
 	"author": "jsmorabito & phibr0",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cmdr",
-	"version": "0.0.19",
+	"version": "0.0.20",
 	"description": "Customize your workspace by adding commands /everywhere/.",
 	"main": "main.js",
 	"scripts": {

src/styles.scss

@@ -96,9 +96,15 @@
 }
 
 .cmdr-accordion {
+	background-color: var(--background-primary);
+	padding: 12px;
+	border-radius: 12px;
+	margin-bottom: 16px;
+
 	.cmdr-accordion-chevron {
 		margin-left: 0;
 		margin-right: 4px;
+		height: 24px;
 		> svg {
 			transition: all 0.25s ease;
 		}
@@ -110,6 +116,10 @@
 		overflow: hidden;
 		margin-left: 14px;
 		padding-left: 14px;
+
+		.setting-item {
+			padding-top: 12px;
+		}
 	}
 
 	&[aria-expanded="false"] {
@@ -129,7 +139,6 @@
 
 		span {
 			font-weight: 600;
-			margin-bottom: 8px;
 			margin-top: 0;
 		}
 	}

src/ui/components/Accordion.tsx

@@ -7,7 +7,7 @@ interface ClosableProps extends ComponentProps<"details"> {
 	index: number;
 	children?: h.JSX.Element | h.JSX.Element[];
 }
-export default function Closable({ title, children, index }: ClosableProps): h.JSX.Element {
+export default function Accordion({ title, children, index }: ClosableProps): h.JSX.Element {
 	const [open, setOpen] = useState(false);
 
 	const toggleHandler = (): void => {

src/ui/components/hidingViewer.tsx

@@ -4,8 +4,8 @@ import { useEffect, useState } from "preact/hooks";
 import t from "src/l10n";
 import CommanderPlugin from "src/main";
 import { updateHiderStylesheet } from "src/util";
-import Closable from "./Closable";
-import { ToggleComponent } from "./settingComponent";
+import Accordion from "./Accordion";
+import { EyeToggleComponent } from "./settingComponent";
 
 export default function HidingViewer({ plugin }: { plugin: CommanderPlugin }): h.JSX.Element {
 	return (
@@ -20,15 +20,22 @@ function LeftRibbonHider({ plugin }: { plugin: CommanderPlugin }): h.JSX.Element
 	const [ribbonCommands, setRibbonCommands] = useState<{ name: string, icon: string }[]>([]);
 	const hiddenCommands = plugin.settings.hide.leftRibbon;
 	useEffect(() => {
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		setRibbonCommands([...app.workspace.leftRibbon.ribbonActionsEl!.children].filter((el) => !el.hasClass("cmdr")).map((el) => { return { name: el.getAttribute("aria-label")!, icon: el.firstElementChild!.className! }; }));
+		setRibbonCommands(
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			[...app.workspace.leftRibbon.ribbonActionsEl!.children]
+				.filter((el) => !el.hasClass("cmdr"))
+				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+				.map((el) => { return { name: el.getAttribute("aria-label")!, icon: el.firstElementChild!.className! }; })
+		);
 	}, []);
 
 	return (
-		<Closable index={0} title={t("Left Ribbon")}>
-			{ribbonCommands.map((command) => <ToggleComponent
+		<Accordion index={0} title={t("Left Ribbon")}>
+			{ribbonCommands.map((command) => <EyeToggleComponent
 				name={command.name}
 				description=""
+				hideLabel={t("Hide")}
+				showLabel={t("Show")}
 				changeHandler={async (value): Promise<void> => {
 					if (!value) {
 						hiddenCommands.push(command.name);
@@ -40,7 +47,7 @@ function LeftRibbonHider({ plugin }: { plugin: CommanderPlugin }): h.JSX.Element
 				}}
 				value={hiddenCommands.contains(command.name)}
 			/>)}
-		</Closable>
+		</Accordion>
 	);
 }
 
@@ -54,11 +61,13 @@ function StatusbarHider({ plugin }: { plugin: CommanderPlugin }): h.JSX.Element
 	}, []);
 
 	return (
-		<Closable index={1} title={t("Statusbar")}>
-			{pluginsWithRibbonItems.map((manifest) => <ToggleComponent
+		<Accordion index={1} title={t("Statusbar")}>
+			{pluginsWithRibbonItems.map((manifest) => <EyeToggleComponent
 				name={manifest.name}
 				description={manifest.description}
 				value={hiddenPlugins.contains(manifest.id)}
+				hideLabel={t("Hide")}
+				showLabel={t("Show")}
 				changeHandler={async (value): Promise<void> => {
 					if (!value) {
 						hiddenPlugins.push(manifest.id);
@@ -69,6 +78,6 @@ function StatusbarHider({ plugin }: { plugin: CommanderPlugin }): h.JSX.Element
 					await plugin.saveSettings();
 				}}
 			/>)}
-		</Closable>
+		</Accordion>
 	);
 }

src/ui/components/settingComponent.tsx

@@ -1,5 +1,6 @@
 import { h } from "preact";
 import { useState } from "preact/hooks";
+import { ObsidianIcon } from "src/util";
 
 interface BaseComponentProps {
 	children: h.JSX.Element;
@@ -40,3 +41,23 @@ export function ToggleComponent(props: SettingProps<boolean>): h.JSX.Element {
 		</BaseComponent>
 	);
 }
+
+interface EyeToggleSettingProps extends SettingProps<boolean> {
+	hideLabel: string;
+	showLabel: string;
+}
+export function EyeToggleComponent({ name, description, changeHandler, value, hideLabel, showLabel }: EyeToggleSettingProps): h.JSX.Element {
+	const [state, setState] = useState(value);
+
+	return (
+		<BaseComponent name={name} description={description} className="mod-toggle">
+			<ObsidianIcon
+				aria-label={state ? showLabel : hideLabel}
+				icon={state ? "eye-off" : "eye"}
+				size={20}
+				className="clickable-icon"
+				onClick={(): void => { setState(!state); changeHandler(state); }}
+			/>
+		</BaseComponent>
+	);
+}

src/ui/components/settingTabComponent.tsx

@@ -183,6 +183,8 @@ export function TabHeader({ tabs, activeTab, setActiveTab, setOpen }: TabHeaderP
 		return () => el.removeEventListener("wheel", handleScroll);
 	}, []);
 
+	useEffect(() => document.querySelector(".cmdr-tab-active")?.scrollIntoView({ behavior: "smooth", block: "nearest" }), [activeTab]);
+
 	return (
 		<nav class={`cmdr-setting-header ${Platform.isMobile ? "cmdr-mobile" : ""}`} ref={wrapper}>
 			<div className="cmdr-setting-tab-group">