From bef1ebdae7763774a3d970013858617019337f41 Mon Sep 17 00:00:00 2001
From: Wes Holland <wes@dragonrat.net>
Date: Sat, 22 Feb 2025 19:41:04 -0600
Subject: [PATCH] Move Sidebar logic to main

---
 .idea/.gitignore                             |   5 +
 .idea/dataSources.xml                        |  15 --
 .idea/inspectionProfiles/Project_Default.xml |  20 ---
 .idea/sqldialects.xml                        |   7 -
 templates/catalog/catalog.html               | 145 +++++++++----------
 templates/item/item.html                     |  66 ++++-----
 templates/main.html                          | 121 ++++++++++++----
 7 files changed, 187 insertions(+), 192 deletions(-)
 delete mode 100644 .idea/dataSources.xml
 delete mode 100644 .idea/inspectionProfiles/Project_Default.xml
 delete mode 100644 .idea/sqldialects.xml

diff --git a/.idea/.gitignore b/.idea/.gitignore
index 13566b8..111b3d7 100644
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -6,3 +6,8 @@
 # Datasource local storage ignored files
 /dataSources/
 /dataSources.local.xml
+/dataSources.xml
+/inspectionProfiles/
+/sqldialects.xml
+/codeStyles/
+/prettier.xml
diff --git a/.idea/dataSources.xml b/.idea/dataSources.xml
deleted file mode 100644
index 76909c1..0000000
--- a/.idea/dataSources.xml
+++ /dev/null
@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
-    <data-source source="LOCAL" name="inventory-app.db" uuid="a0dc3bc5-119e-4708-b51f-2c3820c30deb">
-      <driver-ref>sqlite.xerial</driver-ref>
-      <synchronize>true</synchronize>
-      <jdbc-driver>org.sqlite.JDBC</jdbc-driver>
-      <jdbc-url>jdbc:sqlite:inventory-app.db</jdbc-url>
-      <working-dir>$ProjectFileDir$</working-dir>
-      <driver-properties>
-        <property name="foreign_keys" value="true" />
-      </driver-properties>
-    </data-source>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
deleted file mode 100644
index 3baa0fe..0000000
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ /dev/null
@@ -1,20 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myValues">
-        <value>
-          <list size="3">
-            <item index="0" class="java.lang.String" itemvalue="x-show" />
-            <item index="1" class="java.lang.String" itemvalue="x-model" />
-            <item index="2" class="java.lang.String" itemvalue="x-data" />
-          </list>
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
-    <inspection_tool class="RsUnusedImport" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="enableOnlyIfProcMacrosEnabled" value="false" />
-    </inspection_tool>
-  </profile>
-</component>
\ No newline at end of file
diff --git a/.idea/sqldialects.xml b/.idea/sqldialects.xml
deleted file mode 100644
index 8748bad..0000000
--- a/.idea/sqldialects.xml
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="SqlDialectMappings">
-    <file url="file://$PROJECT_DIR$/migrations/20241107225934_initial.sql" dialect="SQLite" />
-    <file url="PROJECT" dialect="SQLite" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/templates/catalog/catalog.html b/templates/catalog/catalog.html
index a301c75..5e9b303 100644
--- a/templates/catalog/catalog.html
+++ b/templates/catalog/catalog.html
@@ -3,92 +3,77 @@
 
 {% block content %}
 
-<div class="relative h-auto" x-data="{ show_sidebar: false }"
-     x-on:form-submit-success="show_sidebar = false;"
->
-  <div class="absolute w-screen h-full" x-show="show_sidebar">
-    <div class="relative w-full h-full bg-neutral-300 backdrop-blur-md opacity-90 py-4 z-10">
-    </div>
-    <div class="py-2 px-4 absolute rounded-tl-xl inset-y-0 right-0 bg-slate-100 opacity-100 w-11/12 max-w-[40rem] z-20">
-      <div class="flex">
-        <div class="flex-1 inline-flex items-center">
-          <h2 class="text-lg font-semibold uppercase">Add Item</h2>
-        </div>
-        <button
-                class="inline-flex items-center whitespace-nowrap p-2 text-sm font-medium tracking-wide text-neutral-900 transition focus:outline-none focus:ring-4 focus:ring-dark-cyan dark:border-neutral-900 dark:text-slate-100"
-                @click="show_sidebar = ! show_sidebar"
+<div class="relative h-auto mx-auto max-w-[68.75rem] w-[95vw] px-4 py-4">
+  <div class="flex space-x-4">
+    <div class="relative mb-4 max-w-56 content-center">
+      <label
+        for="item-filter"
+        class="sr-only mb-2 text-sm font-medium text-gray-900 dark:text-white"
+      >
+        Search
+      </label>
+      <div
+        class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3"
+      >
+        <svg
+          class="h-4 w-4 text-gray-500 dark:text-gray-400"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 20 20"
         >
