feat(dashboard): create and edit scheduled tasks
This commit is contained in:
Eyejoker
@@ -1,15 +1,21 @@
|
||||
import { useEffect, useMemo, useState, type ReactNode } from 'react';
|
||||
|
||||
import {
|
||||
type CreateScheduledTaskInput,
|
||||
type DashboardInboxAction,
|
||||
type DashboardTaskContextMode,
|
||||
type DashboardTaskScheduleType,
|
||||
type DashboardTaskAction,
|
||||
type DashboardOverview,
|
||||
type DashboardTask,
|
||||
type UpdateScheduledTaskInput,
|
||||
type StatusSnapshot,
|
||||
createScheduledTask,
|
||||
fetchDashboardData,
|
||||
runInboxAction,
|
||||
runScheduledTaskAction,
|
||||
sendRoomMessage,
|
||||
updateScheduledTask,
|
||||
} from './api';
|
||||
import {
|
||||
LOCALES,
|
||||
@@ -37,11 +43,20 @@ type UsageLimitWindow = 'h5' | 'd7';
|
||||
type DashboardView = 'usage' | 'inbox' | 'health' | 'rooms' | 'scheduled';
|
||||
type TaskGroupKey = 'watchers' | 'scheduled' | 'paused' | 'completed';
|
||||
type TaskResultTone = 'ok' | 'fail' | 'none';
|
||||
type TaskActionKey = `${string}:${DashboardTaskAction}`;
|
||||
type TaskActionKey =
|
||||
| 'create'
|
||||
| `${string}:edit`
|
||||
| `${string}:${DashboardTaskAction}`;
|
||||
type InboxActionKey = `${string}:${DashboardInboxAction}`;
|
||||
type InboxFilter = 'all' | InboxItem['kind'];
|
||||
type HealthLevel = 'ok' | 'stale' | 'down';
|
||||
|
||||
interface RoomOption {
|
||||
jid: string;
|
||||
name: string;
|
||||
folder: string;
|
||||
}
|
||||
|
||||
const REFRESH_INTERVAL_MS = 15_000;
|
||||
const LOCALE_STORAGE_KEY = 'ejclaw.dashboard.locale.v2';
|
||||
const DEFAULT_VIEW: DashboardView = 'inbox';
|
||||
@@ -295,6 +310,85 @@ function taskActionsFor(task: DashboardTask): DashboardTaskAction[] {
|
||||
return [];
|
||||
}
|
||||
|
||||
function buildRoomOptions(snapshots: StatusSnapshot[]): RoomOption[] {
|
||||
const rooms = new Map<string, RoomOption>();
|
||||
for (const snapshot of snapshots) {
|
||||
for (const entry of snapshot.entries) {
|
||||
if (!rooms.has(entry.jid)) {
|
||||
rooms.set(entry.jid, {
|
||||
jid: entry.jid,
|
||||
name: entry.name || entry.folder || entry.jid,
|
||||
folder: entry.folder,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
return [...rooms.values()].sort((a, b) =>
|
||||
`${a.name} ${a.folder}`.localeCompare(`${b.name} ${b.folder}`),
|
||||
);
|
||||
}
|
||||
|
||||
function isTaskScheduleType(
|
||||
value: FormDataEntryValue | null,
|
||||
): value is DashboardTaskScheduleType {
|
||||
return value === 'cron' || value === 'interval' || value === 'once';
|
||||
}
|
||||
|
||||
function isTaskContextMode(
|
||||
value: FormDataEntryValue | null,
|
||||
): value is DashboardTaskContextMode {
|
||||
return value === 'group' || value === 'isolated';
|
||||
}
|
||||
|
||||
function readRequiredText(form: FormData, name: string): string | null {
|
||||
const value = form.get(name);
|
||||
if (typeof value !== 'string') return null;
|
||||
const trimmed = value.trim();
|
||||
return trimmed ? trimmed : null;
|
||||
}
|
||||
|
||||
function readTaskForm(
|
||||
form: FormData,
|
||||
includeRoom: true,
|
||||
): CreateScheduledTaskInput | null;
|
||||
function readTaskForm(
|
||||
form: FormData,
|
||||
includeRoom: false,
|
||||
): UpdateScheduledTaskInput | null;
|
||||
function readTaskForm(
|
||||
form: FormData,
|
||||
includeRoom: boolean,
|
||||
): CreateScheduledTaskInput | UpdateScheduledTaskInput | null {
|
||||
const prompt = readRequiredText(form, 'prompt');
|
||||
const scheduleValue = readRequiredText(form, 'scheduleValue');
|
||||
const scheduleTypeValue = form.get('scheduleType');
|
||||
if (!scheduleValue || !isTaskScheduleType(scheduleTypeValue)) {
|
||||
return null;
|
||||
}
|
||||
const scheduleType = scheduleTypeValue;
|
||||
|
||||
if (!includeRoom) {
|
||||
return prompt
|
||||
? { prompt, scheduleType, scheduleValue }
|
||||
: { scheduleType, scheduleValue };
|
||||
}
|
||||
|
||||
if (!prompt) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const roomJid = readRequiredText(form, 'roomJid');
|
||||
const contextMode = form.get('contextMode');
|
||||
if (!roomJid || !isTaskContextMode(contextMode)) return null;
|
||||
return {
|
||||
contextMode,
|
||||
prompt,
|
||||
roomJid,
|
||||
scheduleType,
|
||||
scheduleValue,
|
||||
};
|
||||
}
|
||||
|
||||
function inboxActionsFor(item: InboxItem): DashboardInboxAction[] {
|
||||
if (item.source !== 'paired-task') return [];
|
||||
if (
|
||||
@@ -1262,14 +1356,20 @@ function UsagePanel({
|
||||
|
||||
function TaskPanel({
|
||||
tasks,
|
||||
rooms,
|
||||
locale,
|
||||
onTaskAction,
|
||||
onTaskCreate,
|
||||
onTaskUpdate,
|
||||
taskActionKey,
|
||||
t,
|
||||
}: {
|
||||
tasks: DashboardTask[];
|
||||
rooms: RoomOption[];
|
||||
locale: Locale;
|
||||
onTaskAction: (task: DashboardTask, action: DashboardTaskAction) => void;
|
||||
onTaskCreate: (input: CreateScheduledTaskInput) => void;
|
||||
onTaskUpdate: (task: DashboardTask, input: UpdateScheduledTaskInput) => void;
|
||||
taskActionKey: TaskActionKey | null;
|
||||
t: Messages;
|
||||
}) {
|
||||
@@ -1301,12 +1401,73 @@ function TaskPanel({
|
||||
];
|
||||
}, [tasks]);
|
||||
|
||||
if (tasks.length === 0) {
|
||||
return <EmptyState>{t.tasks.empty}</EmptyState>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="task-board" aria-label={t.tasks.cardsAria}>
|
||||
<form
|
||||
className="task-create-form"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
const form = new FormData(event.currentTarget);
|
||||
const input = readTaskForm(form, true);
|
||||
if (!input) return;
|
||||
onTaskCreate(input);
|
||||
event.currentTarget.reset();
|
||||
}}
|
||||
>
|
||||
<div className="task-create-head">
|
||||
<span className="eyebrow">{t.tasks.createTitle}</span>
|
||||
<strong>{t.tasks.createSubtitle}</strong>
|
||||
</div>
|
||||
<label>
|
||||
<span>{t.tasks.room}</span>
|
||||
<select name="roomJid" required>
|
||||
<option value="">{t.tasks.selectRoom}</option>
|
||||
{rooms.map((room) => (
|
||||
<option key={room.jid} value={room.jid}>
|
||||
{room.name} · {room.folder}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="task-form-wide">
|
||||
<span>{t.tasks.prompt}</span>
|
||||
<textarea
|
||||
name="prompt"
|
||||
placeholder={t.tasks.promptPlaceholder}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>{t.tasks.scheduleType}</span>
|
||||
<select name="scheduleType" required>
|
||||
<option value="once">{t.tasks.scheduleTypes.once}</option>
|
||||
<option value="interval">{t.tasks.scheduleTypes.interval}</option>
|
||||
<option value="cron">{t.tasks.scheduleTypes.cron}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>{t.tasks.scheduleValue}</span>
|
||||
<input
|
||||
name="scheduleValue"
|
||||
placeholder={t.tasks.scheduleValueHint}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>{t.tasks.context}</span>
|
||||
<select name="contextMode" required>
|
||||
<option value="isolated">{t.tasks.contextModes.isolated}</option>
|
||||
<option value="group">{t.tasks.contextModes.group}</option>
|
||||
</select>
|
||||
</label>
|
||||
<button disabled={taskActionKey === 'create'} type="submit">
|
||||
{taskActionKey === 'create'
|
||||
? t.tasks.actions.busy
|
||||
: t.tasks.actions.create}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{tasks.length === 0 ? <EmptyState>{t.tasks.empty}</EmptyState> : null}
|
||||
{taskGroups.map((group) => {
|
||||
const label = t.tasks.groups[group.key];
|
||||
const groupHead = (
|
||||
@@ -1429,6 +1590,64 @@ function TaskPanel({
|
||||
{t.units.chars}
|
||||
</small>
|
||||
</details>
|
||||
|
||||
{!task.isWatcher && task.status !== 'completed' ? (
|
||||
<details className="task-edit">
|
||||
<summary>{t.tasks.actions.edit}</summary>
|
||||
<form
|
||||
className="task-edit-form"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
const form = new FormData(event.currentTarget);
|
||||
const input = readTaskForm(form, false);
|
||||
if (!input) return;
|
||||
onTaskUpdate(task, input);
|
||||
}}
|
||||
>
|
||||
<label className="task-form-wide">
|
||||
<span>{t.tasks.prompt}</span>
|
||||
<textarea
|
||||
name="prompt"
|
||||
placeholder={t.tasks.editPromptPlaceholder}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
<span>{t.tasks.scheduleType}</span>
|
||||
<select
|
||||
name="scheduleType"
|
||||
defaultValue={task.scheduleType}
|
||||
required
|
||||
>
|
||||
<option value="once">
|
||||
{t.tasks.scheduleTypes.once}
|
||||
</option>
|
||||
<option value="interval">
|
||||
{t.tasks.scheduleTypes.interval}
|
||||
</option>
|
||||
<option value="cron">
|
||||
{t.tasks.scheduleTypes.cron}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>{t.tasks.scheduleValue}</span>
|
||||
<input
|
||||
name="scheduleValue"
|
||||
defaultValue={task.scheduleValue}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
disabled={taskActionKey === `${task.id}:edit`}
|
||||
type="submit"
|
||||
>
|
||||
{taskActionKey === `${task.id}:edit`
|
||||
? t.tasks.actions.busy
|
||||
: t.tasks.actions.save}
|
||||
</button>
|
||||
</form>
|
||||
</details>
|
||||
) : null}
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
@@ -1534,6 +1753,34 @@ function App() {
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTaskCreate(input: CreateScheduledTaskInput) {
|
||||
setTaskActionKey('create');
|
||||
try {
|
||||
await createScheduledTask(input);
|
||||
await refresh(false);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setTaskActionKey(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTaskUpdate(
|
||||
task: DashboardTask,
|
||||
input: UpdateScheduledTaskInput,
|
||||
) {
|
||||
const actionKey: TaskActionKey = `${task.id}:edit`;
|
||||
setTaskActionKey(actionKey);
|
||||
try {
|
||||
await updateScheduledTask(task.id, input);
|
||||
await refresh(false);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setTaskActionKey(null);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleInboxAction(
|
||||
item: InboxItem,
|
||||
action: DashboardInboxAction,
|
||||
@@ -1605,6 +1852,8 @@ function App() {
|
||||
return <LoadingSkeleton t={t} />;
|
||||
}
|
||||
|
||||
const roomOptions = data ? buildRoomOptions(data.snapshots) : [];
|
||||
|
||||
return (
|
||||
<div className="shell">
|
||||
<SideRail
|
||||
@@ -1715,6 +1964,11 @@ function App() {
|
||||
onTaskAction={(task, action) =>
|
||||
void handleTaskAction(task, action)
|
||||
}
|
||||
onTaskCreate={(input) => void handleTaskCreate(input)}
|
||||
onTaskUpdate={(task, input) =>
|
||||
void handleTaskUpdate(task, input)
|
||||
}
|
||||
rooms={roomOptions}
|
||||
taskActionKey={taskActionKey}
|
||||
tasks={data.tasks}
|
||||
t={t}
|
||||
|
||||
@@ -102,6 +102,22 @@ export interface DashboardTask {
|
||||
|
||||
export type DashboardTaskAction = 'pause' | 'resume' | 'cancel';
|
||||
export type DashboardInboxAction = 'run';
|
||||
export type DashboardTaskScheduleType = 'cron' | 'interval' | 'once';
|
||||
export type DashboardTaskContextMode = 'group' | 'isolated';
|
||||
|
||||
export interface CreateScheduledTaskInput {
|
||||
roomJid: string;
|
||||
prompt: string;
|
||||
scheduleType: DashboardTaskScheduleType;
|
||||
scheduleValue: string;
|
||||
contextMode: DashboardTaskContextMode;
|
||||
}
|
||||
|
||||
export interface UpdateScheduledTaskInput {
|
||||
prompt?: string;
|
||||
scheduleType: DashboardTaskScheduleType;
|
||||
scheduleValue: string;
|
||||
}
|
||||
|
||||
async function fetchJson<T>(path: string): Promise<T> {
|
||||
const response = await fetch(path, {
|
||||
@@ -163,6 +179,37 @@ export async function runScheduledTaskAction(
|
||||
});
|
||||
}
|
||||
|
||||
export async function createScheduledTask(
|
||||
input: CreateScheduledTaskInput,
|
||||
): Promise<{ ok: true; task: DashboardTask | null }> {
|
||||
return postJson('/api/tasks', input);
|
||||
}
|
||||
|
||||
export async function updateScheduledTask(
|
||||
taskId: string,
|
||||
input: UpdateScheduledTaskInput,
|
||||
): Promise<{ ok: true; task: DashboardTask | null }> {
|
||||
const response = await fetch(`/api/tasks/${encodeURIComponent(taskId)}`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
accept: 'application/json',
|
||||
'content-type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(input),
|
||||
});
|
||||
if (!response.ok) {
|
||||
let message = `/api/tasks/${taskId} failed: ${response.status}`;
|
||||
try {
|
||||
const payload = (await response.json()) as { error?: string };
|
||||
if (payload.error) message = payload.error;
|
||||
} catch {
|
||||
// Keep the status-based message when the server body is not JSON.
|
||||
}
|
||||
throw new Error(message);
|
||||
}
|
||||
return (await response.json()) as { ok: true; task: DashboardTask | null };
|
||||
}
|
||||
|
||||
export async function runInboxAction(
|
||||
inboxId: string,
|
||||
action: DashboardInboxAction,
|
||||
|
||||
@@ -188,7 +188,28 @@ export interface Messages {
|
||||
noResult: string;
|
||||
noTime: string;
|
||||
now: string;
|
||||
createTitle: string;
|
||||
createSubtitle: string;
|
||||
room: string;
|
||||
selectRoom: string;
|
||||
scheduleType: string;
|
||||
scheduleValue: string;
|
||||
scheduleValueHint: string;
|
||||
promptPlaceholder: string;
|
||||
editPromptPlaceholder: string;
|
||||
scheduleTypes: {
|
||||
once: string;
|
||||
interval: string;
|
||||
cron: string;
|
||||
};
|
||||
contextModes: {
|
||||
isolated: string;
|
||||
group: string;
|
||||
};
|
||||
actions: {
|
||||
create: string;
|
||||
edit: string;
|
||||
save: string;
|
||||
pause: string;
|
||||
resume: string;
|
||||
cancel: string;
|
||||
@@ -415,7 +436,28 @@ export const messages = {
|
||||
noResult: '결과 없음',
|
||||
noTime: '-',
|
||||
now: '지금',
|
||||
createTitle: 'Create task',
|
||||
createSubtitle: 'Schedule work from web',
|
||||
room: 'Room',
|
||||
selectRoom: 'Select room',
|
||||
scheduleType: 'Type',
|
||||
scheduleValue: 'Value',
|
||||
scheduleValueHint: 'ISO time, ms, or cron',
|
||||
promptPlaceholder: 'What should the agent do?',
|
||||
editPromptPlaceholder: 'Leave blank to keep prompt',
|
||||
scheduleTypes: {
|
||||
once: 'Once',
|
||||
interval: 'Interval',
|
||||
cron: 'Cron',
|
||||
},
|
||||
contextModes: {
|
||||
isolated: 'Isolated',
|
||||
group: 'Group',
|
||||
},
|
||||
actions: {
|
||||
create: 'Create',
|
||||
edit: 'Edit',
|
||||
save: 'Save',
|
||||
pause: 'Pause',
|
||||
resume: 'Resume',
|
||||
cancel: 'Cancel',
|
||||
@@ -626,7 +668,28 @@ export const messages = {
|
||||
noResult: 'no result',
|
||||
noTime: '-',
|
||||
now: 'now',
|
||||
createTitle: 'Create task',
|
||||
createSubtitle: 'Schedule work from web',
|
||||
room: 'Room',
|
||||
selectRoom: 'Select room',
|
||||
scheduleType: 'Type',
|
||||
scheduleValue: 'Value',
|
||||
scheduleValueHint: 'ISO time, ms, or cron',
|
||||
promptPlaceholder: 'What should the agent do?',
|
||||
editPromptPlaceholder: 'Leave blank to keep prompt',
|
||||
scheduleTypes: {
|
||||
once: 'Once',
|
||||
interval: 'Interval',
|
||||
cron: 'Cron',
|
||||
},
|
||||
contextModes: {
|
||||
isolated: 'Isolated',
|
||||
group: 'Group',
|
||||
},
|
||||
actions: {
|
||||
create: 'Create',
|
||||
edit: 'Edit',
|
||||
save: 'Save',
|
||||
pause: 'Pause',
|
||||
resume: 'Resume',
|
||||
cancel: 'Cancel',
|
||||
@@ -837,7 +900,28 @@ export const messages = {
|
||||
noResult: '无结果',
|
||||
noTime: '-',
|
||||
now: '现在',
|
||||
createTitle: 'Create task',
|
||||
createSubtitle: 'Schedule work from web',
|
||||
room: 'Room',
|
||||
selectRoom: 'Select room',
|
||||
scheduleType: 'Type',
|
||||
scheduleValue: 'Value',
|
||||
scheduleValueHint: 'ISO time, ms, or cron',
|
||||
promptPlaceholder: 'What should the agent do?',
|
||||
editPromptPlaceholder: 'Leave blank to keep prompt',
|
||||
scheduleTypes: {
|
||||
once: 'Once',
|
||||
interval: 'Interval',
|
||||
cron: 'Cron',
|
||||
},
|
||||
contextModes: {
|
||||
isolated: 'Isolated',
|
||||
group: 'Group',
|
||||
},
|
||||
actions: {
|
||||
create: 'Create',
|
||||
edit: 'Edit',
|
||||
save: 'Save',
|
||||
pause: 'Pause',
|
||||
resume: 'Resume',
|
||||
cancel: 'Cancel',
|
||||
@@ -1048,7 +1132,28 @@ export const messages = {
|
||||
noResult: '結果なし',
|
||||
noTime: '-',
|
||||
now: '今',
|
||||
createTitle: 'Create task',
|
||||
createSubtitle: 'Schedule work from web',
|
||||
room: 'Room',
|
||||
selectRoom: 'Select room',
|
||||
scheduleType: 'Type',
|
||||
scheduleValue: 'Value',
|
||||
scheduleValueHint: 'ISO time, ms, or cron',
|
||||
promptPlaceholder: 'What should the agent do?',
|
||||
editPromptPlaceholder: 'Leave blank to keep prompt',
|
||||
scheduleTypes: {
|
||||
once: 'Once',
|
||||
interval: 'Interval',
|
||||
cron: 'Cron',
|
||||
},
|
||||
contextModes: {
|
||||
isolated: 'Isolated',
|
||||
group: 'Group',
|
||||
},
|
||||
actions: {
|
||||
create: 'Create',
|
||||
edit: 'Edit',
|
||||
save: 'Save',
|
||||
pause: 'Pause',
|
||||
resume: 'Resume',
|
||||
cancel: 'Cancel',
|
||||
|
||||
@@ -1138,6 +1138,104 @@ progress::-moz-progress-bar {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.task-create-form,
|
||||
.task-edit-form {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
|
||||
gap: 8px;
|
||||
align-items: end;
|
||||
padding: 12px;
|
||||
border: 1px solid rgba(43, 55, 38, 0.11);
|
||||
border-radius: 22px;
|
||||
background: rgba(255, 250, 240, 0.72);
|
||||
}
|
||||
|
||||
.task-edit-form {
|
||||
grid-template-columns:
|
||||
minmax(0, 1.4fr) minmax(110px, 0.6fr) minmax(0, 1fr)
|
||||
auto;
|
||||
margin-top: 8px;
|
||||
padding: 9px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.task-create-head {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.task-create-head strong {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
font-size: 16px;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.task-create-form label,
|
||||
.task-edit-form label {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 4px;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.task-create-form input,
|
||||
.task-create-form select,
|
||||
.task-create-form textarea,
|
||||
.task-edit-form input,
|
||||
.task-edit-form select,
|
||||
.task-edit-form textarea {
|
||||
width: 100%;
|
||||
min-height: 38px;
|
||||
border: 1px solid rgba(43, 55, 38, 0.14);
|
||||
border-radius: 13px;
|
||||
padding: 8px 10px;
|
||||
color: var(--ink);
|
||||
background: rgba(255, 250, 240, 0.86);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.task-create-form textarea,
|
||||
.task-edit-form textarea {
|
||||
min-height: 38px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.task-create-form input:focus-visible,
|
||||
.task-create-form select:focus-visible,
|
||||
.task-create-form textarea:focus-visible,
|
||||
.task-edit-form input:focus-visible,
|
||||
.task-edit-form select:focus-visible,
|
||||
.task-edit-form textarea:focus-visible {
|
||||
outline: 3px solid rgba(191, 95, 44, 0.18);
|
||||
}
|
||||
|
||||
.task-create-form button,
|
||||
.task-edit-form button {
|
||||
min-height: 38px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
padding: 0 14px;
|
||||
color: #fffaf0;
|
||||
background: var(--ink);
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: 950;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.task-create-form button:disabled,
|
||||
.task-edit-form button:disabled {
|
||||
cursor: progress;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.task-form-wide {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.task-group {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
@@ -1350,6 +1448,7 @@ progress::-moz-progress-bar {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.task-edit summary,
|
||||
.task-prompt summary {
|
||||
min-height: 32px;
|
||||
color: var(--accent-strong);
|
||||
@@ -1737,6 +1836,17 @@ progress::-moz-progress-bar {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.task-create-form,
|
||||
.task-edit-form {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 7px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.task-form-wide {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 8px;
|
||||
|
||||
Reference in New Issue
Block a user