todo_widget: Do not sort alphabetically and by status of completion.

Earlier the tasks in a list were sorted alphabetically and on marking
one complete, it was pushed under any incomplete tasks. This behaviour
can be unexpected and confusing, so now each task is appended to the
bottom of the list on being added, and no shifting takes place on
marking it completed.

Fixes part of #20213.

web/src/todo_widget.js

@@ -7,7 +7,6 @@ import * as blueslip from "./blueslip";
 import {$t} from "./i18n";
 import {page_params} from "./page_params";
 import * as people from "./people";
-import * as util from "./util";
 
 // Any single user should send add a finite number of tasks
 // to a todo list. We arbitrarily pick this value.
@@ -23,22 +22,9 @@ export class TaskData {
 
     get_widget_data() {
         const all_tasks = [...this.task_map.values()];
-        all_tasks.sort((a, b) => util.strcmp(a.task, b.task));
-
-        const pending_tasks = [];
-        const completed_tasks = [];
-
-        for (const item of all_tasks) {
-            if (item.completed) {
-                completed_tasks.push(item);
-            } else {
-                pending_tasks.push(item);
-            }
-        }
 
         const widget_data = {
-            pending_tasks,
-            completed_tasks,
+            all_tasks,
         };
 
         return widget_data;

web/templates/widgets/todo_widget_tasks.hbs

@@ -1,26 +1,18 @@
 <br />
-{{#each pending_tasks}}
+{{#each all_tasks}}
     <li>
         <label class="checkbox">
             <div>
-                <input type="checkbox" class="task" data-key="{{ key }}" />
+                <input type="checkbox" class="task" data-key="{{ key }}" {{#if completed}}checked{{/if}}/>
                 <span></span>
             </div>
             <div>
+                {{#if completed}}
+                <strike><strong>{{ task }}</strong>{{#if desc }} - {{ desc }}{{/if}}</strike>
+                {{else}}
                 <strong>{{ task }}</strong>{{#if desc }} - {{ desc }}{{/if}}
+                {{/if}}
             </div>
         </label>
-
-    </li>
-{{/each}}
-{{#each completed_tasks}}
-    <li>
-        <label class="checkbox">
-            <div>
-                <input type="checkbox" class="task" data-key="{{ key }}" checked="checked"/>
-                <span></span>
-            </div>
-            <strike><em><strong>{{ task }}</strong>{{#if desc }} - {{ desc }}{{/if}}</em></strike>
-        </label>
     </li>
 {{/each}}