Show usage count per tag

Author: derwebcoder

src/container/TagEditor/TagConfig/TagConfig.tsx

@@ -1,6 +1,6 @@
 import { tagIcons, type Tag, type TagIcon } from "../../../interfaces/Tag";
 import { Tag as TagElement } from "../../../common/components/Tag/Tag";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { HueSlider } from "../../../common/components/HueSlider/HueSlider";
 import { tagService } from "../../../scripts/db/TagService";
 import {
@@ -29,6 +29,7 @@ import type { Editor } from "@tiptap/react";
 
 type Props = {
 	tag: Tag;
+	showUsageCount: boolean;
 };
 
 const updateHueDebounced = debounce((name: string, hue: number) => {
@@ -47,10 +48,20 @@ const updateIconDebounced = debounce((name: string, icon: TagIcon) => {
 }, 1000);
 
 export const TagConfig = (props: Props) => {
-	const { tag } = props;
+	const { tag, showUsageCount } = props;
 	const [hue, setHue] = useState(tag.hue);
 	const [icon, setIcon] = useState<TagIcon>(tag.icon ?? "hash");
 	const { toast } = useToast();
+	const [usageCount, setUsageCount] = useState(0);
+
+	useEffect(() => {
+		if (!showUsageCount) {
+			return;
+		}
+		(async () => {
+			setUsageCount((await sparkService.find([tag.name])).length);
+		})();
+	}, [showUsageCount, tag.name]);
 
 	const handleHueChange = (value: number) => {
 		setHue(value);
@@ -107,7 +118,8 @@ export const TagConfig = (props: Props) => {
 	};
 
 	return (
-		<div className="grid grid-cols-subgrid col-span-5 border-b border-stone-200 py-2 w-full items-center gap-4">
+		<div className="grid grid-cols-subgrid col-span-6 border-b border-stone-200 py-2 w-full items-center gap-4">
+			<div>{showUsageCount ? usageCount : ""}</div>
 			<div className="justify-self-center">
 				<TagElement
 					name={tag.name}

src/container/TagEditor/TagEditor.tsx

@@ -14,16 +14,22 @@ import { useLiveQuery } from "dexie-react-hooks";
 import { tagService } from "../../scripts/db/TagService";
 import { TagConfig } from "./TagConfig/TagConfig";
 import { Input } from "../../common/components/shadcn/input";
+import type React from "react";
 import { useState } from "react";
 import { matchSorter } from "match-sorter";
 
 export const TagEditor = () => {
+	const [showUsageCount, setShowUsageCount] = useState(false);
 	const tags = useLiveQuery(() => {
 		return tagService.listTags();
 	});
 
 	const [filter, setFilter] = useState("");
 
+	const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setFilter(event.target.value);
+	};
+
 	const filteredTags = matchSorter(tags ?? [], filter, {
 		keys: [
 			"name",
@@ -62,26 +68,35 @@ export const TagEditor = () => {
 					</div>
 					<div className="grid grid-cols-[1fr_minmax(400px,_900px)_1fr] gap-4 p-4">
 						<div />
-						<div className="grid grid-cols-[300px_1fr]">
+						<div className="flex justify-between">
 							<label className="flex justify-center items-center gap-2">
 								Filter:
 								<Input
 									value={filter}
-									onChange={(e) => setFilter(e.target.value)}
+									onChange={handleFilterChange}
 								/>
 							</label>
+							<Button
+								variant={"outline"}
+								onClick={(e) =>
+									setShowUsageCount(!showUsageCount)
+								}
+							>
+								Count usage
+							</Button>
 						</div>
 						<div />
 					</div>
 					<div className="grid grid-cols-[1fr_minmax(400px,_900px)_1fr] gap-4 pb-10 overflow-y-auto max-h-96">
 						{!tags || tags.length <= 0 ? (
 							<div>No tags yet.</div>
 						) : (
-							<div className="col-start-2 grid grid-cols-[200px_1fr_180px_100px_100px]">
+							<div className="col-start-2 grid grid-cols-[max-content_200px_1fr_180px_100px_100px]">
 								{filteredTags.map((tag) => (
 									<TagConfig
 										key={tag.name}
 										tag={tag}
+										showUsageCount={showUsageCount}
 									/>
 								))}
 							</div>