move shops to new page; live vs mock navbar

This commit is contained in:
2026-02-06 16:37:55 -07:00
parent 548f72d9a4
commit e3b2dd3377
11 changed files with 265 additions and 345 deletions
@@ -1,182 +0,0 @@
{{- $acctID := .PathParams.acctID }}
{{- $platform := .PathParams.platform }}
{{- $parsedPlatform := parsePlatform $platform }}
<details
name={{$platform}}
class="
flex flex-col items-center
open:pb-[1em]
open:border-b-[1px]
open:border-b-background
open:mb-[1em]
group/create-mock-shop
details-content:opacity-[0]
open:details-content:opacity-[1]
details-content:transform-[translate(0px,-2em)]
open:details-content:transform-[translate(0px,0px)]
details-content:border-transparent
open:details-content:border-dotted
open:details-content:border-x-[0px]
open:details-content:border-x-transparent
open:details-content:border-b-[0px]
open:details-content:border-b-transparent
open:details-content:border-t-background
open:details-content:border-t-[0.225rem]
details-content:outline-transparent
details-content:transition-[opacity_transform]
"
>
<summary
class="
flex-grow
p-[0.5em]
grid
grid-cols-[2fr_8fr_2fr]
gap-[1em]
list-none
after:content-['+']
group-open/create-mock-shop:after:content-['-']
after:font-bold
after:text-[2em]
after:leading-[1em]
cursor-pointer
"
>
<h4 class="inline-block col-2 content-center">
Mock Shops
</h4>
</summary>
<ul class="flex flex-col items-center my-[0.5em]">
{{- $shops := .Accounts.ListMockShopsForPlatform $acctID $parsedPlatform }}
{{- range $shop := $shops }}
<li>
<a
href={{ printf "/ui/accounts/%d/platforms/%s/shops/mocks/%s" $acctID $platform $shop.ShopID }}
hx-boost="false"
class="
border-foreground
border-solid
border-thin
bg-card
font-semibold
rounded-md
p-[0.5em]
m-[0.25em]
block
"
>
{{ $shop.Name }}
</a>
</li>
{{- end }}
</ul>
<form
class="px-[2em] py-[0.5em]"
hx-post={{printf "/api/accounts/%d/platforms/%s/shops/mocks" $acctID $platform}}
>
<div
class="
grid grid-cols-[max-content_max-content]
gap-[0.25em]
p-[0.5em]
"
>
<label>
Name:
</label>
<input
type="text"
name="name"
class="
ml-[1em]
bg-card
border-input border-[1px] rounded
"
required
minlength="5"
/>
<!--label>
TODO:
</label>
<input
type="text"
name="name"
class="
ml-[1em]
bg-card
border-input border-[1px] rounded
"
/-->
</div>
{{ component "button"
"Text" "Create"
"Class" ""
}}
</form>
</details>
<details
name={{$platform}}
class="
flex flex-col items-center
group/link-shops
details-content:opacity-[0]
open:details-content:opacity-[1]
details-content:transform-[translate(0px,-2em)]
open:details-content:transform-[translate(0px,0px)]
details-content:border-transparent
open:details-content:border-dotted
open:details-content:border-x-[0px]
open:details-content:border-x-transparent
open:details-content:border-b-[0px]
open:details-content:border-b-transparent
open:details-content:border-t-background
open:details-content:border-t-[0.225rem]
details-content:outline-transparent
details-content:transition-[opacity_transform]
"
>
<summary
class="
flex-grow
p-[0.5em]
grid
grid-cols-[2fr_8fr_2fr]
gap-[1em]
list-none
after:content-['+']
group-open/link-shops:after:content-['-']
after:font-bold
after:text-[2em]
after:leading-[1em]
cursor-pointer
"
>
<h4 class="inline-block col-2 content-center">
Link Shops
</h4>
</summary>
{{ component ( printf "/accounts/%d/platform-links/%s" $acctID $platform ) }}
</details>
@@ -0,0 +1,85 @@
{{/* [Mock: bool] */}}
{{- $acctID := .PathParams.acctID }}
{{- $platform := .PathParams.platform }}
{{- $parsedPlatform := parsePlatform $platform }}
{{- if .Mock }}
{{- $idPrefix := "mock-" }}
<div
name={{$platform}}
class="flex flex-col items-center"
>
{{- $shops := .Accounts.ListMockShopsForPlatform $acctID $parsedPlatform }}
{{- if $shops }}
<ul class="flex flex-col items-center my-[0.5em]">
{{- range $shop := $shops }}
<li>
<a
href={{ printf "/ui/accounts/%d/platforms/%s/shops/mocks/%s" $acctID $platform $shop.ShopID }}
hx-boost="false"
class="
border-foreground
border-solid
border-thin
bg-card
font-semibold
rounded-md
p-[0.5em]
m-[0.25em]
block
"
>
{{ $shop.Name }}
</a>
</li>
{{- end }}
</ul>
{{- end }}
<form
class="px-[2em] py-[0.5em]"
hx-post={{printf "/api/accounts/%d/platforms/%s/shops/mocks" $acctID $platform}}
>
<div
class="
grid grid-cols-[max-content_max-content]
gap-[0.25em]
p-[0.5em]
"
>
<label>
Name:
</label>
<input
type="text"
name="name"
class="
ml-[1em]
bg-card
border-input border-[1px] rounded
"
required
minlength="5"
/>
</div>
{{ component "button"
"Text" "Create"
"Class" ""
}}
</form>
</div>
{{- else -}}
<div
name={{$platform}}
class="flex flex-col items-center"
>
{{ component ( printf "/accounts/%d/platform-links/%s" $acctID $platform ) }}
</div>
{{- end }}
@@ -1,3 +1,5 @@
{{/* [Mock: bool] */}}
{{- $acctID := .Identity.Account.AccountID }}
{{- $platform := parsePlatform .PathParams.platform -}}
{{- $orderIndex := .OrderIndex }}
@@ -6,10 +8,13 @@
{{- end }}
{{- $idPrefix := "" }}
{{- if .Mock }}
{{- $idPrefix = "mock-" }}
{{- end }}
{{- $platformSegment := lowerSnakeCase (printf "%s" $platform) }}
{{- $updatePath := printf "/accounts/%d/platforms/%s/order-index" $acctID $platformSegment }}
<li
id="{{$platformSegment}}"
id="{{$idPrefix}}{{$platformSegment}}"
class="my-[1rem] rounded-lg bg-accent"
{{/* the dragged <li> will be NOT be updated by the response (204 response), but instead the following sse events */}}
@@ -47,7 +52,7 @@
"
>
<details
id="{{$platformSegment}}-details"
id="{{$idPrefix}}{{$platformSegment}}-details"
class="
group
@@ -94,11 +99,11 @@
</summary>
<div
id="{{$platform}}-tab"
id="{{$idPrefix}}{{$platform}}-tab"
class="p-[1em] text-center"
>
{{- $pathSegment := lowerSnakeCase (printf "%s" $platform) }}
{{- component (printf "/accounts/%d/platforms/%s/link-section" $acctID $pathSegment) }}
{{- component (printf "/accounts/%d/platforms/%s/shops/link-section" $acctID $pathSegment) "Mock" .Mock }}
</div>
</details>
</li>