ariane thread for notes

src/components/NotePage/NoteDetail/NoteDetail.tsx

@@ -25,17 +25,62 @@ import {
   secondaryBackgroundColor,
   textColor,
   borderBottom,
-  borderRight
+  borderRight,
+  uiTextColor,
+  contextMenuShadow,
+  PrimaryTextColor
 } from '../../../lib/styled/styleFunctions'
 import ToolbarExportButton from '../../atoms/ToolbarExportButton'
 import { getFileList } from '../../../lib/dnd'
 import { ViewModeType } from '../../../lib/generalStatus'
+import { BreadCrumbs } from '../NotePage'
+import cc from 'classcat'
 
 export const StyledNoteDetailContainer = styled.div`
   ${secondaryBackgroundColor}
   display: flex;
   flex-direction: column;
   height: 100%;
+  .breadCrumbs {
+    display: block;
+    width: 100%;
+    height: 30px;
+    font-size: 14px;
+    padding: 3px 2%;
+    ${borderBottom}
+    ${contextMenuShadow}
+    border-width: 2px !important;
+    overflow: hidden;
+
+    .wrapper {
+      display: block;
+      position: relative;
+      white-space: nowrap;
+      padding-bottom: 16px;
+      overflow-x: scroll;
+      width: 100%;
+    }
+
+    .separator {
+      ${uiTextColor}
+      display: inline-block;
+    }
+
+    .folderLink {
+      display: inline-block;
+      padding: 0 15px;
+      cursor: pointer;
+
+      &:first-of-type {
+        padding-left: 0;
+      }
+
+      &.active,
+      &:hover {
+        ${PrimaryTextColor}
+      }
+    }
+  }
   .titleSection {
     display: flex;
     height: 50px;
@@ -113,6 +158,8 @@ type NoteDetailProps = {
   viewMode: ViewModeType
   toggleViewMode: (mode: ViewModeType) => void
   addAttachments(storageId: string, files: File[]): Promise<Attachment[]>
+  push: (path: string) => void
+  breadCrumbs?: BreadCrumbs
 }
 
 type NoteDetailState = {
@@ -366,9 +413,14 @@ export default class NoteDetail extends React.Component<
     )
   }
 
+  handleBreadCrumbsClick = (folderPathname: string) => () => {
+    this.props.push(
+      `/app/storages/${this.props.storageId}/notes${folderPathname}`
+    )
+  }
+
   render() {
     const { note, viewMode, toggleViewMode, storageId } = this.props
-
     const codeEditor = (
       <CustomizedCodeEditor
         className='editor'
@@ -397,6 +449,33 @@ export default class NoteDetail extends React.Component<
           <p>No note is selected</p>
         ) : (
           <>
+            <div className='breadCrumbs'>
+              <div className='wrapper'>
+                {this.props.breadCrumbs != null &&
+                  this.props.breadCrumbs
+                    .map(breadCrumb => (
+                      <div
+                        onClick={this.handleBreadCrumbsClick(
+                          breadCrumb.folderPathname
+                        )}
+                        className={cc([
+                          'folderLink',
+                          breadCrumb.folderIsActive && 'active'
+                        ])}
+                        key={breadCrumb.folderLabel}
+                      >
+                        {breadCrumb.folderLabel}
+                      </div>
+                    ))
+                    .reduce((prev, curr) => (
+                      <>
+                        {prev}
+                        <div className='separator'>></div>
+                        {curr}
+                      </>
+                    ))}
+              </div>
+            </div>
             <div className='titleSection'>
               <input
                 ref={this.titleInputRef}

src/components/NotePage/NotePage.tsx

@@ -23,6 +23,12 @@ export const StyledNoteDetailNoNote = styled.div`
   margin-top: 300px;
 `
 
+export type BreadCrumbs = {
+  folderLabel: string
+  folderPathname: string
+  folderIsActive: boolean
+}[]
+
 function sortByUpdatedAt(a: NoteDoc, b: NoteDoc) {
   return b.updatedAt.localeCompare(a.updatedAt)
 }
@@ -43,6 +49,7 @@ export default () => {
   const router = useRouter()
   const [search, setSearchInput] = useState<string>('')
   const currentPathnameWithoutNoteId = usePathnameWithoutNoteId()
+  const { push } = useRouter()
 
   const notes = useMemo((): NoteDoc[] => {
     if (currentStorage == null) return []
@@ -122,6 +129,22 @@ export default () => {
     }
   }, [db, routeParams, storageId])
 
+  const breadCrumbs = useMemo(() => {
+    if (currentNote == null) return undefined
+    const folders = currentNote.folderPathname.substring(1).split('/')
+    const thread = folders.map((folder, index) => {
+      const folderPathname = `/${folders.slice(0, index + 1).join('/')}`
+      return {
+        folderLabel: folder,
+        folderPathname,
+        folderIsActive:
+          currentPathnameWithoutNoteId ===
+          `/app/storages/${storageId}/notes${folderPathname}`
+      }
+    })
+    return thread as BreadCrumbs
+  }, [currentPathnameWithoutNoteId, currentNote])
+
   const { generalStatus, setGeneralStatus } = useGeneralStatus()
   const updateNoteListWidth = useCallback(
     (leftWidth: number) => {
@@ -216,6 +239,8 @@ export default () => {
             purgeNote={purgeNote}
             viewMode={generalStatus.noteViewMode}
             toggleViewMode={toggleViewMode}
+            push={push}
+            breadCrumbs={breadCrumbs}
           />
         )
       }