stubbed mock shop creation forms

styles/index.css

@@ -215,6 +215,9 @@
       max-width: 96rem;
     }
   }
+  .m-\[0\.5em\] {
+    margin: 0.5em;
+  }
   .m-\[1em\] {
     margin: 1em;
   }
@@ -266,6 +269,9 @@
   .mb-\[3em\] {
     margin-bottom: 3em;
   }
+  .ml-\[1em\] {
+    margin-left: 1em;
+  }
   .block {
     display: block;
   }
@@ -335,6 +341,9 @@
   .flex-shrink {
     flex-shrink: 1;
   }
+  .flex-grow {
+    flex-grow: 1;
+  }
   .grow {
     flex-grow: 1;
   }
@@ -374,12 +383,45 @@
   .list-none {
     list-style-type: none;
   }
+  .grid-cols-\[1fr_1fr_1fr\] {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+  .grid-cols-\[1fr_2fr_1fr\] {
+    grid-template-columns: 1fr 2fr 1fr;
+  }
+  .grid-cols-\[1fr_10fr_1fr\] {
+    grid-template-columns: 1fr 10fr 1fr;
+  }
+  .grid-cols-\[1fr_max-content-1fr\] {
+    grid-template-columns: 1fr max-content-1fr;
+  }
+  .grid-cols-\[1fr_max-content\] {
+    grid-template-columns: 1fr max-content;
+  }
+  .grid-cols-\[1fr_max-content_1fr\] {
+    grid-template-columns: 1fr max-content 1fr;
+  }
+  .grid-cols-\[1fr_max-content_calc\(1fr\+1px\)\] {
+    grid-template-columns: 1fr max-content calc(1fr + 1px);
+  }
+  .grid-cols-\[2fr_8fr_2fr\] {
+    grid-template-columns: 2fr 8fr 2fr;
+  }
   .grid-cols-\[6rem_10fr_6rem\] {
     grid-template-columns: 6rem 10fr 6rem;
   }
+  .grid-cols-\[calc\(1fr\+1px\)_max-content_calc\(1fr\+1px\)\] {
+    grid-template-columns: calc(1fr + 1px) max-content calc(1fr + 1px);
+  }
+  .grid-cols-\[max-content_max-content\] {
+    grid-template-columns: max-content max-content;
+  }
   .flex-col {
     flex-direction: column;
   }
+  .content-center {
+    align-content: center;
+  }
   .items-center {
     align-items: center;
   }
@@ -392,6 +434,15 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-\[0\.5em\] {
+    gap: 0.5em;
+  }
+  .gap-\[0\.25em\] {
+    gap: 0.25em;
+  }
+  .gap-\[1e\] {
+    gap: 1e;
+  }
   .gap-\[1em\] {
     gap: 1em;
   }
@@ -422,6 +473,10 @@
   .rounded-sm {
     border-radius: calc(var(--radius) - 4px);
   }
+  .border-\[1em\] {
+    border-style: var(--tw-border-style);
+    border-width: 1em;
+  }
   .border-\[1px\] {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -438,6 +493,22 @@
     --tw-border-style: dotted;
     border-style: dotted;
   }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  .border-accent {
+    border-color: var(--accent);
+  }
+  .border-card {
+    border-color: var(--card);
+  }
+  .border-card-foreground {
+    border-color: var(--card-foreground);
+  }
+  .border-input {
+    border-color: var(--input);
+  }
   .border-sidebar-border {
     border-color: var(--sidebar-border);
   }
@@ -456,6 +527,21 @@
   .bg-card {
     background-color: var(--card);
   }
+  .bg-foreground {
+    background-color: var(--foreground);
+  }
+  .bg-input {
+    background-color: var(--input);
+  }
+  .bg-muted {
+    background-color: var(--muted);
+  }
+  .bg-primary {
+    background-color: var(--primary);
+  }
+  .bg-secondary {
+    background-color: var(--secondary);
+  }
   .p-\[0\.5em\] {
     padding: 0.5em;
   }
@@ -832,6 +918,12 @@
       float: right;
     }
   }
+  .after\:ml-\[1em\] {
+    &::after {
+      content: var(--tw-content);
+      margin-left: 1em;
+    }
+  }
   .after\:text-\[1em\] {
     &::after {
       content: var(--tw-content);
@@ -857,6 +949,13 @@
       line-height: 1em;
     }
   }
+  .after\:leading-\[2em\] {
+    &::after {
+      content: var(--tw-content);
+      --tw-leading: 2em;
+      line-height: 2em;
+    }
+  }
   .after\:font-\[2em\] {
     &::after {
       content: var(--tw-content);
@@ -956,6 +1055,35 @@
       }
     }
   }
