@djangocfg/layouts 2.1.454 → 2.1.455

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.454",
+  "version": "2.1.455",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -89,12 +89,12 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.454",
-    "@djangocfg/centrifugo": "^2.1.454",
-    "@djangocfg/debuger": "^2.1.454",
-    "@djangocfg/i18n": "^2.1.454",
-    "@djangocfg/monitor": "^2.1.454",
-    "@djangocfg/ui-core": "^2.1.454",
+    "@djangocfg/api": "^2.1.455",
+    "@djangocfg/centrifugo": "^2.1.455",
+    "@djangocfg/debuger": "^2.1.455",
+    "@djangocfg/i18n": "^2.1.455",
+    "@djangocfg/monitor": "^2.1.455",
+    "@djangocfg/ui-core": "^2.1.455",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -125,14 +125,14 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.454",
-    "@djangocfg/centrifugo": "^2.1.454",
-    "@djangocfg/debuger": "^2.1.454",
-    "@djangocfg/i18n": "^2.1.454",
-    "@djangocfg/monitor": "^2.1.454",
-    "@djangocfg/typescript-config": "^2.1.454",
-    "@djangocfg/ui-core": "^2.1.454",
-    "@djangocfg/ui-tools": "^2.1.454",
+    "@djangocfg/api": "^2.1.455",
+    "@djangocfg/centrifugo": "^2.1.455",
+    "@djangocfg/debuger": "^2.1.455",
+    "@djangocfg/i18n": "^2.1.455",
+    "@djangocfg/monitor": "^2.1.455",
+    "@djangocfg/typescript-config": "^2.1.455",
+    "@djangocfg/ui-core": "^2.1.455",
+    "@djangocfg/ui-tools": "^2.1.455",
     "@types/node": "^25.2.3",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",

package/src/layouts/SettingsLayout/hooks/useSettingsUrl.ts

@@ -16,13 +16,15 @@
  *   store → URL : when the user opens/closes/switches section via the UI, we
  *                  push or replace the hash so it stays shareable.
  *
- * We lean on ui-core's `useLocation` (a `useSyncExternalStore` over a patched
- * history + `hashchange`) so this is framework-agnostic — no next/router import.
+ * The URL fragment is read/written via ui-core's `useHashState`, which writes
+ * straight to the History API (bypassing the router adapter) so the hash is set
+ * absolutely — this is what avoids the `#settings#settings/…` doubling under
+ * Next.js App Router + next-intl. It's framework-agnostic (Next / Wails / Vite).
  */
 
 import { useEffect, useRef } from 'react';
 
-import { useLocation, useNavigate } from '@djangocfg/ui-core/hooks';
+import { useHashState } from '@djangocfg/ui-core/hooks';
 
 import { useSettingsDialogStore } from '../store';
 
@@ -44,36 +46,30 @@ interface ParsedHash {
   section: string | null;
 }
 
