Big update

probably too much to itemize truly, but can't be bothered to track
everything while i'm debuilding the foundations and crap.

- adding `page_id` context to pages. allows child components to get the
  current page id, which is now required for `set_meta()` calls. before,
  set_meta() would modify the current page, but we cannot assume the
  current page is the one we're updating the title for. hence, page_id.
- adding contexts to shortcuts. this lets us activate keyboard shortcuts
  in, well, certain contexts. the main one we're using is pages: each
  page creates its own context based off its id, which while components
  can now query, see above. this lets us only activate keyboard
  shortcuts when the page they are set up on is active.
- adding Icon component, which lets us use named icons instead of the
  ugly  html entities.
- adding more icons to icon font.
- implementing Action component, floating action button.
- implementing Space component that loads a note list and opens note
  editor.
- updating turtl models and the way they're created.
- ripping out logging libs and using hand-rolled one. ulog just wasn't
  listening and i got sick of it.

Author: orthecreedence

package-lock.json

@@ -33,8 +33,6 @@
     "vite": "^3.0.7"
   },
   "dependencies": {
-    "anylogger": "^1.0.11",
-    "i18next": "^21.9.1",
-    "ulog": "^2.0.0-beta.19"
+    "i18next": "^21.9.1"
   }
 }

package.json

@@ -1,5 +1,6 @@
 <script>
     import Header from './components/Header.svelte';
+    import Page from './components/util/Page.svelte';
     import Main from './components/pages/Main.svelte';
     import Login from './components/pages/Login.svelte';
     import Err from './components/pages/Error.svelte';
@@ -10,7 +11,7 @@
     import config from './models/turtl/config';
     import darkmode from './models/darkmode';
     import { procerr } from './util/error';
-    import log from './util/log';
+    import { ui as log } from './util/log';
     import delay from './util/delay';
     import { init as i18n_init, loc } from './util/i18n';
     import * as shortcuts from './util/shortcuts';
@@ -84,9 +85,11 @@
 <main class="h-screen">
     <Header />
     <div class="absolute top-12 bottom-0 left-0 right-0">