+  .group-open\/create-mock-shop\:after\:content-\[\'-\'\] {
+    &:is(:where(.group\/create-mock-shop):is([open], :popover-open, :open) *) {
+      &::after {
+        --tw-content: '-';
+        content: var(--tw-content);
+      }
+    }
+  }
+  .group-open\/create-mock-store\:after\:content-\[\'-\'\] {
+    &:is(:where(.group\/create-mock-store):is([open], :popover-open, :open) *) {
+      &::after {
+        --tw-content: '-';
+        content: var(--tw-content);
+      }
+    }
+  }
+  .group-open\/link-shops\:after\:content-\[\'-\'\] {
+    &:is(:where(.group\/link-shops):is([open], :popover-open, :open) *) {
+      &::after {
+        --tw-content: '-';
+        content: var(--tw-content);
+      }
+    }
+  }
+  .open\:mb-\[2em\] {
+    &:is([open], :popover-open, :open) {
+      margin-bottom: 2em;
+    }
+  }
   .open\:grid {
     &:is([open], :popover-open, :open) {
       display: grid;
@@ -1023,6 +1151,14 @@
       }
     }
   }
+  .open\:details-content\:border-t-\[0\.2rem\] {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-top-style: var(--tw-border-style);
+        border-top-width: 0.2rem;
+      }
+    }
+  }
   .open\:details-content\:border-t-\[0\.25rem\] {
     &:is([open], :popover-open, :open) {
       &::details-content {
@@ -1031,6 +1167,30 @@
       }
     }
   }
+  .open\:details-content\:border-t-\[0\.125rem\] {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-top-style: var(--tw-border-style);
+        border-top-width: 0.125rem;
+      }
+    }
+  }
+  .open\:details-content\:border-t-\[0\.175rem\] {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-top-style: var(--tw-border-style);
+        border-top-width: 0.175rem;
+      }
+    }
+  }
+  .open\:details-content\:border-t-\[0\.225rem\] {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        border-top-style: var(--tw-border-style);
+        border-top-width: 0.225rem;
+      }
+    }
+  }
   .open\:details-content\:border-r-0 {
     &:is([open], :popover-open, :open) {
       &::details-content {
@@ -1137,6 +1297,14 @@
       }
     }
   }
