Cardoza_Construction/TasGrid
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Tag filtering fix on mobile

Browse Source
This commit is contained in:
Timothy Cardoza
2026-03-06 15:59:34 -06:00
parent 3c23e2109a
commit 0a1909804f
1 changed files with 49 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FilterBar.tsx
+49 -15
View File
@@ -5,6 +5,7 @@ import { Button } from "./ui/button";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Badge } from "./ui/badge"; import { Badge } from "./ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger } from "./ui/select";
import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "./ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover"; import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
import { useTheme } from "./ThemeProvider"; import { useTheme } from "./ThemeProvider";
import { getThemeAdjustedColor } from "@/lib/colors"; import { getThemeAdjustedColor } from "@/lib/colors";
@@ -12,6 +13,8 @@ import { getThemeAdjustedColor } from "@/lib/colors";
export const FilterBar: Component<{ mode?: 'tasks' | 'notes', class?: string, triggerClass?: string }> = (props) => { export const FilterBar: Component<{ mode?: 'tasks' | 'notes', class?: string, triggerClass?: string }> = (props) => {
const { resolvedTheme } = useTheme(); const { resolvedTheme } = useTheme();
const [isOpen, setIsOpen] = createSignal(false); const [isOpen, setIsOpen] = createSignal(false);
const [isTagOpen, setIsTagOpen] = createSignal(false);
const [tagSearch, setTagSearch] = createSignal("");
const [newTemplateName, setNewTemplateName] = createSignal(""); const [newTemplateName, setNewTemplateName] = createSignal("");
const [isSaving, setIsSaving] = createSignal(false); const [isSaving, setIsSaving] = createSignal(false);
@@ -294,22 +297,53 @@ export const FilterBar: Component<{ mode?: 'tasks' | 'notes', class?: string, tr
</Badge> </Badge>
)} )}
</For> </For>
<Select <Popover open={isTagOpen()} onOpenChange={setIsTagOpen}>
value="" <PopoverTrigger class="h-7 px-3 bg-muted/40 border-none shadow-none focus:ring-0 text-[0.625rem] font-bold uppercase tracking-wider rounded-lg hover:bg-muted/60 transition-colors">
onChange={(val) => {
if (val && !currentFilter().tags.some(t => t.name === val)) {
currentSetFilter({ tags: [...currentFilter().tags, { name: val, excluded: false }] });
}
}}
options={allTags()}
placeholder="Add tag..."
itemComponent={(props) => <SelectItem item={props.item}>{props.item.rawValue}</SelectItem>}
>
<SelectTrigger class="h-7 px-3 bg-muted/40 border-none shadow-none focus:ring-0 text-[0.625rem] font-bold uppercase tracking-wider rounded-lg hover:bg-muted/60 transition-colors">
<span>+ Tag</span> <span>+ Tag</span>
</SelectTrigger> </PopoverTrigger>
<SelectContent /> <PopoverContent class="w-[200px] p-0" align="start">
</Select> <Command>
<CommandInput
placeholder="Search tags..."
value={tagSearch()}
onValueChange={setTagSearch}
/>
<CommandList>
<Show when={allTags().filter(t => {
if (t.startsWith('_')) return false;
const search = tagSearch().toLowerCase();
if (!search && (t.startsWith('@') || t.startsWith('#'))) return false;
return t.toLowerCase().includes(search);
}).length === 0}>
<CommandEmpty>No tags found.</CommandEmpty>
</Show>
<CommandGroup>
<For each={allTags().filter(t => {
if (t.startsWith('_')) return false;
const search = tagSearch().toLowerCase();
if (!search && (t.startsWith('@') || t.startsWith('#'))) return false;
return t.toLowerCase().includes(search);
})}>
{(tag) => (
<CommandItem
value={tag}
onSelect={() => {
if (!currentFilter().tags.some(t => t.name === tag)) {
currentSetFilter({ tags: [...currentFilter().tags, { name: tag, excluded: false }] });
}
setIsTagOpen(false);
setTagSearch("");
}}
>
{tag}
</CommandItem>
)}
</For>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div> </div>
</div> </div>
</div> </div>