Add column sorting

src/App.tsx

@@ -17,6 +17,7 @@ function App() {
   const [hiddenColumns, setHiddenColumns] = useState([]);
   const [startedColumns, setStartedColumns] = useState([]);
   const [completedColumns, setCompletedColumns] = useState([]);
+  const [columnSorting, setColumnSorting] = useState({});
   const [dateFormat, setDateFormat] = useState('');
   const [task, setTask] = useState({});
   const [tasks, setTasks] = useState({});
@@ -46,6 +47,7 @@ function App() {
         setHiddenColumns(event.data.hiddenColumns);
         setStartedColumns(event.data.startedColumns);
         setCompletedColumns(event.data.completedColumns);
+        setColumnSorting(event.data.columnSorting);
         setShowBurndownButton(event.data.showBurndownButton);
         setShowSprintButton(event.data.showSprintButton);
 
@@ -98,6 +100,7 @@ function App() {
           hiddenColumns={hiddenColumns}
           startedColumns={startedColumns}
           completedColumns={completedColumns}
+          columnSorting={columnSorting}
           dateFormat={dateFormat}
           showBurndownButton={showBurndownButton}
           showSprintButton={showSprintButton}

src/Board.tsx

@@ -139,6 +139,7 @@ const Board = ({
   hiddenColumns,
   startedColumns,
   completedColumns,
+  columnSorting,
   dateFormat,
   showBurndownButton,
   showSprintButton,
@@ -151,6 +152,7 @@ const Board = ({
   hiddenColumns: string[],
   startedColumns: string[],
   completedColumns: string[],
+  columnSorting: { [columnName: string]: { field: string, order: 'ascending' | 'descending' }[] },
   dateFormat: string,
   showBurndownButton: boolean,
   showSprintButton: boolean,
@@ -274,7 +276,7 @@ const Board = ({
                   <span className="kanbn-column-count">{column.length || ''}</span>
                   <button
                     type="button"
-                    className="kanbn-create-task-button"
+                    className="kanbn-column-button kanbn-create-task-button"
                     title={`Create task in ${columnName}`}
                     onClick={() => {
                       vscode.postMessage({
@@ -285,6 +287,30 @@ const Board = ({
                   >
                     <i className="codicon codicon-add"></i>
                   </button>
+                  {((columnIsSorted, columnSortSettings) => (
+                    <button
+                      type="button"
+                      className={[
+                        'kanbn-column-button',
+                        'kanbn-sort-column-button',
+                        columnIsSorted ? 'kanbn-column-sorted' : null
+                      ].filter(i => i).join(' ')}
+                      title={`Sort ${columnName}${columnIsSorted
+                        ? `\nCurrently sorted by:\n${columnSortSettings.map(
+                          sorter => `${sorter.field} (${sorter.order})`
+                        ).join('\n')}`
+                        : ''
+                      }`}
+                      onClick={() => {
+                        vscode.postMessage({
+                          command: 'kanbn.sortColumn',
+                          columnName
+                        });
+                      }}
+                    >
+                      <i className="codicon codicon-list-filter"></i>
+                    </button>
+                  ))(columnName in columnSorting, columnSorting[columnName] || [])}
                 </h2>
                 <div className="kanbn-column-task-list-container">
                   <Droppable droppableId={columnName} key={columnName}>

src/index.css

@@ -117,36 +117,42 @@ Board styles
     margin-right: 0.5em;
 }
 
-.kanbn-create-task-button {
+.kanbn-column-button {
     position: relative;
     top: -2px;
     left: -4px;
     float: right;
-    border: 1px transparent solid;
     outline: none;
-    color: var(--vscode-foreground);
+    border: 1px transparent solid;
     background-color: transparent;
+    color: var(--vscode-button-foreground);
     padding: 2px;
     height: 16px;
     width: 16px;
     margin-right: 8px;
-    cursor: pointer;
     border-radius: 1px;
 }
 
-.kanbn-create-task-button:focus {
-    border-color: var(--vscode-foreground);
-}
-
-.kanbn-create-task-button:hover, .kanbn-create-task-button:active {
-    border: none;
-    outline: none;
-    color: var(--vscode-editor-background);
-    background-color: var(--vscode-foreground);
-}
-
-.kanbn-create-task-button .codicon {
+.kanbn-column-button .codicon {
     font-size: 11px !important;
+    font-weight: 900;
+}
+
+.kanbn-column-button:focus {
+    border-color: var(--vscode-button-hoverBackground);
+}
+
+.kanbn-column-button:hover, .kanbn-column-button:active {
+    background-color: var(--vscode-button-hoverBackground);
+}
+
+.kanbn-column-button.kanbn-sort-column-button .codicon {
+    opacity: 0.5;
+    font-weight: normal;
+}
+
+.kanbn-column-button.kanbn-sort-column-button.kanbn-column-sorted .codicon {
+    opacity: 1;
 }
 
 .kanbn-column-count {