From 8590a4767e3140abc14292aeeef426fd9c941f1b Mon Sep 17 00:00:00 2001
From: Josh Forisha <joshua.forisha@mightynetworks.com>
Date: Wed, 14 Sep 2022 15:24:25 -0500
Subject: [PATCH] Enable task flags

---
 _index.html | 467 +++++++++++++++++++++++++++++++++++++++-------------
 index.html  |   2 +-
 2 files changed, 355 insertions(+), 114 deletions(-)

diff --git a/_index.html b/_index.html
index 3fd12e2..0d92c0f 100644
--- a/_index.html
+++ b/_index.html
@@ -88,13 +88,6 @@
         background-color: var(--nordE);
       }
 
-      button.-handle {
-        background-color: var(--nord3);
-        color: var(--nord4);
-        cursor: grab;
-        margin-right: 5px;
-      }
-
       button.-icon {
         font-size: 1.5rem;
         line-height: 1;
@@ -105,6 +98,51 @@
         font-size: 0.67em;
       }
 
+      button.handle {
+        background-color: var(--nord3);
+        color: var(--nord4);
+        cursor: grab;
+      }
+
+      button[data-action="edit-flags"] {
+        background-color: var(--nord3);
+        color: var(--nord4);
+        margin-right: 5px;
+      }
+
+      button[data-action="start-task"] {
+        margin-left: 5px;
+      }
+
+      dialog {
+        align-items: center;
+        background-color: var(--nord6);
+        border-radius: 2px;
+        border-style: none;
+        flex-direction: column;
+      }
+
+      dialog[open] {
+        display: flex;
+      }
+
+      dialog::backdrop {
+        backdrop-filter: blur(5px);
+      }
+
+      dialog > form {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      fieldset {
+        border-style: none;
+        margin: 0 0 30px;
+        padding: 0;
+      }
+
       h1 {
         margin: 0;
       }
@@ -124,7 +162,20 @@
         margin-right: 10px;
       }
 
