From 32e1bd2ddaebde9b3a81e784920495feb29883e1 Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Fri, 21 Jun 2024 00:15:40 -0700
Subject: [PATCH] add badges for tag filter shortcuts

---
 frontend/src/components/export.tsx     |  2 +-
 frontend/src/components/tags/index.tsx | 36 +++++++++++++++++++++++---
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/export.tsx b/frontend/src/components/export.tsx
index 32d61cb5d..8a96e65c6 100644
--- a/frontend/src/components/export.tsx
+++ b/frontend/src/components/export.tsx
@@ -28,8 +28,8 @@ export const ExportButton = ({
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button variant="outline" className="flex gap-2 items-center">
-          Toml
           <FileDown className="w-4 h-4" />
+          Toml
         </Button>
       </DialogTrigger>
       <DialogContent className="w-[900px] max-w-[95vw]">
diff --git a/frontend/src/components/tags/index.tsx b/frontend/src/components/tags/index.tsx
index 5d86e20bc..9bca17fb1 100644
--- a/frontend/src/components/tags/index.tsx
+++ b/frontend/src/components/tags/index.tsx
@@ -39,6 +39,23 @@ export const TagsFilter = () => {
         tag_ids={tags}
         onBadgeClick={(tag_id) => setTags(tags.filter((id) => id !== tag_id))}
       />
+
+      {tags.length > 0 && (
+        <Badge
+          variant="destructive"
+          className="flex items-center gap-2 py-1"
+          onClick={() => setTags([])}
+        >
+          Clear
+          <Badge
+            variant="outline"
+            className="text-muted-foreground hidden md:inline-flex"
+          >
+            shift + c
+          </Badge>
+        </Badge>
+      )}
+
       <Popover
         open={open}
         onOpenChange={(open) => {
@@ -47,8 +64,15 @@ export const TagsFilter = () => {
         }}
       >
         <PopoverTrigger asChild>
-          <Button variant="outline" className="flex gap-3">
-            Filter by Tag <Tag className="w-3 h-3" />
+          <Button variant="outline" className="flex items-center gap-2">
+            <Tag className="w-3 h-3" />
+            Tag Filter
+            <Badge
+              variant="outline"
+              className="text-muted-foreground hidden md:inline-flex"
+            >
+              shift + t
+            </Badge>
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-[200px] max-h-[200px] p-0" sideOffset={12}>
@@ -257,8 +281,14 @@ export const AddTags = ({ target }: { target: TargetExcludingSystem }) => {
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
-        <Button variant="secondary" className="px-2 py-0 h-auto">
+        <Button variant="secondary" className="px-2 py-0.5 h-fit">
           <PlusCircle className="w-3" />
+          {/* <Badge
+            variant="outline"
+            className="text-muted-foreground hidden md:inline-flex"
+          >
+            shift + t
+          </Badge> */}
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[200px] p-0" sideOffset={12} align="end">