Files
sure/app/javascript/controllers/app_layout_controller.js
pro3958 8a441582f9 fix(layout): persist sidebar collapse preference across reloads (#2764)
The app-layout Stimulus controller read this.userIdValue when saving
sidebar state but never declared a static values block, so Stimulus
did not bind data-app-layout-user-id-value. this.userIdValue was
undefined, and every toggle PATCHed /users/undefined, which could not
update show_sidebar or show_ai_sidebar. The preference was never
stored, so the layout reset on the next load.

Declare static values = { userId: String }. String is correct for
both UUID and integer ids since the value is only interpolated into
the request URL. The layout already renders the attribute and
UsersController#user_params already permits both fields, so the
update now completes.

Fixes #2473

Co-authored-by: agentloop <agentloop@localhost>
2026-07-30 07:20:32 +02:00

63 lines
2.0 KiB
JavaScript

import { Controller } from "@hotwired/stimulus";
// Connects to data-controller="dialog"
export default class extends Controller {
static targets = ["leftSidebar", "rightSidebar", "mobileSidebar"];
static values = { userId: String };
static classes = [
"expandedSidebar",
"collapsedSidebar",
"expandedTransition",
"collapsedTransition",
];
openMobileSidebar() {
this.mobileSidebarTarget.classList.remove("hidden");
}
closeMobileSidebar() {
this.mobileSidebarTarget.classList.add("hidden");
}
toggleLeftSidebar() {
const isOpen = this.leftSidebarTarget.classList.contains("w-full");
this.#updateUserPreference("show_sidebar", !isOpen);
this.#toggleSidebarWidth(this.leftSidebarTarget, isOpen, "left");
}
toggleRightSidebar() {
const isOpen = this.rightSidebarTarget.classList.contains("w-full");
this.#updateUserPreference("show_ai_sidebar", !isOpen);
this.#toggleSidebarWidth(this.rightSidebarTarget, isOpen, "right");
}
#toggleSidebarWidth(el, isCurrentlyOpen, side) {
const expandedClasses = side === "left" ? [...this.expandedSidebarClasses, "border-r"] : [...this.expandedSidebarClasses, "border-l"];
const collapsedClasses = side === "left" ? [...this.collapsedSidebarClasses, "border-r-0"] : [...this.collapsedSidebarClasses, "border-l-0"];
if (isCurrentlyOpen) {
el.classList.remove(...expandedClasses);
el.classList.add(...collapsedClasses);
el.inert = true;
} else {
el.classList.add(...expandedClasses);
el.classList.remove(...collapsedClasses);
el.inert = false;
}
}
#updateUserPreference(field, value) {
fetch(`/users/${this.userIdValue}`, {
method: "PATCH",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
"X-CSRF-Token": document.querySelector('[name="csrf-token"]').content,
Accept: "application/json",
},
body: new URLSearchParams({
[`user[${field}]`]: value,
}).toString(),
});
}
}