Merge pull request #2300 from shanberg/distinguish-special-page-headers

feat: add overline to distinguish daily notes

Author: jefftangx

src/cljs/athens/views/pages/node_page.cljs

@@ -3,10 +3,10 @@
     ["/components/Block/Anchor" :refer [Anchor]]
     ["/components/Block/Container" :refer [Container]]
     ["/components/Confirmation/Confirmation" :refer [Confirmation]]
-    ["/components/Icons/Icons" :refer [EllipsisHorizontalIcon GraphIcon BookmarkIcon BookmarkFillIcon TrashIcon ArrowRightOnBoxIcon TimeNowIcon]]
+    ["/components/Icons/Icons" :refer [CalendarIcon EllipsisHorizontalIcon GraphIcon BookmarkIcon BookmarkFillIcon TrashIcon ArrowRightOnBoxIcon TimeNowIcon]]
     ["/components/Page/Page" :refer [PageHeader PageBody PageFooter TitleContainer]]
     ["/components/References/References" :refer [PageReferences ReferenceBlock ReferenceGroup]]
-    ["@chakra-ui/react" :refer [Box HStack Button Portal IconButton MenuDivider MenuButton Menu MenuList MenuItem Breadcrumb BreadcrumbItem BreadcrumbLink VStack]]
+    ["@chakra-ui/react" :refer [Text Box HStack Button Portal IconButton MenuDivider MenuButton Menu MenuList MenuItem Breadcrumb BreadcrumbItem BreadcrumbLink VStack]]
     [athens.common-db :as common-db]
     [athens.common-events.graph.ops :as graph-ops]
     [athens.common.sentry :refer-macros [wrap-span-no-new-tx]]
@@ -457,6 +457,13 @@
                            :onClose     cancel-fn}]
          ;; Header
          [:> PageHeader (merge
+                          (when daily-note?
+                            {:overline
+                             (r/as-element [:> Text {:as "span"
+                                                     :display "flex"
+                                                     :gap 1
+                                                     :alignItems "center"}
+                                            [:> CalendarIcon] "Daily Note"])})
                           {:onClickOpenInMainView  (when on-daily-notes?
                                                      (fn [e] (router/navigate-page title e)))
                            :onClickOpenInSidebar  (when-not @(subscribe [:right-sidebar/contains-item? [:node/title title]])

src/js/components/Page/Page.tsx

@@ -64,14 +64,29 @@ export const HeaderImage = ({ src }) => <Image
   objectFit="cover"
 />
 
-export const PageHeader = ({
-  children,
-  onChangeHeaderImageUrl,
-  headerImageUrl,
-  onClickOpenInSidebar,
-  onClickOpenInMainView,
-  headerImageEnabled }
-) => {
+
+interface PageHeaderProps extends BoxProps {
+  overline?: React.ReactNode;
+  headerImageUrl?: string;
+  onChangeHeaderImageUrl?: (url: string) => void;
+  onClickOpenInSidebar?: () => void;
+  onClickOpenInMainView?: () => void;
+  headerImageEnabled?: boolean;
+}
+
+const PageHeaderOverline = ({ children }) => <Heading color="foreground.secondary" size="xs" gridArea="overline">{children}</Heading>
+
+export const PageHeader = (props: PageHeaderProps): React.ReactChild => {
+  const {
+    children,
+    overline,
+    onChangeHeaderImageUrl,
+    headerImageUrl,
+    onClickOpenInSidebar,
+    onClickOpenInMainView,
+    headerImageEnabled,
+    ...boxProps
+  } = props;
   const [isPropertiesOpen, setIsPropertiesOpen] = React.useState(false)
 
   return (<Box
@@ -85,11 +100,15 @@ export const PageHeader = ({
     gridTemplateColumns="1fr auto"
     gridTemplateRows="auto auto auto"
     alignItems="center"
-    gridTemplateAreas="'breadcrumb breadcrumb' 
-  'title extras'
-  'properties properties'
-  'image image'"
+    gridTemplateAreas={`'breadcrumb breadcrumb'
+                        'overline overline'
+                        'title extras'
+                        'properties properties'
+                        'image image'`}
+    {...boxProps}
   >
+    {overline && <PageHeaderOverline>{overline}</PageHeaderOverline>}
+
     {children}
 
     <ButtonGroup
@@ -185,7 +204,7 @@ export const DailyNotesList = (props: DailyNotesListProps) => {
     {boxProps.children}
     <DailyNotesPage isReal={false}>
       <Box ref={ref} />
-      <PageHeader>
+      <PageHeader overline="Daily Note">
         <TitleContainer isEditing="false">Earlier</TitleContainer>
       </PageHeader>
     </DailyNotesPage>