Add create task button to column headers

src/Board.tsx

@@ -84,12 +84,15 @@ const Board = ({ columns, startedColumns, completedColumns }: {
               <h2 className="kanbn-column-name">
                 {columnName}
                 <span className="kanbn-column-count">{column.length || ''}</span>
+                <button
+                  type="button"
+                  className="kanbn-create-task-button"
+                  onClick={e => null}
+                  title={`Create task in ${columnName}`}
+                >
+                  <i className="codicon codicon-add"></i>
+                </button>
               </h2>
-              {/*
-              // TODO codicons https://github.com/microsoft/vscode-extension-samples/tree/main/webview-codicons-sample
-              // TODO 'Add task' button next to each column header
-              // TODO show count next to header
-              */}
               <div>
                 <Droppable droppableId={columnName} key={columnName}>
                   {(provided, snapshot) => {

src/Task.tsx

@@ -25,7 +25,7 @@ const Task = ({ task, index }: { task: KanbnTask, index: number }) => {
           >
             <button
               type="button"
-              onClick={e => null} // TODO open task editor modal when clicked
+              onClick={e => null} // TODO open task editor webview panel when clicked
               title={task.id}
             >
               {task.name}

src/index.css

@@ -13,11 +13,11 @@
 */
 
 body {
-  margin: 0;
-  padding: 1em;
-  font-family: sans-serif;
-  background-color: var(--vscode-editor-background);
-  color: var(--vscode-foreground);
+    margin: 0;
+    padding: 1em;
+    font-family: sans-serif;
+    background-color: var(--vscode-editor-background);
+    color: var(--vscode-foreground);
 }
 
 .kanbn-header-name {
@@ -37,6 +37,14 @@ body {
     padding-left: 8px;
 }
 
+.kanbn-create-task-button {
+    float: right;
+}
+
+.kanbn-create-task-button .codicon {
+    font-size: 14px;
+}
+
 .kanbn-column:first-child .kanbn-column-name {
     padding-left: 0;
 }
@@ -86,8 +94,7 @@ body {
     color: var(--vscode-editor-foreground);
 }
 
-.kanbn-task button:focus,
-.kanbn-task button:hover {
+.kanbn-task button:focus, .kanbn-task button:hover {
     border: none;
     outline: none;
     text-decoration: underline;