plugin: implement collapsible headers

Author: jamiebrynes7

plugin/src/ui/query/displays/GroupedDisplay.tsx

@@ -1,7 +1,9 @@
 import type React from "react";
+import { useState } from "react";
 
 import type { Task } from "@/data/task";
 import { groupBy } from "@/data/transformations/grouping";
+import { ObsidianIcon } from "@/ui/components/obsidian-icon";
 import { QueryContext } from "@/ui/context";
 import { ListDisplay } from "@/ui/query/displays/ListDisplay";
 
@@ -12,15 +14,50 @@ type Props = {
 export const GroupedDisplay: React.FC<Props> = ({ tasks }) => {
   const query = QueryContext.use();
   const groups = groupBy(tasks, query.groupBy);
+  const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
+
+  const toggleGroup = (groupHeader: string) => {
+    setCollapsedGroups((prev) => {
+      const newState = { ...prev };
+      if (newState[groupHeader]) {
+        delete newState[groupHeader];
+      } else {
+        newState[groupHeader] = true;
+      }
+      return newState;
+    });
+  };
 
   return (
     <>
-      {groups.map((group) => (
-        <div className="todoist-group" key={group.header}>
-          <div className="todoist-group-title">{group.header}</div>
-          <ListDisplay tasks={group.tasks} />
-        </div>
-      ))}
+      {groups.map((group) => {
+        const isCollapsed = group.header in collapsedGroups;
+        return (
+          <div className="todoist-group" key={group.header}>
+            {/* biome-ignore lint/a11y/useSemanticElements: Keeping as div to preserve CSS styling */}
+            <div
+              className={`todoist-group-title ${isCollapsed ? "collapsed" : ""}`}
+              onClick={() => toggleGroup(group.header)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  toggleGroup(group.header);
+                }
+              }}
+              role="button"
+              tabIndex={0}
+            >
+              <span>{group.header}</span>
+              <ObsidianIcon
+                size="s"
+                id={isCollapsed ? "chevron-right" : "chevron-down"}
+                className="todoist-group-collapse-icon"
+              />
+            </div>
+            {!isCollapsed && <ListDisplay tasks={group.tasks} />}
+          </div>
+        );
+      })}
     </>
   );
 };

plugin/src/ui/query/styles.scss

@@ -188,6 +188,34 @@
 .todoist-group-title {
   margin: 1em 0;
   font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  outline: none;
+
+  &.collapsed {
+    border-bottom: 1px solid var(--todoist-task-separator-color);
+    margin-bottom: 0;
+    padding-bottom: 0.5em;
+  }
+
+  .todoist-group-collapse-icon {
+    flex-shrink: 0;
+    transition: all 0.2s ease;
+    border-radius: 3px;
+    padding: 2px;
+  }
+
+  &:focus .todoist-group-collapse-icon {
+    background-color: var(--interactive-hover);
+    outline: 2px solid var(--interactive-accent);
+    outline-offset: 1px;
+  }
+
+  &:hover .todoist-group-collapse-icon {
+    background-color: var(--interactive-hover);
+  }
 }
 
 .todoist-no-tasks {