Merge pull request #8814 from streetwriters/feature/direct-navigation-to-setting-sections

Add support for direct navigation (via url) to setting sections

apps/web/src/dialogs/settings/index.tsx

@@ -82,6 +82,7 @@ import { mdToHtml } from "../../utils/md";
 import { InboxSettings } from "./inbox-settings";
 import { withFeatureCheck } from "../../common";
 import { NotesnookCircleSettings } from "./notesnook-circle-settings";
+import { hashNavigate } from "../../navigation";
 
 type SettingsDialogProps = BaseDialogProps<false> & {
   activeSection?: SectionKeys;
@@ -271,6 +272,12 @@ function SettingsSideBar(props: SettingsSideBarProps) {
   const [route, setRoute] = useState<SectionKeys>(activeSection || "profile");
   useUserStore((store) => store.isLoggedIn);
 
+  useEffect(() => {
+    hashNavigate(`/settings/${route}`, {
+      notify: false
+    });
+  }, [route, activeSection]);
+
   return (
     <FlexScrollContainer
       id="settings-side-menu"

apps/web/src/dialogs/settings/types.ts

@@ -20,29 +20,32 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { FeatureId } from "@notesnook/common";
 import { Icon } from "../../components/icons";
 
-export type SectionKeys =
-  | "profile"
-  | "auth"
-  | "subscription"
-  | "sync"
-  | "appearance"
-  | "behaviour"
-  | "desktop"
-  | "notifications"
-  | "servers"
-  | "editor"
-  | "backup-export"
-  | "export"
-  | "importer"
-  | "vault"
-  | "app-lock"
-  | "privacy"
-  | "support"
-  | "legal"
-  | "developer"
-  | "about"
-  | "inbox"
-  | "circle";
+const SectionKeys = [
+  "profile",
+  "auth",
+  "subscription",
+  "sync",
+  "appearance",
+  "behaviour",
+  "desktop",
+  "notifications",
+  "servers",
+  "editor",
+  "backup-export",
+  "export",
+  "importer",
+  "vault",
+  "app-lock",
+  "privacy",
+  "support",
+  "legal",
+  "developer",
+  "about",
+  "inbox",
+  "circle"
+] as const;
+
+export type SectionKeys = (typeof SectionKeys)[number];
 
 export type SectionGroupKeys =
   | "account"
@@ -153,3 +156,7 @@ export type TextInputSettingComponent = BaseSettingComponent<"input"> & {
 export type CustomSettingComponent = BaseSettingComponent<"custom"> & {
   component: () => JSX.Element | null;
 };
+
+export function isSectionKey(key: string): key is SectionKeys {
+  return SectionKeys.includes(key as SectionKeys);
+}

apps/web/src/navigation/hash-routes.tsx

@@ -33,6 +33,7 @@ import {
 import { FeatureDialog } from "../dialogs/feature-dialog";
 import { CreateTagDialog } from "../dialogs/item-dialog";
 import { OnboardingDialog } from "../dialogs/onboarding-dialog";
+import { isSectionKey, SectionKeys } from "../dialogs/settings/types";
 
 const hashroutes = defineHashRoutes({
   "/": () => {},
@@ -68,6 +69,11 @@ const hashroutes = defineHashRoutes({
   },
   "/settings": () => {
     SettingsDialog.show({}).then(afterAction);
+  },
+  "/settings/:section": ({ section }) => {
+    SettingsDialog.show(
+      isSectionKey(section) ? { activeSection: section as SectionKeys } : {}
+    ).then(afterAction);
   }
 });