-          <span class="sr-only">Close Sidebar</span>
-          X
-        </button>
-      </div>
-      <div>
-        <div
-                hx-get="/item/create"
-                hx-trigger="load"
-                hx-swap="outerHTML"
-        ></div>
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
+          />
+        </svg>
       </div>
+      <input
+        id="item-filter"
+        class="block w-full rounded-lg border border-gray-300 bg-slate-100 p-4 ps-10 text-sm text-neutral-900 focus:border-paynes-gray focus:ring-paynes-gray dark:bg-neutral-900 dark:text-slate-100"
+        type="search"
+        name="q"
+        placeholder="Filter"
+        aria-label="Filter"
+        value='{{ query.search.as_deref().unwrap_or("") }}'
+        hx-get="/items"
+        hx-trigger="search, keyup delay:500ms changed"
+        hx-target="#items"
+        hx-push-url="true"
+      />
     </div>
-  </div>
-
-  <div class="relative h-auto mx-auto max-w-[68.75rem] w-[95vw] px-4 py-4">
-    <div class="flex space-x-4">
-      <div class="relative mb-4 max-w-56 content-center">
-        <label
-                for="item-filter"
-                class="sr-only mb-2 text-sm font-medium text-gray-900 dark:text-white"
-        >
-          Search
-        </label>
-        <div
-                class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3"
-        >
-          <svg
-                  class="h-4 w-4 text-gray-500 dark:text-gray-400"
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 20 20"
-          >
-            <path
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
-            />
-          </svg>
-        </div>
-        <input
-                id="item-filter"
-                class="block w-full rounded-lg border border-gray-300 bg-slate-100 p-4 ps-10 text-sm text-neutral-900 focus:border-paynes-gray focus:ring-paynes-gray dark:bg-neutral-900 dark:text-slate-100"
-                type="search"
-                name="q"
-                placeholder="Filter"
-                aria-label="Filter"
-                value='{{ query.search.as_deref().unwrap_or("") }}'
-                hx-get="/items"
-                hx-trigger="search, keyup delay:500ms changed"
-                hx-target="#items"
-                hx-push-url="true"
-        />
-      </div>
-      <div class="flex items-center">
-        <button
-                class="mb-2 me-2 rounded-lg bg-paynes-gray px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
-                @click="show_sidebar = ! show_sidebar"
-        >
-          Add
-        </button>
-      </div>
-    </div>
-
-    <div id="items" class="container">
-      {% include "catalog-item-table.html" %}
+    <div class="flex items-center">
+      <button
+        class="mb-2 me-2 rounded-lg bg-paynes-gray px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
+        @click="showSidebar('item-create-form')"
+      >
+        Add
+      </button>
     </div>
   </div>
 
+  <div id="items" class="container">
+    {% include "catalog-item-table.html" %}
+  </div>
 </div>
 
 {% endblock %}
+
+{% block sidebar_title %}
+<h2 class="text-lg font-semibold uppercase" x-show="sidebar.content === 'item-create-form'">Add Item</h2>
+{% endblock %}
+
+{% block sidebar_content %}
+<div x-show="sidebar.content === 'item-create-form'"
+     x-on:form-submit-success="hideSidebar()"
+>
+  <div
+    hx-get="/item/create"
+    hx-trigger="load"
+    hx-swap="outerHTML"
+  ></div>
+</div>
+{% endblock %}
diff --git a/templates/item/item.html b/templates/item/item.html
index 1073399..d195b07 100644
--- a/templates/item/item.html
+++ b/templates/item/item.html
@@ -4,44 +4,6 @@
 
 {% block content %}
 
