From 2924d542be25511ffb69a8e50559870e4ede9fa2 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Mon, 6 Nov 2023 15:22:26 +0800
Subject: [PATCH] Toggle labels if button is directly clicked

---
 .../templates/homeFeed/LibraryFilterMenu.tsx      | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index 1d8ed223d..59a7dd4d1 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useMemo } from 'react'
+import { ReactNode, useEffect, useMemo, useRef } from 'react'
 import { StyledText } from '../../elements/StyledText'
 import { Box, HStack, SpanBox, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
@@ -467,6 +467,7 @@ type LabelButtonProps = {
 
 function LabelButton(props: LabelButtonProps): JSX.Element {
   const labelId = `checkbox-label-${props.label.id}`
+  const checkboxRef = useRef<HTMLInputElement | null>(null)
   const state = useMemo(() => {
     const term = props.searchTerm ?? ''
     if (term.indexOf(`label:\"${props.label.name}\"`) >= 0) {
@@ -505,7 +506,6 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
       distribution="start"
     >
       <label
-        htmlFor={labelId}
         style={{
           width: '100%',
           maxWidth: '170px',
@@ -513,6 +513,16 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap',
         }}
+        onClick={() => {
+          const query = props.searchTerm?.replace(/label:\"(.*)\"/, '') ?? ''
+          if (checkboxRef.current?.checked) {
+            props.applySearchQuery(
+              `${query.trim()} label:\"${props.label.name}\"`
+            )
+          } else {
+            props.applySearchQuery(query.trim())
+          }
+        }}
       >
         <Circle size={9} color={props.label.color} weight="fill" />
         <SpanBox css={{ pl: '10px' }}>{props.label.name}</SpanBox>
@@ -524,6 +534,7 @@ function LabelButton(props: LabelButtonProps): JSX.Element {
       >
         <input
           id={labelId}
+          ref={checkboxRef}
           type="checkbox"
           checked={state === 'on'}
           onChange={(e) => {