wip

design.drawio

@@ -1,6 +1,6 @@
-<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36" version="24.7.8">
+<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36" version="25.0.1">
   <diagram name="Page-1" id="G2-a1oUG1H-bwT7ce2_Y">
-    <mxGraphModel dx="986" dy="620" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+    <mxGraphModel dx="698" dy="423" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" style="" parent="0" />
@@ -10,33 +10,36 @@
         <mxCell id="rRo1dadeA1uCrzt-e38k-27" value="&lt;b&gt;Backend&lt;/b&gt;&lt;div&gt;PostgreSQL&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" parent="1" vertex="1">
           <mxGeometry x="680" y="40" width="100" height="40" as="geometry" />
         </mxCell>
-        <mxCell id="rRo1dadeA1uCrzt-e38k-28" value="&lt;b&gt;Frontend&lt;/b&gt;&lt;div&gt;notes2.mjs&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
+        <mxCell id="_PY1-sNXTUqCv9qV1nWE-2" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;endFill=1;" edge="1" parent="1" source="rRo1dadeA1uCrzt-e38k-28" target="_PY1-sNXTUqCv9qV1nWE-1">
-          <mxGeometry x="40" y="40" width="100" height="40" as="geometry" />
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="rRo1dadeA1uCrzt-e38k-28" value="&lt;b&gt;Notes2 Component&lt;/b&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" parent="1" vertex="1">
+          <mxGeometry x="1200" y="40" width="150" height="40" as="geometry" />
         </mxCell>
         <mxCell id="rRo1dadeA1uCrzt-e38k-29" value="&lt;b&gt;NodeStore&lt;/b&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
           <mxGeometry x="200" y="40" width="100" height="40" as="geometry" />
         </mxCell>
         <mxCell id="rRo1dadeA1uCrzt-e38k-30" value="" style="endArrow=none;html=1;rounded=0;strokeColor=#B3B3B3;" parent="1" edge="1">
           <mxGeometry width="50" height="50" relative="1" as="geometry">
-            <mxPoint x="89.5" y="780" as="sourcePoint" />
+            <mxPoint x="90" y="480" as="sourcePoint" />
             <mxPoint x="89.5" y="80" as="targetPoint" />
           </mxGeometry>
         </mxCell>
         <mxCell id="rRo1dadeA1uCrzt-e38k-31" value="" style="endArrow=none;html=1;rounded=0;strokeColor=#B3B3B3;" parent="1" edge="1">
           <mxGeometry width="50" height="50" relative="1" as="geometry">
-            <mxPoint x="249.5" y="780" as="sourcePoint" />
+            <mxPoint x="250" y="480" as="sourcePoint" />
             <mxPoint x="249.5" y="80" as="targetPoint" />
           </mxGeometry>
         </mxCell>
         <mxCell id="rRo1dadeA1uCrzt-e38k-32" value="" style="endArrow=none;html=1;rounded=0;strokeColor=#B3B3B3;" parent="1" edge="1">
           <mxGeometry width="50" height="50" relative="1" as="geometry">
-            <mxPoint x="570" y="780" as="sourcePoint" />
+            <mxPoint x="570" y="480" as="sourcePoint" />
             <mxPoint x="570" y="80" as="targetPoint" />
           </mxGeometry>
         </mxCell>
         <mxCell id="rRo1dadeA1uCrzt-e38k-33" value="" style="endArrow=none;html=1;rounded=0;strokeColor=#B3B3B3;" parent="1" edge="1">
           <mxGeometry width="50" height="50" relative="1" as="geometry">
-            <mxPoint x="729.5" y="780" as="sourcePoint" />
+            <mxPoint x="730" y="480" as="sourcePoint" />
             <mxPoint x="729.5" y="80" as="targetPoint" />
           </mxGeometry>
         </mxCell>
@@ -45,10 +48,50 @@
         </mxCell>
         <mxCell id="rRo1dadeA1uCrzt-e38k-59" value="" style="endArrow=none;html=1;rounded=0;strokeColor=#B3B3B3;" parent="1" edge="1">
           <mxGeometry width="50" height="50" relative="1" as="geometry">
-            <mxPoint x="409.5" y="780" as="sourcePoint" />
+            <mxPoint x="410" y="480" as="sourcePoint" />
             <mxPoint x="409.5" y="80" as="targetPoint" />
           </mxGeometry>
         </mxCell>