-<div class="relative h-auto"
-     x-data="{ show_sidebar: false, sidebar_content: 'negative-adjustment-form' }"
-     x-on:form-submit-success="show_sidebar = false;"
->
-  <div class="absolute w-screen h-lvh" x-show="show_sidebar">
-    <div class="relative w-full h-full bg-neutral-300 backdrop-blur-md opacity-90 py-4 z-10">
-    </div>
-    <div class="py-2 px-4 absolute rounded-tl-xl inset-y-0 right-0 bg-slate-100 opacity-100 w-11/12 max-w-[40rem] z-20">
-      <div class="flex">
-        <div class="flex-1 inline-flex items-center">
-          <h2 class="text-lg font-semibold uppercase" x-show="sidebar_content === 'negative-adjustment-form'">Negative Adjustment</h2>
-          <h2 class="text-lg font-semibold uppercase" x-show="sidebar_content === 'positive-adjustment-form'">Positive Adjustment</h2>
-        </div>
-        <button
-                class="inline-flex items-center whitespace-nowrap p-2 text-sm font-medium tracking-wide text-neutral-900 transition focus:outline-none focus:ring-4 focus:ring-dark-cyan dark:border-neutral-900 dark:text-slate-100"
-                @click="show_sidebar = ! show_sidebar"
-        >
-          <span class="sr-only">Close Sidebar</span>
-          X
-        </button>
-      </div>
-      <div x-show="sidebar_content === 'positive-adjustment-form'">
-        <div
-                hx-get="/item/{{item_id}}/adjustment/positive"
-                hx-trigger="load"
-                hx-swap="outerHTML"
-        ></div>
-      </div>
-      <div x-show="sidebar_content === 'negative-adjustment-form'">
-        <div
-                hx-get="/item/{{item_id}}/adjustment/negative"
-                hx-trigger="load"
-                hx-swap="outerHTML"
-        ></div>
-      </div>
-    </div>
-  </div>
-
   <div class="relative h-auto mx-auto max-w-[68.75rem] w-[95vw] px-4 py-4">
 
     <h2 class="mb-4 flex items-center text-4xl font-extrabold">
@@ -65,13 +27,13 @@
       <div class="flex justify-evenly">
         <button
                 class="mb-2 me-2 rounded-lg bg-paynes-gray px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
-                @click="sidebar_content = 'negative-adjustment-form'; show_sidebar = true"
+                @click="showSidebar('negative-adjustment-form')"
         >
           Minus
         </button>
         <button
                 class="mb-2 me-2 rounded-lg bg-paynes-gray px-5 py-2.5 text-sm font-medium text-slate-100 hover:bg-dark-cyan focus:outline-none focus:ring-4 focus:ring-dark-cyan"
-                @click="sidebar_content = 'positive-adjustment-form'; show_sidebar = true"
+                @click="showSidebar('positive-adjustment-form')"
         >
           Plus
         </button>
@@ -90,3 +52,27 @@
 </div>
 
 {% endblock %}
+
+{% block sidebar_title %}
+<h2 class="text-lg font-semibold uppercase" x-show="sidebar.content === 'negative-adjustment-form'">Negative Adjustment</h2>
+<h2 class="text-lg font-semibold uppercase" x-show="sidebar.content === 'positive-adjustment-form'">Positive Adjustment</h2>
+{% endblock %}
+
+{% block sidebar_content %}
+<div x-on:form-submit-success="hideSidebar()">
+  <div x-show="sidebar.content === 'positive-adjustment-form'">
+    <div
+      hx-get="/item/{{item_id}}/adjustment/positive"
+      hx-trigger="load"
+      hx-swap="outerHTML"
+    ></div>
+  </div>
+  <div x-show="sidebar.content === 'negative-adjustment-form'">
+    <div
+      hx-get="/item/{{item_id}}/adjustment/negative"
+      hx-trigger="load"
+      hx-swap="outerHTML"
+    ></div>
+  </div>
+</div>
+{% endblock %}
diff --git a/templates/main.html b/templates/main.html
index 3883f4e..8b0d50d 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -66,7 +66,98 @@
     </header>
     <main class="bg-slate-100 text-neutral-900 dark:bg-neutral-900 dark:text-slate-100">
 
