shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve toolbox reorder and checklist editing UX
All checks were successful
Deploy Sokko G / deploy (push) Successful in 8s
Details

Browse source
This commit is contained in:
Shinuwa 2026-08-02 22:12:33 +02:00
parent 1e4ac4259b
commit 8eb622e05d
11 changed files with 695 additions and 140 deletions
Download patch file Download diff file Expand all files Collapse all files

44
website/src/features/toolboxes/modules/TaskPlannerModule.jsx
View file

@ -2,6 +2,7 @@
import { useEffect, useMemo, useRef, useState } from "react";
import { Icon } from "../../../components/Icon.jsx";
import { InlineNotice } from "../../../components/AppOverlays.jsx";
import { useDraftForm } from "../../../hooks/useDraftForm.js";
import { applyGroupedReorderOperation, useGroupedReorder } from "../../../hooks/useGroupedReorder.js";
import { useInlineEdit } from "../../../hooks/useInlineEdit.js";
@ -222,8 +223,7 @@ function getRootTaskIdsForCategory(tasks, parentMap, category) {
export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
const data = context.normalizeTaskPlannerData(context.getModuleData(toolboxId, moduleId, { tasks: [] }));
const textContent = context.moduleText?.taskPlanner || {};
const [title, setTitle] = useState("");
const [type, setType] = useState("daily");
const taskDraft = useDraftForm({ title: "", type: "daily" });
const [nowMs, setNowMs] = useState(() => Date.now());
const [settingsOpen, setSettingsOpen] = useState(false);
const [openDescriptions, setOpenDescriptions] = useState(() => new Set());
@ -358,25 +358,25 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
});
function addTask(event) {
event.preventDefault();
const cleanTitle = title.trim();
if (!cleanTitle) return;
save({
...data,
tasks: [
...data.tasks,
{
id: context.uid("task"),
title: cleanTitle,
description: "",
type,
checked: false,
checkedAt: 0
}
]
taskDraft.handleSubmit(event, (draft, { reset }) => {
const cleanTitle = draft.title.trim();
if (!cleanTitle) return;
save({
...data,
tasks: [
...data.tasks,
{
id: context.uid("task"),
title: cleanTitle,
description: "",
type: draft.type,
checked: false,
checkedAt: 0
}
]
});
reset();
});
setTitle("");
setType("daily");
}
function updateTask(taskId, updater) {
@ -509,8 +509,8 @@ export function TaskPlannerModule({ toolboxId, moduleId, context, editing }) {
</div>
{editing && (
<form className="inline-form task-planner-add-form" onSubmit={addTask}>
<input name="title" placeholder={textContent.titlePlaceholder || "Nouvelle tâche"} value={title} onChange={(event) => setTitle(event.target.value)} />
<select value={type} onChange={(event) => setType(event.target.value)} aria-label={textContent.typeLabel || "Type"}>
<input {...taskDraft.getFieldProps("title", { placeholder: textContent.titlePlaceholder || "Nouvelle tâche" })} />
<select {...taskDraft.getFieldProps("type", { "aria-label": textContent.typeLabel || "Type" })}>
{TASK_TYPES.map((taskType) => <option key={taskType} value={taskType}>{getTaskTypeLabel(taskType, textContent)}</option>)}
</select>
<button className="primary">{textContent.addButton || "Ajouter"}</button>