+        <mxCell id="_PY1-sNXTUqCv9qV1nWE-4" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;startArrow=classic;startFill=1;" edge="1" parent="1" source="_PY1-sNXTUqCv9qV1nWE-1" target="_PY1-sNXTUqCv9qV1nWE-3">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_PY1-sNXTUqCv9qV1nWE-7" value="&amp;nbsp;nodeStore.getTreeNodes()&amp;nbsp;&lt;div&gt;First level of tree nodes&lt;/div&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="_PY1-sNXTUqCv9qV1nWE-4">
+          <mxGeometry x="-0.0383" y="-3" relative="1" as="geometry">
+            <mxPoint x="8" y="-28" as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="_PY1-sNXTUqCv9qV1nWE-11" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="1" source="_PY1-sNXTUqCv9qV1nWE-1" target="_PY1-sNXTUqCv9qV1nWE-10">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_PY1-sNXTUqCv9qV1nWE-1" value="&lt;b&gt;Tree Component&lt;/b&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+          <mxGeometry x="1215" y="150" width="120" height="50" as="geometry" />
+        </mxCell>
+        <mxCell id="_PY1-sNXTUqCv9qV1nWE-3" value="&lt;b&gt;NodeStore&lt;/b&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+          <mxGeometry x="1620" y="150" width="90" height="50" as="geometry" />
+        </mxCell>
+        <mxCell id="_PY1-sNXTUqCv9qV1nWE-9" value="[]Nodes" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
+          <mxGeometry x="1450" y="178" width="60" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="_PY1-sNXTUqCv9qV1nWE-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="_PY1-sNXTUqCv9qV1nWE-10" target="_PY1-sNXTUqCv9qV1nWE-12">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_PY1-sNXTUqCv9qV1nWE-10" value="&lt;b&gt;TreeNode Component&lt;/b&gt;" style="whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;rounded=1;" vertex="1" parent="1">
+          <mxGeometry x="1215" y="270" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="_PY1-sNXTUqCv9qV1nWE-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="_PY1-sNXTUqCv9qV1nWE-12" target="_PY1-sNXTUqCv9qV1nWE-3">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="_PY1-sNXTUqCv9qV1nWE-17" value="getTreeNodes()&lt;div&gt;for children of node&lt;/div&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="_PY1-sNXTUqCv9qV1nWE-16">
+          <mxGeometry x="0.0125" y="1" relative="1" as="geometry">
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="_PY1-sNXTUqCv9qV1nWE-12" value="&lt;b&gt;Node&lt;/b&gt;" style="whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;rounded=1;" vertex="1" parent="1">
+          <mxGeometry x="1605" y="270" width="120" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="_PY1-sNXTUqCv9qV1nWE-15" value="When rendered, and parent is expanded,&lt;div&gt;fetchChildren()&lt;/div&gt;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
+          <mxGeometry x="1340" y="263" width="240" height="40" as="geometry" />
+        </mxCell>
         <mxCell id="rRo1dadeA1uCrzt-e38k-44" value="Floats" style="" parent="0" />
         <mxCell id="rRo1dadeA1uCrzt-e38k-54" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="rRo1dadeA1uCrzt-e38k-44" vertex="1">
           <mxGeometry x="240" y="120" width="20" height="140" as="geometry" />

file.go

@@ -44,20 +44,20 @@ func AddFile(userID int, file *File) (err error) { // {{{
 	err = rows.Scan(&file.ID)
 	return
 } // }}}
