From d66497fc8b0a1bf6e460fa4e1dc265f900d19a76 Mon Sep 17 00:00:00 2001
From: Stuart Hanberg <shanberg@users.noreply.github.com>
Date: Sat, 20 Aug 2022 16:12:45 -0400
Subject: [PATCH 1/9] feat: block in quick capture routte

---
 src/cljs/athens/router.cljs                   |  1 +
 src/cljs/athens/views/pages/core.cljs         |  3 +
 .../athens/views/pages/quick_capture.cljs     |  8 +++
 src/js/components/Quick/QuickCapture.tsx      | 67 +++++++++++++++++++
 4 files changed, 79 insertions(+)
 create mode 100644 src/cljs/athens/views/pages/quick_capture.cljs
 create mode 100644 src/js/components/Quick/QuickCapture.tsx

diff --git a/src/cljs/athens/router.cljs b/src/cljs/athens/router.cljs
index ebc2a84d9d..3943195fe3 100644
--- a/src/cljs/athens/router.cljs
+++ b/src/cljs/athens/router.cljs
@@ -156,6 +156,7 @@
 (def routes
   ["/"
    ["" {:name :home}]
+   ["quick-capture" {:name :quickcapture}]
    ["settings" {:name :settings}]
    ["pages" {:name :pages}]
    ["page-t/:title" {:name :page-by-title}]
diff --git a/src/cljs/athens/views/pages/core.cljs b/src/cljs/athens/views/pages/core.cljs
index 8c39b43c09..7906e83476 100644
--- a/src/cljs/athens/views/pages/core.cljs
+++ b/src/cljs/athens/views/pages/core.cljs
@@ -4,6 +4,7 @@
     [athens.views.hoc.perf-mon :as perf-mon]
     [athens.views.pages.all-pages :as all-pages]
     [athens.views.pages.daily-notes :as daily-notes]
+    [athens.views.pages.quick-capture :as quick-capture]
     [athens.views.pages.graph :as graph]
     [athens.views.pages.page :as page]
     [re-frame.core :as rf]))
