Add tag filter with intersection logic to all item pages

[Copilot]

Tag Filtering Implementation Plan

• Create a reusable TagFilter component to show and filter by tags
• Add tag filtering to /focusing page
• Add tag filtering to /later page
• Add tag filtering to /logbook page
• Add tag filtering to /trash page
• Add tag filtering to /projects page
• Add tag filtering to /projects/[id] page
• Add tag filtering to /blocked page
• Implement intersection (AND) logic for multiple tag selection
• Add "No Tag" filter option
• Test the implementation manually
• Address code review feedback
• Fix filtering reactivity issues
• Manual testing to verify fixes - all working correctly!

Summary

This PR implements comprehensive tag filtering across all major pages of the application with the following features:

Features Implemented:

1. Reusable TagFilter Component - Shows available tags collected from items on each page with toggle functionality
2. Intersection Logic - Multiple selected tags use AND logic, meaning items must have ALL selected tags to appear in filtered results
3. "No Tag" Filter - Special button to show only items without any tags; selecting it clears other tag selections
4. Added to all specified routes: /focusing, /later, /logbook, /trash, /projects, /projects/[id], and /blocked

How it works:

• Tags are dynamically collected from items currently visible on each page
• Clicking a tag filters items to show only those with that tag
• Selecting multiple tags narrows results using intersection (AND) logic - items must have all selected tags
• "No Tag" button shows only items without any tags and clears other selections
• Clear filters button appears when any filter is active

Screenshots:

All items visible (no filters applied):

Filtering by "work" tag only:

Original prompt

In /focusing, /later, /logbook, /trash, /projects, and /projects/[id] pages, collect the tags being used by the present items and show a filter for them at the top of the page.

The user has attached the following file paths as relevant context:

• .github/copilot-instructions.md
• AGENTS.md

Created from VS Code.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[netlify]

✅ Deploy Preview for thingsdotdo ready!

Name	Link
🔨 Latest commit	c6d6edd
🔍 Latest deploy log	https://app.netlify.com/projects/thingsdotdo/deploys/69605d52c1b8c50008ee4759
😎 Deploy Preview	https://deploy-preview-21--thingsdotdo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[danielh-official]

@copilot I've made changes to the way you wrote in projects/[id] page. While the tag filter does appear in [focusing, later, logbook, trash, blocked], selecting a tag doesn't filter them.

Also, the tag filter doesn't appear within projects/[id] page.

[Copilot]

@copilot I've made changes to the way you wrote in projects/[id] page. While the tag filter does appear in [focusing, later, logbook, trash, blocked], selecting a tag doesn't filter them.

Also, the t...

Fixed both issues in commit a88e994:

Issue 1: Tag filter not appearing in projects/[id] page

• The allTodosUnfiltered observable was never being set
• Added proper initialization in the $effect block

Issue 2: Selecting a tag doesn't filter items

• The problem was using $derived.by() to create liveQuery instances - this doesn't work with Svelte 5's reactivity
• Changed to use $effect() which properly reacts to selectedTagIds changes and creates new filtered liveQuery instances

The filtering now works correctly on all pages (focusing, later, logbook, trash, projects, and projects/[id]).

Screenshots:

Both tags showing:

Filtering by "work" tag:

[danielh-official]

@copilot Good so far.

1. Tag filtering should operate on intersection logic. Not union. It should drill the list down with each selected tag.
2. Tag filtering should also show up on the /blocked route.
3. There should a "No Tag" option that includes only tasks that do not have a tag, and selecting it should unselect any selected tags. Don't do anything fancy with this like injecting it in the tags array. Just make a separate element and onclick toggle function for it. Clicking the "No Tag" button again should toggle it off, restoring it to an empty selected tag ids (otherwise known as all items).

[Copilot]

@copilot Good so far.

1. Tag filtering should operate on intersection logic. Not union. It should drill the list down with each selected tag....

Implemented all three requested features in commit 5db83f2:

1. Changed to intersection (AND) logic - Items must have ALL selected tags to appear
2. Added tag filtering to /blocked route - Now includes TagFilter component
3. Added "No Tag" option - Shows only items without any tags; selecting it clears tag selections and vice versa

Testing screenshots:

All items visible (no filters):

Filtering by "work" tag only:

The intersection logic ensures that selecting multiple tags narrows down results to only items that have all the selected tags.