-        {#each $pages as {component, params, animate}}
+        {#each $pages as {id, component, params, animate}}
             <div transition:page_animate="{{animate, x: 500, opacity: 0.1}}" class="page absolute left-0 right-0 top-0 bottom-0 overflow-auto p-8 bg-white dark:bg-black z-40">
-                <svelte:component this={component} {...params}/>
+                <Page page_id={id}>
+                    <svelte:component this={component} {...params}/>
+                </Page>
             </div>
         {/each}
     </div>

src/App.svelte

@@ -1,7 +1,7 @@
 import * as core from '@/models/turtl/core';
 import delay from '@/util/delay';
 import Emitter from '@/util/event';
-import log from '@/util/log';
+import { core as log } from '@/util/log';
 
 const CoreAdapter = ((events) => {
     const state = {
@@ -67,6 +67,17 @@ const CoreAdapter = ((events) => {
             title: 'Bookmarks',
         }],
         invites: [],
+        notes: [{
+            id: '01665e7122136f3cb9f271cb9a3596ab75f9ca3d3d90fd7188222222222222225d4efada9ac8f529',
+            space_id: '01665e7122136f3cb9f271cb9a3596ab75f9ca3d3d90fd71882c89a06a244ec25d4efada9ac8f529',
+            user_id: '01626b759c146c6f6b696da1b7e38fd92ff72c531689872a9da4e1b4cb7697b0636b15616a0f0017',
+            has_file: false,
+            mod: new Date('2014-08-13T00:45:12.000Z').getTime(),
+            type: 'text',
+            title: 'Business things',
+            tags: ['business', 'company'],
+            text: `# Meeting notes\n\n- Talked to Drew about getting 50% of the company. Sounds good.\n- Wrote a 50 page document nobody read.\n- Saw a mourning dove out the office window. It laid egg on the windowsill, but a jay at them. The dove blamed me.\n`,
+        }],
     };
 
     function event(name, eventdata) {
@@ -93,6 +104,89 @@ const CoreAdapter = ((events) => {
                 response = {};
                 break;
             }
+            case 'profile:find-notes': {
+                const search = args[0];
+                const text = search.text;
+                const note_ids = search.notes;
+                const space_id = search.space_id;
+                const board_ids = search.boards;
+                const tags = search.tags;
+                const exclude_tags = search.exclude_tags;
+                const type = search.type;
+                const url = search.url;
+                const has_file = search.has_file;
+                const sort = search.sort;
+                const sort_direction = search.sort_direction;
+                const page = search.page || 1;
+                const per_page = search.per_page || 50;
+                let notes = state.notes;
+                if(text) {
+                    notes = notes.filter((note) => {
+                        note.title.substr(text) >= 0 ||
+                            note.text.substr(text) >= 0 ||
+                            note.tags.reduce((acc, t) => acc || t.substr(text) >= 0, false);
+                    });
+                }
+                if(note_ids) {
+                    notes = notes.filter((note) => note_ids.indexOf(note.id) >= 0);
+                }
+                if(space_id) {
+                    notes = notes.filter((note) => note.space_id === space_id);
+                }
+                if(board_ids) {
+                    notes = notes.filter((note) => board_ids.indexOf(note.board_id) >= 0);
+                }
+                if(tags) {
+                    notes = notes.filter((note) => {
+                        return tags.reduce((acc, t) => {
+                            return acc && note.tags.indexOf(t) >= 0;
+                        }, true);
+                    });
+                }
+                if(exclude_tags) {
+                    notes = notes.filter((note) => {
+                        return !exclude_tags.reduce((acc, x) => {
+                            return acc || note.tags.indexOf(x) >= 0;
+                        }, false);
+                    });
+                }
+                if(type) {
+                    notes = notes.filter((note) => note.type === type);
+                }
+                if(url) {
+                    notes = notes.filter((note) => note.url === url);
+                }
+                if(has_file) {
+                    notes = notes.filter((note) => note.has_file);
+                }
+                notes = notes.sort((a, b) => {
+                    const [x, y] = sort_direction.toLowerCase().trim() === 'desc' ?
+                        [b, a] :
+                        [a, b];
+                    if(typeof(a[sort]) === 'string') {
+                        return x[sort].localeCompare(y[sort]);
+                    } else {
+                        return x[sort] < y[sort];
+                    }
+                });
+                const offset = (Math.max(page, 0) - 1) * Math.max(per_page, 1);
+                const total = notes.length;
+                const tags_idx = notes.reduce((acc, x) => {
+                    x.tags.forEach((t) => {
+                        if(!acc[t]) acc[t] = 0;
+                        acc[t]++;
+                    });
+                    return acc;
+                }, {});
+                const note_tags = Object.keys(tags_idx).map((k) => [k, tags_idx[k]]);
+                notes = notes.slice(offset, offset + per_page);
+                response = {
+                    notes,
+                    tags: note_tags,
+                    total,
+                };
+                break;
+            }
             case 'profile:load': {
                 await delay(500);
                 event('profile:loaded');
@@ -115,7 +209,7 @@ const CoreAdapter = ((events) => {
                 break;
             }
             case 'user:login-from-saved': {
-                const [user_id, key] = args;
+                const [_user_id, key] = args;
                 const decoded = JSON.parse(key);
                 if(decoded.u === state.user.username && decoded.p === state.user.password) {
                     state.user.loggedin = true;

src/adapters/core/mock.js

@@ -2,6 +2,7 @@
     import Menu from './util/Menu.svelte';
     import { pages, pop_page } from '../models/pages';
     import user from '../models/turtl/user';
+    import Icon from './util/Icon.svelte';
 
     function back(e) {
         e.preventDefault();
@@ -20,22 +21,30 @@
     $: headerclass = opts.hide ?
         'bg-white dark:bg-black text-black dark:text-white' :
         'bg-slate-800 dark:bg-black text-white';
+    $: space_shade = opts.space && opts.space.color.shade === 'light' ?
+        'text-white' :
+        'text-black';
 </script>
 
 <header class="relative h-12 flex items-center justify-between px-3 {headerclass} z-50">
     {#if $pages.length > 1}
         <a href="#back" on:click={back} class="flex items-center">
-            <icon class="text-primary">&#xE801;</icon>
+            <Icon class="text-primary" name="arrow" />
             {#if !opts.hide}
                 <h1 class="font-mono font-bold ml-4 mt-1">{curpage.title || '(untitled)'}</h1>
             {/if}
         </a>
     {:else}
         <a href="#sidebar" on:click={toggle_sidebar} class="flex items-center">
             {#if $user.loggedin}
-                <icon class="text-primary text-xl relative">&#xF0C9;</icon>
+                <Icon class="text-primary text-xl relative" name="hamburger" />
             {/if}
             {#if !opts.hide}
+                {#if opts.space}
+                    <div class="px-2 py-0.5 ml-4 rounded-md {space_shade}" style="background-color: {opts.space.color.bg};">
+                        {opts.space.title}
+                    </div>
+                {/if}
                 <h1 class="font-mono font-bold ml-4 mt-1">{curpage.title || '(untitled)'}</h1>
             {/if}
         </a>

src/assets/fonts/icons.woff2

@@ -1,5 +1,6 @@
 <script>
     import { createEventDispatcher } from 'svelte';
+    import Icon from '../util/Icon.svelte';
     export let label;
     let klass = '';
     export { klass as class };
@@ -32,7 +33,7 @@
         type={submit ? 'submit' : 'button'}
         tabindex={tabindex || null}>
     {#if icon}
-        <icon class="text-xl pr-2 {icon_class || ''}">{icon}</icon>
+        <Icon class="text-xl pr-2 {icon_class || ''}" name={icon} />
     {/if}
     <div class="relative">{label}</div>
 </button>

src/components/Header.svelte

@@ -1,6 +1,8 @@
 <script>
     import { createEventDispatcher } from 'svelte';
     import { inc } from '@/models/counter';
+    import Icon from '../util/Icon.svelte';
+
     export let name;
     export let label;
     export let type = 'text';
@@ -81,7 +83,7 @@
     <div class="relative {container_padding_class} bg-slate-200/50 dark:bg-slate-600/50">
         {#if icon}
             <div class="absolute z-0 top-0 bottom-0 left-0 ml-4 flex items-center {icon_class || ''}">
-                <icon class="text-xl">{icon}</icon>
+                <Icon class="text-xl" name={icon} />
             </div>
         {/if}
         <!-- lovely duplication here. again, https://github.com/sveltejs/svelte/issues/7566 -->
@@ -104,7 +106,7 @@
         </label>
         {#if icon_trailing}
             <div on:click={icon_trailing_click} class="absolute z-10 top-0 bottom-0 right-0 mr-4 flex items-center {icon_trailing_class || ''}">
-                <icon class="text-xl">{icon_trailing}</icon>
+                <Icon class="text-xl" name={icon_trailing} />
             </div>
         {/if}
     </div>