-      input {
+      input[type="checkbox"] {
+        appearance: none;
+        background-color: var(--nord0);
+        border-radius: 2px;
+        height: 1.25em;
+        padding: 0;
+        width: 1.25em;
+      }
+
+      input[type="checkbox"]:checked {
+        background-color: var(--nordE);
+      }
+
+      input[type="text"] {
         background-color: transparent;
         border-color: transparent;
         border-radius: 5px;
@@ -135,11 +186,34 @@
         width: 100%;
       }
 
-      input:focus-visible {
+      input[type="text"]:focus-visible {
         outline-color: var(--nord8);
         outline-style: solid;
       }
 
+      label {
+        align-items: center;
+        cursor: pointer;
+        display: flex;
+      }
+
+      label input[type="checkbox"] {
+        margin-right: 5px;
+      }
+
+      label input[type="checkbox"]:not(:checked) ~ span {
+        color: var(--nord4);
+        opacity: 0.6;
+      }
+
+      label:hover input[type="checkbox"]:not(:checked) {
+        background-color: var(--nord2);
+      }
+
+      label:hover input[type="checkbox"]:not(:checked) ~ span {
+        opacity: 0.8;
+      }
+
       section {
         background-color: var(--nord1);
         border-radius: 5px;
@@ -149,9 +223,45 @@
       }
 
       ul {
-        background-color: var(--nord1);
+        list-style-type: none;
         margin: 0;
-        padding-left: 30px;
+        padding-left: 0;
+      }
+
+      .task-item {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .task-item .content {
+        border-top: 1px solid var(--nord2);
+        display: flex;
+        margin-top: 5px;
+        padding-top: 5px;
+      }
+
+      .task-item .content input[type="text"] {
+        margin: 0 5px;
+      }
+
+      .task-item .flags {
+        align-items: flex-start;
+        display: flex;
+        flex-direction: column;
+        padding-left: calc(4rem + 64px);
+      }
+
+      .task-flag {
+        background-color: var(--nord5);
+        display: flex;
+        margin-bottom: 10px;
+      }
+
+      .task-flag input[type="text"] {
+      }
+
+      .tasks-list {
+        background-color: var(--nord1);
       }
 
       .timer {
@@ -250,22 +360,6 @@
         opacity: 0.5;
       }
 
-      #TodoTasks li {
-        border-top: 1px solid var(--nord2);
-        display: flex;
-        margin-top: 5px;
-        padding-top: 5px;
-      }
-
-      #TodoTasks li input {
-        margin: 0 5px;
-      }
-
-      #TodoTasks ul {
-        list-style-type: none;
-        padding-left: 0;
-      }
-
       @media screen and (min-width: 768px) {
         :root {
           font-size: 20px;
@@ -314,7 +408,7 @@ <h2>
         <button class="-small -good" id="AddTodo">Add Todo</button>
         <button class="-small -danger" disabled id="ClearTodos">Clear</button>
       </h2>
-      <ul></ul>
+      <ul class="tasks-list"></ul>
     </section>
     <section id="CompletedTasks">
       <h2>
@@ -332,6 +426,13 @@ <h1 id="BreakTime"></h1>
     <audio id="Chime">
       <source src="chime.wav" type="audio/wav" />
     </audio>
+    <dialog id="EditFlags">
+      <h2>FUN-2306-select-wallet</h2>
+      <form method="dialog">
+        <fieldset></fieldset>
+        <button type="submit">Close</button>
+      </form>
+    </dialog>
     <script>
       const emptyState = {
         completedTasks: [],
@@ -339,20 +440,24 @@ <h1 id="BreakTime"></h1>
         todoTasks: []
       }
 
-      const breakContainer = document.getElementById('Break')
-      const breakProgress = document.getElementById('BreakProgress')
-      const breakTime = document.getElementById('BreakTime')
-      const chimeAudio = document.getElementById('Chime')
-      const clearCompletedButton = document.getElementById('ClearCompleted')
-      const clearTodosButton = document.getElementById('ClearTodos')
-      const completedList = document.querySelector('#CompletedTasks ul')
-      const currentTask = document.getElementById('CurrentTask')
-      const currentTaskName = document.querySelector('#CurrentTask .name')
-      const currentTimer = document.querySelector('#CurrentTask .timer')
-      const finishTaskButton = document.getElementById('FinishTask')
-      const interruptedButton = document.getElementById('Interrupted')
-      const interruptedCount = document.querySelector('#Interrupted .count')
-      const todoList = document.querySelector('#TodoTasks ul')
+      const $ = (sel) => document.querySelector(sel)
+      const $$ = (sel) => Array.from(document.querySelectorAll(sel))
+
+      const breakContainer = $('#Break')
+      const breakProgress = $('#BreakProgress')
+      const breakTime = $('#BreakTime')
+      const chimeAudio = $('#Chime')
+      const clearCompletedButton = $('#ClearCompleted')
+      const clearTodosButton = $('#ClearTodos')
+      const completedList = $('#CompletedTasks ul')
+      const currentTask = $('#CurrentTask')
+      const currentTaskName = $('#CurrentTask .name')
+      const currentTimer = $('#CurrentTask .timer')
+      const editFlagsDialog = $('#EditFlags')
+      const finishTaskButton = $('#FinishTask')
+      const interruptedButton = $('#Interrupted')
+      const interruptedCount = $('#Interrupted .count')
+      const todoList = $('#TodoTasks ul')
 
       let breaking = false
       let currentTimerInterval = null
@@ -361,7 +466,11 @@ <h1 id="BreakTime"></h1>
       let state = JSON.parse(window.localStorage.getItem('state')) || emptyState
 
       function addTodo () {
-        const task = { id: Date.now().toString(), name: '' }
+        const task = {
+          flags: [],
+          id: generateId(),
+          name: ''
+        }
         appendTodo(task, true)
         updateState({ todoTasks: state.todoTasks.concat(task) })
       }
@@ -385,6 +494,7 @@ <h1 id="BreakTime"></h1>
 
       function appendTodo (task, focus = false) {
         const item = h('li', {
+          classes: ['task-item'],
           attributes: {
             'data-id': task.id
           },
@@ -410,68 +520,84 @@ <h1 id="BreakTime"></h1>
             }
           },
           children: [
-            h('button', {
-              textContent: '≡',
-              classes: ['-handle'],
-              actions: {
-                mousedown: event => {
-                  event.target.parentNode.setAttribute('draggable', 'true')
-                }
-              }
-            }),
-            h('button', {
-              textContent: 'Start',
-              classes: ['-start'],
-              attributes: {
-                disabled: task.name.length === 0 ? '' : undefined
-              },
-              actions: {
-                click: event => {
-                  todoList.removeChild(event.target.closest('li'))
-                  updateState({ todoTasks: state.todoTasks.filter(t => t.id !== task.id) })
-                  startTask(task)
-                }
-              }
-            }),
-            h('input', {
-              attributes: {
-                'aria-label': 'task name',
-                type: 'text',
-                value: task.name
-              },
-              actions: {
-                keydown: event => {
-                  if (event.key === 'Enter') event.target.blur()
-                },
-                input: event => {
-                  task.name = event.target.value
-                  if (event.target.value.length > 0 && state.currentTask === null && !breaking) {
-                    enable(event.target.closest('li').querySelector('button.-start'))
-                  } else {
-                    disable(event.target.closest('li').querySelector('button.-start'))
+            h('div', {
+              classes: ['content'],
+              children: [
+                h('button', {
+                  textContent: '≡',
+                  classes: ['handle'],
+                  actions: {
+                    mousedown: event => {
+                      event.target.parentNode.parentNode.setAttribute('draggable', 'true')
+                    }
                   }
-                  updateState({
-                    todoTasks: state.todoTasks.map(t => t.id === task.id ? task : t)
-                  })
-                }
-              }
-            }),
-            h('button', {
-              classes: ['-danger', '-icon'],
-              textContent: '×',
-              actions: {
-                click: event => {
-                  if (window.confirm('Are you sure?')) {
-                    todoList.removeChild(event.target.closest('li'))
-                    updateState({ todoTasks: state.todoTasks.filter(t => t.id !== task.id) })
+                }),
+                h('button', {
+                  textContent: 'Start',
+                  attributes: {
+                    'data-action': 'start-task',
+                    disabled: task.name.length === 0 ? '' : undefined
+                  },
+                  actions: {
+                    click: event => {
+                      todoList.removeChild(event.target.closest('li'))
+                      updateState({ todoTasks: state.todoTasks.filter(t => t.id !== task.id) })
+                      startTask(task)
+                    }
                   }
-                }
-              }
+                }),
+                h('input', {
+                  attributes: {
+                    'aria-label': 'task name',
+                    type: 'text',
+                    value: task.name
+                  },
+                  actions: {
+                    keydown: event => {
+                      if (event.key === 'Enter') event.target.blur()
+                    },
+                    input: event => {
+                      task.name = event.target.value
+                      const startButton = event.target.closest('li').querySelector('button[data-action="start-task"]')
+                      toggle(startButton, event.target.value.length > 0 && state.currentTask === null && !breaking)
+                      updateTodo(task)
+                    }
+                  }
+                }),
+                h('button', {
+                  textContent: '⋮',
+                  attributes: {
+                    'data-action': 'edit-flags'
+                  },
+                  actions: {
+                    click: () => {
+                      editFlags(task)
+                    }
+                  }
+                }),
+                h('button', {
+                  classes: ['-danger', '-icon'],
+                  textContent: '×',
+                  actions: {
+                    click: event => {
+                      if (window.confirm('Are you sure?')) {
+                        todoList.removeChild(event.target.closest('li'))
+                        updateState({ todoTasks: state.todoTasks.filter(t => t.id !== task.id) })
+                      }
+                    }
+                  }
+                })
+              ]
+            }),
+            h('div', {
+              classes: ['flags']
             })
           ]
         })
 
         todoList.appendChild(item)
+        renderTaskFlags(task)
+
         if (focus) setTimeout(() => item.querySelector('input').focus(), 5)
       }
 
@@ -489,6 +615,47 @@ <h1 id="BreakTime"></h1>
         }
       }
 
+      function editFlags (task) {
+        $('#EditFlags h2').textContent = task.name
+        const fieldset = $('#EditFlags fieldset')
+        fieldset.innerHTML = ''
+
+        const flagsList = h('ul', {
+          classes: ['flags-list']
+        })
+
+        for (const flag of task.flags) {
+          flagsList.appendChild(makeTaskFlag(task, flag))
+        }
+        fieldset.appendChild(flagsList)
+
+        const addButton = h('button', {
+          actions: {
+            click: () => {
+              const flag = {
+                checked: false,
+                id: generateId(),
+                name: ''
+              }
+              task.flags = task.flags.concat(flag)
+              updateTodo(task)
+              const flagEl = makeTaskFlag(task, flag)
+              flagsList.appendChild(flagEl)
+              flagEl.querySelector('input').focus()
+              renderTaskFlags(task)
+            }
+          },
+          attributes: {
+            type: 'button'
+          },
+          classes: ['-good'],
+          textContent: 'Add'
+        })
+        fieldset.appendChild(addButton)
+
+        editFlagsDialog.showModal()
+      }
+
       function enable (button) {
         if (button.hasAttribute('disabled')) {
           button.removeAttribute('disabled')
@@ -501,6 +668,10 @@ <h1 id="BreakTime"></h1>
         }
       }
 
+      function generateId () {
+        return Date.now().toString()
+      }
+
       function h (type, { actions, attributes, children, classes, textContent } = {}) {
         const element = document.createElement(type)
         if (attributes) {
@@ -512,7 +683,7 @@ <h1 id="BreakTime"></h1>
         if (textContent) element.textContent = textContent
         if (children) {
           children.forEach(child => {
-            element.appendChild(child)
+            if (child) element.appendChild(child)
           })
         }
         if (actions) {
@@ -523,6 +694,46 @@ <h1 id="BreakTime"></h1>
         return element
       }
 
+      function makeTaskFlag (task, flag) {
+        return h('li', {
+          classes: ['task-flag'],
+          children: [
+            h('input', {
+              attributes: {
+                'aria-label': 'flag name',
+                type: 'text',
+                value: flag.name
+              },
+              actions: {
+                input: event => {
+                  flag.name = event.target.value
+                  task.flags = task.flags.map(f => f.id === flag.id ? flag : f)
+                  updateTodo(task)
+                  renderTaskFlags(task)
+                }
+              }
+            }),
+            h('button', {
+              actions: {
+                click: () => {
+                  if (window.confirm('Are you sure?')) {
+                    $('#EditFlags ul').removeChild(event.target.closest('li'))
+                    task.flags = task.flags.filter(f => f.id !== flag.id)
+                    updateTodo(task)
+                    renderTaskFlags(task)
+                  }
+                }
+              },
+              attributes: {
+                type: 'button'
+              },
+              classes: ['-danger', '-icon'],
+              textContent: '×'
+            })
+          ]
+        })
+      }
+
       function populateCurrentTask (task) {
         currentTaskName.textContent = task.name
         const updateCount = () => {
@@ -549,6 +760,41 @@ <h1 id="BreakTime"></h1>
         state.completedTasks.forEach(t => appendCompleted(t))
       }
 
+      function updateTodo (task) {
+        updateState({
+          todoTasks: state.todoTasks.map(t => t.id === task.id ? task : t)
+        })
+      }
+
+      function renderTaskFlags (task) {
+        const flagsList = $(`.task-item[data-id="${task.id}"] .flags`)
+        flagsList.innerHTML = ''
+        for (const flag of task.flags) {
+          flagsList.appendChild(
+            h('label', {
+              children: [
+                h('input', {
+                  actions: {
+                    input: event => {
+                      flag.checked = event.target.checked
+                      task.flags = task.flags.map(f => f.id === flag.id ? flag : f)
+                      updateTodo(task)
+                    }
+                  },
+                  attributes: {
+                    checked: flag.checked ? '' : undefined,
+                    type: 'checkbox'
+                  }
+                }),
+                h('span', {
+                  textContent: flag.name
+                })
+              ]
+            })
+          )
+        }
+      }
+
       function renderTodoList () {
         todoList.innerHTML = ''
         state.todoTasks.forEach(t => appendTodo(t))
@@ -570,7 +816,7 @@ <h1 id="BreakTime"></h1>
           if (breaking && elapsedMs >= (breakMs - 250)) {
             breakContainer.classList.remove('-active')
             breaking = false
-            Array.from(document.querySelectorAll('button.-start'))
+            $$('button.start')
               .filter(b => b.nextSibling.value.length > 0)
               .forEach(b => enable(b))
           }
@@ -594,6 +840,11 @@ <h1 id="BreakTime"></h1>
         })
       }
 
+      function toggle (button, okay) {
+        if (okay) return enable(button)
+        disable(button)
+      }
+
       function updateState (changes) {
         if (changes) state = { ...state, ...changes }
         window.localStorage.setItem('state', JSON.stringify(state))
@@ -605,21 +856,11 @@ <h1 id="BreakTime"></h1>
           interruptedCount.textContent = state.currentTask.interruptions.toString()
           enable(finishTaskButton)
           enable(interruptedButton)
-          Array.from(document.querySelectorAll('button.-start'))
-            .forEach(b => disable(b))
-        }
-
-        if (state.todoTasks.length > 0) {
-          enable(clearTodosButton)
-        } else {
-          disable(clearTodosButton)
+          $$('button.start').forEach(b => disable(b))
         }
 
-        if (state.completedTasks.length > 0) {
-          enable(clearCompletedButton)
-        } else {
-          disable(clearCompletedButton)
-        }
+        toggle(clearTodosButton, state.todoTasks.length > 0)
+        toggle(clearCompletedButton, state.completedTasks.length > 0)
       }
 
       if (state.currentTask) {
diff --git a/index.html b/index.html
index a01bfeb..3e45586 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><meta charset="UTF-8"><meta http-equiv="Content-Security-Policy"content="object-src 'none'; script-src 'unsafe-inline' 'self'"><meta name="description"content="A very simple interface for managing Flowtime tasks"><meta name="msapplication-TileColor"content="#DA532C"><meta name="theme-color"content="#5E81AC"><meta name="viewport"content="initial-scale=1,width=device-width"><title>Flowtime</title><link rel="apple-touch-icon"href="./apple-touch-icon.png"><link rel="icon"href="./icon-16.png"sizes="16x16"><link rel="icon"href="./icon-32.png"sizes="32x32"><link rel="manifest"href="./manifest.json"><link rel="mask-icon"href="./safari-pinned-tab.svg"color="#4C566A"><style>:root{font-size:18px;line-height:1.5;--nord0:#2e3440;--nord1:#3b4252;--nord2:#434c5e;--nord3:#4c566a;--nord4:#d8dee9;--nord5:#e5e9f0;--nord6:#eceff4;--nord7:#8fbcbb;--nord8:#88c0d0;--nord9:#81a1c1;--nordA:#5e81ac;--nordB:#bf616a;--nordC:#d08770;--nordD:#ebcb8b;--nordE:#a3be8c;--nordF:#b48ead;--sans-serif-fonts:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Ubuntu,roboto,noto,arial,sans-serif}*{box-sizing:border-box}body{background-color:var(--nord0);color:var(--nord4);font-family:var(--sans-serif-fonts);font-weight:300;margin:0 auto;padding:20px}button{align-items:center;background-color:var(--nord4);border-radius:2px;border-width:0;color:var(--nord0);cursor:pointer;display:inline-flex;flex-shrink:0;font-family:inherit;font-size:1em;justify-content:center;min-height:44px;min-width:44px;padding:0 20px}button:disabled{cursor:not-allowed;opacity:.25}button.-caution{background-color:var(--nordD)}button.-danger{background-color:var(--nordB);color:var(--nord6)}button.-good{background-color:var(--nordE)}button.-handle{background-color:var(--nord3);color:var(--nord4);cursor:grab;margin-right:5px}button.-icon{font-size:1.5rem;line-height:1;padding:0}button.-small{font-size:.67em}h1{margin:0}h2{align-items:center;display:flex;font-weight:300;margin:0 0 20px}h2>span:first-child{flex-grow:1}h2>:not(:last-child){margin-right:10px}input{background-color:transparent;border-color:transparent;border-radius:5px;border-style:solid;color:inherit;font:inherit;padding:0 5px;width:100%}input:focus-visible{outline-color:var(--nord8);outline-style:solid}section{background-color:var(--nord1);border-radius:5px;display:block;margin-top:2.5rem;padding:10px}ul{background-color:var(--nord1);margin:0;padding-left:30px}.timer{font-size:.8em;margin-left:10px;opacity:.5}.timer::after{content:")";opacity:.5}.timer::before{content:"(";opacity:.5}#Break{align-items:center;background-color:var(--nord0);display:flex;flex-direction:column;height:8rem;justify-content:center;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transition:opacity 250ms ease-out;width:100%}#Break.-active{opacity:1;pointer-events:auto}#BreakProgress{background-color:var(--nord4);height:100%;width:0}#BreakProgressBar{border:2px solid var(--nord4);border-radius:5px;height:10px;margin-top:10px;max-width:20rem;overflow:hidden;width:90vw}#Controls{align-items:center;display:flex;margin-top:20px}#Controls button{margin-right:20px}#CurrentTask{opacity:0;pointer-events:none;transition:opacity .2s ease-out}#CurrentTask.-busy{opacity:1;pointer-events:auto}#CurrentTask button{margin-right:10px}#CurrentTask .name{display:block;font-size:2rem;line-height:1;margin-bottom:20px;min-height:2rem}#Interrupted{width:9rem}#Interrupted .count{font-size:.85em;margin-left:10px;opacity:.5}#TodoTasks li{border-top:1px solid var(--nord2);display:flex;margin-top:5px;padding-top:5px}#TodoTasks li input{margin:0 5px}#TodoTasks ul{list-style-type:none;padding-left:0}@media screen and (min-width:768px){:root{font-size:20px}}@media screen and (min-width:1024px){:root{font-size:22px}}@media screen and (min-width:1440px){:root{font-size:24px}}@media screen and (hover:hover){button{opacity:.9;transition:opacity .1s ease-out}button:not(:disabled):hover{opacity:1}}</style><div id="CurrentTask"><span class="name"></span> <button class="-good"disabled="disabled"id="FinishTask">Finish <span class="timer"></span></button> <button class="-caution"disabled="disabled"id="Interrupted">Interrupted <span class="count">—</span></button></div><section id="TodoTasks"><h2><span>Todo</span> <button class="-small -good"id="AddTodo">Add Todo</button> <button class="-small -danger"disabled="disabled"id="ClearTodos">Clear</button></h2><ul></ul></section><section id="CompletedTasks"><h2><span>Completed</span> <button class="-small -danger"disabled="disabled"id="ClearCompleted">Clear</button></h2><ul></ul></section><div id="Break"><h1 id="BreakTime"></h1><div id="BreakProgressBar"><div id="BreakProgress"></div></div></div><audio id="Chime"><source src="chime.wav"type="audio/wav"></audio><script>const emptyState={completedTasks:[],currentTask:null,todoTasks:[]},breakContainer=document.getElementById("Break"),breakProgress=document.getElementById("BreakProgress"),breakTime=document.getElementById("BreakTime"),chimeAudio=document.getElementById("Chime"),clearCompletedButton=document.getElementById("ClearCompleted"),clearTodosButton=document.getElementById("ClearTodos"),completedList=document.querySelector("#CompletedTasks ul"),currentTask=document.getElementById("CurrentTask"),currentTaskName=document.querySelector("#CurrentTask .name"),currentTimer=document.querySelector("#CurrentTask .timer"),finishTaskButton=document.getElementById("FinishTask"),interruptedButton=document.getElementById("Interrupted"),interruptedCount=document.querySelector("#Interrupted .count"),todoList=document.querySelector("#TodoTasks ul");let breaking=!1,currentTimerInterval=null,currentTimerTimeout=null,draggingItem,state=JSON.parse(window.localStorage.getItem("state"))||emptyState;function addTodo(){var t={id:Date.now().toString(),name:""};appendTodo(t,!0),updateState({todoTasks:state.todoTasks.concat(t)})}function appendCompleted(t){var e=Math.ceil((t.finished-t.started)/6e4),n=0<t.interruptions?`, ${t.interruptions} interruption`+(1===t.interruptions?"":"s"):"";completedList.appendChild(h("li",{textContent:t.name,children:[h("span",{classes:["timer"],textContent:e+" min"+n})]}))}function appendTodo(e,t=!1){const n=h("li",{attributes:{"data-id":e.id},actions:{dragend:t=>{updateState({todoTasks:Array.from(todoList.children).map(e=>state.todoTasks.find(t=>t.id===e.getAttribute("data-id")))}),draggingItem.removeAttribute("draggable"),draggingItem=void 0},dragstart:(t,e)=>{draggingItem=e},dragover:(t,e)=>{var n;if(t.preventDefault(),e!==draggingItem)return t=findTodoIndex(draggingItem),n=findTodoIndex(e),n<t?todoList.insertBefore(draggingItem,e):n===todoList.children.length-1?todoList.appendChild(draggingItem):void todoList.insertBefore(draggingItem,todoList.children.item(n+1))}},children:[h("button",{textContent:"≡",classes:["-handle"],actions:{mousedown:t=>{t.target.parentNode.setAttribute("draggable","true")}}}),h("button",{textContent:"Start",classes:["-start"],attributes:{disabled:0===e.name.length?"":void 0},actions:{click:t=>{todoList.removeChild(t.target.closest("li")),updateState({todoTasks:state.todoTasks.filter(t=>t.id!==e.id)}),startTask(e)}}}),h("input",{attributes:{"aria-label":"task name",type:"text",value:e.name},actions:{keydown:t=>{"Enter"===t.key&&t.target.blur()},input:t=>{e.name=t.target.value,(0<t.target.value.length&&null===state.currentTask&&!breaking?enable:disable)(t.target.closest("li").querySelector("button.-start")),updateState({todoTasks:state.todoTasks.map(t=>t.id===e.id?e:t)})}}}),h("button",{classes:["-danger","-icon"],textContent:"×",actions:{click:t=>{window.confirm("Are you sure?")&&(todoList.removeChild(t.target.closest("li")),updateState({todoTasks:state.todoTasks.filter(t=>t.id!==e.id)}))}}})]});todoList.appendChild(n),t&&setTimeout(()=>n.querySelector("input").focus(),5)}function breakMinutes(t){return t<=4?1:t<=25?5:t<=50?8:t<=90?10:15}function disable(t){t.hasAttribute("disabled")||t.setAttribute("disabled","")}function enable(t){t.hasAttribute("disabled")&&t.removeAttribute("disabled")}function findTodoIndex(t){for(var e in todoList.children)if(todoList.children.item(e)===t)return e}function h(t,{actions:e,attributes:n,children:r,classes:a,textContent:o}={}){const s=document.createElement(t);return n&&Object.entries(n).forEach(([t,e])=>{void 0!==e&&s.setAttribute(t,e)}),a&&s.classList.add(...a),o&&(s.textContent=o),r&&r.forEach(t=>{s.appendChild(t)}),e&&Object.entries(e).forEach(([t,e])=>{s.addEventListener(t,t=>e(t,s))}),s}function populateCurrentTask(e){currentTaskName.textContent=e.name;const t=()=>{var t=Math.ceil((Date.now()-e.started)/6e4);currentTimer.textContent=Math.max(1,t)+" min"};t();var n=Date.now()%6e4,r=e.started%6e4,r=r<n?6e4+r-n:r-n;currentTimerTimeout=setTimeout(()=>{t(),currentTimerTimeout=null,currentTimerInterval=setInterval(t,6e4)},r),interruptedCount.textContent="0",currentTask.classList.add("-busy")}function renderCompletedList(){completedList.innerHTML="",state.completedTasks.forEach(t=>appendCompleted(t))}function renderTodoList(){todoList.innerHTML="",state.todoTasks.forEach(t=>appendTodo(t))}function startBreak(t){breaking=!0;const e=6e4*breakMinutes(t),n=Date.now();let r=Math.ceil(e/1e3);breakTime.textContent=r,breakProgress.style.width="0%",breakContainer.classList.add("-active");const a=setInterval(()=>{var t=Date.now()-n;r=Math.ceil((e-t)/1e3),breakTime.textContent=r,breakProgress.style.width=100*t/e+"%",breaking&&t>=e-250&&(breakContainer.classList.remove("-active"),breaking=!1,Array.from(document.querySelectorAll("button.-start")).filter(t=>0<t.nextSibling.value.length).forEach(t=>enable(t))),t>=e&&(chimeAudio.play(),clearInterval(a))},250)}function startTask(e){var t={...e,interruptions:0,started:Date.now()};populateCurrentTask(t),updateState({currentTask:t,todoTasks:state.todoTasks.filter(t=>t.id!==e.id)})}function updateState(t){t&&(state={...state,...t}),window.localStorage.setItem("state",JSON.stringify(state)),null===state.currentTask?(disable(finishTaskButton),disable(interruptedButton)):(interruptedCount.textContent=state.currentTask.interruptions.toString(),enable(finishTaskButton),enable(interruptedButton),Array.from(document.querySelectorAll("button.-start")).forEach(t=>disable(t))),(0<state.todoTasks.length?enable:disable)(clearTodosButton),(0<state.completedTasks.length?enable:disable)(clearCompletedButton)}state.currentTask&&populateCurrentTask(state.currentTask),renderTodoList(),renderCompletedList(),finishTaskButton.addEventListener("click",()=>{var t={...state.currentTask,finished:Date.now()};appendCompleted(t),currentTask.classList.remove("-busy"),interruptedCount.textContent="—",breakContainer.classList.add("-active"),currentTimerTimeout&&(clearTimeout(currentTimerTimeout),currentTimerTimeout=null),currentTimerInterval&&(clearInterval(currentTimerInterval),currentTimerInterval=null),setTimeout(()=>{currentTaskName.textContent=""},200),startBreak(Math.ceil((t.finished-t.started)/6e4)),updateState({completedTasks:state.completedTasks.concat(t),currentTask:null})}),interruptedButton.addEventListener("click",()=>{updateState({currentTask:{...state.currentTask,interruptions:state.currentTask.interruptions+1}})}),document.getElementById("AddTodo").addEventListener("click",addTodo),clearCompletedButton.addEventListener("click",()=>{window.confirm("Are you sure?")&&(completedList.innerHTML="",updateState({completedTasks:[]}))}),clearTodosButton.addEventListener("click",()=>{window.confirm("Are you sure?")&&(todoList.innerHTML="",updateState({todoTasks:[]}))}),updateState(),window.addEventListener("keydown",t=>{t.target===document.body&&"a"===t.key&&addTodo()})</script>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"><meta charset="UTF-8"><meta http-equiv="Content-Security-Policy"content="object-src 'none'; script-src 'unsafe-inline' 'self'"><meta name="description"content="A very simple interface for managing Flowtime tasks"><meta name="msapplication-TileColor"content="#DA532C"><meta name="theme-color"content="#5E81AC"><meta name="viewport"content="initial-scale=1,width=device-width"><title>Flowtime</title><link rel="apple-touch-icon"href="./apple-touch-icon.png"><link rel="icon"href="./icon-16.png"sizes="16x16"><link rel="icon"href="./icon-32.png"sizes="32x32"><link rel="manifest"href="./manifest.json"><link rel="mask-icon"href="./safari-pinned-tab.svg"color="#4C566A"><style>:root{font-size:18px;line-height:1.5;--nord0:#2e3440;--nord1:#3b4252;--nord2:#434c5e;--nord3:#4c566a;--nord4:#d8dee9;--nord5:#e5e9f0;--nord6:#eceff4;--nord7:#8fbcbb;--nord8:#88c0d0;--nord9:#81a1c1;--nordA:#5e81ac;--nordB:#bf616a;--nordC:#d08770;--nordD:#ebcb8b;--nordE:#a3be8c;--nordF:#b48ead;--sans-serif-fonts:-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Ubuntu,roboto,noto,arial,sans-serif}*{box-sizing:border-box}body{background-color:var(--nord0);color:var(--nord4);font-family:var(--sans-serif-fonts);font-weight:300;margin:0 auto;padding:20px}button{align-items:center;background-color:var(--nord4);border-radius:2px;border-width:0;color:var(--nord0);cursor:pointer;display:inline-flex;flex-shrink:0;font-family:inherit;font-size:1em;justify-content:center;min-height:44px;min-width:44px;padding:0 20px}button:disabled{cursor:not-allowed;opacity:.25}button.-caution{background-color:var(--nordD)}button.-danger{background-color:var(--nordB);color:var(--nord6)}button.-good{background-color:var(--nordE)}button.-icon{font-size:1.5rem;line-height:1;padding:0}button.-small{font-size:.67em}button.handle{background-color:var(--nord3);color:var(--nord4);cursor:grab}button[data-action=edit-flags]{background-color:var(--nord3);color:var(--nord4);margin-right:5px}button[data-action=start-task]{margin-left:5px}dialog{align-items:center;background-color:var(--nord6);border-radius:2px;border-style:none;flex-direction:column}dialog[open]{display:flex}dialog::backdrop{backdrop-filter:blur(5px)}dialog>form{align-items:center;display:flex;flex-direction:column;width:100%}fieldset{border-style:none;margin:0 0 30px;padding:0}h1{margin:0}h2{align-items:center;display:flex;font-weight:300;margin:0 0 20px}h2>span:first-child{flex-grow:1}h2>:not(:last-child){margin-right:10px}input[type=checkbox]{appearance:none;background-color:var(--nord0);border-radius:2px;height:1.25em;padding:0;width:1.25em}input[type=checkbox]:checked{background-color:var(--nordE)}input[type=text]{background-color:transparent;border-color:transparent;border-radius:5px;border-style:solid;color:inherit;font:inherit;padding:0 5px;width:100%}input[type=text]:focus-visible{outline-color:var(--nord8);outline-style:solid}label{align-items:center;cursor:pointer;display:flex}label input[type=checkbox]{margin-right:5px}label input[type=checkbox]:not(:checked)~span{color:var(--nord4);opacity:.6}label:hover input[type=checkbox]:not(:checked){background-color:var(--nord2)}label:hover input[type=checkbox]:not(:checked)~span{opacity:.8}section{background-color:var(--nord1);border-radius:5px;display:block;margin-top:2.5rem;padding:10px}ul{list-style-type:none;margin:0;padding-left:0}.task-item{display:flex;flex-direction:column}.task-item .content{border-top:1px solid var(--nord2);display:flex;margin-top:5px;padding-top:5px}.task-item .content input[type=text]{margin:0 5px}.task-item .flags{align-items:flex-start;display:flex;flex-direction:column;padding-left:calc(4rem + 64px)}.task-flag{background-color:var(--nord5);display:flex;margin-bottom:10px}.tasks-list{background-color:var(--nord1)}.timer{font-size:.8em;margin-left:10px;opacity:.5}.timer::after{content:")";opacity:.5}.timer::before{content:"(";opacity:.5}#Break{align-items:center;background-color:var(--nord0);display:flex;flex-direction:column;height:8rem;justify-content:center;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transition:opacity 250ms ease-out;width:100%}#Break.-active{opacity:1;pointer-events:auto}#BreakProgress{background-color:var(--nord4);height:100%;width:0}#BreakProgressBar{border:2px solid var(--nord4);border-radius:5px;height:10px;margin-top:10px;max-width:20rem;overflow:hidden;width:90vw}#Controls{align-items:center;display:flex;margin-top:20px}#Controls button{margin-right:20px}#CurrentTask{opacity:0;pointer-events:none;transition:opacity .2s ease-out}#CurrentTask.-busy{opacity:1;pointer-events:auto}#CurrentTask button{margin-right:10px}#CurrentTask .name{display:block;font-size:2rem;line-height:1;margin-bottom:20px;min-height:2rem}#Interrupted{width:9rem}#Interrupted .count{font-size:.85em;margin-left:10px;opacity:.5}@media screen and (min-width:768px){:root{font-size:20px}}@media screen and (min-width:1024px){:root{font-size:22px}}@media screen and (min-width:1440px){:root{font-size:24px}}@media screen and (hover:hover){button{opacity:.9;transition:opacity .1s ease-out}button:not(:disabled):hover{opacity:1}}</style><div id="CurrentTask"><span class="name"></span> <button class="-good"disabled="disabled"id="FinishTask">Finish <span class="timer"></span></button> <button class="-caution"disabled="disabled"id="Interrupted">Interrupted <span class="count">—</span></button></div><section id="TodoTasks"><h2><span>Todo</span> <button class="-small -good"id="AddTodo">Add Todo</button> <button class="-small -danger"disabled="disabled"id="ClearTodos">Clear</button></h2><ul class="tasks-list"></ul></section><section id="CompletedTasks"><h2><span>Completed</span> <button class="-small -danger"disabled="disabled"id="ClearCompleted">Clear</button></h2><ul></ul></section><div id="Break"><h1 id="BreakTime"></h1><div id="BreakProgressBar"><div id="BreakProgress"></div></div></div><audio id="Chime"><source src="chime.wav"type="audio/wav"></audio><dialog id="EditFlags"><h2>FUN-2306-select-wallet</h2><form method="dialog"><fieldset></fieldset><button type="submit">Close</button></form></dialog><script>const emptyState={completedTasks:[],currentTask:null,todoTasks:[]},$=t=>document.querySelector(t),$$=t=>Array.from(document.querySelectorAll(t)),breakContainer=$("#Break"),breakProgress=$("#BreakProgress"),breakTime=$("#BreakTime"),chimeAudio=$("#Chime"),clearCompletedButton=$("#ClearCompleted"),clearTodosButton=$("#ClearTodos"),completedList=$("#CompletedTasks ul"),currentTask=$("#CurrentTask"),currentTaskName=$("#CurrentTask .name"),currentTimer=$("#CurrentTask .timer"),editFlagsDialog=$("#EditFlags"),finishTaskButton=$("#FinishTask"),interruptedButton=$("#Interrupted"),interruptedCount=$("#Interrupted .count"),todoList=$("#TodoTasks ul");let breaking=!1,currentTimerInterval=null,currentTimerTimeout=null,draggingItem,state=JSON.parse(window.localStorage.getItem("state"))||emptyState;function addTodo(){var t={flags:[],id:generateId(),name:""};appendTodo(t,!0),updateState({todoTasks:state.todoTasks.concat(t)})}function appendCompleted(t){var e=Math.ceil((t.finished-t.started)/6e4),a=0<t.interruptions?`, ${t.interruptions} interruption`+(1===t.interruptions?"":"s"):"";completedList.appendChild(h("li",{textContent:t.name,children:[h("span",{classes:["timer"],textContent:e+" min"+a})]}))}function appendTodo(e,t=!1){const a=h("li",{classes:["task-item"],attributes:{"data-id":e.id},actions:{dragend:t=>{updateState({todoTasks:Array.from(todoList.children).map(e=>state.todoTasks.find(t=>t.id===e.getAttribute("data-id")))}),draggingItem.removeAttribute("draggable"),draggingItem=void 0},dragstart:(t,e)=>{draggingItem=e},dragover:(t,e)=>{var a;if(t.preventDefault(),e!==draggingItem)return t=findTodoIndex(draggingItem),a=findTodoIndex(e),a<t?todoList.insertBefore(draggingItem,e):a===todoList.children.length-1?todoList.appendChild(draggingItem):void todoList.insertBefore(draggingItem,todoList.children.item(a+1))}},children:[h("div",{classes:["content"],children:[h("button",{textContent:"≡",classes:["handle"],actions:{mousedown:t=>{t.target.parentNode.parentNode.setAttribute("draggable","true")}}}),h("button",{textContent:"Start",attributes:{"data-action":"start-task",disabled:0===e.name.length?"":void 0},actions:{click:t=>{todoList.removeChild(t.target.closest("li")),updateState({todoTasks:state.todoTasks.filter(t=>t.id!==e.id)}),startTask(e)}}}),h("input",{attributes:{"aria-label":"task name",type:"text",value:e.name},actions:{keydown:t=>{"Enter"===t.key&&t.target.blur()},input:t=>{e.name=t.target.value,toggle(t.target.closest("li").querySelector('button[data-action="start-task"]'),0<t.target.value.length&&null===state.currentTask&&!breaking),updateTodo(e)}}}),h("button",{textContent:"⋮",attributes:{"data-action":"edit-flags"},actions:{click:()=>{editFlags(e)}}}),h("button",{classes:["-danger","-icon"],textContent:"×",actions:{click:t=>{window.confirm("Are you sure?")&&(todoList.removeChild(t.target.closest("li")),updateState({todoTasks:state.todoTasks.filter(t=>t.id!==e.id)}))}}})]}),h("div",{classes:["flags"]})]});todoList.appendChild(a),renderTaskFlags(e),t&&setTimeout(()=>a.querySelector("input").focus(),5)}function breakMinutes(t){return t<=4?1:t<=25?5:t<=50?8:t<=90?10:15}function disable(t){t.hasAttribute("disabled")||t.setAttribute("disabled","")}function editFlags(a){$("#EditFlags h2").textContent=a.name;const t=$("#EditFlags fieldset"),n=(t.innerHTML="",h("ul",{classes:["flags-list"]}));for(const r of a.flags)n.appendChild(makeTaskFlag(a,r));t.appendChild(n);var e=h("button",{actions:{click:()=>{var t={checked:!1,id:generateId(),name:""};a.flags=a.flags.concat(t),updateTodo(a);const e=makeTaskFlag(a,t);n.appendChild(e),e.querySelector("input").focus(),renderTaskFlags(a)}},attributes:{type:"button"},classes:["-good"],textContent:"Add"});t.appendChild(e),editFlagsDialog.showModal()}function enable(t){t.hasAttribute("disabled")&&t.removeAttribute("disabled")}function findTodoIndex(t){for(var e in todoList.children)if(todoList.children.item(e)===t)return e}function generateId(){return Date.now().toString()}function h(t,{actions:e,attributes:a,children:n,classes:r,textContent:s}={}){const o=document.createElement(t);return a&&Object.entries(a).forEach(([t,e])=>{void 0!==e&&o.setAttribute(t,e)}),r&&o.classList.add(...r),s&&(o.textContent=s),n&&n.forEach(t=>{t&&o.appendChild(t)}),e&&Object.entries(e).forEach(([t,e])=>{o.addEventListener(t,t=>e(t,o))}),o}function makeTaskFlag(e,a){return h("li",{classes:["task-flag"],children:[h("input",{attributes:{"aria-label":"flag name",type:"text",value:a.name},actions:{input:t=>{a.name=t.target.value,e.flags=e.flags.map(t=>t.id===a.id?a:t),updateTodo(e),renderTaskFlags(e)}}}),h("button",{actions:{click:()=>{window.confirm("Are you sure?")&&($("#EditFlags ul").removeChild(event.target.closest("li")),e.flags=e.flags.filter(t=>t.id!==a.id),updateTodo(e),renderTaskFlags(e))}},attributes:{type:"button"},classes:["-danger","-icon"],textContent:"×"})]})}function populateCurrentTask(e){currentTaskName.textContent=e.name;const t=()=>{var t=Math.ceil((Date.now()-e.started)/6e4);currentTimer.textContent=Math.max(1,t)+" min"};t();var a=Date.now()%6e4,n=e.started%6e4,n=n<a?6e4+n-a:n-a;currentTimerTimeout=setTimeout(()=>{t(),currentTimerTimeout=null,currentTimerInterval=setInterval(t,6e4)},n),interruptedCount.textContent="0",currentTask.classList.add("-busy")}function renderCompletedList(){completedList.innerHTML="",state.completedTasks.forEach(t=>appendCompleted(t))}function updateTodo(e){updateState({todoTasks:state.todoTasks.map(t=>t.id===e.id?e:t)})}function renderTaskFlags(e){const t=$(`.task-item[data-id="${e.id}"] .flags`);t.innerHTML="";for(const a of e.flags)t.appendChild(h("label",{children:[h("input",{actions:{input:t=>{a.checked=t.target.checked,e.flags=e.flags.map(t=>t.id===a.id?a:t),updateTodo(e)}},attributes:{checked:a.checked?"":void 0,type:"checkbox"}}),h("span",{textContent:a.name})]}))}function renderTodoList(){todoList.innerHTML="",state.todoTasks.forEach(t=>appendTodo(t))}function startBreak(t){breaking=!0;const e=6e4*breakMinutes(t),a=Date.now();let n=Math.ceil(e/1e3);breakTime.textContent=n,breakProgress.style.width="0%",breakContainer.classList.add("-active");const r=setInterval(()=>{var t=Date.now()-a;n=Math.ceil((e-t)/1e3),breakTime.textContent=n,breakProgress.style.width=100*t/e+"%",breaking&&t>=e-250&&(breakContainer.classList.remove("-active"),breaking=!1,$$("button.start").filter(t=>0<t.nextSibling.value.length).forEach(t=>enable(t))),t>=e&&(chimeAudio.play(),clearInterval(r))},250)}function startTask(e){var t={...e,interruptions:0,started:Date.now()};populateCurrentTask(t),updateState({currentTask:t,todoTasks:state.todoTasks.filter(t=>t.id!==e.id)})}function toggle(t,e){if(e)return enable(t);disable(t)}function updateState(t){t&&(state={...state,...t}),window.localStorage.setItem("state",JSON.stringify(state)),null===state.currentTask?(disable(finishTaskButton),disable(interruptedButton)):(interruptedCount.textContent=state.currentTask.interruptions.toString(),enable(finishTaskButton),enable(interruptedButton),$$("button.start").forEach(t=>disable(t))),toggle(clearTodosButton,0<state.todoTasks.length),toggle(clearCompletedButton,0<state.completedTasks.length)}state.currentTask&&populateCurrentTask(state.currentTask),renderTodoList(),renderCompletedList(),finishTaskButton.addEventListener("click",()=>{var t={...state.currentTask,finished:Date.now()};appendCompleted(t),currentTask.classList.remove("-busy"),interruptedCount.textContent="—",breakContainer.classList.add("-active"),currentTimerTimeout&&(clearTimeout(currentTimerTimeout),currentTimerTimeout=null),currentTimerInterval&&(clearInterval(currentTimerInterval),currentTimerInterval=null),setTimeout(()=>{currentTaskName.textContent=""},200),startBreak(Math.ceil((t.finished-t.started)/6e4)),updateState({completedTasks:state.completedTasks.concat(t),currentTask:null})}),interruptedButton.addEventListener("click",()=>{updateState({currentTask:{...state.currentTask,interruptions:state.currentTask.interruptions+1}})}),document.getElementById("AddTodo").addEventListener("click",addTodo),clearCompletedButton.addEventListener("click",()=>{window.confirm("Are you sure?")&&(completedList.innerHTML="",updateState({completedTasks:[]}))}),clearTodosButton.addEventListener("click",()=>{window.confirm("Are you sure?")&&(todoList.innerHTML="",updateState({todoTasks:[]}))}),updateState(),window.addEventListener("keydown",t=>{t.target===document.body&&"a"===t.key&&addTodo()})</script>
\ No newline at end of file