Release version 2.5.0

Author: c2d7fa

app/app.test.ts

@@ -2972,4 +2972,48 @@ describe("filter bar", () => {
       });
     });
   });
+
+  describe("ready filter is never shown in stalled tab", () => {
+    describe("in example with ready project and stalled subtask", () => {
+      const example = updateAll(empty, [
+        switchToFilter("all"),
+        addTask("Project", "project"),
+        addTask("Task 1", 1),
+        addTask("Task 2", 1, "ready"),
+        switchToFilter("stalled"),
+      ]);
+
+      test("the correct tasks are shown in the stalled view", () => {
+        expect(tasks(example, ["title", "indentation", "badges"])).toEqual([
+          {title: "Project", indentation: 0, badges: ["project", "ready"]},
+          {title: "Task 1", indentation: 1, badges: ["stalled"]},
+        ]);
+      });
+
+      test("the ready filter is not available in the filter bar", () => {
+        expect(filterBarHas(view(example), "Ready")).toBe(false);
+      });
+    });
+
+    describe("in example with non-project parent task that has both stalled and ready subtask", () => {
+      const example = updateAll(empty, [
+        switchToFilter("all"),
+        addTask("Task 1", 0),
+        addTask("Task 2", 1, "ready"),
+        addTask("Task 3", 1),
+        switchToFilter("stalled"),
+      ]);
+
+      test("the correct tasks are shown in the stalled view", () => {
+        expect(tasks(example, ["title", "indentation", "badges"])).toEqual([
+          {title: "Task 1", indentation: 0, badges: []},
+          {title: "Task 3", indentation: 1, badges: ["stalled"]},
+        ]);
+      });
+
+      test("the ready filter is not available in the filter bar", () => {
+        expect(filterBarHas(view(example), "Ready")).toBe(false);
+      });
+    });
+  });
 });

app/app.ts

@@ -3,6 +3,7 @@ import * as Tasks from "./tasks";
 import * as TaskEditor from "./task-editor";
 import * as Drag from "./drag";
 import * as Storage from "./storage";
+import * as Ui from "./ui";
 
 type TextFieldId = "addTitle";
 
@@ -61,6 +62,7 @@ export type FilterIndicator =
 
 export type FilterView = {
   label: string;
+  icon: Ui.Icon;
   filter: Tasks.FilterId;
   selected: boolean;
   dropTarget: DropId | null;
@@ -72,7 +74,7 @@ export type SideBarSectionView = {title: string; filter: Tasks.FilterId; filters
 export type FileControlsView = "saveLoad" | null;
 
 export type FilterBarView = {
-  filters: {id: string; label: string; state: "neutral" | "include" | "exclude"}[];
+  filters: {id: string; label: string; state: "neutral" | "include" | "exclude"; icon?: Ui.Icon}[];
 };
 
 type DragInvariantView = Pick<View, "fileControls" | "addTask" | "sideBar" | "filterBar" | "editor">;
@@ -102,9 +104,16 @@ function viewFilterBar(state: State & {today: Date}): FilterBarView {
     return id;
   }
 
+  function filterIcon(id: Tasks.SubtaskFilter["id"]): Ui.Icon | undefined {
+    if (id === "paused") return "paused";
+    if (id === "done") return "completed";
+    if (id === "ready") return "ready";
+    return undefined;
+  }
+
   function filterViews(id: Tasks.SubtaskFilter["id"]) {
     return filterState(id) !== "neutral" || Tasks.isSubtaskFilterRelevant(state, id)
-      ? [{id: id, label: filterLabel(id), state: filterState(id)}]
+      ? [{id: id, label: filterLabel(id), icon: filterIcon(id), state: filterState(id)}]
       : [];
   }
 
@@ -129,8 +138,25 @@ function viewSideBar(state: State & {today: Date}) {
       return {type: "text" as const, text: count.toString(), color: opts.counter};
     }
 
+    const icon: Ui.Icon =
+      typeof filter === "object"
+        ? "project"
+        : (
+            {
+              "all": "allTasks",
+              "today": "today",
+              "ready": "ready",
+              "stalled": "stalled",
+              "paused": "paused",
+              "done": "completed",
+              "not-done": "unfinished",
+              "archive": "archive",
+            } as const
+          )[filter];
+
     return {
       label: Tasks.filterTitle(state.tasks, filter),
+      icon,
       filter,
       selected: Tasks.isSubfilter(state, state.filter, filter),
       dropTarget: {type: "filter", id: filter},

app/main.module.scss

@@ -60,7 +60,7 @@
 
   .sidebar {
     grid-area: sidebar;
-    background-color: #f0f0f0;
+    background-color: #f4f4f4;
     border-right: 1px solid #00000020;
 
     padding-bottom: 1em;
@@ -268,7 +268,7 @@
 
     color: #888;
 
-    background-color: #f8f8f8;
+    background-color: #f6f6f6;
 
     border-bottom: 1px solid #aaa;
 
@@ -279,30 +279,31 @@
       display: inline-block;
       transition: margin-left 100ms ease-out;
 
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      .labelText {
+        // Leave a little space between label and indicator when label is cut off.
+        padding-right: 0.25em;
+
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
 
     &:active .label {
       margin-left: -6px;
     }
 
     &:hover, &:active {
-      background-color: #f4f4f4;
+      background-color: #f2f2f2;
     }
 
     &.selected {
       color: #666;
       font-weight: 500;
-      background-color: #f0f0f0;
+      background-color: #e8e8e8;
 
       &:hover {
-        background-color: #ececec;
-      }
-
-      .label {
-        margin-left: 1em;
+        background-color: #e4e4e4;
       }
     }
 

app/main.tsx

@@ -7,7 +7,7 @@ import * as Drag from "./drag";
 import {TaskList} from "./task-list";
 
 import * as style from "./main.module.scss";
-import {Button} from "./ui";
+import {Button, IconLabel} from "./ui";
 
 function AddTask(props: {view: App.View["addTask"]; send(ev: App.Event): void}) {
   return (
@@ -51,7 +51,11 @@ function Filter(props: {
       onClick={() => props.send({tag: "selectFilter", filter: props.filter.filter})}
       className={props.filter.selected ? style.selected : ""}
     >
-      <span className={style.label}>{props.filter.label}</span>
+      <span className={style.label}>
+        <IconLabel extraSpace icon={props.filter.icon}>
+          <span className={style.labelText}>{props.filter.label}</span>
+        </IconLabel>
+      </span>
       <Indicator indicator={props.filter.indicator} />
     </button>
   );
@@ -174,7 +178,7 @@ function FilterButton(props: {filter: App.FilterBarView["filters"][number]; send
         }}
         onContextMenu={(ev) => ev.preventDefault()}
       >
-        {props.filter.label}
+        <IconLabel icon={props.filter.icon}>{props.filter.label}</IconLabel>
       </button>
     </div>
   );