From a897eb3596f7953259d4f18b394360370c23d73a Mon Sep 17 00:00:00 2001
From: Jonas Braus <jonas@brausjonas.org>
Date: Thu, 5 Nov 2026 20:07:18 +0100
Subject: [PATCH] .

---
 src/index.html         | 83 ++++++++++++++++++++++++------------------
 src/styles_default.css | 12 ++++++
 2 files changed, 59 insertions(+), 36 deletions(-)

diff --git a/src/index.html b/src/index.html
index f19f532..42ec97c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,7 +15,8 @@
       <div class="titlebar-drag">
         <span class="app-mark" aria-hidden="true">
           <svg viewBox="0 0 24 24" width="18" height="18">
-            <path d="M6 3.75h8.5L19 8.25v12A1.75 1.75 0 0 1 17.25 22h-11A1.75 1.75 0 0 1 4.5 20.25v-14A2.5 2.5 0 0 1 7 3.75Zm7.75 1.5v3.5h3.5l-3.5-3.5ZM7.5 12v1.5h9V12h-9Zm0 4v1.5h9V16h-9Z" />
+            <path
+              d="M6 3.75h8.5L19 8.25v12A1.75 1.75 0 0 1 17.25 22h-11A1.75 1.75 0 0 1 4.5 20.25v-14A2.5 2.5 0 0 1 7 3.75Zm7.75 1.5v3.5h3.5l-3.5-3.5ZM7.5 12v1.5h9V12h-9Zm0 4v1.5h9V16h-9Z" />
           </svg>
         </span>
         <span class="titlebar-copy">
@@ -25,60 +26,70 @@
       </div>
       <div class="window-controls">
         <button class="window-control" id="minimize-window" type="button" aria-label="Minimize">
-          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h10" /></svg>
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M3 8h10" />
+          </svg>
         </button>
         <button class="window-control" id="maximize-window" type="button" aria-label="Maximize">
-          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 3.5h9v9h-9z" /></svg>
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M3.5 3.5h9v9h-9z" />
+          </svg>
         </button>
         <button class="window-control close-control" id="close-window" type="button" aria-label="Close">
-          <svg viewBox="0 0 16 16" aria-hidden="true"><path d="m4 4 8 8M12 4l-8 8" /></svg>
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path d="m4 4 8 8M12 4l-8 8" />
+          </svg>
         </button>
       </div>
     </header>
-  <div class="center-page-content">
-
-    <div id="left-column" class="grid-container-horizontal notes-sidebar" style="width: 40%; max-width: 25rem; min-width: 15rem;">
-      <div class="grid-container-vertical toolbar">
-        <div class="toolbar-action"></div>
-        <div style="height: 3rem;">
-          <div style="margin-left: 0.8rem;" class="button no-hover" onclick="toggle_menu();">
-            <svg id="toggle-left-bar-icon" style="transition: 0.5s fill ease, 0.5s rotate ease; rotate: 270deg;" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24px" width="24px">
-              <path d="M17,16V7H8V5H19V16H17Zm-5,5V12H3V10H14V21H12Z" />
-            </svg>
+    <div class="center-page-content">
+      <div class="window-action"></div>
+      <div id="left-column" class="grid-container-horizontal notes-sidebar"
+        style="width: 40%; max-width: 25rem; min-width: 15rem;">
+        <div class="grid-container-vertical toolbar">
+          <div class="toolbar-action"></div>
+          <div style="height: 3rem;">
+            <div style="margin-left: 0.8rem;" class="button no-hover" onclick="toggle_menu();">
+              <svg id="toggle-left-bar-icon" style="transition: 0.5s fill ease, 0.5s rotate ease; rotate: 270deg;"
+                class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24px" width="24px">
+                <path d="M17,16V7H8V5H19V16H17Zm-5,5V12H3V10H14V21H12Z" />
+              </svg>
 
+            </div>
+            <p style="font-weight: bold; "></p>
+            <div id="toggle-search" style="margin-right: 0.8rem" class="button no-hover" onclick="toggle_search();">
+              <svg id="search_quit_icon" class="icon-accent" style="display: block;" xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24" height="24px" width="24px">
+                <path
+                  d="M3.46,20.54Q2,19.08 2,17t1.46-3.54T7,12q2.08,0 3.54,1.46Q12,14.93 12,17t-1.46,3.54T7,22q-2.07,0-3.54-1.46ZM20.6,21l-6.4-6.4q-0.3-0.33-0.64-0.66T12.9,13.3q0.95-0.6 1.53-1.6T15,9.5q0-1.88-1.31-3.19T10.5,5T7.31,6.31T6,9.5Q6,9.65 6.01,9.79q0.01,0.14 0.04,0.29q-0.45,0.05-0.99,0.2Q4.53,10.43 4.1,10.63q-0.05-0.28-0.08-0.55T4,9.5Q4,6.77 5.89,4.89T10.5,3t4.61,1.89T17,9.5q0,1.07-0.34,2.04T15.73,13.3L22,19.6L20.6,21ZM5.23,19.48L7,17.7l1.75,1.78l0.72-0.7L7.7,17l1.77-1.78l-0.7-0.7L7,16.3L5.23,14.53l-0.7,0.7L6.3,17L4.53,18.77l0.7,0.7Z" />
+              </svg>
+            </div>
           </div>
