split oauth_tokens.claims column up; improved fonts; allow multiple sse connections per user; make navbar and use friendly

This commit is contained in:
2026-01-23 02:31:34 -07:00
parent 38aa3796b9
commit 3d70d08dac
16 changed files with 1703 additions and 69 deletions
+66 -13
View File
@@ -13,19 +13,27 @@
<script src="/scripts/_hyperscript.min.js.gz"></script>
<script src="/scripts/htmx-ext-sse.js"></script>
<script src="/scripts/htmx-ext-path-params.js"></script>
<script src="/scripts/idiomorph-ext.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<link rel="manifest" href="/favicon/site.webmanifest">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=Geist:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
{{/* This can be set by the template in ./pages being rendered */}}
{{- block "head" . }}{{ end }}
</head>
<body
class="basis-full grow bg-background flex flex-col items-stretch"
hx-ext="path-params,sse"
hx-ext="morph,path-params,sse"
{{/* get requests to just replace the body - until we start replacing the head, this will be good */}}
hx-boost="true"
{{/* subscribe to sse (if logged in) */}}
{{- if and .Identity .Identity.AccessToken }}
@@ -34,12 +42,35 @@
{{- end }}
>
<header>
<nav class="flex flex-col items-center text-xl overflow-x-scroll overflow-y-hidden ">
<nav
class="
w-full
text-xl
overflow-x-hidden
overflow-y-hidden
flex
justify-center
"
>
{{- $path := or .Request.URL.Path "/" }}
<ul class="flex text-nowrap overflow-x-scroll overflow-y-hidden">
<ul
hx-swap="morph:innerHTML"
class="
max-w-full
overflow-x-auto
overflow-y-hidden
text-nowrap
flex
basis-[fit-content]
"
style="
"
>
<li class="pt-[1em] pb-[1em]">
<a href="/ui" class="p-[1em] font-bold {{ if eq $path "/" }}selected{{ end }}">
<a href="/ui" class="p-[1em] font-display {{ if eq $path "/" }}selected{{ end }}">
Home
</a>
</li>
@@ -55,7 +86,7 @@
{{- if not $userID }}
<li class="pt-[1em] pb-[1em]">
<a href="/api/auth/login" class="p-[1em] font-bold {{ if eq $path "/auth/login" }}selected{{ end }}">
<a href="/api/auth/login" hx-boost="false" class="p-[1em] font-display {{ if eq $path "/auth/login" }}selected{{ end }}">
Log In / Sign Up
</a>
</li>
@@ -63,25 +94,25 @@
{{- else if $acctID }}
<li class="pt-[1em] pb-[1em]">
<a href="/ui/accounts/{{$acctID}}" class="p-[1em] font-bold {{ if eq $path (printf "/accounts/%d" $acctID) }}selected{{ end }}">
<a href="/ui/accounts/{{$acctID}}" class="p-[1em] font-display {{ if eq $path (printf "/accounts/%d" $acctID) }}selected{{ end }}">
Account
</a>
</li>
<li class="pt-[1em] pb-[1em]">
<a href="/ui/accounts/{{$acctID}}/inventory" class="p-[1em] font-bold {{ if eq $path (printf "/accounts/%d/inventory" $acctID) }}selected{{ end }}">
<a href="/ui/accounts/{{$acctID}}/inventory" class="p-[1em] font-display {{ if eq $path (printf "/accounts/%d/inventory" $acctID) }}selected{{ end }}">
Inventory
</a>
</li>
<li class="pt-[1em] pb-[1em]">
<a href="/ui/accounts/{{$acctID}}/reports" class="p-[1em] font-bold {{ if eq $path (printf "/accounts/%d/reports" $acctID) }}selected{{ end }}">
<a href="/ui/accounts/{{$acctID}}/reports" class="p-[1em] font-display {{ if eq $path (printf "/accounts/%d/reports" $acctID) }}selected{{ end }}">
Reports
</a>
</li>
<li class="pt-[1em] pb-[1em]">
<a href="/api/auth/logout" class="p-[1em] font-bold">
<a href="/api/auth/logout" hx-boost="false" class="p-[1em] font-display">
Log Out
</a>
</li>
@@ -96,11 +127,33 @@
{{- block "body" . }}{{ end }}
</main>
<footer class="flex flex-col items-center">
<address class="flex items-center">
<a href="mailto:contact-us@inventory-plus-plus.com" class="p-[1em] font-bold">Contact Us</a>
<a href="mailto:support@inventory-plus-plus.com" class="p-[1em] font-bold">Support</a>
<footer class="grid grid-cols-[6rem_10fr_6rem] justify-center items-center">
<address class="grow-1 col-2 flex justify-center">
<a href="mailto:contact-us@inventory-plus-plus.com" class="p-[1em] font-display text-center">Contact Us</a>
<a href="mailto:support@inventory-plus-plus.com" class="p-[1em] font-display text-center">Support</a>
</address>
{{- if .Identity.Claims.Picture }}
<div
class="
col-3
max-w-full
max-h-full
flex
justify-center
items-center
"
>
<img
src="{{ .Identity.Claims.Picture }}"
style="
max-height: 3rem;
border-radius: 50%;
margin: 1rem 0;
"
/>
</div>
{{- end }}
</footer>
</body>
</html>