feat: impl grouping

apps/web/src/components/list-item/index.js

@@ -43,7 +43,7 @@ const ListItem = props => (
         display={props.info ? "flex" : "none"}
         variant="body"
         fontSize={12}
-        color="primary"
+        color="foreground"
       >
         {props.info}
       </Text>

apps/web/src/theme.js

@@ -41,7 +41,7 @@ export default {
   fontSizes: {
     heading: 36,
     input: 16,
-    title: 22,
+    title: 18,
     subtitle: 18,
     body: 14,
     menu: 14

apps/web/src/views/Home.js

@@ -1,18 +1,23 @@
 import React, { useEffect, useState } from "react";
-import { Flex, Text } from "rebass";
+import { Flex, Text, Box } from "rebass";
 import * as Icon from "react-feather";
 import { db, ev, sendNewNoteEvent } from "../common";
-import { Virtuoso as List } from "react-virtuoso";
+import { GroupedVirtuoso as List } from "react-virtuoso";
 import Button from "../components/button";
 import Search from "../components/search";
 import Note from "../components/note";
 
 function Home() {
-  const [notes, setNotes] = useState(db.getNotes());
+  const [notes, setNotes] = useState({
+    items: [],
+    groupCounts: [],
+    groups: []
+  });
   useEffect(() => {
     function onRefreshNotes() {
-      setNotes(db.getNotes());
+      setNotes(db.groupNotes(undefined, true));
     }
+    onRefreshNotes();
     ev.addListener("refreshNotes", onRefreshNotes);
     return () => {
       ev.removeListener("refreshNotes", onRefreshNotes);
@@ -20,7 +25,7 @@ function Home() {
   }, []);
   return (
     <Flex flexDirection="column" flex="1 1 auto">
-      {notes.length > 0 ? (
+      {notes.items.length > 0 ? (
         <Flex flexDirection="column" flex="1 1 auto">
           <Search placeholder="Search" />
           <List
@@ -30,8 +35,15 @@ function Home() {
               height: "auto",
               overflowX: "hidden"
             }}
-            totalCount={notes.length}
+            groupCounts={notes.groupCounts}
-            item={index => <Note index={index} item={notes[index]} />}
+            group={index => (
+              <Box bg="background">
+                <Text variant="heading" color="primary" fontSize={13}>
+                  {notes.groups[index].title}
+                </Text>
+              </Box>
+            )}
+            item={index => <Note index={index} item={notes.items[index]} />}
           />
           <Button
             Icon={Icon.Plus}

apps/web/src/views/Notebooks.js

@@ -203,7 +203,7 @@ const CreateNotebookDialog = props => {
             onChange={e => (CreateNotebookDialog.description = e.target.value)}
             placeholder="Enter description (optional)"
           />
-          <Label>
+          <Label alignItems="center" my={1}>
             <Checkbox variant="checkbox" />
             Locked?
           </Label>

apps/web/yarn.lock

@@ -6991,7 +6991,7 @@ normalize-url@^3.0.0, normalize-url@^3.0.1:
 
 "notes-core@https://github.com/thecodrr/notes-core.git":
   version "0.2.0"
-  resolved "https://github.com/thecodrr/notes-core.git#884f119c1e6201e261dace3154661da67e7d8445"
+  resolved "https://github.com/thecodrr/notes-core.git#7b90918d311794d87698b89152e97f1a3296824d"
   dependencies:
     fuzzysearch "^1.0.3"
     transfun "^1.0.2"