Style query table

src/cljs/athens/types/query/table.cljs

@@ -3,13 +3,15 @@
   (:require
     [datascript.core :as d]
     ["/components/Block/BlockFormInput" :refer [BlockFormInput]]
+    ["/components/Block/Toggle" :refer [Toggle]]
     ["/components/DnD/DndContext" :refer [DragAndDropContext]]
     ["/components/DnD/Droppable" :refer [Droppable]]
     ["/components/DnD/Sortable" :refer [Sortable]]
-    ["/components/Icons/Icons" :refer [ArrowRightOnBoxIcon PlusIcon]]
+    ["/components/Icons/Icons" :refer [ChevronDownVariableIcon PencilIcon GraphChildIcon ArrowRightOnBoxIcon PlusIcon]]
     ["/components/ModalInput/ModalInput" :refer [ModalInput]]
     ["/components/ModalInput/ModalInputPopover" :refer [ModalInputPopover]]
     ["/components/ModalInput/ModalInputTrigger" :refer [ModalInputTrigger]]
+    ["/components/ModalInput/ModalInputAnchor" :refer [ModalInputAnchor]]
     ["/components/Query/KanbanBoard" :refer [KanbanBoard
                                              KanbanCard
                                              KanbanSwimlane
@@ -22,6 +24,7 @@
                                 HStack
                                 Grid
                                 Heading
+                                Input
                                 ButtonGroup
                                 Flex
                                 VStack
@@ -67,6 +70,9 @@
         _page          (get entity ":task/page")
         due-date       (get entity ":task/due-date")
 
+        ;; forwhen we can collapse items
+        is-collapsed?  false
+
         assignee-value (shared/parse-for-title assignee)
         status-uid     (shared/parse-for-uid status)
         status-value   (common-db/get-block-string @db/dsdb status-uid)
@@ -77,7 +83,7 @@
     [:<>
      (if is-root
        [:> Grid {:templateColumns "3fr 1fr 1fr 1fr 1fr"
-                 :mt 2
+                 :mt 4
                  :textAlign "start"}
         [:> Text {:pl 1
                   :color "foreground.secondary"} title]
@@ -89,12 +95,59 @@
                  :textAlign "start"
                  :borderTop "1px solid"
                  :borderColor "separator.border"
-                 :_hover {:bg "interaction.surface.hover"
-                          :borderRadius "sm"}}
-        [:> Flex {:alignSelf "inline-flex" :align "center" :gap 0.5 :size "sm" :ml 1 :pl (str (* 1 indent) "em")}
-         (when status-value [:> Taskbox {:status status-value}])
-         [:> Text {:pl 1
-                   :color (if is-root "foreground.secondary" "foreground.primary")} title]]
+                 :_hover {:bg "interaction.surface.hover"}}
+
+        [:> Flex {:position "sticky"
+                  :left 0
+                  :alignSelf "inline-flex"
+                  :align "center"
+                  :gap 1
+                  :ml 1
+                  :pr 1
+                  :pl (str (* 1 indent) "em")}
+
+         [:> IconButton {:size "xs"
+                         :variant "ghost"
+                         :colorScheme "subtle"
+                         ;; GIVE ME ONCLICK EVENT
+                         ;; :onClick toggle this block
+                         }
+          [:> ChevronDownVariableIcon {:sx {:path {:strokeWidth "1.5px"}}
+                                       :boxSize 3
+                                       :transform (if is-collapsed? "rotate(-90deg)" "")}]]
+         [:> ModalInput {:placement "right-start"
+                         :autoFocus true}
+          [:> ModalInputAnchor
+           [:> Flex {:alignSelf "inline-flex"
+                     :flex "1 1 100%"
+                     :align "center"
+                     :gap 0.5}
+            (when status-value
+              [:> Taskbox {:status status-value}])
+            [:> Text {:pl 1
+                      :as "span"
+                      :color (if is-root "foreground.secondary" "foreground.primary")} title]
+            (when (seq children)
+              [:> HStack {:spacing 0
+                          :color "foreground.tertiary"}
+               [:> GraphChildIcon]
+               [:> Text {:as "span"} (count children)]])]]
+          [:> ModalInputTrigger
+           [:> IconButton {:size "sm"
+                           :variant "ghost"
+                           :colorScheme "subtle"
+                           :icon (r/as-element [:> PencilIcon])}]]
+          [:> ModalInputPopover {:popoverContentProps {:mx "-5px" :my "-1px"}}
+           [:> Flex {:align "center"
+                     :gap 0.5}
+            (when status-value
+              [:> Taskbox {:status status-value
+                           :mx 1 :my "auto"}])
+            [:> BlockFormInput {:variant "unstyled"
+                                :flex "1 1 100%"
+                                :size "md"}
+             ;; REPLACE ME WITH EDITOR
+             title]]]]]
         [:> Text {:alignSelf "stretch" :size "md"} status-value]
         [:> Text {:alignSelf "stretch" :size "md"} priority-value]
         [:> Text {:alignSelf "stretch" :size "md"} assignee-value]

src/cljs/athens/types/query/view.cljs

@@ -5,7 +5,7 @@
     ["/components/DnD/DndContext" :refer [DragAndDropContext]]
     ["/components/DnD/Droppable" :refer [Droppable]]
     ["/components/DnD/Sortable" :refer [Sortable]]
-    ["/components/Icons/Icons" :refer [ArrowRightOnBoxIcon PlusIcon]]
+    ["/components/Icons/Icons" :refer [GraphChildIcon ArrowRightOnBoxIcon PlusIcon]]
     ["/components/ModalInput/ModalInput" :refer [ModalInput]]
     ["/components/ModalInput/ModalInputPopover" :refer [ModalInputPopover]]
     ["/components/ModalInput/ModalInputTrigger" :refer [ModalInputTrigger]]

src/js/components/Icons/Icons.tsx

@@ -734,4 +734,12 @@ export const EditIcon = createIcon({
   path: (
     <path fillRule="evenodd" clipRule="evenodd" d="M11.4625 4.1125C11.8974 3.67758 11.8974 2.97242 11.4625 2.5375C11.0276 2.10258 10.3224 2.10258 9.8875 2.5375L9.30192 3.12308L10.8769 4.69808L11.4625 4.1125ZM10.1698 5.40518L8.59482 3.83018L3.62654 8.79846L2.5375 11.4625L5.20154 10.3735L10.1698 5.40518Z" fill="currentColor" />
   ),
+})
+
+export const GraphChildIcon = createIcon({
+  displayName: 'GraphChildIcon',
+  viewBox: '0 0 14 14',
+  path: (
+    <path fillRule="evenodd" clipRule="evenodd" d="M3.5 4C3.77614 4 4 3.77614 4 3.5C4 3.22386 3.77614 3 3.5 3C3.22386 3 3 3.22386 3 3.5C3 3.77614 3.22386 4 3.5 4ZM4 4.91465C4.5826 4.70873 5 4.15311 5 3.5C5 2.67157 4.32843 2 3.5 2C2.67157 2 2 2.67157 2 3.5C2 4.15311 2.4174 4.70873 3 4.91465V8.5C3 9.88071 4.11929 11 5.5 11H9.08535C9.29127 11.5826 9.84689 12 10.5 12C11.3284 12 12 11.3284 12 10.5C12 9.67157 11.3284 9 10.5 9C9.84689 9 9.29127 9.4174 9.08535 10H5.5C4.67157 10 4 9.32843 4 8.5V4.91465ZM10.5 11C10.7761 11 11 10.7761 11 10.5C11 10.2239 10.7761 10 10.5 10C10.2239 10 10 10.2239 10 10.5C10 10.7761 10.2239 11 10.5 11Z" fill="currentColor" />
+  ),
 })

src/js/components/ModalInput/ModalInputAnchor.tsx

@@ -0,0 +1,10 @@
+import { PopoverAnchor } from "@chakra-ui/react";
+import React from "react";
+
+/**
+ * ModalInputAnchor
+ * The trigger for the ModalInput component.
+ * @param {React.ReactChild}
+ * @returns {React.ReactNode}
+ */
+export const ModalInputAnchor = ({ children }) => <PopoverAnchor>{children}</PopoverAnchor>;

src/js/theme/theme.js

@@ -535,7 +535,7 @@ const components = {
     baseStyle: {
       content: {
         bg: "background.upper",
-        border: "unset",
+        // border: "unset",
         shadow: "popover",
         _focus: {
           outline: 'none',