no submod

2023-04-17 11:20:05 -06:00
parent 026e7718ed
commit 8970da11e5
60 changed files with 4326 additions and 1 deletions
--- a/work/notea/server/public/ui/files.ctmpl
+++ b/work/notea/server/public/ui/files.ctmpl
@@ -0,0 +1,28 @@
+{{ define "files" }}
+<!DOCTYPE html>
+<html>
+	<header>
+		<title>{{ .This.Title }}</title>
+		{{ template "_import" }}
+	</header>
+	<body class="fullscreen tb_fullscreen lr_fullscreen" style="position: absolute">
+		<div class="rows" style="height: inherit;">
+			{{ template "_topbar" . }}
+			<div class="columns thic_flex tb_buffer" style="height: calc(100% - 4rem);">
+				{{ template "_filetree" . }}
+				<div class="thic_flex lr_fullscreen" style="margin-left: 1em; width: 5px;">
+					{{ if eq .This.ID "" }}
+						{{ template "_about" . }}
+					{{ else }}
+						{{ if .This.ReadOnly }}
+							{{ template "_readonly" . }}
+						{{ else }}
+							{{ template "_editor" . }}
+						{{ end }}
+					{{ end }}
+				</div>
+			</div>
+		</div>
+	</body>
+</html>
+{{ end }}
--- a/work/notea/server/public/ui/render.go
+++ b/work/notea/server/public/ui/render.go
@@ -0,0 +1,179 @@
+package main
+
+import (
+	"fmt"
+	"html/template"
+	"log"
+	"os"
+	"path"
+	"strings"
+)
+
+func main() {
+	all := []string{}
+	always := []string{}
+	if err := recursePwd(func(p string) error {
+		switch path.Ext(p) {
+		case ".ctmpl":
+			if path.Base(p)[0] == '_' {
+				all = append(all, p)
+			}
+		}
+		switch path.Base(p) {
+		case "_import.ctmpl":
+			always = append(always, strings.TrimSuffix(path.Base(p), path.Ext(p)))
+		}
+		return nil
+	}); err != nil {
+		panic(err)
+	}
+	t := func(p ...string) *template.Template {
+		p = append(all, p...)
+		oneT, err := template.ParseFiles(p...)
+		if err != nil {
+			panic(err)
+		}
+		return oneT
+	}
+	data := map[string]interface{}{
+		"Namespaces": []string{"datastore", "dp-orchestration"},
+		"This": map[string]interface{}{
+			"ID":       "id00/id11",
+			"Title":    "title id11",
+			"ReadOnly": false,
+			"PID":      "id00",
+			"PTitle":   "title id00",
+			"Content": `# hello
+
+## world
+
+| this | is  | my  | table |
+| ---- | --- | --- | ----- |
+| hey  | ya  | hey | ya    |
+| a    | b   | c   | d     |
+
+* and
+	* a bulleted
+		* list
+
+> but here is a quote
+
+` + "```" + `go
+// and some go code
+func main() {
+	log.Println("hi")
+}
+` + "```" + `
+
+and
+
+now
+
+the
+
+newlines
+
+
+
+
+
+
+
+
+
+
+
+			`,
+		},
+		"Results": []struct {
+			Title string
+			ID    string
+		}{
+			{Title: "title id00", ID: "id00"},
+			{Title: "title id07 but it's really really really long", ID: "id07"},
+			{Title: "title id00 / title id10", ID: "id00/id10/id10"},
+			{Title: "title id00 / title id10 / title id20", ID: "id00/id10/id20"},
+		},
+		"Tree": `{
+			"Leaf": {"Meta":{"Title": "","ReadOnly":false}},
+			"Branches": {
+				"id00": {
+					"Leaf": {"Meta":{"Title": "title id00","ReadOnly":false}},
+					"Branches": {
+						"id10": {"Leaf":{"Meta":{"Title":"title id10","ReadOnly":false}},"Branches":{
+							"id20": {"Leaf":{"Meta":{"Title":"title id20","ReadOnly":false}},"Branches":{}}
+						}},
+						"id11": {"Leaf":{"Meta":{"Title":"title id11","ReadOnly":false}},"Branches":{}}
+					}
+				},
+				"id01": {"Leaf":{"Meta":{"Title":"title id01","ReadOnly":false}},"Branches":{}},
+				"id02": {"Leaf":{"Meta":{"Title":"title id02","ReadOnly":false}},"Branches":{}},
+				"id03": {"Leaf":{"Meta":{"Title":"title id03","ReadOnly":false}},"Branches":{}},
+				"id04": {"Leaf":{"Meta":{"Title":"title id04","ReadOnly":false}},"Branches":{}},
+				"id04": {"Leaf":{"Meta":{"Title":"title id04","ReadOnly":false}},"Branches":{}},
+				"id05": {"Leaf":{"Meta":{"Title":"title id05","ReadOnly":false}},"Branches":{}},
+				"id06": {"Leaf":{"Meta":{"Title":"title id06","ReadOnly":false}},"Branches":{}},
+				"id07": {"Leaf":{"Meta":{"Title":"title id07 but it's really really really long","ReadOnly":false}},"Branches":{}}
+			}
+		}`,
+	}
+	if err := recursePwd(func(p string) error {
+		switch path.Ext(p) {
+		case ".ctmpl":
+			target := path.Join(path.Dir(p), "."+path.Base(p)+".html")
+			f, err := os.Create(path.Join(path.Dir(p), "."+path.Base(p)+".html"))
+			if err != nil {
+				return err
+			}
+			defer f.Close()
+			templateToExecute := strings.TrimSuffix(path.Base(p), path.Ext(p))
+			tmpl := t(p)
+			defer log.Printf("rendering %s (...%s) as %s", templateToExecute, path.Join(path.Base(path.Dir(p)), path.Base(p)), target)
+			if strings.HasPrefix(templateToExecute, "_") {
+				testTemplate := `
+					{{ define "test" }}
+					<body class="fullscreen" style="border: 10px solid red;">
+				`
+				for _, subtemplate := range always {
+					testTemplate += fmt.Sprintf(`{{ template %q . }}`, subtemplate)
+				}
+				testTemplate += fmt.Sprintf(`{{ template %q . }}{{ end }}`, templateToExecute)
+				testTemplate += `
+					</body>
+				`
+				tmpl = template.Must(tmpl.Parse(testTemplate))
+				templateToExecute = "test"
+			}
+			return tmpl.Lookup(templateToExecute).Execute(f, data)
+		}
+		return nil
+	}); err != nil {
+		panic(err)
+	}
+}
+
+func recursePwd(foo func(string) error) error {
+	wd, err := os.Getwd()
+	if err != nil {
+		return err
+	}
+	return recurseD(wd, foo)
+}
+
+func recurseD(d string, foo func(string) error) error {
+	entries, err := os.ReadDir(d)
+	if err != nil {
+		return err
+	}
+	for _, entry := range entries {
+		if entry.IsDir() {
+			if err := recurseD(path.Join(d, entry.Name()), foo); err != nil {
+				return err
+			}
+		} else if strings.HasPrefix(entry.Name(), ".") {
+		} else if err := foo(path.Join(d, entry.Name())); err != nil {
+			return err
+		}
+	}
+	return nil
+}
--- a/work/notea/server/public/ui/search.ctmpl
+++ b/work/notea/server/public/ui/search.ctmpl
@@ -0,0 +1,20 @@
+{{ define "search" }}
+<!DOCTYPE html>
+<html>
+	<header>
+		<title>Search</title>
+      {{ template "_import" }}
+	</header>
+	<body class="fullscreen tb_fullscreen lr_fullscreen" style="position: absolute">
+		<div class="rows" style="height: inherit;">
+			{{ template "_topbar" . }}
+			<div class="columns thic_flex tb_buffer" style="height: calc(100% - 4rem);">
+            {{ template "_filetree" . }}
+				<div class="thic_flex lr_fullscreen" style="margin-left: 1em; width: 5px;">
+               {{ template "_results" . }}
+				</div>
+			</div>
+		</div>
+	</body>
+</html>
+{{ end }}
--- a/work/notea/server/public/ui/templates/_about.ctmpl
+++ b/work/notea/server/public/ui/templates/_about.ctmpl
@@ -0,0 +1,57 @@
+{{ define "_about" }}
+<div class="fullscreen tb_fullscreen">
+	<h1>Welcome!</h1>
+
+	<h2>TLDR; how do I write something?</h2>
+	<div>
+		<ol>
+			<li>Click a `+` button somewhere in the tree on the left</li>
+			<li>Hit "save"</li>
+			<li>You'll see "Success!" in green at the bottom on save</li>
+		</ol>
+	</div>
+
+	<h2>What is this?</h2>
+	<div>
+		This is a one-stop shop for reading, searching, and optionally writing docs.
+	</div>
+
+	<h2>Why would I use it? (It looks a little... "janky", no offense)</h2>
+	<div>
+		<ul>
+			<li>Load your Gitlab, Gitlab Wikis, Google Docs, Google Spreadsheets, and Google Slides and enjoy that search bar above.</li>
+			<li>No version control BUT very fast to edit and hit "save"</li>
+			<li>Automagically updates, so throw a link to your docs here and continue using Gitlab/Google/etc. as you were</li>
+			<li>Link to a Gitlab repo/path/wiki and automagically get the entire tree</li>
+		</ul>
+	</div>
+
+	<h2>What's this about magic?</h2>
+	<div>
+		<ul>
+			<li>Create a file that just contains "https://gitlab.com/my/repo/-/tree/master/README.md" or "https://docs.google.com/docs/my-doc/edit", wait some time, and now it's an updating version of that doc</li>
+			<li>Create a file that just contains "https://gitlab.com/my/repo/-/tree/master/runbooks", wait some time, and now it's an updating version of all those docs</li>
+		</ul>
+
+		<h3>Butt how do I use it?</h3>
+		<div>
+			<ol>
+				<li>Make or edit a file</li>
+				<li>The first line is a link to Gitlab or Google</li>
+				<li>Save</li>
+				<li>Wait</li>
+			</ol>
+		</div>
+	</div>
+
+	<h2>I got a bone to pick with you!!! Who are you exactly?</h2>
+	<div>
+		<table>
+			<tr><td> Slack User </td><td> @breel </td></tr>
+			<tr><td> Email </td><td> breel@qualtrics.com </td></tr>
+			<tr><td> Slack Channel </td><td> #storage-platform </td></tr>
+			<tr><td> Gitlab </td><td> TODO </td></tr>
+		</table>
+	</div>
+</div>
+{{ end }}
--- a/work/notea/server/public/ui/templates/_editor.ctmpl
+++ b/work/notea/server/public/ui/templates/_editor.ctmpl
@@ -0,0 +1,142 @@
+{{ define "_editor" }}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+<style>
+	#easyMDEwrap {
+		flex-grow: 1;
+	}
+	.CodeMirror {
+		min-height: 7em;
+	}
+	.CodeMirror-scroll, .CodeMirror-sizer {
+		height: auto !important;
+	}
+	.CodeMirror-sizer {
+		min-height: 10rem !important;
+	}
+	#article {
+		display: flex;
+		flex-direction: column;
+	}
+	#titlepath, #title {
+		font-size: 2rem;
+		font-weight: 600;
+	}
+	.EasyMDEContainer button {
+		color: black;
+	}
+	img {
+		max-width: 100%;
+		max-height: 100%;
+	}
+	.monospace {
+		font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+	}
+	.lil_btn {
+		width: initial;
+		display: inline-block;
+	}
+	input, label, textarea {
+		margin: initial;
+	}
+	.editor-toolbar > button.preview {
+		color: #08c;
+	}
+</style>
+<script>
+	var saveFeedbackInterval = null
+	function pushFile() {
+		const title = document.getElementById("title").innerHTML ? document.getElementById("title").innerHTML : ""
+		const body = easyMDE.value() ? easyMDE.value() : ""
+		const id = {{ js .This.ID }}
+		headers = {}
+		if (title)
+			headers["Title"] = title
+		http("PUT", "/api/v0/files/" + id, (body, status) => {
+			if (status != 200) {
+				alert(`failed to push file ${id}: ${status}: ${body}`)
+				throw `failed to push file ${id}: ${status}: ${body}`
+			}
+			document.getElementById("saveFeedback").style.display = "block"
+			if (saveFeedbackInterval) {
+				clearTimeout(saveFeedbackInterval)
+			}
+			saveFeedbackInterval = setTimeout(() => {document.getElementById("saveFeedback").style.display = "none"}, 2500)
+		}, body, headers)
+	}
+	function deleteFile() {
+		const id = {{ js .This.ID }}
+		const pid = {{ js .This.PID }}
+		http("DELETE", "/api/v0/files/" + id, (body, status) => {
+			if (status != 200) {
+				alert(`failed to delete file ${id}: ${status}: ${body}`)
+				throw `failed to delete file ${id}: ${status}: ${body}`
+			}
+			window.location.href = `${window.location.protocol}\/\/${window.location.host}/ui/files/${pid}`
+		})
+	}
+</script>
+<div class="fullscreen tb_fullscreen">
+	<article id="article">
+		<div class="columns">
+			<span class="r_buffer">
+	         <form action="#" onsubmit="pushFile(); return false;">
+				   <input class="button-info lil_btn" type="submit" value="SAVE"/>
+	         </form>
+			</span>
+			<span id="titlePath">
+				/
+	         {{ if ne .This.PID "" }}
+	            <a href="/ui/files/{{ .This.PID }}">{{ .This.PTitle }}</a> /
+	         {{ end }}
+	      </span>
+			<span id="title" class="thic_flex" contenteditable>{{ .This.Title }}</span>
+			<span class="l_buffer">
+	         <form onsubmit="deleteFile(); return false;"> <!-- TODO -->
+				   <input class="button-error lil_btn" type="submit" onclick="confirm('are you sure?');" value="DELETE"/>
+	         </form>
+			</span>
+		</div>
+		<!-- todo: each line no is an anchor -->
+		<div id="easyMDEwrap" class="monospace">
+			<textarea id="my-text-area"></textarea>
+		</div>
+		<div style="min-height: 2em;"></div>
+			<div id="saveFeedback" class="button success" style="text-align: right; cursor: auto; display: none;">
+				Saved!
+			</div>
+		</div>
+	</article>
+</div>
+<script>
+	const easyMDE = new EasyMDE({
+		autoDownloadFontAwesome: true,
+		autofocus: true,
+		autosave: {
+			enabled: false,
+		},
+		element: document.getElementById('my-text-area'),
+		forceSync: true,
+		indentWithTabs: false,
+		initialValue: "{{ .This.Content }}",
+		showIcons: ["code", "table"],
+		spellChecker: false,
+		sideBySideFullscreen: false,
+		tabSize: 3,
+		previewImagesInEditor: true,
+		insertTexts: {
+			image: ["![](", ")"],
+			link: ["[](", ")"],
+		},
+		lineNumbers: true,
+		lineWrapping: false,
+		uploadImage: true,
+		imageUploadEndpoint: "/api/v0/media", // POST wants {data: {filePath: "/..."}}
+		imagePathAbsolute: false,
+		renderingConfig: {
+			codeSyntaxHighlighting: true,
+		},
+		status: ["lines", "words", "cursor"],
+	})
+</script>
+{{ end }}
--- a/work/notea/server/public/ui/templates/_filetree.ctmpl
+++ b/work/notea/server/public/ui/templates/_filetree.ctmpl
@@ -0,0 +1,87 @@
+{{ define "_filetree" }}
+<style>
+	details > details details {
+		padding-inline-start: 2em;
+	}
+	summary {
+		display: flex;
+		flex-direction: row;
+	}
+	summary.no-children {
+		list-style: none;
+	}
+	summary.no-children::-webkit-details-marker {
+		display: none;
+	}
+	#filetree {
+		padding-right: 1em;
+	}
+	details > summary > .hamburger::before {
+		content: "+";
+	}
+	details[open] > summary > .hamburger::before {
+		content: "-";
+	}
+</style>
+<div class="fullscreen tb_fullscreen" style="max-width: 25em; margin: auto;">
+	<details open>
+		<summary style="outline: none;"><span class="border button hamburger"></span></summary>
+		<details open id="filetree">
+		</details>
+	</details>
+</div>
+<script>
+	function drawTree(tree) {
+		document.getElementById("filetree").innerHTML = branchHTML("", tree)
+	}
+	function branchHTML(id, branch) {
+		return `
+			<summary class="${branchesHaveContent(branch.Branches) ? "" : "no-children"}">
+				${leafHTML(id, branch)}
+			</summary>
+			${branchesHTML(id, branch.Branches)}
+		`
+	}
+	function leafHTML(id, branch) {
+		const href="/ui/files/" + (id ? id : "")
+		var nameSafeId = id.replace(/\//g, "-")
+		var parentNameSafeId = nameSafeId
+		if (id.includes("/"))
+			parentNameSafeId = id.slice(0, id.lastIndexOf("/")).replace(/\//g, "-")
+		const name=`filetree-leaf-${nameSafeId}`
+		const parentname=`filetree-leaf-${parentNameSafeId}`
+		const title=id ? branch.Leaf.Meta.Title : "ROOT"
+		const isLiveParent = '{{ .This.ID }}'.slice(0, id.length) == id
+		const isLive = '{{ .This.ID }}' == id
+		const linkToFile = `
+			<div style="margin: 0; padding: 0; height: 0; width: 0;" id="${name}"></div>
+			<a style="flex-grow: 1;" href="${href}#${parentname}">
+				<button style="width: 100%; text-align: left; outline: none;" class="${isLiveParent ? `button button-info ${!isLive ? "button-border" : ""}` : ""}">
+					${title}
+				</button>
+			</a>
+		`
+		return linkToFile + (branch.Leaf.Meta.ReadOnly ? "" : `<a href="${href}/${generateUUID().split("-")[0]}#${parentname}"><button>+</button></a>`)
+	}
+	function branchesHTML(id, branches) {
+		if (!branchesHaveContent(branches))
+			return ""
+		var html = []
+		var out = ``
+		for(var i in branches) {
+			html.push([branches[i].Leaf.Meta.Title, `<details open>` + branchHTML(i, branches[i]) + `</details>`])
+		}
+		html.sort()
+		for(var i in html)
+			out += html[i][1]
+		return out
+	}
+	function branchesHaveContent(branches) {
+		var n = 0
+		for (var i in branches)
+			n += 1
+		return n > 0
+	}
+	drawTree(JSON.parse({{ .Tree }}))
+</script>
+{{ end }}
--- a/work/notea/server/public/ui/templates/_import.ctmpl
+++ b/work/notea/server/public/ui/templates/_import.ctmpl
@@ -0,0 +1,117 @@
+{{ define "_import" }}
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
+<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
+<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
+
+<link rel="stylesheet" href="https://unpkg.com/turretcss/dist/turretcss.min.css" crossorigin="anonymous">
+<!-- todo css
+<link rel="stylesheet" href="https://cdn.concisecss.com/concise.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css">
+<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
+-->
+<style>
+	html, body {
+		background-color: #f8f8f8;
+	}
+	.columns {
+		display: flex;
+		flex-direction: row;
+	}
+	.rows {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+	}
+	.thic_flex {
+		text-align: left;
+		flex-grow: 1;
+	}
+	.mia {
+		display: none;
+	}
+	.align_left {
+		text-align: left;
+	}
+	.tb_buffer {
+		margin-top: 1em;
+		margin-bottom: 1em;
+	}
+	.r_buffer {
+		margin-right: 1em;
+	}
+	.l_buffer {
+		margin-left: 1em;
+	}
+	.monospace {
+		font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
+	}
+	.lil_btn {
+		width: initial;
+		display: inline-block;
+	}
+	input, label, textarea {
+		margin: initial;
+	}
+	.fullscreen {
+		position: relative;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		padding: 5px;
+		overflow: scroll;
+	}
+	.lr_fullscreen {
+		width: 100%;
+		/*max-width: 1024px;*/
+		margin-right: auto;
+		margin-left: auto;
+	}
+	.tb_fullscreen {
+		height: 100%;
+	}
+	.button, button, input[type="button"] {
+		height: auto;
+	}
+</style>
+<script>
+	function http(method, remote, callback, body, headers) {
+		var xmlhttp = new XMLHttpRequest();
+		xmlhttp.onreadystatechange = function() {
+			if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+				callback(xmlhttp.responseText, xmlhttp.status, (key) => xmlhttp.getResponseHeader(key))
+			}
+		};
+		xmlhttp.open(method, remote, true);
+		if (typeof body == "undefined") {
+			body = null
+		}
+		if (headers) {
+			for (var key in headers)
+				xmlhttp.setRequestHeader(key, headers[key])
+		}
+		xmlhttp.send(body);
+	}
+	function generateUUID() { // Public Domain/MIT // https://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid
+		var d = new Date().getTime();//Timestamp
+		var d2 = ((typeof performance !== 'undefined') && performance.now && (performance.now()*1000)) || 0;//Time in microseconds since page-load or 0 if unsupported
+		return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+				var r = Math.random() * 16;//random number between 0 and 16
+				if(d > 0){//Use timestamp until depleted
+					r = (d + r)%16 | 0;
+					d = Math.floor(d/16);
+				} else {//Use microseconds since page-load if supported
+					r = (d2 + r)%16 | 0;
+					d2 = Math.floor(d2/16);
+				}
+				 return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+			}
+		);
+	}
+</script>
+{{ end }}
--- a/work/notea/server/public/ui/templates/_namespace.ctmpl
+++ b/work/notea/server/public/ui/templates/_namespace.ctmpl
@@ -0,0 +1,16 @@
+{{ define "_namespace" }}
+	<script>
+		function setNamespace() {
+			document.getElementById("namespace").disabled = true
+			window.location.href = `${window.location.protocol}`+"//"+`${window.location.host}/ui/files?namespace=${document.getElementById("namespace").value}`
+		}
+	</script>
+	{{ $cur := .Namespace }}
+	{{ if .Namespaces }}
+		<select id="namespace" onload="markNamespace()" onchange="setNamespace()" style="max-width: 7rem;">
+			{{ range .Namespaces }}
+				<option {{ if eq $cur . }}selected{{ end }}>{{ . }}</option>
+			{{ end }}
+		</select>
+	{{ end }}
+{{ end }}
--- a/work/notea/server/public/ui/templates/_readonly.ctmpl
+++ b/work/notea/server/public/ui/templates/_readonly.ctmpl
@@ -0,0 +1,9 @@
+{{ define "_readonly" }}
+<div class="fullscreen tb_fullscreen">
+	<a href="/ui/files/{{ .This.ID }}?edit"><button>Edit this page</button></a>
+	<article id="article"></article>
+	<script>
+		document.getElementById("article").innerHTML = {{ .This.Content }}
+	</script>
+</div>
+{{ end }}
--- a/work/notea/server/public/ui/templates/_results.ctmpl
+++ b/work/notea/server/public/ui/templates/_results.ctmpl
@@ -0,0 +1,14 @@
+{{ define "_results" }}
+<style>
+</style>
+</script>
+<div class="fullscreen tb_fullscreen">
+	<ul id="results">
+		{{ range .Results }}
+			<li>
+				<a href="/ui/files/{{ .ID }}">{{ .Title }}</a>
+			</li>
+		{{ end }}
+	</ul>
+</div>
+{{ end }}
--- a/work/notea/server/public/ui/templates/_searchbar.ctmpl
+++ b/work/notea/server/public/ui/templates/_searchbar.ctmpl
@@ -0,0 +1,6 @@
+{{ define "_searchbar" }}
+<form class="columns thic_flex" action="/ui/search" method="GET">
+	<input class="thic_flex" type="text" name="q" placeholder="space delimited search regexp"/>
+	<input class="info lil_btn" type="submit" value="search"/>
+</form>
+{{ end }}
--- a/work/notea/server/public/ui/templates/_topbar.ctmpl
+++ b/work/notea/server/public/ui/templates/_topbar.ctmpl
@@ -0,0 +1,6 @@
+{{ define "_topbar" }}
+			<div class="columns lr_fullscreen">
+				{{ template "_namespace" . }}
+				{{ template "_searchbar" . }}
+			</div>
+{{ end }}