UI updates

README.md

@@ -13,21 +13,23 @@
 
 ![Screenshot](./assets/takenote-light.png)
 
-### Fast and simple
-
-TakeNote was made by developers for developers - a simple, plain-text note-taking app for the web with Markdown support. What you see is what you paste. No WYSIWIG, no formatting pasted from the web, and no features you don't need or want.
-
-### Intuitive
-
-Drag-and-drop notes into categories, instantly search through notes, and pin your favorites to the top.
-
-### Beautiful
-
-Enjoy a beautiful, clean design reminiscent of your IDE with light and dark themes.
-
-### Sync to GitHub
-
-In progress!
+## Features
+
+- Open source and web-based
+- Plain text notes
+- Markdown preview
+- Syntax highlighting
+- Keyboard shortcuts
+- Drag and drop
+- Favorites and categories
+- Multi-note actions
+- Multi-cursor editing
+- Light/dark theme
+- Search notes
+- Prettify notes
+- No WYSIWYG
+- No database
+- No tracking or analytics
 
 ## Reviews
 

src/client/api/welcomeNote.md

@@ -4,16 +4,21 @@ TakeNote is a free, open-source notes app with GitHub sync (soon™️). Check o
 
 ## Features
 
-- Organize with categories and bookmarks
-- Shortcuts for common actions
-- Light/dark mode
-- Drag and drop
+- Open source and web-based
+- Plain text notes
+- Markdown preview
 - Syntax highlighting
+- Keyboard shortcuts
+- Drag and drop
+- Favorites and categories
 - Multi-note actions
 - Multi-cursor editing
-- Markdown preview
-- Prettify notes
+- Light/dark theme
 - Search notes
+- Prettify notes
+- No WYSIWYG
+- No database
+- No tracking or analytics
 
 ## Keyboard shortcuts
 

src/client/components/LastSyncedNotification.tsx

@@ -3,10 +3,28 @@ import dayjs from 'dayjs'
 
 export interface LastSyncedNotificationProps {
   datetime: string
+  pending: boolean
+  syncing: boolean
 }
 
-export const LastSyncedNotification: React.FC<LastSyncedNotificationProps> = ({ datetime }) => {
-  return (
-    <div className="last-synced">{datetime && dayjs(datetime).format('h:mm A on M/D/YYYY')}</div>
-  )
+export const LastSyncedNotification: React.FC<LastSyncedNotificationProps> = ({
+  datetime,
+  pending,
+  syncing,
+}) => {
+  const renderLastSynced = () => {
+    if (syncing) {
+      return <i>Syncing...</i>
+    }
+
+    if (pending) {
+      return <i>Unsaved changes</i>
+    }
+
+    if (datetime) {
+      return <span>{dayjs(datetime).format('h:mm A on M/D/YYYY')}</span>
+    }
+  }
+
+  return <div className="last-synced">{renderLastSynced()}</div>
 }

src/client/components/Tabs/Tab.tsx

@@ -12,7 +12,7 @@ export const Tab: React.FC<TabProps> = ({ activeTab, label, icon: IconCmp, onCli
   const className = activeTab === label ? 'tab active' : 'tab'
 
   return (
-    <div className={className} onClick={() => onClick(label)}>
+    <div key={label} className={className} onClick={() => onClick(label)}>
       <IconCmp size={18} className="mr-1" aria-hidden="true" focusable="false" /> {label}
     </div>
   )

src/client/components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { Fragment, useState } from 'react'
 
 import { Tab } from './Tab'
 
@@ -31,10 +31,10 @@ export const Tabs: React.FC<TabsProps> = ({ children }) => {
           if (child.props.label !== activeTab) return
 
           return (
-            <>
+            <Fragment key={`${child.props.label}-panel`}>
               <h3>{child.props.label}</h3>
               {child.props.children}
-            </>
+            </Fragment>
           )
         })}
       </div>

src/client/containers/AppSidebar.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Plus, Settings } from 'react-feather'
+import { Plus } from 'react-feather'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { LabelText } from '@resources/LabelText'
@@ -19,7 +19,7 @@ import {
   unassignTrashFromNotes,
 } from '@/slices/note'
 import { toggleSettingsModal, togglePreviewMarkdown } from '@/slices/settings'
-import { getSettings, getNotes, getAuth } from '@/selectors'
+import { getSettings, getNotes } from '@/selectors'
 import { NoteItem } from '@/types'
 import { newNoteHandlerHelper, getActiveNote } from '@/utils/helpers'
 
