ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-02-02 08:33:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): enhance BoardBackgroundModal with local state management for opacity sliders

Browse Source 
- Implemented local state for card, column, and card border opacity during slider dragging to improve user experience.
- Added useEffect to sync local state with store settings when not dragging.
- Updated handlers to commit changes to the store and persist settings upon slider release.
- Adjusted UI to reflect local state values for opacity sliders, ensuring immediate feedback during adjustments.
This commit is contained in:
Shirone
2026-01-20 23:58:00 +01:00
parent 4f584f9a89
commit 69ff8df7c1
3 changed files with 116 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/ui/src/hooks/use-board-background-settings.ts
View File

@@ -5,6 +5,10 @@ import { useUpdateProjectSettings } from '@/hooks/mutations';
/**
* Hook for managing board background settings with automatic persistence to server.
* Uses React Query mutation for server persistence with automatic error handling.
*
* For sliders, the modal uses local state during dragging and calls:
* - setCardOpacity/setColumnOpacity/setCardBorderOpacity to update store on commit
* - persistSettings directly to save to server on commit
*/
export function useBoardBackgroundSettings() {
const store = useAppStore();
@@ -65,22 +69,20 @@ export function useBoardBackgroundSettings() {
[store, persistSettings, getCurrentSettings]
);
// Update store (called on slider commit to update the board view)
const setCardOpacity = useCallback(
async (projectPath: string, opacity: number) => {
const current = getCurrentSettings(projectPath);
(projectPath: string, opacity: number) => {
store.setCardOpacity(projectPath, opacity);
await persistSettings(projectPath, { ...current, cardOpacity: opacity });
},
[store, persistSettings, getCurrentSettings]
[store]
);
// Update store (called on slider commit to update the board view)
const setColumnOpacity = useCallback(
async (projectPath: string, opacity: number) => {
const current = getCurrentSettings(projectPath);
(projectPath: string, opacity: number) => {
store.setColumnOpacity(projectPath, opacity);
await persistSettings(projectPath, { ...current, columnOpacity: opacity });
},
[store, persistSettings, getCurrentSettings]
[store]
);
const setColumnBorderEnabled = useCallback(
@@ -119,16 +121,12 @@ export function useBoardBackgroundSettings() {
[store, persistSettings, getCurrentSettings]
);
// Update store (called on slider commit to update the board view)
const setCardBorderOpacity = useCallback(
async (projectPath: string, opacity: number) => {
const current = getCurrentSettings(projectPath);
(projectPath: string, opacity: number) => {
store.setCardBorderOpacity(projectPath, opacity);
await persistSettings(projectPath, {
...current,
cardBorderOpacity: opacity,
});
},
[store, persistSettings, getCurrentSettings]
[store]
);
const setHideScrollbar = useCallback(
@@ -170,5 +168,6 @@ export function useBoardBackgroundSettings() {
setHideScrollbar,
clearBoardBackground,
getCurrentSettings,
persistSettings,
};
}