sync

.air.toml

@@ -3,7 +3,7 @@ tmp_dir = "tmp"
 
 [build]
 bin = "./tmp/main"
-cmd = "templ generate && npx tailwindcss -c ./frontend/tailwind.config.js -i ./frontend/src/index.css -o ./frontend/public/index.css && npm --prefix ./frontend run  build && go build -o ./tmp/main ./cmd/command/"
+cmd = "TEMPL_EXPERIMENT=rawgo templ generate && npx tailwindcss -c ./frontend/tailwind.config.js -i ./frontend/src/index.css -o ./frontend/public/index.css && npm --prefix ./frontend run  build && go build -o ./tmp/main ./cmd/command/"
 delay = 1000
 exclude_dir = ["assets", "tmp", "vendor", "node_modules"]
 exclude_file = [

frontend/package.json

@@ -18,6 +18,7 @@
         "vite-plugin-lib-inject-css": "^2.1.1"
     },
     "dependencies": {
+        "alpinejs": "^3.14.1",
         "htmx.org": "^2.0.1",
         "three": "^0.167.1"
     }

frontend/public/index.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.9 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -1625,6 +1625,12 @@ input.tab:checked + .tab-content,
   color: var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)));
 }
 
+.btm-nav > *:where(.active) {
+  border-top-width: 2px;
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
+}
+
 .btm-nav > *.disabled,
     .btm-nav > *[disabled] {
   pointer-events: none;
@@ -2338,6 +2344,20 @@ input.tab:checked + .tab-content,
   color: var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));
 }
 
+.table tr.active,
+  .table tr.active:nth-child(even),
+  .table-zebra tbody tr:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
+}
+
+.table-zebra tr.active,
+    .table-zebra tr.active:nth-child(even),
+    .table-zebra-zebra tbody tr:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));
+}
+
 .textarea:focus {
   box-shadow: none;
   border-color: var(--fallback-bc,oklch(var(--bc)/0.2));
@@ -2390,6 +2410,22 @@ input.tab:checked + .tab-content,
   padding-right: 0.313rem;
 }
 