-/** Parse `#settings/usage` → { open: true, section: 'usage' }. */
-function parseHash(hash: string, urlKey: string): ParsedHash {
-  // hash includes the leading '#': "#settings/usage"
-  const raw = hash.startsWith('#') ? hash.slice(1) : hash;
-  if (!raw) return { open: false, section: null };
+/**
+ * Parse a bare fragment (no leading '#', as `useHashState` yields):
+ * `"settings/usage"` → { open: true, section: 'usage' }.
+ */
+function parseHash(fragment: string, urlKey: string): ParsedHash {
+  if (!fragment) return { open: false, section: null };
 
-  const [key, ...rest] = raw.split('/');
+  const [key, ...rest] = fragment.split('/');
   if (key !== urlKey) return { open: false, section: null };
 
   const section = rest.join('/') || null;
   return { open: true, section };
 }
 
-/** Build `#settings/usage` (or `#settings` when no section). */
+/** Build the bare fragment `"settings/usage"` (or `"settings"` when no section). */
 function buildHash(urlKey: string, section: string | null): string {
-  return section ? `#${urlKey}/${section}` : `#${urlKey}`;
-}
-
-/** Strip a trailing hash, keeping pathname + search intact. */
-function urlWithoutHash(): string {
-  if (typeof window === 'undefined') return '/';
-  const { pathname, search } = window.location;
-  return `${pathname}${search}`;
+  return section ? `${urlKey}/${section}` : urlKey;
 }
 
 export function useSettingsUrl(options: UseSettingsUrlOptions = {}): void {
   const { urlKey = 'settings', enabled = true, resolveSection } = options;
 
-  const { hash } = useLocation();
-  const { navigate } = useNavigate();
+  // Bare fragment (without '#'); '' when there is no hash.
+  const [fragment, setFragment] = useHashState();
 
   const isOpen = useSettingsDialogStore((s) => s.isOpen);
   const activeSection = useSettingsDialogStore((s) => s.activeSection);
@@ -81,21 +77,21 @@ export function useSettingsUrl(options: UseSettingsUrlOptions = {}): void {
   const close = useSettingsDialogStore((s) => s.close);
 
   // Guard against the URL→store and store→URL effects fighting each other:
-  // when we write the hash ourselves we tag the value we wrote and skip the
+  // when we write the fragment ourselves we tag the value we wrote and skip the
   // next URL→store pass for that exact value.
-  const selfWrittenHash = useRef<string | null>(null);
+  const selfWrittenFragment = useRef<string | null>(null);
 
   // ── URL → store ──────────────────────────────────────────────────────────
   useEffect(() => {
     if (!enabled) return;
 
-    // Ignore the echo of a hash we just wrote ourselves.
-    if (selfWrittenHash.current === hash) {
-      selfWrittenHash.current = null;
+    // Ignore the echo of a fragment we just wrote ourselves.
+    if (selfWrittenFragment.current === fragment) {
+      selfWrittenFragment.current = null;
       return;
     }
 
-    const parsed = parseHash(hash, urlKey);
+    const parsed = parseHash(fragment, urlKey);
 
     if (parsed.open) {
       const resolved = resolveSection
@@ -108,31 +104,33 @@ export function useSettingsUrl(options: UseSettingsUrlOptions = {}): void {
       // Hash no longer points at us (back button, manual edit) → close.
       close();
     }
-    // We intentionally depend on `hash` only; isOpen is read fresh via the
+    // We intentionally depend on `fragment` only; isOpen is read fresh via the
     // store getter semantics above. Re-running on isOpen would double-fire.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hash, enabled, urlKey]);
+  }, [fragment, enabled, urlKey]);
 
   // ── store → URL ──────────────────────────────────────────────────────────
   useEffect(() => {
     if (!enabled) return;
     if (typeof window === 'undefined') return;
 
-    const current = window.location.hash;
+    const current = fragment;
 
     if (isOpen) {
       const next = buildHash(urlKey, activeSection);
       if (current !== next) {
-        selfWrittenHash.current = next;
-        // push so the back button can close; refresh keeps the section.
-        navigate(`${urlWithoutHash()}${next}`);
+        selfWrittenFragment.current = next;
+        // Push when we're *opening* (no settings fragment yet) so the back
+        // button closes the dialog; replace when only switching sections within
+        // an already-open dialog, so section clicks don't stack history entries.
+        const alreadyOurs = parseHash(current, urlKey).open;
+        setFragment(next, { replace: alreadyOurs });
       }
     } else {
-      // Only strip if the hash is *ours*; never clobber an unrelated hash.
-      const parsed = parseHash(current, urlKey);
-      if (parsed.open) {
-        selfWrittenHash.current = '';
-        navigate(urlWithoutHash(), { replace: true });
+      // Only strip if the fragment is *ours*; never clobber an unrelated hash.
+      if (parseHash(current, urlKey).open) {
+        selfWrittenFragment.current = '';
+        setFragment(null, { replace: true });
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps