From 1afa19696cc7b0514b392611a5eb4df038cbce9c Mon Sep 17 00:00:00 2001
From: Grant Forrest <grant@butlr.io>
Date: Mon, 10 Jun 2024 15:09:58 -0400
Subject: [PATCH] [tt] fix list edit layout

---
 .../src/components/lists/ListInfoEditor.tsx   | 119 +++++++++++-------
 apps/trip-tick/web/src/pages/ListPage.tsx     |   2 +-
 packages/client/src/components/Explainer.tsx  |   2 +-
 .../components/InfrequentSubscriptionHint.tsx |   3 +-
 4 files changed, 76 insertions(+), 50 deletions(-)

diff --git a/apps/trip-tick/web/src/components/lists/ListInfoEditor.tsx b/apps/trip-tick/web/src/components/lists/ListInfoEditor.tsx
index 64035abf..27e42f33 100644
--- a/apps/trip-tick/web/src/components/lists/ListInfoEditor.tsx
+++ b/apps/trip-tick/web/src/components/lists/ListInfoEditor.tsx
@@ -5,6 +5,12 @@ import { TemperatureUnit } from '../weather/TemperatureUnit.jsx';
 import { useCanSync } from '@biscuits/client';
 import { useTemperatureUnit } from '../weather/useTemperatureUnit.js';
 import { Input } from '@a-type/ui/components/input/Input';
+import {
+  CollapsibleContent,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+} from '@a-type/ui/components/collapsible';
+import { Icon } from '@a-type/ui/components/icon';
 
 export interface ListInfoEditorProps {
   list: List;
@@ -18,55 +24,74 @@ export function ListInfoEditor({ list }: ListInfoEditorProps) {
   if (!isSubscribed) return null;
 
   return (
-    <div className="flex flex-row gap-2">
-      <div>
-        <label className="font-bold block mb-1">Hot days are</label>
-        <div className="flex flex-row gap-1 items-center">
-          <Input
-            className="w-100px"
-            type="number"
-            value={toDisplay(hotThreshold ?? 299)}
-            onChange={(ev) => {
-              if (isNaN(ev.currentTarget.valueAsNumber)) return;
-              list.set(
-                'hotThreshold',
-                fromDisplay(ev.currentTarget.valueAsNumber),
-              );
-            }}
-            maxLength={3}
-            onFocus={(ev) => {
-              ev.currentTarget.select();
-            }}
-          />
-          <span>
-            + <TemperatureUnit />
+    <CollapsibleRoot>
+      <CollapsibleTrigger asChild>
+        <div className="row w-full">
+          <Icon name="gear" />
+          <span className="mr-auto">
+            <span className="font-bold">Weather settings</span> |{' '}
+            <Icon name="arrowUp" /> {toDisplay(hotThreshold ?? 299)}{' '}
+            <Icon name="arrowDown" /> {toDisplay(coldThreshold ?? 277)}{' '}
+            <TemperatureUnit />
           </span>
-        </div>
-      </div>
-      <div>
-        <label className="font-bold block mb-1">Cold days are</label>
-        <div className="flex flex-row gap-1 items-center">
-          <Input
-            className="w-100px"
-            type="number"
-            value={toDisplay(coldThreshold ?? 277)}
-            onChange={(ev) => {
-              if (isNaN(ev.currentTarget.valueAsNumber)) return;
-              list.set(
-                'coldThreshold',
-                fromDisplay(ev.currentTarget.valueAsNumber),
-              );
-            }}
-            maxLength={3}
-            onFocus={(ev) => {
-              ev.currentTarget.select();
-            }}
+          <Icon
+            name="chevron"
+            className="[[data-state=open]_&]:rotate-180 transition-transform"
           />
-          <span>
-            - <TemperatureUnit />
-          </span>
         </div>
-      </div>
-    </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="row py-4 justify-stretch w-full">
+          <div className="flex-1">
+            <label className="font-bold block mb-1">Hot days are</label>
+            <div className="flex flex-row gap-1 items-center">
+              <Input
+                className="w-100px"
+                type="number"
+                value={toDisplay(hotThreshold ?? 299)}
+                onChange={(ev) => {
+                  if (isNaN(ev.currentTarget.valueAsNumber)) return;
+                  list.set(
+                    'hotThreshold',
+                    fromDisplay(ev.currentTarget.valueAsNumber),
+                  );
+                }}
+                maxLength={3}
+                onFocus={(ev) => {
+                  ev.currentTarget.select();
+                }}
+              />
+              <span>
+                <TemperatureUnit /> and above
+              </span>
+            </div>
+          </div>
+          <div className="flex-1">
+            <label className="font-bold block mb-1">Cold days are</label>
+            <div className="flex flex-row gap-1 items-center">
+              <Input
+                className="w-100px"
+                type="number"
+                value={toDisplay(coldThreshold ?? 277)}
+                onChange={(ev) => {
+                  if (isNaN(ev.currentTarget.valueAsNumber)) return;
+                  list.set(
+                    'coldThreshold',
+                    fromDisplay(ev.currentTarget.valueAsNumber),
+                  );
+                }}
+                maxLength={3}
+                onFocus={(ev) => {
+                  ev.currentTarget.select();
+                }}
+              />
+              <span>
+                <TemperatureUnit /> and below
+              </span>
+            </div>
+          </div>
+        </div>
+      </CollapsibleContent>
+    </CollapsibleRoot>
   );
 }
diff --git a/apps/trip-tick/web/src/pages/ListPage.tsx b/apps/trip-tick/web/src/pages/ListPage.tsx
index 1e45091c..895ef88c 100644
--- a/apps/trip-tick/web/src/pages/ListPage.tsx
+++ b/apps/trip-tick/web/src/pages/ListPage.tsx
@@ -34,7 +34,7 @@ function ListPageEditor({ listId }: { listId: string }) {
 
   return (
     <>
-      <PageFixedArea className="row justify-between w-full py-3">
+      <PageFixedArea className="!row justify-between w-full py-3">
         <Button asChild color="ghost" size="icon">
           <Link to="/">
             <Icon name="arrowLeft" />
diff --git a/packages/client/src/components/Explainer.tsx b/packages/client/src/components/Explainer.tsx
index 584c3930..807a71f6 100644
--- a/packages/client/src/components/Explainer.tsx
+++ b/packages/client/src/components/Explainer.tsx
@@ -28,7 +28,7 @@ export function Explainer({ stages }: ExplainerProps) {
       }}
     >
       <DialogContent
-        outerClassName="h-screen max-h-none sm:max-h-[80vh] overflow-y-auto"
+        outerClassName="h-screen max-h-none sm:(h-auto max-h-[80vh]) overflow-y-auto"
         className="h-screen sm:h-auto"
       >
         <div className="col gap-4 flex-1 items-start">{stages[stage]}</div>
diff --git a/packages/client/src/components/InfrequentSubscriptionHint.tsx b/packages/client/src/components/InfrequentSubscriptionHint.tsx
index 8dca32e8..25bcd808 100644
--- a/packages/client/src/components/InfrequentSubscriptionHint.tsx
+++ b/packages/client/src/components/InfrequentSubscriptionHint.tsx
@@ -28,7 +28,8 @@ export function InfrequentSubscriptionHint() {
   const daysSinceFirstSeen = (now - startCountingAt) / 1000 / 60 / 60 / 24;
   const daysSinceDismissed = (now - dismissedAt) / 1000 / 60 / 60 / 24;
 
-  if (isSubscribed) {
+  // strict check important. undefined = not loaded
+  if (isSubscribed !== false) {
     return null;
   }