Quick add

scripts/add-context.js

@@ -5,13 +5,13 @@ const path = require('path')
 const murmurHash3 = require('murmurhash3js')
 
 const EM_TOKEN = '__EM__'
-const ROOT_TOKEN = '__ROOT__'
+const HOME_TOKEN = '__ROOT__'
 const SEPARATOR_TOKEN = '__SEP__'
 const appendContext = (context, child) => unroot([...context, child])
 const escapeRegExp = s => s.replace(/[-[\]{}()*+?.\\^$|#\s]/g, '\\$&')
 const escapeSelector = s => '_' + s.replace(regExpEscapeSelector, s => `_${s.charCodeAt(0)}`)
 const regExpEscapeSelector = new RegExp('[' + escapeRegExp(' !"#$%&\'()*+,./:;<=>?@[]^`{|}~') + ']', 'g')
-const unroot = context => context[0] === ROOT_TOKEN ? context.slice(1) : context
+const unroot = context => context[0] === HOME_TOKEN ? context.slice(1) : context
 
 /** Encode the thoughts (and optionally rank) as a string. */
 const hashContext = (thoughts, rank) => murmurHash3.x64.hash128(thoughts
@@ -46,7 +46,7 @@ const cli = () => {
   console.info('Reading ' + inputPath)
   const input = fs.readFileSync(inputPath, 'utf-8')
   const state = JSON.parse(input)
-  traverseContext(state, [ROOT_TOKEN], setContext)
+  traverseContext(state, [HOME_TOKEN], setContext)
   traverseContext(state, [EM_TOKEN], setContext)
   const ext = path.extname(inputPath)
   const outputPath = inputPath.replace(ext, '') + '-with-contexts' + ext

scripts/repair.js

@@ -24,14 +24,14 @@ let repair = (maxDepth = 100) => {
   let inconsistentRanks = 0
   let duplicateThoughtContextIds = 0
 
-  const ROOT_TOKEN = '__ROOT__'
+  const HOME_TOKEN = '__ROOT__'
 
   /** Generate a timestamp of now. */
   const timestamp = () => new Date().toISOString()
 
   /** Remove the root token. */
   const unroot = thoughts =>
-    thoughts.length > 0 && (thoughts[0] === ROOT_TOKEN || thoughts[0].value === ROOT_TOKEN)
+    thoughts.length > 0 && (thoughts[0] === HOME_TOKEN || thoughts[0].value === HOME_TOKEN)
       ? thoughts.slice(1)
       : thoughts
 

src/App.css

@@ -2891,6 +2891,21 @@ code, .code {
   left: 19px;
 }
 
+.quick-add-button {
+  z-index: 100;
+  position: absolute;
+  bottom: 2rem;
+  right: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 200ms ease-in-out;
+}
+
+.quick-add-button.rotate {
+  transform: rotate(135deg);
+}
+
 @keyframes ellipsis {
   to { width: 1.25em; }
 }

src/action-creators/__tests__/cursorNext.ts

@@ -1,4 +1,4 @@
-import { RANKED_ROOT } from '../../constants'
+import { HOME_PATH } from '../../constants'
 import { cursorNext, importText, setCursor } from '../../action-creators'
 import { createTestStore } from '../../test-helpers/createTestStore'
 import { setCursorFirstMatchActionCreator } from '../../test-helpers/setCursorFirstMatch'
@@ -11,7 +11,7 @@ describe('normal view', () => {
 
     store.dispatch([
       importText({
-        path: RANKED_ROOT,
+        path: HOME_PATH,
         text: `
           - a
             - a1
@@ -32,7 +32,7 @@ describe('normal view', () => {
 
     store.dispatch([
       importText({
-        path: RANKED_ROOT,
+        path: HOME_PATH,
         text: `
           - a
           - b`
@@ -52,7 +52,7 @@ describe('normal view', () => {
 
     store.dispatch([
       importText({
-        path: RANKED_ROOT,
+        path: HOME_PATH,
         text: `
           - a
           - b`
@@ -82,7 +82,7 @@ describe('normal view', () => {
 
     store.dispatch([
       importText({
-        path: RANKED_ROOT,
+        path: HOME_PATH,
         text: `
           - SORT
             - a
@@ -111,7 +111,7 @@ describe('normal view', () => {
 
     store.dispatch([
       importText({
-        path: RANKED_ROOT,
+        path: HOME_PATH,
         text: `
           - a
             - a1

src/action-creators/__tests__/cursorPrev.ts

@@ -1,4 +1,4 @@
-import { RANKED_ROOT } from '../../constants'
+import { HOME_PATH } from '../../constants'
 import { cursorPrev, importText, setCursor } from '../../action-creators'
 import { createTestStore } from '../../test-helpers/createTestStore'
 import setCursorFirstMatch, { setCursorFirstMatchActionCreator } from '../../test-helpers/setCursorFirstMatch'
@@ -10,7 +10,7 @@ describe('normal view', () => {
     const store = createTestStore()
 
     store.dispatch(importText({
-      path: RANKED_ROOT,
+      path: HOME_PATH,
       text: `
         - a
           - a1
@@ -31,7 +31,7 @@ describe('normal view', () => {
 
     store.dispatch([
       importText({
-        path: RANKED_ROOT,
+        path: HOME_PATH,
         text: `
           - a
           - b`
@@ -51,7 +51,7 @@ describe('normal view', () => {
 
     store.dispatch([
       importText({
-        path: RANKED_ROOT,
+        path: HOME_PATH,
         text: `
           - a
           - b`
@@ -81,7 +81,7 @@ describe('normal view', () => {
 
     store.dispatch([
       importText({
-        path: RANKED_ROOT,
+        path: HOME_PATH,
         text: `
           - SORT
             - a
@@ -109,7 +109,7 @@ describe('normal view', () => {
     const store = createTestStore()
 
     store.dispatch(importText({
-      path: RANKED_ROOT,
+      path: HOME_PATH,
       text: `
           - a
             - a1

src/action-creators/cursorNext.ts

@@ -1,4 +1,4 @@
-import { ROOT_TOKEN } from '../constants'
+import { HOME_TOKEN } from '../constants'
 import { scrollCursorIntoView, setCursor, suppressExpansion } from '../action-creators'
 import { parentOf } from '../util'
 import { Thunk } from '../types'
@@ -12,7 +12,7 @@ const cursorNext = (): Thunk => (dispatch, getState) => {
   const { cursor } = state
 
   if (!cursor) {
-    const children = getChildrenSorted(state, [ROOT_TOKEN])
+    const children = getChildrenSorted(state, [HOME_TOKEN])
     if (children.length > 0) {
       dispatch(setCursor({ path: [children[0]] }))
       dispatch(scrollCursorIntoView())

src/action-creators/cursorPrev.ts

@@ -1,4 +1,4 @@
-import { ROOT_TOKEN } from '../constants'
+import { HOME_TOKEN } from '../constants'
 import { scrollCursorIntoView, setCursor, suppressExpansion } from '../action-creators'
 import { getThoughtBefore, simplifyPath, getChildrenSorted } from '../selectors'
 import { parentOf } from '../util'
@@ -10,7 +10,7 @@ const cursorPrev = (): Thunk => (dispatch, getState) => {
   const { cursor } = state
 
   if (!cursor) {
-    const children = getChildrenSorted(state, [ROOT_TOKEN])
+    const children = getChildrenSorted(state, [HOME_TOKEN])
     if (children.length > 0) {
       dispatch(setCursor({ path: [children[0]] }))
       dispatch(scrollCursorIntoView())

src/action-creators/dataIntegrityCheck.ts

@@ -13,7 +13,6 @@ import {
   headRank,
   headValue,
   pathToContext,
-  rootedParentOf,
   timestamp,
   unroot,
 } from '../util'
@@ -27,6 +26,7 @@ import {
   getChildrenRanked,
   simplifyPath,
   splitChain,
+  rootedParentOf,
 } from '../selectors'
 
 const disableAll = true
@@ -163,7 +163,7 @@ const dataIntegrityCheck = (path: Path): Thunk => (dispatch, getState) => {
 
     // sync divergent ranks
     if (syncDivergentRanks) {
-      const contextIndexThoughtsMatchingValue = getChildrenRanked(state, rootedParentOf(pathToContext(simplePath)))
+      const contextIndexThoughtsMatchingValue = getChildrenRanked(state, rootedParentOf(state, pathToContext(simplePath)))
         .filter(equalThoughtValue(value))
 
       if (contextIndexThoughtsMatchingValue.length > 0) {

src/action-creators/index.ts

@@ -59,6 +59,7 @@ export const showModal = reducerToThunk<typeof reducers.showModal>('showModal')
 export const splitSentences = reducerToThunk<typeof reducers.splitSentences>('splitSentences')
 export const splitThought = reducerToThunk<typeof reducers.splitThought>('splitThought')
 export const status = reducerToThunk<typeof reducers.status>('status')
+export const toggleAbsoluteContext = reducerToThunk<typeof reducers.toggleAbsoluteContext>('toggleAbsoluteContext')
 export const toggleAttribute = reducerToThunk<typeof reducers.toggleAttribute>('toggleAttribute')
 export const toggleContextView = reducerToThunk<typeof reducers.toggleContextView>('toggleContextView')
 export const toggleHiddenThoughts = reducerToThunk<typeof reducers.toggleHiddenThoughts>('toggleHiddenThoughts')

src/action-creators/loadFromUrl.ts

@@ -1,4 +1,4 @@
-import { RANKED_ROOT } from '../constants'
+import { HOME_PATH } from '../constants'
 import { isRoot, pathToContext } from '../util'
 import { importText, setCursor } from '../action-creators'
 import { decodeThoughtsUrl, getAllChildren } from '../selectors'
@@ -13,7 +13,7 @@ interface Options {
  *
  * @param skipRoot    See importHtml.
  */
-const loadFromUrl = (url: string, path = RANKED_ROOT, { skipRoot }: Options = {}): Thunk<Promise<void>> => async (dispatch, getState) => {
+const loadFromUrl = (url: string, path = HOME_PATH, { skipRoot }: Options = {}): Thunk<Promise<void>> => async (dispatch, getState) => {
   const urlWithProtocol = /^http|localhost/.test(url) ? url : 'https://' + url
   const response = await fetch(urlWithProtocol)
   const text = await response.text()

src/action-creators/loadPublicThoughts.ts

@@ -1,4 +1,4 @@
-import { ROOT_TOKEN } from '../constants'
+import { HOME_TOKEN } from '../constants'
 import { hashContext, hashThought, owner } from '../util'
 import { loadRemoteState } from '../action-creators'
 import { Thunk, Parent, Snapshot } from '../types'
@@ -32,15 +32,15 @@ const loadPublicThoughts = (): Thunk => (dispatch, getState) => {
       thoughts: {
         contextCache: [],
         contextIndex: {
-          [hashContext([ROOT_TOKEN])]: parentEntry
+          [hashContext([HOME_TOKEN])]: parentEntry
         },
         thoughtCache: parentEntry.children.map(child => hashThought(child.value)),
         thoughtIndex: parentEntry.children.reduce((accum, child) => ({
           ...accum,
           [hashThought(child.value)]: {
             value: child.value,
             contexts: [{
-              context: [ROOT_TOKEN],
+              context: [HOME_TOKEN],
               rank: child.rank
             }],
             lastUpdated: child.lastUpdated,

src/action-creators/newThought.ts

@@ -1,5 +1,5 @@
 import { isTouch, isSafari } from '../browser'
-import { ROOT_TOKEN, TUTORIAL_STEP_START } from '../constants'
+import { HOME_TOKEN, TUTORIAL_STEP_START } from '../constants'
 import { getSetting, getAllChildren, hasChild, isContextViewActive } from '../selectors'
 import { asyncFocus, parentOf, ellipsize, headValue, pathToContext } from '../util'
 import { alert } from '../action-creators'
@@ -57,7 +57,7 @@ const newThought = ({
 
   const context = path && (showContexts && path.length > 2 ? pathToContext(parentOf(parentOf(path)))
     : !showContexts && path.length > 1 ? pathToContext(parentOf(path))
-    : [ROOT_TOKEN])
+    : [HOME_TOKEN])
   // split the thought at the selection
   // do not split at the beginning of a line as the common case is to want to create a new thought after, and shift + Enter is so near
   // do not split with gesture, as Enter is avialable and separate in the context of mobile

src/action-creators/pull.ts

@@ -2,13 +2,13 @@ import _ from 'lodash'
 import * as db from '../data-providers/dexie'
 import getFirebaseProvider from '../data-providers/firebase'
 import getManyDescendants from '../data-providers/data-helpers/getManyDescendants'
-import { ROOT_TOKEN } from '../constants'
+import { HOME_TOKEN } from '../constants'
 import { hashContext, mergeThoughts } from '../util'
 import { reconcile, updateThoughts } from '../action-creators'
 import { Thunk, Context, Index, Lexeme, Parent, ThoughtsInterface } from '../types'
 
 const BUFFER_DEPTH = 2
-const ROOT_ENCODED = hashContext([ROOT_TOKEN])
+const ROOT_ENCODED = hashContext([HOME_TOKEN])
 
 export interface PullOptions {
   maxDepth?: number,

src/components/AddIcon.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react'
+import { connect } from 'react-redux'
+import { theme } from '../selectors'
+import { Index } from '../types'
+import { State } from '../util/initialState'
+
+interface SearchIconProps {
+  dark?: boolean,
+  fill?: string,
+  size: number,
+  style?: Index<string>,
+}
+
+// eslint-disable-next-line jsdoc/require-jsdoc
+const mapStateToProps = (state: State) => ({
+  dark: theme(state) !== 'Light'
+})
+
+// eslint-disable-next-line jsdoc/require-jsdoc
+const AddIcon: FC<SearchIconProps> = ({ dark, fill, size = 20, style }) =>
+  <svg version='1.1' x='0px' y='0px' viewBox='1 2 97 96' className='icon' width={size} height={size} fill={fill || (dark ? 'white' : 'black')} style={style}><polygon points='51.4,27.3 48.6,27.3 48.6,48.6 27.3,48.6 27.3,51.4 48.6,51.4 48.6,72.7 51.4,72.7 51.4,51.4 72.7,51.4      72.7,48.6 51.4,48.6    '/><path d='M50,2.5C23.8,2.5,2.5,23.8,2.5,50S23.8,97.5,50,97.5S97.5,76.2,97.5,50S76.2,2.5,50,2.5z M50,94.7     c-24.7,0-44.7-20-44.7-44.7S25.3,5.3,50,5.3c24.7,0,44.7,20,44.7,44.7S74.7,94.7,50,94.7z'/></svg>
+
+export default connect(mapStateToProps)(AddIcon)

src/components/AppComponent.tsx

@@ -26,6 +26,7 @@ import Scale from './Scale'
 import Tutorial from './Tutorial'
 import Toolbar from './Toolbar'
 import HamburgerMenu from './HamburgerMenu'
+import QuickAddButton from './QuickAddButton'
 
 const Content = React.lazy(() => import('./Content'))
 
@@ -166,6 +167,7 @@ const AppComponent: FC<Props> = props => {
               <Scale amount={scale!} origin='bottom left'>
 
                 <NavBar position='bottom' />
+                <QuickAddButton/>
 
               </Scale>
             </div>