Optimizing a bit of stuff

src/components/Footer.tsx

@@ -64,6 +64,9 @@ export class Footer extends Component<{}, { synced: boolean, syncing: boolean }>
             <span>
                 Welcome <b>{Notes.name}</b>
             </span>
+            <span style="color: lightgrey;">
+                v1.0
+            </span>
         </footer>
     }
 

src/components/Routing.tsx

@@ -42,7 +42,7 @@ export class Router extends Component<{}, { next?: JSX.Element, current: JSX.Ele
             {this.state.next}
          </div>
       }
-      return <div style="position: relative; overflow-x: hidden; width: 100vw; height: 100vh;">
+      return <div style="position: relative; overflow-x: hidden; width: 100vw; height: calc(100vh - 2rem);">
          <div class="transition_container uk-background-default" key={this.state.current.key} ref={elm => this.mounted = elm}>
             {this.state.current}
          </div>

src/components/routes/vault/Entry.tsx

@@ -1,14 +1,12 @@
 import { h, Component } from "preact"
-import Notes, { IVault, ViewNote } from "../../../notes";
+import { IVault, ViewNote } from "../../../notes";
 import Trash from "feather-icons/dist/icons/trash-2.svg"
 import X from "feather-icons/dist/icons/x.svg"
 import Save from "feather-icons/dist/icons/save.svg"
 
 import Navigation from "../../../navigation";
 import { YesNoModal } from "../../modals/YesNoModal";
-import LoadingModal from "../../modals/LoadingModal";
 import Notifications, { MessageType } from "../../../notifications";
