todo-calendar

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const elements = $.ui.resolve(e)
    const { Box, Text, Button } = elements
    // mobile 沒有 Input，那裡不提供編輯
    const Input = e.surface !== 'mobile' && 'Input' in elements ? elements.Input : undefined
    const tasks = await read($, tasksAtom)
    const offset = await read($, weekOffsetAtom)
    const today = (await read($, todayAtom)) || (await computeToday($))
    const selection = await read($, selectionAtom)
    const days = weekDays(today, offset)
    const weekTasks = tasksBetween(tasks, days[0], days[6])
    const isWide = e.props.bodyColumns >= WIDE_COLUMNS
    // 橫排時七欄之間有 6 格空隙
    const columnWidth = Math.floor((e.props.bodyColumns - 6) / 7)

    const taskTitle = (task: Task) => {
      if (task.done) {
        return (
          <Text dimColor strikethrough wrap="wrap">
            {task.title}
          </Text>
        )
      }
      if (isOverdue(task, today)) {
        return (
          <Text color="error" wrap="wrap">
            {task.title}
          </Text>
        )
      }

      return <Text wrap="wrap">{task.title}</Text>
    }

    const taskLine = (task: Task) => (
      <Box key={`task-${task.id}`} flexDirection="row" gap={1}>
        <Button
          key={`check-${task.id}`}
          plain
          label={task.done ? '✓' : '○'}
          dimColor={task.done}
          onPress={() => changeTask($, task.id, { done: !task.done })}
        />
        <Box flexGrow={1}>{taskTitle(task)}</Box>
        <Button
          key={`pick-${task.id}`}
          plain
          label="⋯"
          dimColor={selection?.id !== task.id}
          onPress={() =>
            update($, selectionAtom, held =>
              held?.id === task.id ? null : { id: task.id, mode: 'menu', title: task.title, date: task.date, error: '' },
            )
          }
        />
      </Box>
    )

    const selected = tasks.find(task => task.id === selection?.id)
    const close = () => update($, selectionAtom, () => null)
    // 週末都用藍色，今天用深金黃，整個面板只有今天最搶眼
    const headingColor = (date: string, isToday: boolean) => {
      if (isToday) {
        return TODAY_COLOR
      }
      const index = weekdayIndex(date)

      return index >= 5 ? 'suggestion' : undefined
    }

    const day = (date: string) => {
      const isToday = date === today
      const list = tasksOn(tasks, date)
      const color = headingColor(date, isToday)

      return (
        <Box
          key={`day-${date}`}
          flexDirection="column"
          width={isWide ? columnWidth : undefined}
          borderStyle={isWide || isToday ? 'round' : undefined}
          borderColor={isToday ? TODAY_COLOR : undefined}
          borderDimColor={!isToday}
          paddingX={isWide || isToday ? 1 : 0}
        >
          {/* 星期幾、日期標籤、今天的記號，彼此空一格 */}
          <Box flexDirection="row" flexWrap="wrap" alignItems="center" gap={1}>
            <Text bold color={color}>
              {WEEKDAY_NAMES[weekdayIndex(date)]}
            </Text>
            {/* 一行高的底色標籤：inverse 把字色當底色，平日用暗色底 */}
            <Text bold inverse color={color} dimColor={color === undefined}>
              {` ${shortDate(date)} `}
            </Text>
            {isToday && (
              <Text bold color={color}>
                ● 今天
              </Text>
            )}
          </Box>
          {list.length === 0 ? <Text dimColor>—</Text> : list.map(taskLine)}
        </Box>
      )
    }

    const pickedLabel = (picked: Task) =>
      `${picked.title}（${shortDate(picked.date)} ${WEEKDAY_NAMES[weekdayIndex(picked.date)]}）`

    const setDraft = (draft: Partial<Selection>) =>
      update($, selectionAtom, held => (held === null ? null : { ...held, ...draft }))

    /** 讀最新的草稿再存檔，避免用到畫面當下抓到的舊值 */
    const saveDraft = async (draft: Partial<Selection> = {}) => {
      const held = await read($, selectionAtom)
      if (held === null) {
        return
      }
      const title = (draft.title ?? held.title).trim()
      const date = (draft.date ?? held.date).trim()
      if (title === '') {
        await setDraft({ ...draft, error: '名稱不可空白。' })
        return
      }
      if (!isValidDate(date)) {
        await setDraft({ ...draft, error: '日期要用 YYYY-MM-DD 格式，例如 2026-10-07。' })
        return
      }
      await changeTask($, held.id, { title, date })
      await close()
    }

    const actionBar = (picked: Task, held: Selection) => {
      if (held.mode === 'edit' && Input !== undefined) {
        return (
          <Box flexDirection="column" borderStyle="round" borderColor="permission" paddingX={1} marginTop={1}>
            <Input
              key="edit-title"
              label="名稱 "
              value={held.title}
              autoFocus
              submitLabel="儲存"
              onInput={(title: string) => setDraft({ title })}
              onSubmit={(title: string) => saveDraft({ title })}
            />
            <Input
              key="edit-date"
              label="日期 "
              value={held.date}
              placeholder="YYYY-MM-DD"
              submitLabel="儲存"
              onInput={(date: string) => setDraft({ date })}
              onSubmit={(date: string) => saveDraft({ date })}
            />
            {held.error !== '' && <Text color="warning">{held.error}</Text>}
            <Box flexDirection="row" gap={2}>
              <Button key="save" plain label="儲存" onPress={() => saveDraft()} />
              <Button key="cancel" plain label="取消" onPress={close} />
            </Box>
          </Box>
        )