@@ -20,6 +21,8 @@
                        :title "Reconnecting to server..."})))
     [:<>
      (case @route-name
+       :quickcapture [perf-mon/hoc-perfmon-no-new-tx {:span-name "quick-capture"}
+                       [quick-capture/quick-capture]]
        :pages         [perf-mon/hoc-perfmon-no-new-tx {:span-name "pages/all-pages"}
                        [all-pages/page]]
        :page          [perf-mon/hoc-perfmon {:span-name "pages/page"}
diff --git a/src/cljs/athens/views/pages/quick_capture.cljs b/src/cljs/athens/views/pages/quick_capture.cljs
new file mode 100644
index 0000000000..3176a355b7
--- /dev/null
+++ b/src/cljs/athens/views/pages/quick_capture.cljs
@@ -0,0 +1,8 @@
+(ns athens.views.pages.quick-capture
+  (:require
+   ["/components/Quick/QuickCapture" :refer [QuickCapture]]))
+
+(defn quick-capture
+  []
+  (let []
+    [:> QuickCapture "hello this is quick capture"]))
\ No newline at end of file
diff --git a/src/js/components/Quick/QuickCapture.tsx b/src/js/components/Quick/QuickCapture.tsx
new file mode 100644
index 0000000000..2055ec7fbf
--- /dev/null
+++ b/src/js/components/Quick/QuickCapture.tsx
@@ -0,0 +1,67 @@
+import React from 'react'
+import { FormControl, Button, Box, HStack, Text, Textarea, VStack, Flex, FormLabel } from "@chakra-ui/react"
+import { LayoutContext } from '@/Layout/useLayoutState'
+
+const FloatingInput = (props) => {
+  const { onSubmit } = props
+  const [string, setString] = React.useState("")
+  const inputRef = React.useRef(null)
+
+  React.useEffect(() => {
+    inputRef.current.focus()
+  }, [])
+
+  return <HStack mt="auto" flex="0 0 auto">
+    <FormControl>
+      {/* <FormLabel>Capture a thought</FormLabel> */}
+      <Textarea
+        borderTopRadius="md"
+        placeholder="Capture a thought"
+        background="background.floor"
+        ref={inputRef}
+        enterkeyhint="send"
+        borderBottomRadius={0}
+        value={string}
+        onChange={e => setString(e.target.value)}
+      />
+    </FormControl>
+  </HStack>
+}
+
+const SavedInput = (props) => {
+  const { string, timestamp, isSaved } = props;
+
+  return (<VStack
+    borderRadius="md"
+    align="stretch" background="background.floor">
+    <HStack justifyContent="space-between">
+      <Text>{isSaved ? "Saved" : "Waiting to save"}</Text>
+      <Text>{timestamp.toLocaleDateString()}</Text>
+    </HStack>
+    <Text>{string}</Text></VStack>)
+
+}
+
+export const QuickCapture = ({ savedCaptures }) => {
+  const [captures, setCaptures] = React.useState(savedCaptures || []);
+  const { toolbarHeight } = React.useContext(LayoutContext);
+
+  const onSaveCapture = (string) => {
+    setCaptures([...captures, { string, timestamp: new Date() }]);
+  }
+
+  return <VStack
+    bg="background.basement"
+    align="stretch"
+    width="100vw"
+    height="100svh"
+    border="1px solid"
+    pt={toolbarHeight}
+    overflow="hidden"
+  >
+    <VStack flex={1}>
+      {captures.map((capture, index) => <SavedInput key={capture.timestamp} {...capture} />)}
+    </VStack>
+    <FloatingInput onSubmit={onSaveCapture} />
+  </VStack>
+}
\ No newline at end of file

From 73d2c36586ba79785864e118e31d8ba36707375c Mon Sep 17 00:00:00 2001
From: Stuart Hanberg <shanberg@users.noreply.github.com>
Date: Sat, 20 Aug 2022 19:54:01 -0400
Subject: [PATCH 2/9] enhance: improved quick capture scrolling

---
 src/cljs/athens/views.cljs                    |  98 +++++-----
 .../athens/views/pages/quick_capture.cljs     |   2 +-
 src/js/components/Quick/QuickCapture.tsx      | 177 +++++++++++++++---
 3 files changed, 203 insertions(+), 74 deletions(-)

diff --git a/src/cljs/athens/views.cljs b/src/cljs/athens/views.cljs
index 2b90a327cc..d145b2c4bb 100644
--- a/src/cljs/athens/views.cljs
+++ b/src/cljs/athens/views.cljs
@@ -12,8 +12,10 @@
     [athens.views.app-toolbar :as app-toolbar]
     [athens.views.athena :refer [athena-component]]
     [athens.views.help :refer [help-popup]]
+    [athens.views.hoc.perf-mon :as perf-mon]
     [athens.views.left-sidebar :as left-sidebar]
     [athens.views.pages.core :as pages]
+    [athens.views.pages.quick-capture :as quick-capture]
     [athens.views.pages.settings :as settings]
     [athens.views.right-sidebar.core :as right-sidebar]
     [re-frame.core :as rf]))
@@ -33,6 +35,7 @@
   []
   (let [loading        (rf/subscribe [:loading?])
         modal          (rf/subscribe [:modal])
+        route-name (rf/subscribe [:current-route/name])
         right-sidebar-open? (rf/subscribe [:right-sidebar/open])
         right-sidebar-width (rf/subscribe [:right-sidebar/width])
         settings-open? (rf/subscribe [:settings/open?])]
@@ -42,50 +45,55 @@
        [:> ChakraProvider {:theme theme,
                            :bg "background.basement"}
         [:> LayoutProvider
-         [help-popup]
-         [alert]
-         [athena-component]
-         (cond
-           (and @loading @modal) [db-modal/window]
+         (if
+          (= @route-name :quickcapture)
+           [perf-mon/hoc-perfmon-no-new-tx {:span-name "quick-capture"}
+            [quick-capture/quick-capture]]
+           [:<>
+            [help-popup]
+            [alert]
+            [athena-component]
+            (cond
+              (and @loading @modal) [db-modal/window]
 
-           @loading
-           [:> Center {:height "100vh"}
-            [:> Flex {:width 28
-                      :flexDirection "column"
-                      :gap 2
-                      :color "foreground.secondary"
-                      :borderRadius "lg"
-                      :placeItems "center"
-                      :placeContent "center"
-                      :height 28}
-             [:> Spinner {:size "xl"}]]]
+              @loading
+              [:> Center {:height "100vh"}
+               [:> Flex {:width 28
+                         :flexDirection "column"
+                         :gap 2
+                         :color "foreground.secondary"
+                         :borderRadius "lg"
+                         :placeItems "center"
+                         :placeContent "center"
+                         :height 28}
+                [:> Spinner {:size "xl"}]]]
 
-           :else [:<>
-                  (when @modal
-                    [db-modal/window])
-                  (when @settings-open?
-                    [settings/page])
-                  [:> VStack {:overscrollBehavior "contain"
-                              :id "main-layout"
-                              :spacing 0
-                              :overflowY "auto"
-                              :height "100vh"
-                              :bg "background.floor"
-                              :transitionDuration "fast"
-                              :transitionProperty "background"
-                              :transitionTimingFunction "ease-in-out"
-                              :align "stretch"
-                              :position "relative"}
-                   [app-toolbar/app-toolbar]
-                   [:> HStack {:overscrollBehavior "contain"
-                               :align "stretch"
-                               :spacing 0
-                               :flex 1}
-                    [left-sidebar/left-sidebar]
-                    [:> MainContent {:rightSidebarWidth @right-sidebar-width
-                                     :isRightSidebarOpen @right-sidebar-open?}
-                     [pages/view]]
-                    [:> RightSidebarResizeControl {:rightSidebarWidth @right-sidebar-width
-                                                   :isRightSidebarOpen @right-sidebar-open?
-                                                   :onResizeSidebar #(rf/dispatch [:right-sidebar/set-width %])}]
-                    [right-sidebar/right-sidebar]]]])]]])))
+              :else [:<>
+                     (when @modal
+                       [db-modal/window])
+                     (when @settings-open?
+                       [settings/page])
+                     [:> VStack {:overscrollBehavior "contain"
+                                 :id "main-layout"
+                                 :spacing 0
+                                 :overflowY "auto"
+                                 :height "100vh"
+                                 :bg "background.floor"
+                                 :transitionDuration "fast"
+                                 :transitionProperty "background"
+                                 :transitionTimingFunction "ease-in-out"
+                                 :align "stretch"
+                                 :position "relative"}
+                      [app-toolbar/app-toolbar]
+                      [:> HStack {:overscrollBehavior "contain"
+                                  :align "stretch"
+                                  :spacing 0
+                                  :flex 1}
+                       [left-sidebar/left-sidebar]
+                       [:> MainContent {:rightSidebarWidth @right-sidebar-width
+                                        :isRightSidebarOpen @right-sidebar-open?}
+                        [pages/view]]
+                       [:> RightSidebarResizeControl {:rightSidebarWidth @right-sidebar-width
+                                                      :isRightSidebarOpen @right-sidebar-open?
+                                                      :onResizeSidebar #(rf/dispatch [:right-sidebar/set-width %])}]
+                       [right-sidebar/right-sidebar]]]])])]]])))
diff --git a/src/cljs/athens/views/pages/quick_capture.cljs b/src/cljs/athens/views/pages/quick_capture.cljs
index 3176a355b7..3fd3798940 100644
--- a/src/cljs/athens/views/pages/quick_capture.cljs
+++ b/src/cljs/athens/views/pages/quick_capture.cljs
@@ -5,4 +5,4 @@
 (defn quick-capture
   []
   (let []
-    [:> QuickCapture "hello this is quick capture"]))
\ No newline at end of file
+    [:> QuickCapture]))
\ No newline at end of file
diff --git a/src/js/components/Quick/QuickCapture.tsx b/src/js/components/Quick/QuickCapture.tsx
index 2055ec7fbf..f0485e3812 100644
--- a/src/js/components/Quick/QuickCapture.tsx
+++ b/src/js/components/Quick/QuickCapture.tsx
@@ -1,67 +1,188 @@
 import React from 'react'
