Added checkbox for setting card as checked/unchecked.

TODO.md

@@ -2,19 +2,21 @@
 
 ## TODO
 
-- [ ] Minimize the number of times the user is asked for access. If possible ask for all the access required at one time.
 - [ ] When dragging between columns we should show the insertion point and insert the card at that point.
-- [ ] When moving between columns don't insert an extra newline before, unless moving to an empty column.
-- [x] Give each column a max width of 450px and have them stretch to fill the area up to that.
-- [x] Don't put carriage returns between individual TODO list items. As far as possible try to preserve original formatting, just moving individual lines around without disturbing other lines.
-- [ ] Ability to create, move, remove columns.
-- [ ] Make it look more the makesprite/concrete.css theme.
-- [ ] Check mark type of UI for marking items complete/uncomplete.
-- [ ] Ability to create a project on the projects select page, including if TODO.md is empty.
 - [ ] Plus button in the columns to add a new item, with text input.
+- [ ] Ability to create, move, remove columns.
+- [ ] Ability to create a project on the projects select page, including if TODO.md is empty.
+
+- [ ] Minimize the number of times the user is asked for access. If possible ask for all the access required at one time.
 
 ## In progress
 
 
 ## Done
 
+- [x] Dropdown for setting the card as checked/unchecked.
+- [x] Make it look more the makesprite/concrete.css theme.
+- [x] When moving between columns don't insert an extra newline before, unless moving to an empty column.
+- [x] Give each column a max width of 450px and have them stretch to fill the area up to that.
+- [x] Don't put carriage returns between individual TODO list items. As far as possible try to preserve original formatting, just moving individual lines around without disturbing other lines.
+

index.html

@@ -155,6 +155,7 @@
             cursor: grab;
             user-select: none;
             word-wrap: break-word;
+            position: relative;
         }
 
         .card:hover {
@@ -175,6 +176,21 @@
             border: .1rem dashed var(--fg);
         }
 
+        .card-checkbox {
+            float: right;
+            width: 1em;
+            height: 1em;
+            border: .1rem solid var(--fg);
+            border-radius: 2px;
+            cursor: pointer;
+            background: transparent;
+            margin-left: 0.5em;
+        }
+
+        .card-checkbox.checked {
+            background: var(--fg);
+        }
+
         /* Section Picker */
         .section-list {
             list-style: none;
@@ -581,7 +597,6 @@
                     
                     const cardDiv = document.createElement('div');
                     cardDiv.className = `card ${card.completed ? 'completed' : ''}`;
-                    cardDiv.textContent = card.text;
                     cardDiv.draggable = true;
                     
                     cardDiv.dataset.lineNumber = card.lineNumber;
@@ -589,7 +604,10 @@
                     cardDiv.dataset.colIndex = colIndex;
                     cardDiv.dataset.cardIndex = cardIndex;
                     
-                    cardDiv.onclick = async () => {
+                    const checkbox = document.createElement('div');
+                    checkbox.className = `card-checkbox ${card.completed ? 'checked' : ''}`;
+                    checkbox.onclick = async (e) => {
+                        e.stopPropagation();
                         const lineNum = parseInt(cardDiv.dataset.lineNumber);
                         const originalLine = cardDiv.dataset.originalLine;
                         
@@ -599,6 +617,11 @@
                         
                         await updateLineInFile(lineNum, newLine);
                     };
+                    cardDiv.appendChild(checkbox);
+                    
+                    const textSpan = document.createElement('span');
+                    textSpan.textContent = card.text;
+                    cardDiv.appendChild(textSpan);
                     
                     cardDiv.ondragstart = (e) => handleDragStart(e, cardDiv);
                     cardDiv.ondragend = handleDragEnd;