-import Modal from "../../modals/Modal";
 
 const minRows = 3;
 export default class EntryComponent extends Component<{ vault: Promise<IVault>, id: string | undefined, note: string | undefined }, { title: string, changed: boolean }> {
@@ -21,15 +19,23 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
 
    private skip_save: boolean = false;
 
+   private inputElm: HTMLInputElement;
+
    constructor(props) {
       super(props);
       this.state = { changed: false, title: "" };
+      this.textAreaChange = this.textAreaChange.bind(this);
+      this.textAreaKeyPress = this.textAreaKeyPress.bind(this);
    }
 
    private toVault() {
       history.back();
    }
 
+   componentDidMount() {
+      this.inputElm.focus();
+   }
+
    async componentWillMount() {
       this.text = "";
       this.vault = undefined;
@@ -39,8 +45,6 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
       this.setState({ changed: false, title: "" });
       try {
          this.skip_save = false;
-         // this.loading = new LoadingModal();
-         // this.loading.show();
 
          this.vault = await this.props.vault;
          let note: ViewNote;
@@ -57,7 +61,6 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
 
          if (!note) {
             Notifications.sendNotification("Note not found!", MessageType.ERROR);
-            // this.toVault()
          } else {
             this.note = note;
             this.text = note.__value;
@@ -65,14 +68,8 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
             if (rows !== this.rows) {
                this.rows = rows;
             }
-            // async onKeypress(event) {
-            //    event = event || window.event;
-            //    
-            // }
             let [title] = this.text.split("\n", 1);
             this.setState({ title, changed })
-            // if (this.loading)
-            // this.loading.close();
          }
       } catch (err) {
          Notifications.sendError(err);
@@ -108,11 +105,12 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
 
    textAreaChange(evt: KeyboardEvent) {
       if (evt.keyCode === 17 || evt.keyCode === 27) return; //No character, so not relevant for this function
+      if (!this.state.changed && this.textAreaKeyPress(evt)) this.setState({ changed: true })
+
       let target = (evt.target as HTMLTextAreaElement)
       let value = target.value;
 
       this.text = value;
-      if (!this.state.changed && this.textAreaKeyPress(evt)) this.setState({ changed: true })
 
       let [title] = value.split("\n", 1);
       if (title !== this.state.title)
@@ -138,6 +136,7 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
    }
 
    textAreaKeyPress(evt: KeyboardEvent) {
+      console.log(evt);
       if ((evt.keyCode === 83 || evt.keyCode === 13) && evt.ctrlKey) {
          evt.preventDefault()
          this.save();
@@ -161,39 +160,27 @@ export default class EntryComponent extends Component<{ vault: Promise<IVault>,
       const delete_handler = async () => {
          await this.vault.deleteNote(this.props.id);
          this.toVault()
-         // async onKeypress(event) {
-         //    event = event || window.event;
-         //    
-         // }
       }
 
+      console.log("Rerender")
+
       return <div>
          <header class="uk-background-primary">
-            {/* <div> */}
             <a class="header-icon-button" onClick={() => this.exitHandler()}><X height={undefined} width={undefined} /></a>
             {this.state.changed ? <a class="header-icon-button" style="margin-left: 0.5em;" onClick={() => save_handler()}><Save height={undefined} width={undefined} /></a> : undefined}
-            {/* </div> */}
             <h3 style="display:inline" class="button header-title">{this.state.title}</h3>
             <a class="header-icon-button" onClick={() => delete_handler()}><Trash height={undefined} width={undefined} /></a>
          </header>
          <div class="uk-container">
             <textarea
-               // async onKeypress(event) {
-               //    event = event || window.event;
-               //    
-               // }
-               autofocus
                value={this.text}
                rows={this.rows}
                class="doc uk-textarea"
                style="width:100%;"
-               onInput={evt => this.textAreaChange(evt as KeyboardEvent)}
+               onInput={this.textAreaChange}
-               onKeyDown={evt => this.textAreaKeyPress(evt)}
+               onKeyDown={this.textAreaKeyPress}
-               onChange={evt => this.textAreaChange(evt as KeyboardEvent)}
+               onChange={this.textAreaChange}
-               ref={elm => {
+               ref={elm => this.inputElm = elm}
-                  if (elm)
-                     setTimeout(() => elm.focus(), 500)
-               }}
             />
          </div>
       </div>

src/components/routes/vault/EntryList.tsx

@@ -72,7 +72,6 @@ export default class EntryList extends Component<{ vault: Promise<IVault> }, { n
          } else {
             Notifications.sendError("Sharing not possible on this device")
          }
-
       }
 
       let share;

src/components/routes/vault/vault.scss

@@ -1,7 +1,10 @@
-
+.uk-container> :last-child {
+   margin-bottom: 15px !important;
+}
 
 .vault-vault {
    width: 100%;
+
    >div {
       width: 100%;
       font-size: 1rem;
@@ -17,7 +20,7 @@
    }
 
    >div:empty {
-      &::before{
+      &::before {
          content: " ";
          white-space: pre;
       }

src/components/routes/vaults/Vaults.tsx

@@ -218,7 +218,7 @@ export default class VaultsPage extends Page<VaultsProps, { vaults: VaultList, m
          {this.state.context}
          <header class="uk-background-primary">
             <span></span>
-            <h3 style="display:inline" class="header_title" onClick={() => Navigation.setPage("/")}>Your vaults:</h3>
+            <h3 style="display:inline" onClick={() => Navigation.setPage("/")}>Your vaults:</h3>
             <span></span>
          </header>
          <AddButton onClick={() => this.addButtonClick()} />

src/components/routing.scss

@@ -5,7 +5,6 @@
    height: 100%;
    width: 100%;
    overflow: auto;
-   padding-bottom: 40px;
 }
 
 .transition_slidein {
@@ -21,6 +20,7 @@
    from {
       left: 100%;
    }
+
    to {
       left: 0%;
    }

src/index.html

@@ -17,6 +17,7 @@
 
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#3E9AE9">
+   <script src="encoding.js"></script>
    <meta name="msapplication-TileColor" content="#3E9AE9">
    <meta name="theme-color" content="#3E9AE9">
 </head>

src/index.scss

@@ -33,6 +33,8 @@ header {
 
    >* {
       margin: 0;
+      color: white;
+      background: var(--primary);
    }
 
    >.header-title {
@@ -49,7 +51,6 @@ header {
       display: block;
       margin-top: auto;
       margin-bottom: auto;
-      color: black;
       min-width: $header-icon-size;
 
       >svg {

src/notes.ts

@@ -524,6 +524,7 @@ class NotesProvider {
       async getAllNotes() {
          return Notes.noteDB.getAll()
             .then(all => all.filter(e => e.folder === this.vault._id)
+               .sort(this.sort)
                .map<BaseNote>(e => {
                   let new_note = clonedeep(<Note>e) as BaseNote
                   delete (<any>new_note).__value
@@ -532,6 +533,10 @@ class NotesProvider {
                }));
       }
 
+      private sort(a: DBNote, b: DBNote) {
+         return new Date(b.time).getTime() - new Date(a.time).getTime();
+      }
+
       async searchNote(term: string) {
          let all = await this.getAllNotes();
          return all.filter(e => e.preview.indexOf(term) >= 0)