added-more-keyboard-shortcuts (#233)

Author: Neeraj-gagat

frontend/src/components/HomeComponents/Tasks/Tasks.tsx

@@ -791,6 +791,21 @@ export const Tasks = (
       document.getElementById('sync-task')?.click();
     }
   });
+  useHotkeys(['p'], () => {
+    if (!showReports) {
+      document.getElementById('projects')?.click();
+    }
+  });
+  useHotkeys(['s'], () => {
+    if (!showReports) {
+      document.getElementById('status')?.click();
+    }
+  });
+  useHotkeys(['t'], () => {
+    if (!showReports) {
+      document.getElementById('tags')?.click();
+    }
+  });
   useHotkeys(['c'], () => {
     if (!showReports && !_isDialogOpen) {
       const task = currentTasks[selectedIndex];
@@ -921,25 +936,31 @@ export const Tasks = (
                       icon={<Key lable="f" />}
                     />
                     <MultiSelectFilter
+                      id="projects"
                       title="Projects"
                       options={uniqueProjects}
                       selectedValues={selectedProjects}
                       onSelectionChange={setSelectedProjects}
                       className="flex-1 min-w-[140px]"
+                      icon={<Key lable="p" />}
                     />
                     <MultiSelectFilter
+                      id="status"
                       title="Status"
                       options={status}
                       selectedValues={selectedStatuses}
                       onSelectionChange={setSelectedStatuses}
                       className="flex-1 min-w-[140px]"
+                      icon={<Key lable="s" />}
                     />
                     <MultiSelectFilter
+                      id="tags"
                       title="Tags"
                       options={uniqueTags}
                       selectedValues={selectedTags}
                       onSelectionChange={setSelectedTags}
                       className="flex-1 min-w-[140px]"
+                      icon={<Key lable="t" />}
                     />
                     <div className="pr-2">
                       <Dialog

frontend/src/components/ui/multi-select.tsx

@@ -20,19 +20,23 @@ import {
 const ALL_ITEMS_VALUE = '__ALL__';
 
 interface MultiSelectFilterProps {
+  id?: string;
   title: string;
   options: string[];
   selectedValues: string[];
   onSelectionChange: (values: string[]) => void;
   className?: string;
+  icon?: React.ReactNode;
 }
 
 export function MultiSelectFilter({
+  id,
   title,
   options,
   selectedValues,
   onSelectionChange,
   className,
+  icon,
 }: MultiSelectFilterProps) {
   const [open, setOpen] = React.useState(false);
 
@@ -52,6 +56,7 @@ export function MultiSelectFilter({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
+          id={id}
           variant="outline"
           role="combobox"
           aria-expanded={open}
@@ -63,7 +68,10 @@ export function MultiSelectFilter({
           <div className="flex flex-wrap gap-1 items-center">
             <span className="font-medium">{title}</span>
           </div>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <div className="flex flex-wrap items-center">
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            {icon && <span>{icon}</span>}
+          </div>
         </Button>
       </PopoverTrigger>