feat(timeline): add category filter to Timeline view (#778)

* feat(timeline): add category filter to Timeline view

Add a category filter dropdown to the Timeline's filter panel that lets
users show only events matching selected categories. Supports multi-select
with tag-based display, hierarchical matching (selecting "Work" includes
"Work > Programming"), and AFK bucket exclusion. Uses the same categorization
logic as the existing swimlane coloring.

Closes #620

* fix(lint): rename shadowed variable in Timeline category filter

Rename `_` to `_cat` in removeCategory's filter callback to avoid
shadowing the lodash import, fixing the no-shadow eslint warning.

* refactor(timeline): reuse shared categorization helper

Author: TimeToBuildBob

src/util/color.ts

@@ -140,20 +140,31 @@ export function getTitleAttr(bucket: { type?: string }, e: IEvent) {
   }
 }
 
-export function getCategoryColorFromEvent(bucket: IBucket, e: IEvent) {
+export function getCategorizationStringFromEvent(bucket: IBucket, e: IEvent): string | null {
   if (bucket.type == 'currentwindow') {
     // using linebreak and "m" regex flag to make `$` and `^` work
-    return getCategoryColorFromString(e.data.app + '\n' + e.data.title);
+    return e.data.app + '\n' + e.data.title;
   } else if (bucket.type == 'web.tab.current') {
     // same as above
-    return getCategoryColorFromString(e.data.title + '\n' + e.data.url);
-  } else if (bucket.type == 'afkstatus') {
-    return getColorFromString(e.data.status);
+    return e.data.title + '\n' + e.data.url;
   } else if (bucket.type?.startsWith('app.editor')) {
-    return getCategoryColorFromString(e.data.file);
+    return e.data.file;
   } else if (bucket.type?.startsWith('general.stopwatch')) {
-    return getCategoryColorFromString(e.data.label);
-  } else {
-    return getColorFromString(getTitleAttr(bucket, e));
+    return e.data.label;
+  }
+
+  return null;
+}
+
+export function getCategoryColorFromEvent(bucket: IBucket, e: IEvent) {
+  const categorizationString = getCategorizationStringFromEvent(bucket, e);
+  if (categorizationString !== null) {
+    return getCategoryColorFromString(categorizationString);
   }
+
+  if (bucket.type == 'afkstatus') {
+    return getColorFromString(e.data.status);
+  }
+
+  return getColorFromString(getTitleAttr(bucket, e));
 }

src/views/Timeline.vue

@@ -38,6 +38,17 @@ div
           td
             b-form-checkbox(v-model="filter_afk" size="sm" switch)
               | Filter AFK
+        tr
+          th.pt-2.pr-3
+            label Categories:
+          td
+            select(@change="onCategorySelect($event)", :value="''")
+              option(value="" disabled) {{ filter_categories.length > 0 ? 'Add category...' : 'All' }}
+              option(v-for="cat in category_options", :key="cat.text", :value="cat.text") {{ cat.text }}
+            div.mt-1(v-if="filter_categories.length > 0")
+              span.badge.badge-info.mr-1(v-for="(cat, idx) in filter_categories", :key="idx")
+                | {{ cat.join(' > ') }}
+                button.ml-1.close.small(@click="removeCategory(idx)", type="button", style="font-size: 0.8rem") ×
   div.d-inline-block.border.rounded.p-2.mr-2(v-if="num_events !== 0")
     | Events shown: {{ num_events }}
   b-alert.d-inline-block.p-2.mb-0.mt-2(v-if="num_events === 0", variant="warning", show)
@@ -80,6 +91,9 @@ import { useSettingsStore } from '~/stores/settings';
 import { useBucketsStore } from '~/stores/buckets';
 import { getClient } from '~/util/awclient';
 import { canonicalEvents } from '~/queries';
+import { useCategoryStore } from '~/stores/categories';
+import { matchString } from '~/util/classes';
+import { getCategorizationStringFromEvent } from '~/util/color';
 import { seconds_to_duration } from '~/util/time';
 
 export default {
@@ -96,6 +110,7 @@ export default {
       filter_client: null,
       filter_duration: null,
       filter_afk: false,
+      filter_categories: [],
       swimlane: null,
       updateTimelineWindow: true,
     };
@@ -110,6 +125,10 @@ export default {
     num_events() {
       return _.sumBy(this.buckets, 'events.length');
     },
+    category_options() {
+      const categoryStore = useCategoryStore();
+      return categoryStore.allCategoriesSelect;
+    },
     filter_summary() {
       const desc = [];
       if (this.filter_hostname) {
@@ -124,6 +143,13 @@ export default {
       if (this.filter_afk) {
         desc.push('AFK filtered');
       }
+      if (this.filter_categories.length > 0) {
+        desc.push(
+          this.filter_categories.length +
+            ' categor' +
+            (this.filter_categories.length === 1 ? 'y' : 'ies')
+        );
+      }
 
       if (desc.length > 0) {
         return desc.join(', ');
@@ -152,12 +178,28 @@ export default {
       this.updateTimelineWindow = false;
       this.getBuckets();
     },
+    filter_categories() {
+      this.updateTimelineWindow = false;
+      this.getBuckets();
+    },
     swimlane() {
       this.updateTimelineWindow = false;
       this.getBuckets();
     },
   },
   methods: {
+    onCategorySelect(event) {
+      const text = event.target.value;
+      if (!text) return;
+      const cat = this.category_options.find(c => c.text === text);
+      if (cat && !this.filter_categories.some(fc => _.isEqual(fc, cat.value))) {
+        this.filter_categories = [...this.filter_categories, cat.value];
+      }
+      event.target.value = '';
+    },
+    removeCategory(idx) {
+      this.filter_categories = this.filter_categories.filter((_cat, i) => i !== idx);
+    },
     getBuckets: async function () {
       if (this.daterange == null) return;
 
@@ -189,6 +231,26 @@ export default {
         }
       }
 
+      if (this.filter_categories.length > 0) {
+        const categoryStore = useCategoryStore();
+        const allCats = categoryStore.classes;
+        for (const bucket of buckets) {
+          // Skip AFK buckets — they don't have meaningful categorization
+          if (bucket.type === 'afkstatus') continue;
+          bucket.events = _.filter(bucket.events, e => {
+            const str = getCategorizationStringFromEvent(bucket, e);
+            if (str === null) return true; // Keep events from unknown bucket types
+            const matched = matchString(str, allCats);
+            const eventCat = matched ? matched.name : ['Uncategorized'];
+            // Check if the event's category matches any selected filter category
+            // (including parent matches: selecting "Work" also shows "Work > Programming")
+            return this.filter_categories.some(filterCat =>
+              _.isEqual(eventCat.slice(0, filterCat.length), filterCat)
+            );
+          });
+        }
+      }
+
       // AFK filtering: use query engine to filter window events by AFK status
       if (this.filter_afk) {
         buckets = await this._applyAfkFilter(buckets);