+  .open\:after\:content-\[\'-\'\] {
+    &:is([open], :popover-open, :open) {
+      &::after {
+        --tw-content: '-';
+        content: var(--tw-content);
+      }
+    }
+  }
   .hover\:scale-110 {
     &:hover {
       @media (hover: hover) {

templates/components/accounts/{acctID.int64}/shops/link-sections/amazon.html.tmpl

@@ -1 +0,0 @@
-<em>Coming soon!</em>

templates/components/accounts/{acctID.int64}/shops/link-sections/big_cartel.html.tmpl

@@ -1 +0,0 @@
-<em>Coming soon!</em>

templates/components/accounts/{acctID.int64}/shops/link-sections/ebay.html.tmpl

@@ -1,2 +0,0 @@
-
-<em>Coming soon!</em>

templates/components/accounts/{acctID.int64}/shops/link-sections/ecwid.html.tmpl

@@ -1,2 +0,0 @@
-
-<em>Coming soon!</em>

templates/components/accounts/{acctID.int64}/shops/link-sections/shopify.html.tmpl

@@ -1,2 +0,0 @@
-
-<em>Coming soon!</em>

templates/components/accounts/{acctID.int64}/shops/link-sections/square_online.html.tmpl

@@ -1,2 +0,0 @@
-
-<em>Coming soon!</em>

templates/components/accounts/{acctID.int64}/shops/link-sections/squarespace.html.tmpl

@@ -1,2 +0,0 @@
-
-<em>Coming soon!</em>

templates/components/accounts/{acctID.int64}/shops/link-sections/tiktok.html.tmpl

@@ -1 +0,0 @@
-<em>Coming soon!</em>

templates/components/accounts/{acctID.int64}/shops/link-sections/tmp.txt

@@ -0,0 +1,12 @@
+amazon.html.tmpl
+big_cartel.html.tmpl
+ebay.html.tmpl
+ecwid.html.tmpl
+shopify.html.tmpl
+square_online.html.tmpl
+squarespace.html.tmpl
+tiktok.html.tmpl
+walmart_marketplace.html.tmpl
+wix.html.tmpl
+woo_commerce.html.tmpl
+zoho.html.tmpl

templates/components/accounts/{acctID.int64}/shops/link-sections/walmart_marketplace.html.tmpl

@@ -1,2 +0,0 @@
-
-<em>Coming soon!</em>

templates/components/accounts/{acctID.int64}/shops/link-sections/wix.html.tmpl

@@ -1 +0,0 @@
-<em>Coming soon!</em>

templates/components/accounts/{acctID.int64}/shops/link-sections/woo_commerce.html.tmpl

@@ -1,2 +0,0 @@
-
-<em>Coming soon!</em>

templates/components/accounts/{acctID.int64}/shops/link-sections/zoho.html.tmpl

@@ -1,2 +0,0 @@
-
-<em>Coming soon!</em>

templates/components/accounts/{acctID.int64}/shops/link-sections/{platform}/index.html.tmpl

@@ -0,0 +1,164 @@
+{{- $acctID := .PathParams.acctID }}
+{{- $platform := .PathParams.platform }}
+
+<details
+	open
+	class="
+		flex flex-col items-center
+		open:mb-[2em]
+
+		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>
+
+	<form class="px-[2em] py-[0.5em]">
+		<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
+				"
+			/>
+			<!--label>
+				TODO:
+			</label>
+			<input
+				type="text"
+				name="name"
+				class="
+					ml-[1em]
+
+					bg-card
+					border-input border-[1px] rounded
+				"
+			/-->
+		</div>
+
+		{{/* TODO: make a css button class for this */}}
+		<button class="
+			border-thin
+			bg-card
+			rounded-sm
+			p-[0.5em]
+			font-semibold
+			cursor-pointer
+			hover:underline
+			hover:bg-accent
+			disabled:bg-accent-secondary
+			disabled:cursor-not-allowed
+			disabled:no-underline
+			{{/*mt-[1em] mb-[1em]*/}}
+		">
+			Create
+		</button>
+
+
+	</form>
+</details>
+
+<details
+	open
+	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/shops/link-sections/%s/links/%s" $acctID $platform $platform ) }}
+</details>

templates/components/accounts/{acctID.int64}/shops/link-sections/{platform}/links/amazon.html.tmpl

@@ -0,0 +1 @@
+<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>

templates/components/accounts/{acctID.int64}/shops/link-sections/{platform}/links/big_cartel.html.tmpl

@@ -0,0 +1 @@
+<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>

templates/components/accounts/{acctID.int64}/shops/link-sections/{platform}/links/ebay.html.tmpl

@@ -0,0 +1 @@
+<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>

templates/components/accounts/{acctID.int64}/shops/link-sections/{platform}/links/ecwid.html.tmpl

@@ -0,0 +1 @@
+<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>

templates/components/accounts/{acctID.int64}/shops/link-sections/{platform}/links/etsy.html.tmpl

@@ -4,10 +4,10 @@
 {{- if $etsyUser }}
 	<h3>Etsy User: {{ $etsyUser.UserID }}; Shop ID: {{ $etsyUser.ShopID }}</h3>
 {{- else }}
-	<h3>
+	<h3 class="m-[0.5em] px-[2em] italic">
 		{{/* TODO: create this link dynamically, not EVERYTIME THE PAGE IS LOADED */}}
 		<a href="{{ printf "/webhooks/etsy/%d/new-account-link" $acctID.AccountID }}">
-			Link Your Etsy Store!
+			Link Your Store!
 		</a>
 	</h3>
 {{- end }}

templates/components/accounts/{acctID.int64}/shops/link-sections/{platform}/links/shopify.html.tmpl

@@ -0,0 +1 @@
+<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>

templates/components/accounts/{acctID.int64}/shops/link-sections/{platform}/links/square_online.html.tmpl

@@ -0,0 +1 @@
+<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>

templates/components/accounts/{acctID.int64}/shops/link-sections/{platform}/links/squarespace.html.tmpl

@@ -0,0 +1 @@
+<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>

templates/components/accounts/{acctID.int64}/shops/link-sections/{platform}/links/tiktok.html.tmpl

@@ -0,0 +1 @@
+<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>

templates/components/accounts/{acctID.int64}/shops/link-sections/{platform}/links/walmart_marketplace.html.tmpl

@@ -0,0 +1 @@
+<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>

templates/components/accounts/{acctID.int64}/shops/link-sections/{platform}/links/wix.html.tmpl

@@ -0,0 +1 @@
+<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>

templates/components/accounts/{acctID.int64}/shops/link-sections/{platform}/links/woo_commerce.html.tmpl

@@ -0,0 +1 @@
+<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>

templates/components/accounts/{acctID.int64}/shops/link-sections/{platform}/links/zoho.html.tmpl

@@ -0,0 +1 @@
+<div class="m-[0.5em] px-[2em] italic">Coming Soon!</div>

templates/components/accounts/{acctID.int64}/shops/list-items/{platform}.html.tmpl

@@ -51,6 +51,7 @@
 		class="
 			group
 
+			{{/* TODO: make custom class for all this */}}
 			details-content:opacity-[0]
 			open:details-content:opacity-[1]
 

templates/pages/accounts/{acctID.int64}/index.html.tmpl

@@ -58,7 +58,7 @@
 		border-sidebar-border
 	"
 >
-	<details class="flex flex-col items-stretch">
+	<details class="flex flex-col items-stretch" open>
 		<summary class="list-none cursor-pointer self-center">
 			{{-
 				component "tutorial-tooltip"