-          <p style="font-weight: bold; "></p>
-          <div id="toggle-search" style="margin-right: 0.8rem" class="button no-hover" onclick="toggle_search();">
-            <svg id="search_quit_icon" class="icon-accent" style="display: block;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-              height="24px" width="24px">
-              <path
-                d="M3.46,20.54Q2,19.08 2,17t1.46-3.54T7,12q2.08,0 3.54,1.46Q12,14.93 12,17t-1.46,3.54T7,22q-2.07,0-3.54-1.46ZM20.6,21l-6.4-6.4q-0.3-0.33-0.64-0.66T12.9,13.3q0.95-0.6 1.53-1.6T15,9.5q0-1.88-1.31-3.19T10.5,5T7.31,6.31T6,9.5Q6,9.65 6.01,9.79q0.01,0.14 0.04,0.29q-0.45,0.05-0.99,0.2Q4.53,10.43 4.1,10.63q-0.05-0.28-0.08-0.55T4,9.5Q4,6.77 5.89,4.89T10.5,3t4.61,1.89T17,9.5q0,1.07-0.34,2.04T15.73,13.3L22,19.6L20.6,21ZM5.23,19.48L7,17.7l1.75,1.78l0.72-0.7L7.7,17l1.77-1.78l-0.7-0.7L7,16.3L5.23,14.53l-0.7,0.7L6.3,17L4.53,18.77l0.7,0.7Z" />
-            </svg>
+          <div id="search_bar" style="margin-bottom: 1rem; display: flex;">
+            <input type="text" placeholder="Search..." style="width: 100%; margin: 0 0.8rem;"
+              oninput="on_search_input()" id="search_input" />
           </div>
         </div>
-        <div id="search_bar" style="margin-bottom: 1rem; display: flex;"> 
-          <input type="text" placeholder="Search..." style="width: 100%; margin: 0 0.8rem;" oninput="on_search_input()" id="search_input" />
+        <div id="left-column-divider" class="divider"></div>
+        <div class="notes-list-parent">
+          <div class="notes-list">
+
+          </div>
         </div>
       </div>
-      <div id="left-column-divider" class="divider"></div>
-      <div class="notes-list-parent">
-        <div class="notes-list">
-          
-        </div>
+      <div class="grid-container-horizontal" style="border-left: 0; width: 100%;">
+
       </div>
     </div>
-    <div class="grid-container-horizontal" style="border-left: 0; width: 100%;">
 
+    <div class="hover-button button" onclick="create_new_note();">
+      <svg style="fill: var(--color-on-accent);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24px"
+        width="24px">
+        <path d="M19,13H13v6h-2v-6H5v-2h6V5h2v6h6V13z" />
+      </svg>
     </div>
   </div>
 
-  <div class="hover-button button" onclick="create_new_note();">
-    <svg style="fill: var(--color-on-accent);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24px" width="24px">
-      <path d="M19,13H13v6h-2v-6H5v-2h6V5h2v6h6V13z" />
-    </svg>
-
-  </div>
-  </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/src/styles_default.css b/src/styles_default.css
index 01db205..b64d447 100644
--- a/src/styles_default.css
+++ b/src/styles_default.css
@@ -160,6 +160,7 @@ input:focus {
 }
 
 .center-page-content {
+  position: relative;
   display: flex;
   flex-direction: row;
   justify-content: stretch;
@@ -209,6 +210,17 @@ input:focus {
   transform: translateX(100%);
 }
 
+.window-action {
+  position: absolute;
+  background-color: var(--color-surface);
+  mask: radial-gradient(ellipse 100% 100% at 0% 100%, transparent 100%, #000 100%) bottom left;
+  mask-repeat: no-repeat;
+  width: 1rem;
+  height: 1rem;
+  top: 0;
+  right: 0;
+}
+
 .toolbar div {
   display: flex;
   flex-direction: row;