-import { FormControl, Button, Box, HStack, Text, Textarea, VStack, Flex, FormLabel } from "@chakra-ui/react"
-import { LayoutContext } from '@/Layout/useLayoutState'
+import { FormControl, HStack, Text, Textarea, VStack } from "@chakra-ui/react"
+import { CheckmarkCircleFillIcon } from '@/Icons/Icons'
+import { AnimatePresence, motion } from 'framer-motion'
 
 const FloatingInput = (props) => {
   const { onSubmit } = props
   const [string, setString] = React.useState("")
   const inputRef = React.useRef(null)
 
+  const handleSubmit = (e) => {
+    if (string.length) {
+      e.preventDefault()
+      onSubmit(string)
+      setString("")
+      inputRef.current.focus()
+    }
+  }
+
   React.useEffect(() => {
     inputRef.current.focus()
   }, [])
 
-  return <HStack mt="auto" flex="0 0 auto">
+  return <HStack
+    mt="auto"
+    flex="0 0 auto"
+    position="sticky"
+    inset={0}
+    p={4}
+    top="auto"
+  >
     <FormControl>
-      {/* <FormLabel>Capture a thought</FormLabel> */}
       <Textarea
-        borderTopRadius="md"
-        placeholder="Capture a thought"
-        background="background.floor"
         ref={inputRef}
+        height="20vh"
+        borderRadius="lg"
+        resize="none"
+        placeholder="Tap to begin writing"
+        border="1px solid"
+        borderColor="separator.divider"
+        backgroundClip="border-box"
+        background="background.attic"
         enterkeyhint="send"
-        borderBottomRadius={0}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            handleSubmit(e)
+          }
+        }}
         value={string}
+        shadow="page"
+        _focus={{
+          shadow: "page"
+        }}
         onChange={e => setString(e.target.value)}
       />
     </FormControl>
   </HStack>
 }
 
