From 47ea7c16102bc4b90cfd7c32a631d3f235319d7c Mon Sep 17 00:00:00 2001
From: tintinthong <justinthong93@gmail.com>
Date: Sat, 21 Dec 2024 19:15:32 +0800
Subject: [PATCH 01/12] enhance work tracker to use the new getCards

---
 .../src/components/drag-and-drop/index.gts    |  57 +++--
 .../productivity/task-cards-resource.gts      | 129 ++++-------
 packages/experiments-realm/work-tracker.gts   | 210 +++++++++---------
 3 files changed, 185 insertions(+), 211 deletions(-)

diff --git a/packages/boxel-ui/addon/src/components/drag-and-drop/index.gts b/packages/boxel-ui/addon/src/components/drag-and-drop/index.gts
index 07c2e305f1..f8f8ea7da7 100644
--- a/packages/boxel-ui/addon/src/components/drag-and-drop/index.gts
+++ b/packages/boxel-ui/addon/src/components/drag-and-drop/index.gts
@@ -13,6 +13,7 @@ export type DndItem = Record<string, any>;
 
 export interface DndKanbanBoardArgs<DndColumn> {
   columns: DndColumn[];
+  displayCard?: (card: DndItem) => boolean;
   isLoading?: boolean;
   onMove?: (
     draggedCard: DndItem,
@@ -153,6 +154,14 @@ export default class DndKanbanBoard extends Component<
     this.draggedCard = null;
   }
 
+  @action
+  displayCard(card: DndItem): boolean {
+    if (this.args.displayCard) {
+      return this.args.displayCard(card);
+    }
+    return true;
+  }
+
   <template>
     {{#if this.areModifiersLoaded}}
       <div class='draggable-container' {{on 'dragend' this.onDragEnd}}>
@@ -173,29 +182,31 @@ export default class DndKanbanBoard extends Component<
 
             <div class='column-drop-zone'>
               {{#each column.cards as |card|}}
-                <div
-                  class='draggable-card {{if @isLoading "is-loading"}}'
-                  {{this.DndSortableItemModifier
-                    group='cards'
-                    data=(hash item=card parent=column)
-                    onDrop=this.moveCard
-                    isOnTargetClass='is-on-target'
-                    onDragStart=(fn this.onDragStart card)
-                  }}
-                >
-                  {{#if (and @isLoading (eq card this.draggedCard))}}
-                    <div class='overlay'></div>
-                    {{yield card column to='card'}}
-                    <LoadingIndicator
-                      width='18'
-                      height='18'
-                      @color='var(--boxel-light)'
-                      class='loader'
-                    />
-                  {{else}}
-                    {{yield card column to='card'}}
-                  {{/if}}
-                </div>
+                {{#if (this.displayCard card)}}
+                  <div
+                    class='draggable-card {{if @isLoading "is-loading"}}'
+                    {{this.DndSortableItemModifier
+                      group='cards'
+                      data=(hash item=card parent=column)
+                      onDrop=this.moveCard
+                      isOnTargetClass='is-on-target'
+                      onDragStart=(fn this.onDragStart card)
+                    }}
+                  >
+                    {{#if (and @isLoading (eq card this.draggedCard))}}
+                      <div class='overlay'></div>
+                      {{yield card column to='card'}}
+                      <LoadingIndicator
+                        width='18'
+                        height='18'
+                        @color='var(--boxel-light)'
+                        class='loader'
+                      />
+                    {{else}}
+                      {{yield card column to='card'}}
+                    {{/if}}
+                  </div>
+                {{/if}}
               {{/each}}
             </div>
           </div>
diff --git a/packages/experiments-realm/productivity/task-cards-resource.gts b/packages/experiments-realm/productivity/task-cards-resource.gts
index 8c0fb4b8a5..54c6150bbd 100644
--- a/packages/experiments-realm/productivity/task-cards-resource.gts
+++ b/packages/experiments-realm/productivity/task-cards-resource.gts
@@ -1,118 +1,81 @@
-import { getCards } from '@cardstack/runtime-common';
 import { tracked } from '@glimmer/tracking';
-import { DndColumn, DndItem } from '@cardstack/boxel-ui/components';
-import { type Query } from '@cardstack/runtime-common';
-import { restartableTask } from 'ember-concurrency';
-import { TaskStatusField, Task } from './task';
-import type { LooseyGooseyData } from '../loosey-goosey';
+import { DndColumn } from '@cardstack/boxel-ui/components';
+import { CardDef } from 'https://cardstack.com/base/card-api';
 
-import { isEqual } from 'lodash';
 import { Resource } from 'ember-resources';
 
 interface Args {
   named: {
-    query: Query | undefined;
-    realm: string;
+    cards: CardDef[];
+    hasColumnKey: (card: any, key: string) => boolean;
+    columnKeys: string[];
   };
 }
 
-// This is a resource because we have to consider 3 data mechanism
-// 1. the reactivity of the query. Changes in query should trigger server fetch
-// 2. the drag and drop of cards. When dragging and dropping, we should NOT trigger a server fetch
-//    but rather just update the local data structure
-// 3. When we trigger a server fetch, we need to maintain the sort order of the cards.
-//   Currently, we don't have any mechanism to maintain the sort order but this is good enough for now
+// This is a resource because we have to
+// 1. to hold state of cards inside of the kanban board
+// 2. to order cards that are newly added to the kanban board
 class TaskCollection extends Resource<Args> {
   @tracked private data: Map<string, DndColumn> = new Map();
-  @tracked private order: Map<string, string[]> = new Map();
-  @tracked private query: Query | undefined = undefined;
+  hasColumnKey?: (card: CardDef, key: string) => boolean = undefined;
 
-  private run = restartableTask(async (query: Query, realm: string) => {
-    let staticQuery = getCards(query, [realm]);
-    await staticQuery.loaded;
-    let cards = staticQuery.instances as Task[];
-    this.commit(cards); //update stale data
+  commit(cards: CardDef[], columnKeys: string[]) {
+    columnKeys.forEach((key: string) => {
+      let currentColumn = this.data.get(key);
+      let cardsForStatus = cards.filter((card) => {
+        return this.hasColumnKey ? this.hasColumnKey(card, key) : false;
+      });
 
-    this.query = query;
-  });
-
-  queryHasChanged(query: Query) {
-    return !isEqual(this.query, query);
-  }
-
-  commit(cards: Task[]) {
-    TaskStatusField.values?.map((status: LooseyGooseyData) => {
-      let statusLabel = status.label;
-      let cardIdsFromOrder = this.order.get(statusLabel);
-      let newCards: Task[] = [];
-      if (cardIdsFromOrder) {
-        newCards = cardIdsFromOrder.reduce((acc: Task[], id: string) => {
-          let card = cards.find((c) => c.id === id);
-          if (card) {
-            acc.push(card);
-          }
-          return acc;
-        }, []);
+      if (currentColumn) {
+        // Maintain order of existing cards and append new ones
+        let existingCardIds = new Set(
+          currentColumn.cards.map((card: CardDef) => card.id),
+        );
+        let existingCards = currentColumn.cards.filter((card: CardDef) =>
+          cardsForStatus.some((c) => c.id === card.id),
+        );
+        let newCards = cardsForStatus.filter(
+          (card: CardDef) => !existingCardIds.has(card.id),
+        );
+        this.data.set(key, new DndColumn(key, [...newCards, ...existingCards]));
       } else {
-        newCards = cards.filter((task) => task.status.label === statusLabel);
+        // First time loading this column
+        this.data.set(key, new DndColumn(key, cardsForStatus));
       }
-      this.data.set(statusLabel, new DndColumn(statusLabel, newCards));
     });
   }
 
-  // Note:
-  // sourceColumnAfterDrag & targetColumnAfterDrag is the column state after the drag and drop
-  update(
-    draggedCard: DndItem,
-    _targetCard: DndItem | undefined,
-    sourceColumnAfterDrag: DndColumn,
-    targetColumnAfterDrag: DndColumn,
-  ) {
-    let status = TaskStatusField.values.find(
-      (value) => value.label === targetColumnAfterDrag.title,
-    );
-    let cardInNewCol = targetColumnAfterDrag.cards.find(
-      (c: Task) => c.id === draggedCard.id,
-    );
-    if (cardInNewCol) {
-      cardInNewCol.status.label = status?.label;
-      cardInNewCol.status.index = status?.index;
-    }
-    //update the order of the cards in the column
-    this.order.set(
-      sourceColumnAfterDrag.title,
-      sourceColumnAfterDrag.cards.map((c: Task) => c.id),
-    );
-    this.order.set(
-      targetColumnAfterDrag.title,
-      targetColumnAfterDrag.cards.map((c: Task) => c.id),
-    );
-    return cardInNewCol;
-  }
-
   get columns() {
     return Array.from(this.data.values());
   }
 
+  get hasEmptyData() {
+    return this.columns.every((column) => column.cards.length === 0);
+  }
+
+  get numberOfCards() {
+    return this.columns.reduce((acc, column) => acc + column.cards.length, 0);
+  }
+
   modify(_positional: never[], named: Args['named']) {
-    if (
-      named.query &&
-      (this.query === undefined || this.queryHasChanged(named.query))
-    ) {
-      this.run.perform(named.query, named.realm);
+    this.hasColumnKey = named.hasColumnKey;
+    if (named.cards.length !== this.numberOfCards) {
+      this.commit(named.cards, named.columnKeys);
     }
   }
 }
 
 export default function getTaskCardsResource(
   parent: object,
-  query: () => Query | undefined,
-  realm: () => string,
+  cards: () => CardDef[],
+  columnKeys: () => string[],
+  hasColumnKey: () => (card: any, key: string) => boolean,
 ) {
   return TaskCollection.from(parent, () => ({
     named: {
-      realm: realm(),
-      query: query(),
+      cards: cards(),
+      columnKeys: columnKeys(),
+      hasColumnKey: hasColumnKey(),
     },
   }));
 }
diff --git a/packages/experiments-realm/work-tracker.gts b/packages/experiments-realm/work-tracker.gts
index 2a8928c506..4d1ea55bbf 100644
--- a/packages/experiments-realm/work-tracker.gts
+++ b/packages/experiments-realm/work-tracker.gts
@@ -24,7 +24,7 @@ import { LooseSingleCardDocument, getCards } from '@cardstack/runtime-common';
 import { restartableTask } from 'ember-concurrency';
 // @ts-expect-error path resolution issue
 import { AppCard } from '/experiments/app-card';
-import { TaskStatusField, Project } from './productivity/task';
+import { TaskStatusField, Project, Task } from './productivity/task';
 import { FilterDropdown } from './productivity/filter-dropdown';
 import { StatusPill } from './productivity/filter-dropdown-item';
 import { FilterTrigger } from './productivity/filter-trigger';
@@ -54,16 +54,6 @@ export interface SelectedItem {
 class WorkTrackerIsolated extends Component<typeof AppCard> {
   @tracked loadingColumnKey: string | undefined;
   @tracked selectedFilter: FilterType | undefined;
-  private declare assigneeQuery: {
-    instances: CardDef[];
-    isLoading: boolean;
-    loaded: Promise<void>;
-  };
-  private declare projectQuery: {
-    instances: CardDef[];
-    isLoading: boolean;
-    loaded: Promise<void>;
-  };
   filters = {
     status: {
       searchKey: 'label',
@@ -87,56 +77,58 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
   selectedItems = new TrackedMap<FilterType, SelectedItem[]>();
   constructor(owner: Owner, args: any) {
     super(owner, args);
-    this.initializeDropdownData.perform();
   }
 
   get filterTypes() {
     return Object.keys(this.filters) as FilterType[];
   }
 
-  taskCollection = getTaskCardsResource(
-    this,
-    () => this.getTaskQuery,
-    () => this.realmHref,
-  );
+  cards = getCards(this.getTaskQuery, this.realmHrefs, { isLive: true });
 
-  initializeDropdownData = restartableTask(async () => {
-    this.assigneeQuery = getCards(
-      {
-        filter: {
-          type: this.filters.assignee.codeRef,
-        },
+  assigneeQuery = getCards(
+    {
+      filter: {
+        type: this.filters.assignee.codeRef,
       },
-      this.realmHrefs,
-    );
+    },
+    this.realmHrefs,
+  );
 
-    await this.assigneeQuery.loaded;
-  });
+  get cardInstances() {
+    return this.cards.instances as Task[];
+  }
 
   get assigneeCards() {
     return this.assigneeQuery.instances;
   }
 
-  filterObject(filterType: FilterType) {
-    let selectedItems = this.selectedItems.get(filterType) ?? [];
-    return selectedItems.map((item) => {
-      if (filterType === 'status') {
-        return {
-          eq: {
-            'status.label': item.label,
-          },
-        };
-      } else {
-        let key = filterType + '.name';
-        return {
-          eq: {
-            [key]: item.name,
-          },
-        };
-      }
+  @action showTaskCard(card: Task): boolean {
+    return this.filterTypes.every((filterType: FilterType) => {
+      let selectedItems = this.selectedItems.get(filterType) ?? [];
+      if (selectedItems.length === 0) return true;
+      return selectedItems.some((item) => {
+        if (filterType === 'status') {
+          return card.status.label === item.label;
+        } else if (filterType === 'assignee') {
+          return card.assignee?.name === item.name;
+        } else {
+          return false;
+        }
+      });
     });
   }
 
+  hasColumnKey = (card: Task, key: string) => {
+    return card.status.label === key;
+  };
+
+  taskCollection = getTaskCardsResource(
+    this,
+    () => this.cardInstances,
+    () => TaskStatusField.values.map((status) => status.label) ?? [],
+    () => this.hasColumnKey,
+  );
+
   get selectedFilterConfig() {
     if (this.selectedFilter === undefined) {
       return undefined;
@@ -174,25 +166,16 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
     return this.args.model.project;
   }
 
-  get getTaskQuery(): Query | undefined {
+  get getTaskQuery(): Query {
     let everyArr: (AnyFilter | CardTypeFilter | EqFilter)[] = [];
     if (!this.realmURL) {
       throw new Error('No realm url');
     }
     if (!this.currentProject || !this.currentProject.id) {
       console.log('No project');
-      return;
+      return {}; //can we query a no-op?
     }
     everyArr.push({ eq: { 'project.id': this.currentProject.id } });
-    this.filterTypes.forEach((filterType) => {
-      let anyFilter = this.filterObject(filterType);
-      if (anyFilter.length > 0) {
-        everyArr.push({
-          any: anyFilter,
-        } as AnyFilter);
-      }
-    });
-
     return (
       everyArr.length > 0
         ? {
@@ -290,18 +273,20 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
 
   @action async onMoveCardMutation(
     draggedCard: DndItem,
-    targetCard: DndItem | undefined,
-    sourceColumnAfterDrag: DndColumn,
+    _targetCard: DndItem | undefined,
+    _sourceColumnAfterDrag: DndColumn,
     targetColumnAfterDrag: DndColumn,
   ) {
-    let updatedCard = this.taskCollection.update(
-      draggedCard,
-      targetCard,
-      sourceColumnAfterDrag,
-      targetColumnAfterDrag,
+    let cardInNewCol = targetColumnAfterDrag.cards.find(
+      (c: CardDef) => c.id === draggedCard.id,
     );
-    //TODO: save the card!
-    await this.args.context?.actions?.saveCard?.(updatedCard);
+    if (cardInNewCol) {
+      let statusValue = TaskStatusField.values.find(
+        (value) => value.label === targetColumnAfterDrag.title,
+      );
+      cardInNewCol.status = new TaskStatusField(statusValue);
+      await this.args.context?.actions?.saveCard?.(cardInNewCol);
+    }
   }
 
   @action onSelectFilter(item: FilterType) {
@@ -356,6 +341,17 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
     }
   }
 
+  get showLoadingOfKanban() {
+    // We want to display the stale data when the kanban is non-empty
+    return (
+      this.cards && this.cards.isLoading && this.taskCollection.hasEmptyData
+    );
+  }
+
+  get showLoadingOfDropdown() {
+    return this.assigneeQuery?.isLoading;
+  }
+
   <template>
     <div class='task-app'>
       {{#if (not this.currentProject.id)}}
@@ -365,49 +361,53 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
       {{/if}}
       <div class='filter-section'>
         <div class='filter-dropdown-container'>
-          {{#if this.selectedFilterConfig}}
-            {{#let (this.selectedFilterConfig.options) as |options|}}
-              <FilterDropdown
-                @searchField={{this.selectedFilterConfig.searchKey}}
-                @options={{options}}
-                @realmURLs={{this.realmHrefs}}
-                @selected={{this.selectedItemsForFilter}}
-                @onChange={{this.onChange}}
-                @onClose={{this.onClose}}
+          {{#if this.showLoadingOfDropdown}}
+            Loading...
+          {{else}}
+            {{#if this.selectedFilterConfig}}
+              {{#let (this.selectedFilterConfig.options) as |options|}}
+                <FilterDropdown
+                  @searchField={{this.selectedFilterConfig.searchKey}}
+                  @options={{options}}
+                  @realmURLs={{this.realmHrefs}}
+                  @selected={{this.selectedItemsForFilter}}
+                  @onChange={{this.onChange}}
+                  @onClose={{this.onClose}}
+                  as |item|
+                >
+                  {{#let (this.isSelectedItem item) as |isSelected|}}
+                    <StatusPill
+                      @isSelected={{isSelected}}
+                      @label={{if
+                        (eq this.selectedFilter 'status')
+                        item.label
+                        item.name
+                      }}
+                    />
+                  {{/let}}
+                </FilterDropdown>
+              {{/let}}
+            {{else}}
+              <BoxelSelect
+                class='status-select'
+                @selected={{this.selectedFilter}}
+                @options={{this.filterTypes}}
+                @onChange={{this.onSelectFilter}}
+                @placeholder={{'Choose a Filter'}}
+                @matchTriggerWidth={{false}}
+                @triggerComponent={{FilterTrigger}}
                 as |item|
               >
-                {{#let (this.isSelectedItem item) as |isSelected|}}
-                  <StatusPill
-                    @isSelected={{isSelected}}
-                    @label={{if
-                      (eq this.selectedFilter 'status')
-                      item.label
-                      item.name
-                    }}
-                  />
+                {{#let (this.getFilterIcon item) as |Icon|}}
+                  <div class='filter-option'>
+                    {{#if Icon}}
+                      <Icon class='filter-display-icon' />
+                    {{/if}}
+                    <span class='filter-display-text'>{{item}}</span>
+                  </div>
                 {{/let}}
-              </FilterDropdown>
-            {{/let}}
-          {{else}}
-            <BoxelSelect
-              class='status-select'
-              @selected={{this.selectedFilter}}
-              @options={{this.filterTypes}}
-              @onChange={{this.onSelectFilter}}
-              @placeholder={{'Choose a Filter'}}
-              @matchTriggerWidth={{false}}
-              @triggerComponent={{FilterTrigger}}
-              as |item|
-            >
-              {{#let (this.getFilterIcon item) as |Icon|}}
-                <div class='filter-option'>
-                  {{#if Icon}}
-                    <Icon class='filter-display-icon' />
-                  {{/if}}
-                  <span class='filter-display-text'>{{item}}</span>
-                </div>
-              {{/let}}
-            </BoxelSelect>
+              </BoxelSelect>
+            {{/if}}
           {{/if}}
         </div>
         <div class='filter-display-sec'>
@@ -434,6 +434,7 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
         <DndKanbanBoard
           @columns={{this.taskCollection.columns}}
           @onMove={{this.onMoveCardMutation}}
+          @displayCard={{this.showTaskCard}}
         >
           <:header as |column|>
             <ColumnHeader
@@ -457,7 +458,6 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
                 <CardComponent class='card' />
               </div>
             {{/let}}
-
           </:card>
         </DndKanbanBoard>
       </div>

From 54220c8c4961e5e5915f494241b637f05847fc50 Mon Sep 17 00:00:00 2001
From: tintinthong <justinthong93@gmail.com>
Date: Sun, 22 Dec 2024 07:05:40 +0800
Subject: [PATCH 02/12] cleanup fixes

---
 packages/experiments-realm/work-tracker.gts | 96 ++++++++++-----------
 1 file changed, 45 insertions(+), 51 deletions(-)

diff --git a/packages/experiments-realm/work-tracker.gts b/packages/experiments-realm/work-tracker.gts
index 4d1ea55bbf..f468ec3d43 100644
--- a/packages/experiments-realm/work-tracker.gts
+++ b/packages/experiments-realm/work-tracker.gts
@@ -92,6 +92,7 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
       },
     },
     this.realmHrefs,
+    { isLive: true },
   );
 
   get cardInstances() {
@@ -119,7 +120,7 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
   }
 
   hasColumnKey = (card: Task, key: string) => {
-    return card.status.label === key;
+    return card.status?.label === key;
   };
 
   taskCollection = getTaskCardsResource(
@@ -173,9 +174,10 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
     }
     if (!this.currentProject || !this.currentProject.id) {
       console.log('No project');
-      return {}; //can we query a no-op?
+      everyArr.push({ eq: { 'project.id': null } });
+    } else {
+      everyArr.push({ eq: { 'project.id': this.currentProject.id } });
     }
-    everyArr.push({ eq: { 'project.id': this.currentProject.id } });
     return (
       everyArr.length > 0
         ? {
@@ -348,10 +350,6 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
     );
   }
 
-  get showLoadingOfDropdown() {
-    return this.assigneeQuery?.isLoading;
-  }
-
   <template>
     <div class='task-app'>
       {{#if (not this.currentProject.id)}}
@@ -361,53 +359,49 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
       {{/if}}
       <div class='filter-section'>
         <div class='filter-dropdown-container'>
-          {{#if this.showLoadingOfDropdown}}
-            Loading...
-          {{else}}
-            {{#if this.selectedFilterConfig}}
-              {{#let (this.selectedFilterConfig.options) as |options|}}
-                <FilterDropdown
-                  @searchField={{this.selectedFilterConfig.searchKey}}
-                  @options={{options}}
-                  @realmURLs={{this.realmHrefs}}
-                  @selected={{this.selectedItemsForFilter}}
-                  @onChange={{this.onChange}}
-                  @onClose={{this.onClose}}
-                  as |item|
-                >
-                  {{#let (this.isSelectedItem item) as |isSelected|}}
-                    <StatusPill
-                      @isSelected={{isSelected}}
-                      @label={{if
-                        (eq this.selectedFilter 'status')
-                        item.label
-                        item.name
-                      }}
-                    />
-                  {{/let}}
-                </FilterDropdown>
-              {{/let}}
-            {{else}}
-              <BoxelSelect
-                class='status-select'
-                @selected={{this.selectedFilter}}
-                @options={{this.filterTypes}}
-                @onChange={{this.onSelectFilter}}
-                @placeholder={{'Choose a Filter'}}
-                @matchTriggerWidth={{false}}
-                @triggerComponent={{FilterTrigger}}
+          {{#if this.selectedFilterConfig}}
+            {{#let (this.selectedFilterConfig.options) as |options|}}
+              <FilterDropdown
+                @searchField={{this.selectedFilterConfig.searchKey}}
+                @options={{options}}
+                @realmURLs={{this.realmHrefs}}
+                @selected={{this.selectedItemsForFilter}}
+                @onChange={{this.onChange}}
+                @onClose={{this.onClose}}
                 as |item|
               >
-                {{#let (this.getFilterIcon item) as |Icon|}}
-                  <div class='filter-option'>
-                    {{#if Icon}}
-                      <Icon class='filter-display-icon' />
-                    {{/if}}
-                    <span class='filter-display-text'>{{item}}</span>
-                  </div>
+                {{#let (this.isSelectedItem item) as |isSelected|}}
+                  <StatusPill
+                    @isSelected={{isSelected}}
+                    @label={{if
+                      (eq this.selectedFilter 'status')
+                      item.label
+                      item.name
+                    }}
+                  />
                 {{/let}}
-              </BoxelSelect>
-            {{/if}}
+              </FilterDropdown>
+            {{/let}}
+          {{else}}
+            <BoxelSelect
+              class='status-select'
+              @selected={{this.selectedFilter}}
+              @options={{this.filterTypes}}
+              @onChange={{this.onSelectFilter}}
+              @placeholder={{'Choose a Filter'}}
+              @matchTriggerWidth={{false}}
+              @triggerComponent={{FilterTrigger}}
+              as |item|
+            >
+              {{#let (this.getFilterIcon item) as |Icon|}}
+                <div class='filter-option'>
+                  {{#if Icon}}
+                    <Icon class='filter-display-icon' />
+                  {{/if}}
+                  <span class='filter-display-text'>{{item}}</span>
+                </div>
+              {{/let}}
+            </BoxelSelect>
           {{/if}}
         </div>
         <div class='filter-display-sec'>

From 30d178da5358647e0858929ec92253446b427d58 Mon Sep 17 00:00:00 2001
From: tintinthong <justinthong93@gmail.com>
Date: Sun, 22 Dec 2024 07:05:50 +0800
Subject: [PATCH 03/12] assignee plural

---
 packages/experiments-realm/productivity/task.gts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/experiments-realm/productivity/task.gts b/packages/experiments-realm/productivity/task.gts
index d90d76b3bb..d255ab8796 100644
--- a/packages/experiments-realm/productivity/task.gts
+++ b/packages/experiments-realm/productivity/task.gts
@@ -205,8 +205,8 @@ class TaskIsolated extends Component<typeof Task> {
         </div>
 
         <div class='right-column'>
-          <div class='assignees'>
-            <h4>Assignees</h4>
+          <div class='assignee'>
+            <h4>Assignee</h4>
 
             {{#if @model.assignee}}
               <@fields.assignee

From cb05c0013d978831080ed6a419f58b3e15411486 Mon Sep 17 00:00:00 2001
From: tintinthong <justinthong93@gmail.com>
Date: Sun, 22 Dec 2024 07:06:18 +0800
Subject: [PATCH 04/12] remove hard coded title

---
 packages/experiments-realm/work-tracker.gts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/experiments-realm/work-tracker.gts b/packages/experiments-realm/work-tracker.gts
index f468ec3d43..9e7f277673 100644
--- a/packages/experiments-realm/work-tracker.gts
+++ b/packages/experiments-realm/work-tracker.gts
@@ -1,8 +1,6 @@
 import {
   Component,
   realmURL,
-  StringField,
-  contains,
   field,
   BaseDef,
   CardDef,
@@ -615,11 +613,6 @@ export class WorkTracker extends AppCard {
   static prefersWideFormat = true;
   static isolated = WorkTrackerIsolated;
   @field project = linksTo(() => Project);
-  @field title = contains(StringField, {
-    computeVia: function (this: WorkTracker) {
-      return 'Work Tracker';
-    },
-  });
 }
 
 function removeFileExtension(cardUrl: string) {

From 25a77c65dda9addcb868003d4bd28c0e36b37be0 Mon Sep 17 00:00:00 2001
From: tintinthong <justinthong93@gmail.com>
Date: Sun, 22 Dec 2024 07:11:18 +0800
Subject: [PATCH 05/12] remove unnecessary code

---
 .../productivity/task-cards-resource.gts             | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/experiments-realm/productivity/task-cards-resource.gts b/packages/experiments-realm/productivity/task-cards-resource.gts
index 54c6150bbd..fa57bbc5b0 100644
--- a/packages/experiments-realm/productivity/task-cards-resource.gts
+++ b/packages/experiments-realm/productivity/task-cards-resource.gts
@@ -49,19 +49,9 @@ class TaskCollection extends Resource<Args> {
     return Array.from(this.data.values());
   }
 
-  get hasEmptyData() {
-    return this.columns.every((column) => column.cards.length === 0);
-  }
-
-  get numberOfCards() {
-    return this.columns.reduce((acc, column) => acc + column.cards.length, 0);
-  }
-
   modify(_positional: never[], named: Args['named']) {
     this.hasColumnKey = named.hasColumnKey;
-    if (named.cards.length !== this.numberOfCards) {
-      this.commit(named.cards, named.columnKeys);
-    }
+    this.commit(named.cards, named.columnKeys);
   }
 }
 

From b086656fc9a77fb179c6092410344933176b6ffb Mon Sep 17 00:00:00 2001
From: tintinthong <justinthong93@gmail.com>
Date: Sun, 22 Dec 2024 07:19:06 +0800
Subject: [PATCH 06/12] remove showLoadingOfKanban

---
 packages/experiments-realm/work-tracker.gts | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/experiments-realm/work-tracker.gts b/packages/experiments-realm/work-tracker.gts
index 9e7f277673..0453d480c8 100644
--- a/packages/experiments-realm/work-tracker.gts
+++ b/packages/experiments-realm/work-tracker.gts
@@ -341,13 +341,6 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
     }
   }
 
-  get showLoadingOfKanban() {
-    // We want to display the stale data when the kanban is non-empty
-    return (
-      this.cards && this.cards.isLoading && this.taskCollection.hasEmptyData
-    );
-  }
-
   <template>
     <div class='task-app'>
       {{#if (not this.currentProject.id)}}

From be0714dbf9da3749eb9435318384389c6d8557b3 Mon Sep 17 00:00:00 2001
From: tintinthong <justinthong93@gmail.com>
Date: Sun, 22 Dec 2024 07:21:42 +0800
Subject: [PATCH 07/12] rather than waiting for loading just return empty state

---
 packages/experiments-realm/work-tracker.gts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/experiments-realm/work-tracker.gts b/packages/experiments-realm/work-tracker.gts
index 0453d480c8..b906cc8a49 100644
--- a/packages/experiments-realm/work-tracker.gts
+++ b/packages/experiments-realm/work-tracker.gts
@@ -94,6 +94,9 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
   );
 
   get cardInstances() {
+    if (!this.cards || !this.cards.instances) {
+      return [];
+    }
     return this.cards.instances as Task[];
   }
 

From d86812acb2af237d4366cc1e5d9c62e51a6e9afd Mon Sep 17 00:00:00 2001
From: tintinthong <justinthong93@gmail.com>
Date: Sun, 22 Dec 2024 19:57:25 +0800
Subject: [PATCH 08/12] small fix

---
 packages/experiments-realm/work-tracker.gts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/experiments-realm/work-tracker.gts b/packages/experiments-realm/work-tracker.gts
index b906cc8a49..068a3458e1 100644
--- a/packages/experiments-realm/work-tracker.gts
+++ b/packages/experiments-realm/work-tracker.gts
@@ -110,7 +110,7 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
       if (selectedItems.length === 0) return true;
       return selectedItems.some((item) => {
         if (filterType === 'status') {
-          return card.status.label === item.label;
+          return card.status?.label === item.label;
         } else if (filterType === 'assignee') {
           return card.assignee?.name === item.name;
         } else {

From 3262d2ccfe036c4cd039d68ee0c4ad4a5952d6f8 Mon Sep 17 00:00:00 2001
From: tintinthong <justinthong93@gmail.com>
Date: Mon, 23 Dec 2024 13:42:50 +0700
Subject: [PATCH 09/12] Add a link to viewCard in edit mode (#1967)

---
 packages/experiments-realm/work-tracker.gts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/experiments-realm/work-tracker.gts b/packages/experiments-realm/work-tracker.gts
index 068a3458e1..58c4458b05 100644
--- a/packages/experiments-realm/work-tracker.gts
+++ b/packages/experiments-realm/work-tracker.gts
@@ -10,7 +10,11 @@ import { tracked } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
 import { TrackedMap } from 'tracked-built-ins';
 import GlimmerComponent from '@glimmer/component';
-import { DndItem, LoadingIndicator } from '@cardstack/boxel-ui/components';
+import {
+  BoxelButton,
+  DndItem,
+  LoadingIndicator,
+} from '@cardstack/boxel-ui/components';
 import {
   DndKanbanBoard,
   DndColumn,
@@ -344,11 +348,19 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
     }
   }
 
+  @action viewCard() {
+    this.args.context?.actions?.viewCard?.(new URL(this.args.model.id), 'edit');
+  }
+
   <template>
     <div class='task-app'>
       {{#if (not this.currentProject.id)}}
         <div class='disabled'>
-          Link a project to continue
+          {{#if @context.actions.viewCard}}
+            <BoxelButton @kind='primary' {{on 'click' this.viewCard}}>
+              Link a project to continue
+            </BoxelButton>
+          {{/if}}
         </div>
       {{/if}}
       <div class='filter-section'>

From 49e911184a06cb84aeb8feb1c20cb5d581b71c22 Mon Sep 17 00:00:00 2001
From: tintinthong <justinthong93@gmail.com>
Date: Mon, 23 Dec 2024 14:08:25 +0700
Subject: [PATCH 10/12] Add-proper-loading-state-of-kanban-board (#1968)

* add loading overlay when card resource isLoading

* fix isLoading

* fix isLoading

* add loading state for dropdown
---
 .../productivity/filter-dropdown.gts            |  3 ++-
 .../productivity/filter-trigger.gts             | 13 +++++++++++--
 packages/experiments-realm/work-tracker.gts     | 17 +++++++++++++++++
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/experiments-realm/productivity/filter-dropdown.gts b/packages/experiments-realm/productivity/filter-dropdown.gts
index 452ca8c25f..a572a0fc48 100644
--- a/packages/experiments-realm/productivity/filter-dropdown.gts
+++ b/packages/experiments-realm/productivity/filter-dropdown.gts
@@ -11,6 +11,7 @@ interface FilterDropdownSignature {
     selected: any;
     onChange: (value: any) => void;
     onClose: () => boolean | undefined;
+    isLoading?: boolean;
   };
   Blocks: {
     default: [any];
@@ -24,7 +25,7 @@ export class FilterDropdown extends GlimmerComponent<FilterDropdownSignature> {
       @options={{@options}}
       @selected={{@selected}}
       @onChange={{@onChange}}
-      @triggerComponent={{FilterTrigger}}
+      @triggerComponent={{(component FilterTrigger isLoading=@isLoading)}}
       @initiallyOpened={{true}}
       @searchEnabled={{true}}
       @searchField={{@searchField}}
diff --git a/packages/experiments-realm/productivity/filter-trigger.gts b/packages/experiments-realm/productivity/filter-trigger.gts
index dc4072b66c..9b5a401c49 100644
--- a/packages/experiments-realm/productivity/filter-trigger.gts
+++ b/packages/experiments-realm/productivity/filter-trigger.gts
@@ -1,8 +1,11 @@
 import GlimmerComponent from '@glimmer/component';
 import { IconButton } from '@cardstack/boxel-ui/components';
 import ListFilter from '@cardstack/boxel-icons/list-filter';
+
 interface TriggerSignature {
-  Args: {};
+  Args: {
+    isLoading?: boolean;
+  };
   Element: HTMLDivElement;
 }
 
@@ -10,7 +13,13 @@ export class FilterTrigger extends GlimmerComponent<TriggerSignature> {
   <template>
     <div class='filter-trigger'>
       <IconButton @icon={{ListFilter}} width='13px' height='13px' />
-      <span class='filter-trigger-text'>Filter</span>
+      <span class='filter-trigger-text'>
+        {{#if this.args.isLoading}}
+          Loading...
+        {{else}}
+          Filter
+        {{/if}}
+      </span>
     </div>
 
     <style scoped>
diff --git a/packages/experiments-realm/work-tracker.gts b/packages/experiments-realm/work-tracker.gts
index 58c4458b05..e17b3e75b3 100644
--- a/packages/experiments-realm/work-tracker.gts
+++ b/packages/experiments-realm/work-tracker.gts
@@ -348,6 +348,18 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
     }
   }
 
+  get isLoading() {
+    return this.cards && this.cards.isLoading;
+  }
+
+  get assigneeIsLoading() {
+    return (
+      this.selectedFilter === 'assignee' &&
+      this.assigneeQuery &&
+      this.assigneeQuery.isLoading
+    );
+  }
+
   @action viewCard() {
     this.args.context?.actions?.viewCard?.(new URL(this.args.model.id), 'edit');
   }
@@ -362,12 +374,17 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
             </BoxelButton>
           {{/if}}
         </div>
+      {{else if this.isLoading}}
+        <div class='disabled'>
+          <LoadingIndicator @color='var(--boxel-light)' />
+        </div>
       {{/if}}
       <div class='filter-section'>
         <div class='filter-dropdown-container'>
           {{#if this.selectedFilterConfig}}
             {{#let (this.selectedFilterConfig.options) as |options|}}
               <FilterDropdown
+                @isLoading={{this.assigneeIsLoading}}
                 @searchField={{this.selectedFilterConfig.searchKey}}
                 @options={{options}}
                 @realmURLs={{this.realmHrefs}}

From 905e2bc9b4e1a8c533783f8d49488e72db1927dc Mon Sep 17 00:00:00 2001
From: tintinthong <justinthong93@gmail.com>
Date: Mon, 23 Dec 2024 08:20:59 +0100
Subject: [PATCH 11/12] fix lint

---
 packages/experiments-realm/productivity/filter-trigger.gts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/experiments-realm/productivity/filter-trigger.gts b/packages/experiments-realm/productivity/filter-trigger.gts
index 9b5a401c49..4f921e1602 100644
--- a/packages/experiments-realm/productivity/filter-trigger.gts
+++ b/packages/experiments-realm/productivity/filter-trigger.gts
@@ -14,7 +14,7 @@ export class FilterTrigger extends GlimmerComponent<TriggerSignature> {
     <div class='filter-trigger'>
       <IconButton @icon={{ListFilter}} width='13px' height='13px' />
       <span class='filter-trigger-text'>
-        {{#if this.args.isLoading}}
+        {{#if @isLoading}}
           Loading...
         {{else}}
           Filter

From 9803dd3ffe1952d196858bbe49ce300d21b39e35 Mon Sep 17 00:00:00 2001
From: tintinthong <justinthong93@gmail.com>
Date: Mon, 23 Dec 2024 08:32:18 +0100
Subject: [PATCH 12/12] remove isLoading state of cards -- its too intrusive

---
 packages/experiments-realm/work-tracker.gts | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/experiments-realm/work-tracker.gts b/packages/experiments-realm/work-tracker.gts
index e17b3e75b3..a2f5902766 100644
--- a/packages/experiments-realm/work-tracker.gts
+++ b/packages/experiments-realm/work-tracker.gts
@@ -348,10 +348,6 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
     }
   }
 
-  get isLoading() {
-    return this.cards && this.cards.isLoading;
-  }
-
   get assigneeIsLoading() {
     return (
       this.selectedFilter === 'assignee' &&
@@ -374,10 +370,6 @@ class WorkTrackerIsolated extends Component<typeof AppCard> {
             </BoxelButton>
           {{/if}}
         </div>
-      {{else if this.isLoading}}
-        <div class='disabled'>
-          <LoadingIndicator @color='var(--boxel-light)' />
-        </div>
       {{/if}}
       <div class='filter-section'>
         <div class='filter-dropdown-container'>