-func Files(userID, nodeID, fileID int) (files []File, err error) { // {{{
+func Files(userID int, nodeUUID string, fileID int) (files []File, err error) { // {{{
 	var rows *sqlx.Rows
 	rows, err = db.Queryx(
 		`SELECT *
 		FROM file
 		WHERE
 			user_id = $1 AND
-			node_id = $2 AND
+			node_uuid = $2 AND
 			CASE $3::int
 				WHEN 0 THEN true
 				ELSE id = $3
 			END`,
 		userID,
-		nodeID,
+		nodeUUID,
 		fileID,
 	)
 	if err != nil {

main.go

@@ -26,6 +26,7 @@ const VERSION = "v1"
 const CONTEXT_USER = 1
 
 var (
+	FlagGenerate       bool
 	FlagDev            bool
 	FlagConfig         string
 	FlagCreateUser     string
@@ -56,6 +57,7 @@ func init() { // {{{
 
 	flag.StringVar(&FlagConfig, "config", cfgFilename, "Configuration file")
 	flag.BoolVar(&FlagDev, "dev", false, "Use local files instead of embedded files")
+	flag.BoolVar(&FlagGenerate, "generate", false, "Generate test data")
 	flag.StringVar(&FlagCreateUser, "create-user", "", "Username for creating a new user")
 	flag.StringVar(&FlagChangePassword, "change-password", "", "Change the password for the given username")
 	flag.Parse()
@@ -85,6 +87,16 @@ func main() { // {{{
 	// The session manager contains authentication, authorization and session settings.
 	AuthManager, err = authentication.NewManager(db, Log, config.JWT.Secret, config.JWT.ExpireDays)
 
+	// Generate test data?
+	if FlagGenerate {
+		err := TestData()
+		if err != nil {
+			fmt.Printf("%s\n", err)
+			return
+		}
+		return
+	}
+
 	// A new user?
 	if FlagCreateUser != "" {
 		createNewUser(FlagCreateUser)
@@ -111,7 +123,7 @@ func main() { // {{{
 	http.HandleFunc("/user/authenticate", AuthManager.AuthenticationHandler)
 
 	http.HandleFunc("/node/tree/{timestamp}/{offset}", authenticated(actionNodeTree))
-	http.HandleFunc("/node/retrieve/{id}", authenticated(actionNodeRetrieve))
+	http.HandleFunc("/node/retrieve/{uuid}", authenticated(actionNodeRetrieve))
 
 	http.HandleFunc("/service_worker.js", pageServiceWorker)
 
@@ -241,17 +253,14 @@ func actionNodeTree(w http.ResponseWriter, r *http.Request) { // {{{
 		MaxSeq uint64
 		Continue bool
 	}{true, nodes, maxSeq, moreRowsExist})
-	Log.Debug("tree", "nodes", nodes)
 	w.Write(j)
 } // }}}
 func actionNodeRetrieve(w http.ResponseWriter, r *http.Request) { // {{{
 	user := getUser(r)
 	var err error
 
-	idStr := r.PathValue("id")
+	uuid := r.PathValue("uuid")
-	id, _ := strconv.Atoi(idStr)
+	node, err := RetrieveNode(user.ID, uuid)
-
-	node, err := RetrieveNode(user.ID, id)
 	if err != nil {
 		responseError(w, err)
 		return

node.go

@@ -38,15 +38,13 @@ type TreeNode struct {
 }
 
 type Node struct {
-	ID          int
+	UUID        string
-	UserID      int `db:"user_id"`
+	UserID      int    `db:"user_id"`
-	ParentID    int `db:"parent_id"`
+	ParentUUID  string `db:"parent_uuid"`
-	CryptoKeyID int `db:"crypto_key_id"`
+	CryptoKeyID int    `db:"crypto_key_id"`
 	Name        string
 	Content     string
 	Updated     time.Time
-	Children    []Node
-	Crumbs      []Node
 	Files       []File
 	Complete    bool
 	Level       int
@@ -58,7 +56,7 @@ type Node struct {
 }
 
 func NodeTree(userID, offset int, synced uint64) (nodes []TreeNode, maxSeq uint64, moreRowsExist bool, err error) { // {{{
-	const LIMIT = 8
+	const LIMIT = 100
 	var rows *sqlx.Rows
 	rows, err = db.Queryx(`
 		SELECT
@@ -84,7 +82,7 @@ func NodeTree(userID, offset int, synced uint64) (nodes []TreeNode, maxSeq uint6
 		LIMIT $2 OFFSET $3
 		`,
 		userID,
-		LIMIT + 1,
+		LIMIT+1,
 		offset,
 		synced,
 	)
@@ -122,244 +120,58 @@ func NodeTree(userID, offset int, synced uint64) (nodes []TreeNode, maxSeq uint6
 
 	return
 } // }}}
-func RetrieveNode(userID, nodeID int) (node Node, err error) { // {{{
+func RetrieveNode(userID int, nodeUUID string) (node Node, err error) { // {{{
-	if nodeID == 0 {
+	var rows *sqlx.Row
-		return RootNode(userID)
+	rows = db.QueryRowx(`
-	}
-
-	var rows *sqlx.Rows
-	rows, err = db.Queryx(`
-		WITH RECURSIVE recurse AS (
-			SELECT
-				id,
-				user_id,
-				COALESCE(parent_id, 0) AS parent_id,
-				COALESCE(crypto_key_id, 0) AS crypto_key_id,
-				name,
-				content,
-				content_encrypted,
-				markdown,
-				0 AS level
-			FROM node
-			WHERE
-				user_id = $1 AND
-				id = $2
-			
-			UNION
-			
-			SELECT
-				n.id,
-				n.user_id,
-				n.parent_id,
-				COALESCE(n.crypto_key_id, 0) AS crypto_key_id,
-				n.name,
-				'' AS content,
-				'' AS content_encrypted,
-				false AS markdown,
-				r.level + 1 AS level
-			FROM node n
-			INNER JOIN recurse r ON n.parent_id = r.id AND r.level = 0
-			WHERE
-				n.user_id = $1
-		)
-
-		SELECT * FROM recurse ORDER BY level ASC
-		`,
-		userID,
-		nodeID,
-	)
-	if err != nil {
-		return
-	}
-	defer rows.Close()
-
-	type resultRow struct {
-		Node
-		Level int
-	}
-
-	node = Node{}
-	node.Children = []Node{}
-	for rows.Next() {
-		row := resultRow{}
-		if err = rows.StructScan(&row); err != nil {
-			return
-		}
-
-		if row.Level == 0 {
-			node.ID = row.ID
-			node.UserID = row.UserID
-			node.ParentID = row.ParentID
-			node.CryptoKeyID = row.CryptoKeyID
-			node.Name = row.Name
-			node.Complete = true
-			node.Markdown = row.Markdown
-
-			if node.CryptoKeyID > 0 {
-				node.Content = row.ContentEncrypted
-			} else {
-				node.Content = row.Content
-			}
-
-			node.retrieveChecklist()
-		}
-
-		if row.Level == 1 {
-			node.Children = append(node.Children, Node{
-				ID:          row.ID,
-				UserID:      row.UserID,
-				ParentID:    row.ParentID,
-				CryptoKeyID: row.CryptoKeyID,
-				Name:        row.Name,
-			})
-		}
-	}
-
-	node.Crumbs, err = NodeCrumbs(node.ID)
-	node.Files, err = Files(userID, node.ID, 0)
-
-	return
-} // }}}
-func RootNode(userID int) (node Node, err error) { // {{{
-	var rows *sqlx.Rows
-	rows, err = db.Queryx(`
-			SELECT
-				id,
-				user_id,
-				0 AS parent_id,
-				name
-			FROM node
-			WHERE
-				user_id = $1 AND
-				parent_id IS NULL
-		`,
-		userID,
-	)
-	if err != nil {
-		return
-	}
-	defer rows.Close()
-
-	node.Name = "Start"
-	node.UserID = userID
-	node.Complete = true
-	node.Children = []Node{}
-	node.Crumbs = []Node{}
-	node.Files = []File{}
-	for rows.Next() {
-		row := Node{}
-		if err = rows.StructScan(&row); err != nil {
-			return
-		}
-
-		node.Children = append(node.Children, Node{
-			ID:       row.ID,
-			UserID:   row.UserID,
-			ParentID: row.ParentID,
-			Name:     row.Name,
-		})
-	}
-
-	return
-} // }}}
-func (node *Node) retrieveChecklist() (err error) { // {{{
-	var rows *sqlx.Rows
-	rows, err = db.Queryx(`
 		SELECT
-			g.id AS group_id,
+			uuid,
-			g.order AS group_order,
+			user_id,
-			g.label AS group_label,
+			COALESCE(parent_uuid, '') AS parent_uuid,
-
+			/*COALESCE(crypto_key_id, 0) AS crypto_key_id,*/
-			COALESCE(i.id, 0) AS item_id,
+			name,
-			COALESCE(i.order, 0) AS item_order,
+			content,
-			COALESCE(i.label, '') AS item_label,
+			content_encrypted,
-			COALESCE(i.checked, false) AS checked
+			markdown,
-
+			0 AS level
-		FROM public.checklist_group g
+		FROM node
-		LEFT JOIN public.checklist_item i ON i.checklist_group_id = g.id
 		WHERE
-			g.node_id = $1
+			user_id = $1 AND
-		ORDER BY
+			uuid = $2
-			g.order DESC,
+		
-			i.order DESC
+		`,
-	`, node.ID)
+		userID,
-	if err != nil {
+		nodeUUID,
+	)
+	node = Node{}
+	if err = rows.StructScan(&node); err != nil {
 		return
 	}
-	defer rows.Close()
-
-	groups := make(map[int]*ChecklistGroup)
-	var found bool
-	var group *ChecklistGroup
-	var item ChecklistItem
-	for rows.Next() {
-		row := struct {
-			GroupID    int    `db:"group_id"`
-			GroupOrder int    `db:"group_order"`
-			GroupLabel string `db:"group_label"`
-
-			ItemID    int    `db:"item_id"`
-			ItemOrder int    `db:"item_order"`
-			ItemLabel string `db:"item_label"`
-			Checked   bool
-		}{}
-		err = rows.StructScan(&row)
-		if err != nil {
-			return
-		}
-
-		if group, found = groups[row.GroupID]; !found {
-			group = new(ChecklistGroup)
-			group.ID = row.GroupID
-			group.NodeID = node.ID
-			group.Order = row.GroupOrder
-			group.Label = row.GroupLabel
-			group.Items = []ChecklistItem{}
-			groups[group.ID] = group
-		}
-
-		item = ChecklistItem{}
-		item.ID = row.ItemID
-		item.GroupID = row.GroupID
-		item.Order = row.ItemOrder
-		item.Label = row.ItemLabel
-		item.Checked = row.Checked
-
-		if item.ID > 0 {
-			group.Items = append(group.Items, item)
-		}
-	}
-
-	node.ChecklistGroups = []ChecklistGroup{}
-	for _, group := range groups {
-		node.ChecklistGroups = append(node.ChecklistGroups, *group)
-	}
 
 	return
 } // }}}
-func NodeCrumbs(nodeID int) (nodes []Node, err error) { // {{{
+func NodeCrumbs(nodeUUID string) (nodes []Node, err error) { // {{{
 	var rows *sqlx.Rows
 	rows, err = db.Queryx(`
 		WITH RECURSIVE nodes AS (
 			SELECT
-				id,
+				uuid,
-				COALESCE(parent_id, 0) AS parent_id,
+				COALESCE(parent_uuid, '') AS parent_uuid,
 				name
 			FROM node
 			WHERE
-				id = $1
+				uuid = $1
 
 			UNION
 			
 			SELECT
-				n.id,
+				n.uuid,
-				COALESCE(n.parent_id, 0) AS parent_id,
+				COALESCE(n.parent_uuid, 0) AS parent_uuid,
 				n.name
 			FROM node n
-			INNER JOIN nodes nr ON n.id = nr.parent_id
+			INNER JOIN nodes nr ON n.uuid = nr.parent_uuid
 		)
 		SELECT * FROM nodes
-	`, nodeID)
+	`, nodeUUID)
 	if err != nil {
 		return
 	}
@@ -375,3 +187,49 @@ func NodeCrumbs(nodeID int) (nodes []Node, err error) { // {{{
 	}
 	return
 } // }}}
+
+func TestData() (err error) {
+	for range 10 {
+		hash1, name1, _ := generateOneTestNode("", "G")
+		for range 10 {
+			hash2, name2, _ := generateOneTestNode(hash1, name1)
+			for range 10 {
+				hash3, name3, _ := generateOneTestNode(hash2, name2)
+				for range 10 {
+					generateOneTestNode(hash3, name3)
+				}
+			}
+
+		}
+	}
+	return
+}
+
+func generateOneTestNode(parentUUID, parentPath string) (hash, name string, err error) {
+	var sqlParentUUID sql.NullString
+	if parentUUID != "" {
+		sqlParentUUID.String = parentUUID
+		sqlParentUUID.Valid = true
+	}
+	query := `
+		INSERT INTO node(user_id, parent_uuid, name)
+		VALUES(
+			1,
+			$1,
+			CONCAT(
+				$2::text,
+				'-',
+				LPAD(nextval('test_data')::text, 4, '0')
+			)
+		)
+		RETURNING uuid, name`
+
+	var row *sql.Row
+	row = db.QueryRow(query, sqlParentUUID, parentPath)
+	err = row.Scan(&hash, &name)
+	if err != nil {
+		return
+	}
+
+	return
+}

static/css/notes2.css

@@ -2,16 +2,43 @@ html {
   background-color: #fff;
 }
 #notes2 {
-  display: grid;
-  grid-template-columns: min-content 1fr;
   min-height: 100vh;
+  display: grid;
+  grid-template-areas: "tree crumbs" "tree name" "tree content" "tree checklist" "tree schedule" "tree files" "tree blank";
+  grid-template-columns: min-content 1fr;
+  grid-template-rows: min-content /* crumbs */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* schedule */ min-content /* files */ 1fr;
+  /* blank */
+}
+@media only screen and (max-width: 600px) {
+  #notes2 {
+    grid-template-areas: "crumbs" "name" "content" "checklist" "schedule" "files" "blank";
+    grid-template-columns: 1fr;
+    grid-template-rows: min-content /* crumbs */ min-content /* name */ min-content /* content */ min-content /* checklist */ min-content /* schedule */ min-content /* files */ 1fr;
+    /* blank */
+  }
+  #notes2 #tree {
+    display: none;
+  }
 }
 #tree {
+  grid-area: tree;
   padding: 16px;
   background-color: #333;
   color: #ddd;
   z-index: 100;
 }
+#tree #logo {
+  display: grid;
+  position: relative;
+  justify-items: center;
+  margin-bottom: 32px;
+  margin-left: 24px;
+  margin-right: 24px;
+}
+#tree #logo img {
+  width: 128px;
+  left: -20px;
+}
 #tree .node {
   display: grid;
   grid-template-columns: 24px min-content;
@@ -44,6 +71,9 @@ html {
   display: none;
 }
 #crumbs {
+  grid-area: crumbs;
+  display: grid;
+  justify-items: center;
   margin: 16px;
 }
 .crumbs {
@@ -52,7 +82,7 @@ html {
   padding: 8px 16px;
   background: #e4e4e4;
   color: #333;
-  border-radius: 6px;
+  border-radius: 5px;
 }
 .crumbs .crumb {
   margin-right: 8px;
@@ -72,12 +102,21 @@ html {
   content: '';
   margin-left: 0px;
 }
+#name {
+  color: #666;
+  font-weight: bold;
+  text-align: center;
+  font-size: 1.15em;
+  margin-top: 32px;
+  margin-bottom: 16px;
+}
 /* ============================================================= *
  * Textarea replicates the height of an element expanding height *
  * ============================================================= */
 .grow-wrap {
   /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
   display: grid;
+  grid-area: content;
   font-size: 1em;
 }
 .grow-wrap::after {
@@ -109,16 +148,7 @@ html {
   grid-area: 1 / 1 / 2 / 2;
 }
 /* ============================================================= */
-.node-name {
+#node-content {
-  background: #fff;
-  color: #000;
-  text-align: center;
-  font-weight: bold;
-  margin-top: 32px;
-  margin-bottom: 32px;
-  font-size: 1.5em;
-}
-.node-content {
   justify-self: center;
   word-wrap: break-word;
   font-family: monospace;
@@ -129,7 +159,7 @@ html {
   border: none;
   outline: none;
 }
-.node-content:invalid {
+#node-content:invalid {
   background: #f5f5f5;
   padding-top: 16px;
 }

static/js/lib/node_modules/.package-lock.json

@@ -13,6 +13,15 @@
       "engines": {
         "node": ">= 18"
       }
+    },
+    "node_modules/preact": {
+      "version": "10.25.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.25.1.tgz",
+      "integrity": "sha512-frxeZV2vhQSohQwJ7FvlqC40ze89+8friponWUFeVEkaCfhC6Eu4V0iND5C9CXz8JLndV07QRDeXzH1+Anz5Og==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
     }
   }
 }

static/js/lib/package-lock.json

@@ -5,7 +5,8 @@
   "packages": {
     "": {
       "dependencies": {
-        "marked": "^11.1.1"
+        "marked": "^11.1.1",
+        "preact": "^10.25.1"
       }
     },
     "node_modules/marked": {
@@ -18,6 +19,15 @@
       "engines": {
         "node": ">= 18"
       }
+    },
+    "node_modules/preact": {
+      "version": "10.25.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.25.1.tgz",
+      "integrity": "sha512-frxeZV2vhQSohQwJ7FvlqC40ze89+8friponWUFeVEkaCfhC6Eu4V0iND5C9CXz8JLndV07QRDeXzH1+Anz5Og==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
     }
   }
 }

static/js/lib/package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "marked": "^11.1.1"
+    "marked": "^11.1.1",
+    "preact": "^10.25.1"
   }
 }

static/js/node_store.mjs

@@ -1,4 +1,7 @@
 import { API } from 'api'
+import { Node } from 'node'
+
+export const ROOT_NODE = '00000000-0000-0000-0000-000000000000'
 
 export class NodeStore {
 	constructor() {//{{{
@@ -47,7 +50,9 @@ export class NodeStore {
 
 			req.onsuccess = (event) => {
 				this.db = event.target.result
-				resolve()
+				this.initializeRootNode().then(() =>
+					resolve()
+				)
 			}
 
 			req.onerror = (event) => {
@@ -55,6 +60,35 @@ export class NodeStore {
 			}
 		})
 	}//}}}
+	initializeRootNode() {//{{{
+		return new Promise((resolve, reject) => {
+			// The root node is a magical node which displays as the first node if none is specified.
+			// If not already existing, it will be created.
+			const trx = this.db.transaction('nodes', 'readwrite')
+			const nodes = trx.objectStore('nodes')
+			const getRequest = nodes.get(ROOT_NODE)
+			getRequest.onsuccess = (event) => {
+				// Root node exists - nice!
+				if (event.target.result !== undefined) {
+					resolve(event.target.result)
+					return
+				}
+
+				const putRequest = nodes.put({
+					UUID: ROOT_NODE,
+					Name: 'Notes2',
+					Content: 'Hello, World!',
+				})
+				putRequest.onsuccess = (event) => {
+					resolve(event.target.result)
+				}
+				putRequest.onerror = (event) => {
+					reject(event.target.error)
+				}
+			}
+			getRequest.onerror = (event) => reject(event.target.error)
+		})
+	}//}}}
 
 	async getAppState(key) {//{{{
 		return new Promise((resolve, reject) => {
@@ -95,7 +129,7 @@ export class NodeStore {
 		})
 	}//}}}
 
-	async updateTreeRecords(records) {//{{{
+	async upsertTreeRecords(records) {//{{{
 		return new Promise((resolve, reject) => {
 			const t = this.db.transaction('treeNodes', 'readwrite')
 			const nodeStore = t.objectStore('treeNodes')
@@ -131,6 +165,24 @@ export class NodeStore {
 
 		})
 	}//}}}
+	async getTreeNodes(parent, newLevel) {//{{{
+		return new Promise((resolve, reject) => {
+			const trx = this.db.transaction('treeNodes', 'readonly')
+			const nodeStore = trx.objectStore('treeNodes')
+			const index = nodeStore.index('parentIndex')
+			const req = index.getAll(parent)
+			req.onsuccess = (event) => {
+				const nodes = []
+				for (const i in event.target.result) {
+					const node = new Node(event.target.result[i], newLevel)
+					nodes.push(node)
+
+				}
+				resolve(nodes)
+			}
+			req.onerror = (event) => reject(event.target.error)
+		})
+	}//}}}
 	async add(records) {//{{{
 		return new Promise((resolve, reject) => {
 			try {
@@ -161,27 +213,29 @@ export class NodeStore {
 			}
 		})
 	}//}}}
-	async get(id) {//{{{
+	async get(uuid) {//{{{
 		return new Promise((resolve, reject) => {
 			// Node is always returned from IndexedDB if existing there.
 			// Otherwise an attempt to get it from backend is executed.
 			const trx = this.db.transaction('nodes', 'readonly')
 			const nodeStore = trx.objectStore('nodes')
-			const getRequest = nodeStore.get(id)
+			const getRequest = nodeStore.get(uuid)
 			getRequest.onsuccess = (event) => {
 				// Node found in IndexedDB and returned.
 				if (event.target.result !== undefined) {
-					resolve(event.target.result)
+					const node = new Node(event.target.result, -1)
+					resolve(node)
 					return
 				}
 
 				// Node not found and a request to the backend is made.
-				API.query("POST", `/node/retrieve/${id}`, {})
+				API.query("POST", `/node/retrieve/${uuid}`, {})
 					.then(res => {
 						const trx = this.db.transaction('nodes', 'readwrite')
 						const nodeStore = trx.objectStore('nodes')
 						const putRequest = nodeStore.put(res.Node)
-						putRequest.onsuccess = () => resolve(res.Node)
+						const node = new Node(res.Node, -1)
+						putRequest.onsuccess = () => resolve(node)
 						putRequest.onerror = (event) => {
 							reject(event.target.error)
 						}
@@ -190,15 +244,6 @@ export class NodeStore {
 			}
 		})
 	}//}}}
-	async getTreeNodes() {//{{{
-		return new Promise((resolve, reject) => {
-			const trx = this.db.transaction('nodes', 'readonly')
-			const nodeStore = trx.objectStore('nodes')
-			const req = nodeStore.getAll()
-			req.onsuccess = (event) => resolve(event.target.result)
-			req.onerror = (event) => reject(event.target.error)
-		})
-	}//}}}
 }
 
 // vim: foldmethod=marker

static/js/notes2.mjs

@@ -1,46 +1,65 @@
 import { h, Component, createRef } from 'preact'
 import { signal } from 'preact/signals'
 import htm from 'htm'
-import { API } from 'api'
 import { Node, NodeUI } from 'node'
+import { ROOT_NODE } from 'node_store'
 const html = htm.bind(h)
 
-export class Notes2 {
+export class Notes2 extends Component {
+	state = {
+		startNode: null,
+	}
 	constructor() {//{{{
-		this.startNode = null
+		super()
-		this.tree = null
+		this.tree = createRef()
 		this.nodeUI = createRef()
-		this.nodeModified = signal(false)
+
-		this.setStartNode()
+		this.getStartNode()
 	}//}}}
-	render() {//{{{
+	render({}, { startNode }) {//{{{
+		if (startNode === null)
+			return
+
 		return html`
-			<${Tree} ref=${this.tree} app=${this} />
+			<${Tree} ref=${this.tree} app=${this} startNode=${startNode} />
-			<div class="nodeui">
+
-				<${NodeUI} app=${this} ref=${this.nodeUI} />
+			<div id="nodeui">
+				<${NodeUI} app=${this} ref=${this.nodeUI} startNode=${startNode} />
 			</div>
 		`
 	}//}}}
-	setStartNode() {//{{{
+	getStartNode() {//{{{
-		/*
+		let nodeUUID = ROOT_NODE
-		const urlParams = new URLSearchParams(window.location.search)
-		const nodeID = urlParams.get('node')
-		*/
 
+		// Is a UUID provided on the URI as an anchor?
 		const parts = document.URL.split('#')
-		const nodeID = parts[1]
+		if (parts[1]?.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i))
+			nodeUUID = parts[1]
 
-		this.startNode = new Node(this, nodeID ? Number.parseInt(nodeID) : 0)
+		nodeStore.get(nodeUUID).then(node => {
+			this.setState({ startNode: node })
+		})
 	}//}}}
+	goToNode(nodeUUID, dontPush) {//{{{
+		// Don't switch notes until saved.
+		if (this.nodeUI.current.nodeModified.value) {
+			if (!confirm("Changes not saved. Do you want to discard changes?"))
+				return
+		}
 
-	treeGet() {//{{{
+		if (!dontPush)
-		const req = {}
+			history.pushState({ nodeUUID }, '', `/notes2#${nodeUUID}`)
-		API.query('POST', '/node/tree', req)
+
-			.then(response => {
+		// New node is fetched in order to retrieve content and files.
-				console.log(response.Nodes)
+		// Such data is unnecessary to transfer for tree/navigational purposes.
-				nodeStore.add(response.Nodes)
+		nodeStore.get(nodeUUID).then(node => {
-			})
+			this.nodeUI.current.setNode(node)
-			.catch(e => console.log(e.type, e.error))
+			//this.showPage('node')
+		})
+	}//}}}
+	logout() {//{{{
+		localStorage.removeItem('session.UUID')
+		location.href = '/'
 	}//}}}
 }
 
@@ -53,19 +72,25 @@ class Tree extends Component {
 		this.selectedTreeNode = null
 		this.props.app.tree = this
 
-		this.retrieve()
+		this.populateFirstLevel()
 	}//}}}
 	render({ app }) {//{{{
 		const renderedTreeTrunk = this.treeTrunk.map(node => {
-			this.treeNodeComponents[node.ID] = createRef()
+			this.treeNodeComponents[node.UUID] = createRef()
-			return html`<${TreeNode} key=${`treenode_${node.ID}`} tree=${this} node=${node} ref=${this.treeNodeComponents[node.ID]} selected=${node.ID === app.startNode.ID} />`
+			return html`<${TreeNode} key=${`treenode_${node.UUID}`} tree=${this} node=${node} ref=${this.treeNodeComponents[node.UUID]} selected=${node.UUID === app.startNode?.UUID} />`
 		})
-		return html`<div id="tree">${renderedTreeTrunk}</div>`
+		return html`
+			<div id="tree">
+				<div id="logo"><img src="/images/${_VERSION}/logo.svg" /></div>
+				${renderedTreeTrunk}
+			</div>`
 	}//}}}
 
-	retrieve(callback = null) {//{{{
+	populateFirstLevel(callback = null) {//{{{
-		nodeStore.getTreeNodes()
+		nodeStore.getTreeNodes('', 0)
-			.then(res => {
+			.then(async res => {
+				res.sort(Node.sort)
+
 				this.treeNodes = {}
 				this.treeNodeComponents = {}
 				this.treeTrunk = []
@@ -75,26 +100,13 @@ class Tree extends Component {
 				//  returned from the server to be sorted in such a way that
 				//  a parent node always appears before a child node.
 				//  The server uses a recursive SQL query delivering this.
-				for (const nodeData of res) {
+				for (const node of res) {
-					const node = new Node(
+					this.treeNodes[node.UUID] = node
-						this,
-						nodeData.ID,
-					)
-					node.Children = []
-					node.Crumbs = []
-					node.Files = []
-					node.Level = nodeData.Level
-					node.Name = nodeData.Name
-					node.ParentID = nodeData.ParentID
-					node.Updated = nodeData.Updated
-					node.UserID = nodeData.UserID
 
-					this.treeNodes[node.ID] = node
+					if (node.ParentUUID === '')
-
-					if (node.ParentID === 0)
 						this.treeTrunk.push(node)
-					else if (this.treeNodes[node.ParentID] !== undefined)
+					else if (this.treeNodes[node.ParentUUD] !== undefined)
-						this.treeNodes[node.ParentID].Children.push(node)
+						this.treeNodes[node.ParentUUID].Children.push(node)
 				}
 				// When starting with an explicit node value, expanding all nodes
 				// on its path gives the user a sense of location. Not necessarily working
@@ -137,15 +149,15 @@ class Tree extends Component {
 		if (node !== undefined)
 			this.setSelected(node)
 	}//}}}
-	expandToTrunk(nodeID) {//{{{
+	expandToTrunk(nodeUUID) {//{{{
-		let node = this.treeNodes[nodeID]
+		let node = this.treeNodes[nodeUUID]
 		if (node === undefined)
 			return
 
-		node = this.treeNodes[node.ParentID]
+		node = this.treeNodes[node.ParentUUID]
 		while (node !== undefined) {
-			this.treeNodeComponents[node.ID].current.expanded.value = true
+			this.treeNodeComponents[node.UUID].current.expanded.value = true
-			node = this.treeNodes[node.ParentID]
+			node = this.treeNodes[node.ParentUUID]
 		}
 	}//}}}
 }
@@ -155,12 +167,19 @@ class TreeNode extends Component {
 		super(props)
 		this.selected = signal(props.selected)
 		this.expanded = signal(this.props.node._expanded)
+
+		this.children_populated = signal(false)
+		if (this.props.node.Level === 0)
+			this.fetchChildren()
 	}//}}}
-	render({ tree, node }) {//{{{
+	render({ tree, node, parent }) {//{{{
+		// Fetch the next level of children if the parent tree node is expanded and our children thus will be visible.
+		if (!this.children_populated.value && parent?.expanded.value)
+			this.fetchChildren()
 
 		const children = node.Children.map(node => {
-			tree.treeNodeComponents[node.ID] = createRef()
+			tree.treeNodeComponents[node.UUID] = createRef()
-			return html`<${TreeNode} key=${`treenode_${node.ID}`} tree=${tree} node=${node} ref=${tree.treeNodeComponents[node.ID]} selected=${node.ID === tree.props.app.startNode.ID} />`
+			return html`<${TreeNode} key=${`treenode_${node.UUID}`} tree=${tree} node=${node} parent=${this} ref=${tree.treeNodeComponents[node.UUID]} selected=${node.UUID === tree.props.app.startNode?.UUID} />`
 		})
 
 		let expandImg = ''
@@ -173,16 +192,20 @@ class TreeNode extends Component {
 				expandImg = html`<img src="/images/${window._VERSION}/collapsed.svg" />`
 		}
 
-
 		const selected = (this.selected.value ? 'selected' : '')
 
 		return html`
 			<div class="node">
 				<div class="expand-toggle" onclick=${() => { this.expanded.value ^= true }}>${expandImg}</div>
-				<div class="name ${selected}" onclick=${() => window._notes2.current.nodeUI.current.goToNode(node.ID)}>${node.Name}</div>
+				<div class="name ${selected}" onclick=${() => window._notes2.current.goToNode(node.UUID)}>${node.Name}</div>
 				<div class="children ${node.Children.length > 0 && this.expanded.value ? 'expanded' : 'collapsed'}">${children}</div>
 			</div>`
 	}//}}}
+	fetchChildren() {//{{{
+		this.props.node.fetchChildren().then(() => {
+			this.children_populated.value = true
+		})
+	}//}}}
 }
 
 // vim: foldmethod=marker

static/js/sync.mjs

@@ -1,10 +1,14 @@
 import { API } from 'api'
 
 export class Sync {
+	constructor() {
+		this.foo = ''
+	}
+
 	static async tree() {
 		try {
 			const state = await nodeStore.getAppState('latest_sync')
-			let oldMax = (state?.value ? state.value : 0)
+			const oldMax = (state?.value ? state.value : 0)
 			let newMax = 0
 
 			let offset = 0
@@ -16,40 +20,12 @@ export class Sync {
 				res = await API.query('POST', `/node/tree/${oldMax}/${offset}`, {})
 				offset += res.Nodes.length
 				newMax = res.MaxSeq
-				await nodeStore.updateTreeRecords(res.Nodes)
+				await nodeStore.upsertTreeRecords(res.Nodes)
 			} while (res.Continue)
 
 			nodeStore.setAppState('latest_sync', Math.max(oldMax, newMax))
 		} catch (e) {
 			console.log('sync node tree', e)
 		}
-
-
-		/*
-		nodeStore.getAppState('latest_sync')
-			.then(state => {
-				if (state !== null) {
-					oldMax = state.value
-					return state.value
-				}
-				return 0
-			})
-			.then(async sequence => {
-				let offset = 0
-				let res = { Continue: false }
-				try {
-					do {
-						res = await API.query('POST', `/node/tree/${sequence}/${offset}`, {})
-						offset += res.Nodes.length
-						newMax = res.MaxSeq
-						await nodeStore.updateTreeRecords(res.Nodes)
-					} while (res.Continue)
-				} catch (e) {
-					return new Promise((_, reject) => reject(e))
-				}
-			})
-			.then(() => nodeStore.setAppState('latest_sync', Math.max(oldMax, newMax)))
-			.catch(e => console.log('sync', e))
-		*/
 	}
 }

static/less/notes2.less

@@ -5,18 +5,75 @@ html {
 }
 
 #notes2 {
-	display: grid;
-	grid-template-columns: min-content 1fr;
 	min-height: 100vh;
+
+	display: grid;
+	grid-template-areas:
+		"tree crumbs"
+		"tree name"
+		"tree content"
+		"tree checklist"
+		"tree schedule"
+		"tree files"
+		"tree blank"
+		;
+	grid-template-columns: min-content 1fr;
+	grid-template-rows:
+		min-content /* crumbs */
+		min-content /* name */
+		min-content /* content */
+		min-content /* checklist */
+		min-content /* schedule */
+		min-content /* files */
+		1fr; /* blank */
+
+	@media only screen and (max-width: 600px) {
+		grid-template-areas:
+			"crumbs"
+			"name"
+			"content"
+			"checklist"
+			"schedule"
+			"files"
+			"blank"
+			;
+		grid-template-columns: 1fr;
+		grid-template-rows:
+			min-content /* crumbs */
+			min-content /* name */
+			min-content /* content */
+			min-content /* checklist */
+			min-content /* schedule */
+			min-content /* files */
+			1fr; /* blank */
+
+		#tree {
+			display: none;
+		}
+	}
 }
 
 #tree {
-	//grid-area: tree;
+	grid-area: tree;
 	padding: 16px;
 	background-color: #333;
 	color: #ddd;
 	z-index: 100; // Over crumbs shadow
 
+	#logo {
+		display: grid;
+		position: relative;
+		justify-items: center;
+		margin-bottom: 32px;
+		margin-left: 24px;
+		margin-right: 24px;
+		img {
+			width: 128px;
+			left: -20px;
+
+		}
+	}
+
 	.node {
 		display: grid;
 		grid-template-columns: 24px min-content;
@@ -62,17 +119,20 @@ html {
 }
 
 #crumbs {
-	//grid-area: crumbs;
+	grid-area: crumbs;
+	display: grid;
+	justify-items: center;
 	margin: 16px;
 }
 
 .crumbs {
+	background: #e4e4e4;
 	display: flex;
 	flex-wrap: wrap;
 	padding: 8px 16px;
 	background: #e4e4e4;
 	color: #333;
-	border-radius: 6px;
+	border-radius: 5px;
 
 	.crumb {
 		margin-right: 8px;
@@ -97,13 +157,22 @@ html {
 
 }
 
+#name {
+	color: @color3;
+	font-weight: bold;
+	text-align: center;
+	font-size: 1.15em;
+	margin-top: 32px;
+	margin-bottom: 16px;
+}
+
 /* ============================================================= *
  * Textarea replicates the height of an element expanding height *
  * ============================================================= */
 .grow-wrap {
 	/* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
 	display: grid;
-	//grid-area: content;
+	grid-area: content;
 	font-size: 1.0em;
 }
 .grow-wrap::after {
@@ -139,18 +208,8 @@ html {
 	grid-area: 1 / 1 / 2 / 2;
 }
 /* ============================================================= */
-.node-name {
-	background: #fff;
-	color: #000;
-	text-align: center;
-	font-weight: bold;
-	margin-top: 32px;
-	margin-bottom: 32px;
-	font-size: 1.5em;
-}
 
-.node-content {
+#node-content {
-	//grid-area: content;
 	justify-self: center;
 	word-wrap: break-word;
 	font-family: monospace;
@@ -160,7 +219,6 @@ html {
 	resize: none;
 	border: none;
 	outline: none;
-	
 
 	&:invalid {
 		background: #f5f5f5;

static/service_worker.js

@@ -15,7 +15,7 @@ const CACHED_ASSETS = [
 
 	'/js/{{ .VERSION }}/api.mjs',
 	'/js/{{ .VERSION }}/node_store.mjs',
-	'/js/{{ .VERSION }}/app.mjs',
+	'/js/{{ .VERSION }}/notes2.mjs',
 	'/js/{{ .VERSION }}/key.mjs',
 	'/js/{{ .VERSION }}/crypto.mjs',
 	'/js/{{ .VERSION }}/checklist.mjs',

views/pages/notes2.gotmpl

@@ -10,7 +10,7 @@ import 'preact/debug'
 import 'preact/devtools'
 {{- end }}
 import { NodeStore } from 'node_store'
-import { Notes2 } from "/js/{{ .VERSION }}/app.mjs"
+import { Notes2 } from "/js/{{ .VERSION }}/notes2.mjs"
 import { API } from 'api'
 
 if (!API.hasAuthenticationToken()) {