-const SavedInput = (props) => {
+const Placeholder = () => {
+  return <VStack mt="auto" color="foreground.secondary">
+    <Text fontSize="sm">Save a message to today's Daily Note.</Text>
+  </VStack>
+}
+
+const SavedItem = (props) => {
   const { string, timestamp, isSaved } = props;
+  const itemRef = React.useRef(null)
 
-  return (<VStack
-    borderRadius="md"
-    align="stretch" background="background.floor">
-    <HStack justifyContent="space-between">
-      <Text>{isSaved ? "Saved" : "Waiting to save"}</Text>
-      <Text>{timestamp.toLocaleDateString()}</Text>
-    </HStack>
-    <Text>{string}</Text></VStack>)
+  React.useLayoutEffect(() => {
+    if (itemRef.current) {
+      itemRef.current.scrollIntoView({ behavior: "smooth", block: "start" })
+    }
+  }, [])
 
+  return (<VStack
+    as={motion.div}
+    _first={{
+      marginTop: "auto"
+    }}
+    flex="0 0 auto"
+    ref={itemRef}
+    initial={{
+      opacity: 0,
+      y: 50,
+    }}
+    animate={{
+      opacity: 1,
+      y: 0,
+    }}
+    exit={{
+      opacity: 0,
+      y: 50,
+    }}
+    px={4}
+    spacing={0}
+    align="stretch"
+  >
+    <VStack
+      borderRadius="lg"
+      spacing={1}
+      align="stretch"
+      overflow="hidden"
+      background="background.upper"
+      px={4}
+      py={3}
+    >
+      <HStack
+        fontSize="xs"
+        color="foreground.secondary"
+        justifyContent="space-between"
+      >
+        <Text>{timestamp.toLocaleString()}</Text>
+        <Text
+          display="inline-flex"
+          gap={1}
+          alignItems="center"
+        >
+          {isSaved ? (
+            <>Saved <CheckmarkCircleFillIcon /></>) : "Waiting to save"}</Text>
+      </HStack>
+      <Text>{string}</Text></VStack>
+  </VStack>);
 }
 
-export const QuickCapture = ({ savedCaptures }) => {
+const SAVES = [{
+  string: "This is a test",
+  timestamp: new Date(),
+  isSaved: true
+},
+{
+  string: "Here's a message for later",
+  timestamp: new Date(),
+  isSaved: true
+},
+{
+  string: "Occaecat cupidatat magna nostrud sit pariatur fugiat. Tempor deserunt excepteur nulla tempor est pariatur officia eu veniam eiusmod mollit id. Ut proident ipsum fugiat sit ea. Irure officia ea laboris reprehenderit ex sint minim quis nisi ullamco. Mollit cupidatat do sunt exercitation veniam non nulla sit pariatur culpa non eiusmod sint ad ex. Sunt cupidatat cillum adipisicing aute cillum. Lorem qui ullamco ullamco elit adipisicing. Do eiusmod mollit nostrud. Id voluptate deserunt dolor non dolore fugiat nisi tempor deserunt mollit aliqua consequat proident aliquip cillum. Commodo amet nulla amet ex enim id ad nostrud mollit consequat excepteur in aliqua id.",
+  timestamp: new Date(),
+  isSaved: false
+}];
+
+export const QuickCapture = ({ savedCaptures = SAVES }) => {
   const [captures, setCaptures] = React.useState(savedCaptures || []);
-  const { toolbarHeight } = React.useContext(LayoutContext);
+  const containerRef = React.useRef(null)
 
   const onSaveCapture = (string) => {
-    setCaptures([...captures, { string, timestamp: new Date() }]);
+    setCaptures([...captures, { string, isSaved: false, timestamp: new Date() }]);
   }
 
   return <VStack
-    bg="background.basement"
     align="stretch"
-    width="100vw"
-    height="100svh"
-    border="1px solid"
-    pt={toolbarHeight}
+    bg="linear-gradient(to bottom, #00000000 50%, #00000055)"
+    backgroundAttachment="fixed"
+    pt={4}
     overflow="hidden"
+    height="100dvh"
+    width="100vw"
+    position="relative"
   >
-    <VStack flex={1}>
-      {captures.map((capture, index) => <SavedInput key={capture.timestamp} {...capture} />)}
+    <style>
+      {`
+        html, body {
+          height: 100%;
+          width: 100%;
+          position: fixed;
+          overflow: hidden;
+          margin: 0;
+          padding: 0;
+        }
+      `}
+
+    </style>
+    <VStack
+      flex={1}
+      minHeight="100%"
+      align="stretch"
+      ref={containerRef}
+      overflow="auto"
+      overscrollBehaviorY='contain'
+    >
+      <AnimatePresence initial={true}>
+        {captures.length ? captures.map((capture, index) => <SavedItem key={capture.timestamp} {...capture} />)
+          : <Placeholder />}
+      </AnimatePresence>
+      <FloatingInput onSubmit={onSaveCapture} />
     </VStack>
-    <FloatingInput onSubmit={onSaveCapture} />
   </VStack>
 }
\ No newline at end of file

From a03083194de50e69c7a2292a139a67c899e70dcb Mon Sep 17 00:00:00 2001
From: Stuart Hanberg <shanberg@users.noreply.github.com>
Date: Sat, 20 Aug 2022 19:54:26 -0400
Subject: [PATCH 3/9] chore: remove test data

---
 src/js/components/Quick/QuickCapture.tsx | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/src/js/components/Quick/QuickCapture.tsx b/src/js/components/Quick/QuickCapture.tsx
index f0485e3812..ac8dc12ce1 100644
--- a/src/js/components/Quick/QuickCapture.tsx
+++ b/src/js/components/Quick/QuickCapture.tsx
@@ -123,23 +123,7 @@ const SavedItem = (props) => {
   </VStack>);
 }
 
-const SAVES = [{
-  string: "This is a test",
-  timestamp: new Date(),
-  isSaved: true
-},
-{
-  string: "Here's a message for later",
-  timestamp: new Date(),
-  isSaved: true
-},
-{
-  string: "Occaecat cupidatat magna nostrud sit pariatur fugiat. Tempor deserunt excepteur nulla tempor est pariatur officia eu veniam eiusmod mollit id. Ut proident ipsum fugiat sit ea. Irure officia ea laboris reprehenderit ex sint minim quis nisi ullamco. Mollit cupidatat do sunt exercitation veniam non nulla sit pariatur culpa non eiusmod sint ad ex. Sunt cupidatat cillum adipisicing aute cillum. Lorem qui ullamco ullamco elit adipisicing. Do eiusmod mollit nostrud. Id voluptate deserunt dolor non dolore fugiat nisi tempor deserunt mollit aliqua consequat proident aliquip cillum. Commodo amet nulla amet ex enim id ad nostrud mollit consequat excepteur in aliqua id.",
-  timestamp: new Date(),
-  isSaved: false
-}];
-
-export const QuickCapture = ({ savedCaptures = SAVES }) => {
+export const QuickCapture = ({ savedCaptures }) => {
   const [captures, setCaptures] = React.useState(savedCaptures || []);
   const containerRef = React.useRef(null)
 

From b00daf90d6783b3fe438c8ead557dc269fb7d335 Mon Sep 17 00:00:00 2001
From: Stuart Hanberg <shanberg@users.noreply.github.com>
Date: Sat, 20 Aug 2022 21:04:25 -0400
Subject: [PATCH 4/9] minor improvements

---
 src/js/components/Quick/QuickCapture.tsx | 27 +++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/js/components/Quick/QuickCapture.tsx b/src/js/components/Quick/QuickCapture.tsx
index ac8dc12ce1..43f3cfcbb8 100644
--- a/src/js/components/Quick/QuickCapture.tsx
+++ b/src/js/components/Quick/QuickCapture.tsx
@@ -40,6 +40,9 @@ const FloatingInput = (props) => {
         borderColor="separator.divider"
         backgroundClip="border-box"
         background="background.attic"
+        _hover={{
+          shadow: "page"
+        }}
         enterkeyhint="send"
         onKeyDown={(e) => {
           if (e.key === "Enter") {
@@ -58,7 +61,21 @@ const FloatingInput = (props) => {
 }
 
 const Placeholder = () => {
-  return <VStack mt="auto" color="foreground.secondary">
+  return <VStack
+    as={motion.div}
+    initial={{
+      opacity: 0,
+      y: 50,
+    }}
+    animate={{
+      opacity: 1,
+      y: 0,
+    }}
+    exit={{
+      opacity: -2,
+      y: -100,
+    }}
+    mt="auto" color="foreground.secondary">
     <Text fontSize="sm">Save a message to today's Daily Note.</Text>
   </VStack>
 }
@@ -74,12 +91,12 @@ const SavedItem = (props) => {
   }, [])
 
   return (<VStack
-    as={motion.div}
     _first={{
       marginTop: "auto"
     }}
     flex="0 0 auto"
     ref={itemRef}
+    as={motion.div}
     initial={{
       opacity: 0,
       y: 50,
@@ -90,7 +107,7 @@ const SavedItem = (props) => {
     }}
     exit={{
       opacity: 0,
-      y: 50,
+      y: 100,
     }}
     px={4}
     spacing={0}
@@ -133,7 +150,7 @@ export const QuickCapture = ({ savedCaptures }) => {
 
   return <VStack
     align="stretch"
-    bg="linear-gradient(to bottom, #00000000 50%, #00000055)"
+    bg="linear-gradient(to bottom, #00000000 50%, #00000011)"
     backgroundAttachment="fixed"
     pt={4}
     overflow="hidden"
@@ -164,7 +181,7 @@ export const QuickCapture = ({ savedCaptures }) => {
     >
       <AnimatePresence initial={true}>
         {captures.length ? captures.map((capture, index) => <SavedItem key={capture.timestamp} {...capture} />)
-          : <Placeholder />}
+          : <Placeholder key="placeholder" />}
       </AnimatePresence>
       <FloatingInput onSubmit={onSaveCapture} />
     </VStack>

From 99d40224798601a8f7e3bd018575915938ff0396 Mon Sep 17 00:00:00 2001
From: Stuart Hanberg <shanberg@users.noreply.github.com>
Date: Sun, 21 Aug 2022 14:36:40 -0400
Subject: [PATCH 5/9] fix: style

---
 src/cljs/athens/views.cljs                     | 2 +-
 src/cljs/athens/views/pages/core.cljs          | 4 ++--
 src/cljs/athens/views/pages/quick_capture.cljs | 5 +++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/cljs/athens/views.cljs b/src/cljs/athens/views.cljs
index d145b2c4bb..794546da38 100644
--- a/src/cljs/athens/views.cljs
+++ b/src/cljs/athens/views.cljs
@@ -46,7 +46,7 @@
                            :bg "background.basement"}
         [:> LayoutProvider
          (if
-          (= @route-name :quickcapture)
+           (= @route-name :quickcapture)
            [perf-mon/hoc-perfmon-no-new-tx {:span-name "quick-capture"}
             [quick-capture/quick-capture]]
            [:<>
diff --git a/src/cljs/athens/views/pages/core.cljs b/src/cljs/athens/views/pages/core.cljs
index 7906e83476..a0ba996607 100644
--- a/src/cljs/athens/views/pages/core.cljs
+++ b/src/cljs/athens/views/pages/core.cljs
@@ -4,9 +4,9 @@
     [athens.views.hoc.perf-mon :as perf-mon]
     [athens.views.pages.all-pages :as all-pages]
     [athens.views.pages.daily-notes :as daily-notes]
-    [athens.views.pages.quick-capture :as quick-capture]
     [athens.views.pages.graph :as graph]
     [athens.views.pages.page :as page]
+    [athens.views.pages.quick-capture :as quick-capture]
     [re-frame.core :as rf]))
 
 
@@ -22,7 +22,7 @@
     [:<>
      (case @route-name
        :quickcapture [perf-mon/hoc-perfmon-no-new-tx {:span-name "quick-capture"}
-                       [quick-capture/quick-capture]]
+                      [quick-capture/quick-capture]]
        :pages         [perf-mon/hoc-perfmon-no-new-tx {:span-name "pages/all-pages"}
                        [all-pages/page]]
        :page          [perf-mon/hoc-perfmon {:span-name "pages/page"}
diff --git a/src/cljs/athens/views/pages/quick_capture.cljs b/src/cljs/athens/views/pages/quick_capture.cljs
index 3fd3798940..93f3797b78 100644
--- a/src/cljs/athens/views/pages/quick_capture.cljs
+++ b/src/cljs/athens/views/pages/quick_capture.cljs
@@ -1,8 +1,9 @@
 (ns athens.views.pages.quick-capture
   (:require
-   ["/components/Quick/QuickCapture" :refer [QuickCapture]]))
+    ["/components/Quick/QuickCapture" :refer [QuickCapture]]))
+
 
 (defn quick-capture
   []
   (let []
-    [:> QuickCapture]))
\ No newline at end of file
+    [:> QuickCapture]))

From b7a9a7e6fa4b38896ab28e816ca0d1bc72dbaed2 Mon Sep 17 00:00:00 2001
From: Stuart Hanberg <shanberg@users.noreply.github.com>
Date: Sun, 21 Aug 2022 14:41:02 -0400
Subject: [PATCH 6/9] fix: style

---
 src/cljs/athens/views/pages/quick_capture.cljs | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/cljs/athens/views/pages/quick_capture.cljs b/src/cljs/athens/views/pages/quick_capture.cljs
index 93f3797b78..5a51a44fb9 100644
--- a/src/cljs/athens/views/pages/quick_capture.cljs
+++ b/src/cljs/athens/views/pages/quick_capture.cljs
@@ -5,5 +5,4 @@
 
 (defn quick-capture
   []
-  (let []
-    [:> QuickCapture]))
+  [:> QuickCapture])

From fffd9b2f1f5cdcff8045a44f71012f45cdcd73e3 Mon Sep 17 00:00:00 2001
From: Stuart Hanberg <shanberg@users.noreply.github.com>
Date: Mon, 22 Aug 2022 08:39:51 -0400
Subject: [PATCH 7/9] chore: commenting for future work

---
 src/js/components/Quick/QuickCapture.tsx | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/js/components/Quick/QuickCapture.tsx b/src/js/components/Quick/QuickCapture.tsx
index 43f3cfcbb8..13d7ae5cdf 100644
--- a/src/js/components/Quick/QuickCapture.tsx
+++ b/src/js/components/Quick/QuickCapture.tsx
@@ -140,7 +140,29 @@ const SavedItem = (props) => {
   </VStack>);
 }
 
-export const QuickCapture = ({ savedCaptures }) => {
+// add db-switcher
+// add switch to try to load full view?
+// 
+// id = eventID
+// newEventid = () => eventID
+
+// filipe will return items that have not been saved
+// and fn to get a new event id
+// and saveEvent fn (eventid, string) => null
+// 
+
+export const QuickCapture = ({ unsavedEventsIds, newEventId }) => {
+
+  // add the picker
+  // switch to full view
+
+  // on create new
+  // eventId = newEventId()
+  // add to local state
+
+  // on change of unsavedEventsIds
+  // refresh local state and compare to unsavedEventsIds  
+
   const [captures, setCaptures] = React.useState(savedCaptures || []);
   const containerRef = React.useRef(null)
 

From 4683af53fe6bda771cb11bae7b8cc17e6de16674 Mon Sep 17 00:00:00 2001
From: Stuart Hanberg <shanberg@users.noreply.github.com>
Date: Mon, 22 Aug 2022 22:37:39 -0400
Subject: [PATCH 8/9] rfct: move daily notes state up

---
 src/cljs/athens/views.cljs                    |   2 +-
 .../athens/views/pages/quick_capture.cljs     |  30 ++-
 src/js/components/Quick/QuickCapture.tsx      | 194 +++++++++---------
 src/js/theme/theme.js                         |   9 +-
 4 files changed, 137 insertions(+), 98 deletions(-)

diff --git a/src/cljs/athens/views.cljs b/src/cljs/athens/views.cljs
index f2de4792da..8c1a546b9d 100644
--- a/src/cljs/athens/views.cljs
+++ b/src/cljs/athens/views.cljs
@@ -50,7 +50,7 @@
           (if
            (= @route-name :quickcapture)
             [perf-mon/hoc-perfmon-no-new-tx {:span-name "quick-capture"}
-             [quick-capture/quick-capture]]
+             [:f> quick-capture/quick-capture]]
             [:<>
              [help-popup]
              [alert]
diff --git a/src/cljs/athens/views/pages/quick_capture.cljs b/src/cljs/athens/views/pages/quick_capture.cljs
index 5a51a44fb9..a942344471 100644
--- a/src/cljs/athens/views/pages/quick_capture.cljs
+++ b/src/cljs/athens/views/pages/quick_capture.cljs
@@ -1,8 +1,34 @@
 (ns athens.views.pages.quick-capture
   (:require
-    ["/components/Quick/QuickCapture" :refer [QuickCapture]]))
+    [athens.electron.db-menu.core      :refer [db-menu]]
+    ["@chakra-ui/react"                :refer [Button]]
+    ["/components/Quick/QuickCapture"  :refer [QuickCapture]]
+    ["react"                           :as react]
+    [reagent.core                      :as r]))
 
 
 (defn quick-capture
   []
-  [:> QuickCapture])
+  (let [[notes setNotes] (react/useState [])
+        [lastSyncTime, setLastSyncTime] (react/useState nil)
+        mock-sync (fn [notes]
+                    (prn notes)
+                    (setNotes [])
+                    (setLastSyncTime (js/Date.now)))
+        mock-add-item (fn [string] (setNotes (conj notes {:isSaved false :string string :timestamp (js/Date.now)})))
+        mock-get-new-event-id (fn [] "random id")]
+    [:<> [:> QuickCapture {:dbMenu (r/as-element [db-menu])
+                           :notes notes
+                           :lastSyncTime lastSyncTime
+                           :onAddItem mock-add-item
+                           :newEventId mock-get-new-event-id}]
+     [:> Button {:position "fixed"
+                 :variant "text"
+                 :size "xs"
+                 :left "50%"
+                 :top 5
+                 :transform "translateX(-50%)"
+                 :onClick mock-sync} "mock update"]]))
+
+;; state
+;; unsaved changes
\ No newline at end of file
diff --git a/src/js/components/Quick/QuickCapture.tsx b/src/js/components/Quick/QuickCapture.tsx
index 13d7ae5cdf..5d60114214 100644
--- a/src/js/components/Quick/QuickCapture.tsx
+++ b/src/js/components/Quick/QuickCapture.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { FormControl, HStack, Text, Textarea, VStack } from "@chakra-ui/react"
+import { AlertDialog, AlertDialogBody, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Box, Button, FormControl, HStack, Text, Textarea, VStack } from "@chakra-ui/react"
 import { CheckmarkCircleFillIcon } from '@/Icons/Icons'
 import { AnimatePresence, motion } from 'framer-motion'
 
@@ -26,23 +26,29 @@ const FloatingInput = (props) => {
     flex="0 0 auto"
     position="sticky"
     inset={0}
-    p={4}
+    py={4}
     top="auto"
+    align="center"
+    justifyContent="center"
   >
-    <FormControl>
+    <FormControl
+      width="100%"
+      flex="0 1 auto"
+    >
       <Textarea
         ref={inputRef}
         height="20vh"
         borderRadius="lg"
         resize="none"
         placeholder="Tap to begin writing"
-        border="1px solid"
-        borderColor="separator.divider"
-        backgroundClip="border-box"
-        background="background.attic"
-        _hover={{
-          shadow: "page"
+        border="none"
+        outline="none"
+        shadow="page"
+        _focus={{
+          outline: "none",
+          shadow: "page",
         }}
+        background="background.attic"
         enterkeyhint="send"
         onKeyDown={(e) => {
           if (e.key === "Enter") {
@@ -50,37 +56,13 @@ const FloatingInput = (props) => {
           }
         }}
         value={string}
-        shadow="page"
-        _focus={{
-          shadow: "page"
-        }}
         onChange={e => setString(e.target.value)}
       />
     </FormControl>
   </HStack>
 }
 
-const Placeholder = () => {
-  return <VStack
-    as={motion.div}
-    initial={{
-      opacity: 0,
-      y: 50,
-    }}
-    animate={{
-      opacity: 1,
-      y: 0,
-    }}
-    exit={{
-      opacity: -2,
-      y: -100,
-    }}
-    mt="auto" color="foreground.secondary">
-    <Text fontSize="sm">Save a message to today's Daily Note.</Text>
-  </VStack>
-}
-
-const SavedItem = (props) => {
+const QueuedNote = (props) => {
   const { string, timestamp, isSaved } = props;
   const itemRef = React.useRef(null)
 
@@ -91,31 +73,33 @@ const SavedItem = (props) => {
   }, [])
 
   return (<VStack
-    _first={{
-      marginTop: "auto"
-    }}
     flex="0 0 auto"
     ref={itemRef}
+    layout
     as={motion.div}
     initial={{
       opacity: 0,
-      y: 50,
+      height: 0,
+      y: "20vh",
     }}
     animate={{
       opacity: 1,
+      height: "auto",
       y: 0,
     }}
     exit={{
       opacity: 0,
-      y: 100,
+      height: 0,
+      y: -200,
+      scale: 0.5,
     }}
-    px={4}
     spacing={0}
-    align="stretch"
+    alignSelf="stretch"
   >
     <VStack
       borderRadius="lg"
       spacing={1}
+      alignSelf="stretch"
       align="stretch"
       overflow="hidden"
       background="background.upper"
@@ -127,7 +111,7 @@ const SavedItem = (props) => {
         color="foreground.secondary"
         justifyContent="space-between"
       >
-        <Text>{timestamp.toLocaleString()}</Text>
+        <Text>{new Date(timestamp).toLocaleDateString()}</Text>
         <Text
           display="inline-flex"
           gap={1}
@@ -140,46 +124,25 @@ const SavedItem = (props) => {
   </VStack>);
 }
 
-// add db-switcher
-// add switch to try to load full view?
-// 
-// id = eventID
-// newEventid = () => eventID
-
-// filipe will return items that have not been saved
-// and fn to get a new event id
-// and saveEvent fn (eventid, string) => null
-// 
-
-export const QuickCapture = ({ unsavedEventsIds, newEventId }) => {
-
-  // add the picker
-  // switch to full view
-
-  // on create new
-  // eventId = newEventId()
-  // add to local state
-
-  // on change of unsavedEventsIds
-  // refresh local state and compare to unsavedEventsIds  
-
-  const [captures, setCaptures] = React.useState(savedCaptures || []);
+const Message = ({ children, ...props }) => <Text
+  layout
+  as={motion.p}
+  fontSize="sm"
+  textAlign="center"
+  color="foreground.secondary"
+  exit={{
+    opacity: 0,
+    height: 0,
+  }}
+  {...props}
+>{children}</Text>;
+
+export const QuickCapture = ({ dbMenu, notes, onAddItem, lastSyncTime }) => {
+  const [isSwitchDialogOpen, setIsSwitchDialogOpen] = React.useState(false);
   const containerRef = React.useRef(null)
+  const confirmationCancelRef = React.useRef(null)
 
-  const onSaveCapture = (string) => {
-    setCaptures([...captures, { string, isSaved: false, timestamp: new Date() }]);
-  }
-
-  return <VStack
-    align="stretch"
-    bg="linear-gradient(to bottom, #00000000 50%, #00000011)"
-    backgroundAttachment="fixed"
-    pt={4}
-    overflow="hidden"
-    height="100dvh"
-    width="100vw"
-    position="relative"
-  >
+  return <>
     <style>
       {`
         html, body {
@@ -191,21 +154,68 @@ export const QuickCapture = ({ unsavedEventsIds, newEventId }) => {
           padding: 0;
         }
       `}
-
     </style>
     <VStack
-      flex={1}
-      minHeight="100%"
       align="stretch"
-      ref={containerRef}
-      overflow="auto"
-      overscrollBehaviorY='contain'
+      backgroundAttachment="fixed"
+      pt={4}
+      overflow="hidden"
+      height="100dvh"
+      width="100vw"
+      position="relative"
+      justifyContent="flex-end"
+      sx={{
+        maskImage: "linear-gradient(to bottom, #00000000 1rem, #000000ff 3rem, #000000ff 100%)"
+      }}
     >
-      <AnimatePresence initial={true}>
-        {captures.length ? captures.map((capture, index) => <SavedItem key={capture.timestamp} {...capture} />)
-          : <Placeholder key="placeholder" />}
-      </AnimatePresence>
-      <FloatingInput onSubmit={onSaveCapture} />
+      <VStack
+        align="stretch"
+        maxHeight="100%"
+        pt={10}
+        px={4}
+        bg="linear-gradient(to bottom, #00000000 50%, #00000011)"
+        ref={containerRef}
+        overflowY="scroll"
+        overscrollBehaviorY='contain'
+      >
+        <AnimatePresence initial={true}>
+          {(notes.length) && <Message key="today">Today</Message>}
+          {lastSyncTime && <Message key="lastsynced">Last synced: {new Date(lastSyncTime).toLocaleDateString()}</Message>}
+          {notes.length && notes.map((note, index) => <QueuedNote key={note.timestamp} {...note} />)}
+          {!(notes.length || lastSyncTime) && <Message key="placeholder">Save a message to today's Daily Notes</Message>}
+          <FloatingInput onSubmit={onAddItem} />
+        </AnimatePresence>
+      </VStack>
     </VStack>
-  </VStack>
+    <HStack position="fixed" justifyContent="space-between" inset={3} bottom="auto" as={motion.div}>
+      {dbMenu}
+      <Button
+        borderRadius="full"
+        onClick={() => setIsSwitchDialogOpen(true)}
+        size="sm"
+        sx={{
+          backdropFilter: "blur(10px)",
+        }}
+      >Switch to Athens</Button>
+    </HStack>
+    <AlertDialog
+      size="sm"
+      isOpen={isSwitchDialogOpen}
+      onClose={() => setIsSwitchDialogOpen(false)}
+      leastDestructiveRef={confirmationCancelRef}
+    >
+      <AlertDialogOverlay />
+      <AlertDialogContent py={3}>
+        <AlertDialogHeader py={1}>Switch to Athens?</AlertDialogHeader>
+        <AlertDialogBody py={1}>
+          <Text>Notes that have not been synced will be lost.</Text>
+        </AlertDialogBody>
+        <AlertDialogFooter py={1}>
+          <Button variant="secondary" ref={confirmationCancelRef} onClick={() => setIsSwitchDialogOpen(false)}>Go back</Button>
+          <Button variant="secondary" colorScheme="destructive" onClick={() => setIsSwitchDialogOpen(false)}>Switch to Athens</Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+
+    </AlertDialog>
+  </>
 }
\ No newline at end of file
diff --git a/src/js/theme/theme.js b/src/js/theme/theme.js
index 9afbbf10e7..e15a016664 100644
--- a/src/js/theme/theme.js
+++ b/src/js/theme/theme.js
@@ -509,9 +509,12 @@ const components = {
       },
       dialog: {
         shadow: "dialog",
-        border: "1px solid",
-        borderColor: 'separator.divider',
-        bg: 'background.upper'
+        border: "none",
+        maxWidth: 'calc(100% - 2rem)',
+        maxHeight: 'calc(100% - 2rem)',
+        overflow: 'auto',
+        margin: "auto",
+        bg: 'background.upper',
       }
     }
   },

From 6f7f2d940a1d39cdf4b1a288f4dd42827f559085 Mon Sep 17 00:00:00 2001
From: Filipe Silva <filipematossilva@gmail.com>
Date: Tue, 23 Aug 2022 15:01:30 +0100
Subject: [PATCH 9/9] feat: save quickcapture msg as prop on todays page

---
 src/cljs/athens/events/remote.cljs            |  8 ++++
 .../athens/views/pages/quick_capture.cljs     | 45 +++++++++++++++++--
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/cljs/athens/events/remote.cljs b/src/cljs/athens/events/remote.cljs
index 3c7720bcc3..e5f9208fce 100644
--- a/src/cljs/athens/events/remote.cljs
+++ b/src/cljs/athens/events/remote.cljs
@@ -307,3 +307,11 @@
                            ;; Remove the server event after everything is done.
                            true
                            (into [[:remote/clear-server-event event]]))]]})))
+
+;; Subs
+
+(rf/reg-sub
+  :remote/event-sync-memory-log
+  (fn [db _]
+    (when-let [event-sync (:remote/event-sync db)]
+      (event-sync/stage-log event-sync :memory))))
diff --git a/src/cljs/athens/views/pages/quick_capture.cljs b/src/cljs/athens/views/pages/quick_capture.cljs
index a942344471..2029b1e214 100644
--- a/src/cljs/athens/views/pages/quick_capture.cljs
+++ b/src/cljs/athens/views/pages/quick_capture.cljs
@@ -1,27 +1,64 @@
 (ns athens.views.pages.quick-capture
   (:require
+    [athens.common-events.graph.ops    :as graph-ops]
+    [athens.common.utils               :as utils]
+    [athens.dates                      :as dates]
     [athens.electron.db-menu.core      :refer [db-menu]]
+    [clojure.data                      :as data]
     ["@chakra-ui/react"                :refer [Button]]
     ["/components/Quick/QuickCapture"  :refer [QuickCapture]]
     ["react"                           :as react]
-    [reagent.core                      :as r]))
+    [reagent.core                      :as r]
+    [re-frame.core                     :as rf]))
 
 
 (defn quick-capture
   []
   (let [[notes setNotes] (react/useState [])
         [lastSyncTime, setLastSyncTime] (react/useState nil)
+        memory-log @(rf/subscribe [:remote/event-sync-memory-log])
+        unsynced-uids (->> memory-log
+                           (map #(-> % second :event/op :op/consequences first :op/args :block/uid))
+                           (filter some?)
+                           set)
+        unsynced-uids-notes (->> notes
+                                 (filter #(-> % :isSaved false?))
+                                 (map :uid)
+                                 set)
         mock-sync (fn [notes]
                     (prn notes)
                     (setNotes [])
                     (setLastSyncTime (js/Date.now)))
-        mock-add-item (fn [string] (setNotes (conj notes {:isSaved false :string string :timestamp (js/Date.now)})))
-        mock-get-new-event-id (fn [] "random id")]
+        mock-add-item (fn [string]
+                        ;; Send via reframe.
+                        (rf/dispatch [:properties/update-in [:node/title (:title (dates/get-day))]
+                                      ["last-qc-message"]
+                                      ;; TODO: need to support first/last, and deep path positions
+                                      #_["Quick Capture" current-username :last]
+                                      (fn [db uid]
+                                        (let [new-note (merge {:string string :timestamp (js/Date.now) :uid uid}
+                                                              (when-not memory-log {:isSaved true}))]
+                                          ;; Save on local comp state.
+                                          (setNotes (conj notes new-note))
+                                          ;; Save on graph.
+                                          [(graph-ops/build-block-save-op db uid string)]))]))]
+
+    (when memory-log
+      (let [[a b] (data/diff unsynced-uids unsynced-uids-notes)]
+        (when (or a b)
+          (println notes a b)
+          (setNotes (map (fn [{:keys [uid] :as x}]
+                           (cond
+                             (and a (a uid)) (assoc x :isSaved false)
+                             (and b (b uid)) (assoc x :isSaved true)
+                             :else x))
+                         notes)))))
+
     [:<> [:> QuickCapture {:dbMenu (r/as-element [db-menu])
                            :notes notes
                            :lastSyncTime lastSyncTime
                            :onAddItem mock-add-item
-                           :newEventId mock-get-new-event-id}]
+                           :newEventId utils/gen-event-id}]
      [:> Button {:position "fixed"
                  :variant "text"
                  :size "xs"