@@ -30,7 +30,6 @@ export const AppSidebar: React.FC = () => {
 
   const { activeCategoryId, activeFolder, activeNoteId, notes } = useSelector(getNotes)
   const { previewMarkdown } = useSelector(getSettings)
-  const { currentUser } = useSelector(getAuth)
 
   const activeNote = getActiveNote(notes, activeNoteId)
 
@@ -69,8 +68,6 @@ export const AppSidebar: React.FC = () => {
       _updateSelectedNotes
     )
 
-  const settingsHandler = () => _toggleSettingsModal()
-
   return (
     <aside className="app-sidebar">
       <ActionButton
@@ -108,23 +105,6 @@ export const AppSidebar: React.FC = () => {
         />
         <CategoryList />
       </section>
-      <button
-        className="app-sidebar-settings"
-        data-testid={TestID.SIDEBAR_ACTION_SETTINGS}
-        onClick={settingsHandler}
-        aria-label={LabelText.SETTINGS}
-      >
-        <div>
-          <img src={currentUser.avatar_url} alt="Profile" className="user-avatar" />
-        </div>
-        <div>
-          <div className="user-name">{currentUser.name}</div>
-          <div className="user-subtitle">Settings</div>
-        </div>
-        <div className="user-settings-icon">
-          <Settings size={16} />
-        </div>
-      </button>
     </aside>
   )
 }

src/client/containers/NoteEditor.tsx

@@ -46,57 +46,56 @@ export const NoteEditor: React.FC = () => {
       return <EmptyEditor />
     } else if (previewMarkdown)
       return (
-        <>
-          <NoteMenuBar />
-          <PreviewEditor directionText={codeMirrorOptions.direction} noteText={activeNote.text} />
-        </>
+        <PreviewEditor directionText={codeMirrorOptions.direction} noteText={activeNote.text} />
       )
 
     return (
-      <>
-        <NoteMenuBar />
-        <CodeMirror
-          data-testid="codemirror-editor"
-          className="editor mousetrap"
-          value={activeNote.text}
-          options={codeMirrorOptions}
-          editorDidMount={(editor) => {
-            setTimeout(() => {
-              editor.focus()
-            }, 0)
-            editor.setCursor(0)
-          }}
-          onBeforeChange={(editor, data, value) => {
-            _updateNote({
-              id: activeNote.id,
-              text: value,
-              created: activeNote.created,
-              lastUpdated: dayjs().format(),
+      <CodeMirror
+        data-testid="codemirror-editor"
+        className="editor mousetrap"
+        value={activeNote.text}
+        options={codeMirrorOptions}
+        editorDidMount={(editor) => {
+          setTimeout(() => {
+            editor.focus()
+          }, 0)
+          editor.setCursor(0)
+        }}
+        onBeforeChange={(editor, data, value) => {
+          _updateNote({
+            id: activeNote.id,
+            text: value,
+            created: activeNote.created,
+            lastUpdated: dayjs().format(),
+          })
+        }}
+        onChange={(editor, data, value) => {
+          if (!value) {
+            editor.focus()
+          }
+        }}
+        onPaste={(editor, event: any) => {
+          // Get around pasting issue
+          // https://github.com/scniro/react-codemirror2/issues/77
+          if (!event.clipboardData || !event.clipboardData.items || !event.clipboardData.items[0])
+            return
+          event.clipboardData.items[0].getAsString((pasted: any) => {
+            if (editor.getSelection() !== pasted) return
+            const { anchor, head } = editor.listSelections()[0]
+            editor.setCursor({
+              line: Math.max(anchor.line, head.line),
+              ch: Math.max(anchor.ch, head.ch),
             })
-          }}
-          onChange={(editor, data, value) => {
-            if (!value) {
-              editor.focus()
-            }
-          }}
-          onPaste={(editor, event: any) => {
-            // Get around pasting issue
-            // https://github.com/scniro/react-codemirror2/issues/77
-            if (!event.clipboardData || !event.clipboardData.items || !event.clipboardData.items[0])
-              return
-            event.clipboardData.items[0].getAsString((pasted: any) => {
-              if (editor.getSelection() !== pasted) return
-              const { anchor, head } = editor.listSelections()[0]
-              editor.setCursor({
-                line: Math.max(anchor.line, head.line),
-                ch: Math.max(anchor.ch, head.ch),
-              })
-            })
-          }}
-        />
-      </>
+          })
+        }}
+      />
     )
   }
 
-  return <main className="note-editor">{renderEditor()}</main>
+  return (
+    <main className="note-editor">
+      <NoteMenuBar />
+      {renderEditor()}
+    </main>
+  )
 }

src/client/containers/NoteMenuBar.tsx

@@ -13,7 +13,7 @@ import {
 } from '@/slices/settings'
 import { toggleFavoriteNotes, toggleTrashNotes } from '@/slices/note'
 import { getCategories, getNotes, getSync, getSettings } from '@/selectors'
-import { downloadNotes } from '@/utils/helpers'
+import { downloadNotes, isDraftNote } from '@/utils/helpers'
 import { sync } from '@/slices/sync'
 
 export const NoteMenuBar = () => {
@@ -23,7 +23,7 @@ export const NoteMenuBar = () => {
 
   const { notes, activeNoteId } = useSelector(getNotes)
   const { categories } = useSelector(getCategories)
-  const { syncing, lastSynced } = useSelector(getSync)
+  const { syncing, lastSynced, pendingSync } = useSelector(getSync)
   const { darkTheme } = useSelector(getSettings)
   const activeNote = notes.find((note) => note.id === activeNoteId)!
 
@@ -59,32 +59,36 @@ export const NoteMenuBar = () => {
 
   return (
     <section className="note-menu-bar">
+      {activeNote && !isDraftNote(activeNote) ? (
+        <nav>
+          <button className="note-menu-bar-button" onClick={_togglePreviewMarkdown}>
+            <Eye size={18} />
+          </button>
+          {!activeNote.scratchpad && (
+            <>
+              <button className="note-menu-bar-button" onClick={favoriteNoteHandler}>
+                <Star size={18} />
+              </button>
+              <button className="note-menu-bar-button trash" onClick={trashNoteHandler}>
+                <Trash2 size={18} />
+              </button>
+            </>
+          )}
+          <button className="note-menu-bar-button">
+            <Download size={18} onClick={downloadNotesHandler} />
+          </button>
+        </nav>
+      ) : (
+        <div />
+      )}
       <nav>
-        <button className="note-menu-bar-button" onClick={_togglePreviewMarkdown}>
-          <Eye size={18} />
-        </button>
-        {!activeNote.scratchpad && (
-          <>
-            <button className="note-menu-bar-button" onClick={favoriteNoteHandler}>
-              <Star size={18} />
-            </button>
-            <button className="note-menu-bar-button" onClick={trashNoteHandler}>
-              <Trash2 size={18} />
-            </button>
-          </>
-        )}
-        <button className="note-menu-bar-button">
-          <Download size={18} onClick={downloadNotesHandler} />
-        </button>
-      </nav>
-      <nav>
-        <LastSyncedNotification datetime={lastSynced} />
+        <LastSyncedNotification datetime={lastSynced} pending={pendingSync} syncing={syncing} />
         <button
           className="note-menu-bar-button"
           onClick={syncNotesHandler}
           data-testid={TestID.TOPBAR_ACTION_SYNC_NOTES}
         >
-          {syncing ? <Loader size={18} /> : <RefreshCw size={18} />}
+          {syncing ? <Loader size={18} className="rotating-svg" /> : <RefreshCw size={18} />}
         </button>
         <button className="note-menu-bar-button" onClick={toggleDarkThemeHandler}>
           {darkTheme ? <Sun size={18} /> : <Moon size={18} />}

src/client/containers/SettingsModal.tsx

@@ -192,9 +192,8 @@ export const SettingsModal: React.FC = () => {
             </TabPanel>
             <TabPanel label="About TakeNote" icon={Layers}>
               <p>
-                TakeNote is a simple, minimalist note-taking app that integrates with GitHub,
-                created for developers who want to write in plain text or Markdown and have their
-                notes accessible from the web, without any fluff.
+                TakeNote is a minimalist note-taking app for developers that integrates with GitHub.
+                Write in plain text and have your notes accessible from the web.
               </p>
               <p>
                 This app has no tracking or analytics and does not retain any user data. All data

src/client/containers/TakeNoteApp.tsx

@@ -88,7 +88,7 @@ export const TakeNoteApp: React.FC = () => {
       <TempStateProvider>
         <div className={determineAppClass(darkTheme, sidebarVisible, activeFolder)}>
           <DragDropContext onDragEnd={onDragEnd}>
-            <SplitPane split="vertical" minSize={150} maxSize={500} defaultSize={230}>
+            <SplitPane split="vertical" minSize={150} maxSize={500} defaultSize={240}>
               <AppSidebar />
               <SplitPane split="vertical" minSize={200} maxSize={600} defaultSize={330}>
                 <NoteList />

src/client/styles/_app-sidebar.scss

@@ -95,7 +95,7 @@
   &-main {
     flex: 1;
     position: relative;
-    padding-bottom: 4rem;
+    padding-bottom: 1rem;
 
     p {
       padding: 0 0.5rem;