+      <!-- Toasts -->
+      <div
+              x-data="toastsHandler()"
+              class="absolute flex flex-col justify-start h-full w-screen z-40 py-4"
+              @notice.window="add($event.detail)"
+              style="pointer-events:none">
+        <template x-for="notice of notices" :key="notice.id">
+          <div
+                  x-show="visible.includes(notice)"
+                  x-transition:enter="transition ease-in duration-200"
+                  x-transition:enter-start="transform opacity-0 -translate-y-2"
+                  x-transition:enter-end="transform opacity-100"
+                  x-transition:leave="transition ease-out duration-500"
+                  x-transition:leave-start="transform translate-y-0 opacity-100"
+                  x-transition:leave-end="transform -translate-y-full opacity-0"
+                  @click="remove(notice.id)"
+                  class="rounded mb-4 mx-auto w-56 p-1 flex items-center justify-center text-white shadow-lg font-bold text-sm cursor-pointer"
+                  :class="{
+                      'bg-green-500': notice.type === 'info',
+                      'bg-cerise': notice.type === 'error'
+                  }"
+                  style="pointer-events:all"
+                  x-text="notice.text">
+          </div>
+        </template>
+      </div>
+
+      <!-- Main -->
+      <div x-data="sidebarHandler()">
+        <!-- Sidebar -->
+        <div class="relative h-auto">
+
+          <div class="absolute inset-x-0 h-lvh bg-neutral-300 opacity-90 z-10"
+               x-show="sidebar.show"
+               x-transition:enter="transition ease-in duration-200"
+               x-transition:enter-start="transform opacity-0"
+               x-transition:enter-end="transform opacity-90"
+               x-transition:leave="transition ease-out duration-500"
+               x-transition:leave-start="transform opacity-90"
+               x-transition:leave-end="transform opacity-0"
+          ></div>
+
+          <div class="py-2 px-4 absolute rounded-tl-xl inset-y-0 right-0 bg-slate-100 opacity-100 w-11/12 h-lvh max-w-[40rem] z-20"
+               x-show="sidebar.show"
+               x-transition:enter="transition ease-in duration-200"
+               x-transition:enter-start="transform translate-x-full opacity-0"
+               x-transition:enter-end="transform translate-x-0 opacity-100"
+               x-transition:leave="transition ease-out duration-500"
+               x-transition:leave-start="transform translate-x-0 opacity-100"
+               x-transition:leave-end="transform translate-x-full opacity-0"
+          >
+            <div class="flex">
+              <div class="flex-1 inline-flex items-center">
+                {% block sidebar_title %}
+                <h2 class="text-lg font-semibold uppercase">None</h2>
+                {% endblock %}
+              </div>
+              <button
+                class="inline-flex items-center whitespace-nowrap p-2 text-sm font-medium tracking-wide text-neutral-900 transition focus:outline-none focus:ring-4 focus:ring-dark-cyan dark:border-neutral-900 dark:text-slate-100"
+                @click="hideSidebar()"
+              >
+                <span class="sr-only">Close Sidebar</span>
+                X
+              </button>
+            </div>
+            {% block sidebar_content %}
+            <p>None</p>
+            {% endblock %}
+        </div>
+
+        <!-- Content -->
+        {% block content %}
+        <p>Content Missing</p>
+        {% endblock %}
+      </div>
+
       <script>
+        function sidebarHandler() {
+          return {
+            sidebar: {
+              show: false,
+              content: 'none',
+            },
+            showSidebar(content) {
+              this.sidebar.show = true;
+              this.sidebar.content = content;
+            },
+            hideSidebar() {
+              this.sidebar.show = false;
+            }
+          }
+        }
         function toastsHandler() {
           return {
             notices: [],
@@ -93,36 +184,6 @@
           }
         }
       </script>
-      <div
-              x-data="toastsHandler()"
-              class="absolute flex flex-col justify-start h-full w-screen z-40 py-4"
-              @notice.window="add($event.detail)"
-              style="pointer-events:none">
-        <template x-for="notice of notices" :key="notice.id">
-          <div
-                  x-show="visible.includes(notice)"
-                  x-transition:enter="transition ease-in duration-200"
-                  x-transition:enter-start="transform opacity-0 -translate-y-2"
-                  x-transition:enter-end="transform opacity-100"
-                  x-transition:leave="transition ease-out duration-500"
-                  x-transition:leave-start="transform translate-y-0 opacity-100"
-                  x-transition:leave-end="transform -translate-y-full opacity-0"
-                  @click="remove(notice.id)"
-                  class="rounded mb-4 mx-auto w-56 p-1 flex items-center justify-center text-white shadow-lg font-bold text-sm cursor-pointer"
-                  :class="{
-				'bg-green-500': notice.type === 'info',
-				'bg-cerise': notice.type === 'error'
-			 }"
-                  style="pointer-events:all"
-                  x-text="notice.text">
-          </div>
-        </template>
-      </div>
-
-      {% block content %}
-      <p>Content Missing</p>
-      {% endblock %}
-
     </main>
     <footer>
     </footer>