Search phase 1

2026-04-29 14:12:18 +02:00
parent 6db0f0774c
commit dd3906855d
5 changed files with 235 additions and 0 deletions
@@ -21,6 +21,11 @@
                <span class="sep">/</span><a href="{{.URL}}">{{.Name}}</a>
                {{end}}
            </nav>
+            {{if not .EditMode}}
+            <form class="search-form" action="/" method="get">
+                <input class="search-input" type="search" name="q" placeholder="Search…" />
+            </form>
+            {{end}}
            {{if .EditMode}}
            <a class="btn" href="{{.PostURL}}">CANCEL</a>
            <button class="btn" type="submit" form="edit-form" data-action="save" data-key="S" title="Save (S)">SAVE</button>
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Search{{if .Query}}: {{.Query}}{{end}}</title>
+        <link rel="icon" href="/_/favicon.ico" />
+        <link rel="preload" href="/_/fonts/IosevkaEtoile.woff2" as="font" type="font/woff2" crossorigin />
+        <link rel="preload" href="/_/fonts/IosevkaSlab.woff2" as="font" type="font/woff2" crossorigin />
+        <link rel="stylesheet" href="/_/style.css" />
+    </head>
+    <body>
+        <header>
+            <nav class="breadcrumb">
+                <a href="/"><svg class="logo" viewBox="0 0 26.052269 26.052269" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="currentColor" stroke-linejoin="miter" transform="matrix(0.05463483,8.1519706e-6,-8.1519706e-6,0.05463483,-64.560546,-24.6949)"><rect x="1188.537" y="457.92056" width="461.87488" height="462.15189" stroke-width="20.2288"/><path d="m1348.9955 456.59572.046 309.36839" stroke-width="19.6849"/><path d="m1200.3996 765.80237 441.8362-.0659" stroke-width="19.6849"/><path d="m1648.2897 620.244-299.2012.0446" stroke-width="20.5676"/><path d="m1491.6148 909.24806-.021-136.93117" stroke-width="19.6849"/><rect x="1191.6504" y="461.66092" width="457.09634" height="457.09634" stroke-width="19.6761"/></g></svg></a>
+                <span class="sep">/</span><span>search</span>
+            </nav>
+            <form class="search-form" action="/" method="get">
+                <input class="search-input" type="search" name="q" value="{{.Query}}" placeholder="Search folders…" autofocus />
+                <button class="btn" type="submit">GO</button>
+            </form>
+        </header>
+        <main>
+            {{if .Query}}
+                {{if .Results}}
+                <div class="listing">
+                    <div class="listing-header">{{len .Results}} match{{if ne (len .Results) 1}}es{{end}} for &ldquo;{{.Query}}&rdquo;</div>
+                    {{range .Results}}
+                    <div class="listing-item">
+                        <a href="{{.URL}}">{{.Name}}</a>
+                        <span class="meta">{{.Path}}</span>
+                    </div>
+                    {{end}}
+                </div>
+                {{else}}
+                <p class="empty">No folders match &ldquo;{{.Query}}&rdquo;.</p>
+                {{end}}
+            {{else}}
+            <p class="empty">Enter a query above.</p>
+            {{end}}
+        </main>
+    </body>
+</html>
@@ -359,6 +359,27 @@ textarea {
    box-sizing: border-box;
 }

+/* === Search === */
+.search-form {
+    display: flex;
+    gap: 0.25rem;
+}
+.search-input {
+    background: var(--bg-panel);
+    border: 1px solid var(--secondary);
+    color: var(--text);
+    font: inherit;
+    font-size: 0.9rem;
+    padding: 0.3rem 0.5rem;
+    min-width: 0;
+    width: 12rem;
+    max-width: 100%;
+    outline: none;
+}
+.search-input:focus {
+    border-color: var(--primary-hover);
+}
+
 /* === Muted text === */
 .muted {
    color: var(--text-muted);