+.btm-nav-xs > *:where(.active) {
+  border-top-width: 1px;
+}
+
+.btm-nav-sm > *:where(.active) {
+  border-top-width: 2px;
+}
+
+.btm-nav-md > *:where(.active) {
+  border-top-width: 2px;
+}
+
+.btm-nav-lg > *:where(.active) {
+  border-top-width: 4px;
+}
+
 .btn-xs {
   height: 1.5rem;
   min-height: 1.5rem;

frontend/src/index.js

@@ -1,5 +1,8 @@
 //import "./index.css"
 //import "./css/main.css";
 //import "./css/changeme.css"
+import Alpine from 'alpinejs'
 import 'htmx.org';
 import "./viewer/main.js"
+window.Alpine = Alpine
+Alpine.start()

frontend/src/viewer/main copy.js

@@ -0,0 +1,50 @@
+import { createViewer3D } from "./viewer"
+
+var viewer = null;
+var models = [];
+var viewerEl = null;
+(function () {
+    viewerEl = document.getElementById('viewer')
+    if (viewerEl) {
+        setControlEvents(viewerEl);
+        viewer = createViewer3D(viewerEl.querySelector('.viewer-container'));
+        viewer.setModels(models.map(m => { return { id: m } }));
+    }
+    document.body.addEventListener('htmx:load', function (evt) {
+        var newViewerEl = evt.detail.elt.querySelector('.viewer-container');
+        if (newViewerEl) {
+            console.log('newViewerEl', newViewerEl)
+            if (viewer) {
+                console.log('destroying viewer')
+                //viewer.destroy();
+            }
+            // initialize buttons for the view wrapper
+            console.log('creating viewer')
+            //viewer = createViewer3D(newViewerEl);
+            //viewer.setModels(models.map(m => { return { id: m } }));
+        }
+        addListeners();
+    });
+})()
+
+function addListeners() {
+    document.querySelectorAll('button.add-model').forEach((el) => {
+        el.addEventListener('click', function (e) {
+            var m = e.currentTarget.dataset.modelId;
+            if (models.indexOf(m) === -1) {
+                models.push(m);
+            }
+            viewerEl.classList.remove('hidden');
+            viewer.setModels(models.map(m => { return { id: m } }));
+        })
+    })
+}
+
+function setControlEvents(viewerEl) {
+    if (!viewerEl) {
+        return;
+    }
+    viewerEl.querySelector('.close').addEventListener('click', function (e) {
+        viewerEl.classList.add('hidden');
+    })
+}

frontend/src/viewer/main.js

@@ -1,47 +1,22 @@
 import { createViewer3D } from "./viewer"
+import Alpine from 'alpinejs'
 
-var viewer = null;
-var models = [];
-var viewerEl = null;
-(function () {
-    viewerEl = document.getElementById('viewer')
-    setControlEvents(viewerEl);
 
-    document.body.addEventListener('htmx:load', function (evt) {
-        var newViewerEl = evt.detail.elt.querySelector('.viewer-container');
-        if (newViewerEl) {
-            console.log('newViewerEl', newViewerEl)
-            if (viewer) {
-                console.log('destroying viewer')
-                viewer.destroy();
-            }
-            // initialize buttons for the view wrapper
-            console.log('creating viewer')
-            viewer = createViewer3D(newViewerEl);
-            viewer.setModels(models.map(m => { return { id: m } }));
+Alpine.store('lib', () => ({
+    models: [],
+    viewer: null,
+    init() {
+        Alpine.store('context').current = 'lib'
+        if (!this.$refs.libGlobSidebar) {
+            console.log('no sidebar')
+            document.getElementsByTagName('body')[0]
+                .dispatchEvent(new CustomEvent("load-side", {
+                    detail: { context: 'lib' }
+                }))
+        } else {
+            console.log('sidebar exists')
+            this.viewer = createViewer3D(this.$refs.viewerContainer);
+            this.viewer.setModels(this.models.map(m => { return { id: m } }));
         }
-        addListeners();
-    });
-})()
-
-function addListeners() {
-    document.querySelectorAll('button.add-model').forEach((el) => {
-        el.addEventListener('click', function (e) {
-            var m = e.currentTarget.dataset.modelId;
-            if (models.indexOf(m) === -1) {
-                models.push(m);
-            }
-            viewerEl.classList.remove('hidden');
-            viewer.setModels(models.map(m => { return { id: m } }));
-        })
-    })
-}
-
-function setControlEvents(viewerEl) {
-    if (!viewerEl) {
-        return;
-    }
-    viewerEl.querySelector('.close').addEventListener('click', function (e) {
-        viewerEl.classList.add('hidden');
-    })
-}
+    },
+}))

frontend/src/viewer/viewer.js

@@ -64,6 +64,7 @@ export function createViewer3D(parent/*: HTMLElement*/)/*: Viewer3D*/ {
 
     state.renderer.setPixelRatio(parent.offsetWidth / parent.offsetHeight);
     state.renderer.setSize(parent.offsetWidth, parent.offsetHeight);
+    state.renderer.domElement.setAttribute("hx-preserve", "true");
     parent.appendChild(state.renderer.domElement);
 
     state.camera = new THREE.PerspectiveCamera(60, parent.offsetWidth / parent.offsetHeight, 1, 1000);

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "alpinejs": "^3.14.1"
+  }
+}

v2/library/web/comp/globsidebar.templ

@@ -0,0 +1,39 @@
+package comp
+
+templ GlobSidebar() {
+	<aside
+		id="right-aside"
+		hx-swap-oob="true"
+	>
+		<ul
+			class="menu bg-base-200 rounded-box"
+		>
+			<li>
+				<a
+					class="tooltip tooltip-right"
+					data-tip="Home"
+					hx-get="/"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-5 w-5"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
+						></path>
+					</svg>
+				</a>
+			</li>
+		</ul>
+		<div class="asset-side-wrapper">
+			<div class="asset-side-slot"></div>
+			@View3D()
+		</div>
+	</aside>
+}

v2/library/web/comp/index.templ

@@ -7,6 +7,7 @@ import (
 
 templ Index(model IndexModel) {
 	<div class="h-full w-full flex flex-col asset-view pl-2">
+		//<script>(()=>{Alpine.store('lib').init()})()</script>
 		<input class="hidden" type="text" id="asset-id" name="assetID" value={ model.Asset.ID }/>
 		<div class="header flex flex-row">
 			<div class="navbar bg-base-200 rounded-box">
@@ -57,7 +58,7 @@ templ Index(model IndexModel) {
 				@model.Main
 			</div>
 			<aside class="bg-base-200" id="asset-sidebar">
-				@View3D()
+				//@View3D()
 			</aside>
 		</main>
 	</div>

v2/library/web/comp/view3d.templ

@@ -4,7 +4,11 @@ templ View3D() {
 	<div class="flex flex-col w-96" id="viewer">
 		<p>3D Viewer</p>
 		<button type="button" class="btn close"></button>
-		<div class="h-72 viewer-container bg-slate-400"></div>
+		<div
+			class="h-72 viewer-container bg-slate-400"
+			x-ref="viewer-container"
+			hx-preserve="true"
+		></div>
 		<div class="model-list"></div>
 	</div>
 }

v2/library/web/index.go

@@ -5,6 +5,7 @@ import (
 	"net/http"
 	"path"
 
+	"github.com/a-h/templ"
 	"github.com/duke-git/lancet/v2/maputil"
 	"github.com/eduardooliveira/stLib/v2/config"
 	"github.com/eduardooliveira/stLib/v2/library/entities"
@@ -97,6 +98,8 @@ func (h webHandler) indexHandlerChi(r *http.Request) web.ResponseModel {
 			},
 			Pagination: *pgModel,
 		}),
+		Others: map[string]templ.Component{
+			"right-aside": comp.GlobSidebar(),
+		},
 	}
-
 }

v2/library/web/sidebar.go

@@ -0,0 +1,16 @@
+package web
+
+import (
+	"net/http"
+
+	"github.com/eduardooliveira/stLib/v2/library/web/comp"
+	"github.com/eduardooliveira/stLib/v2/web"
+)
+
+func (h webHandler) sidebarHandler(r *http.Request) web.ResponseModel {
+	return web.ResponseModel{
+		S:          http.StatusOK,
+		Component:  comp.View3D(),
+		IsFragment: true,
+	}
+}