[tt] fix list edit layout

a-type · Jun 10, 2024 · 1afa196 · 1afa196
1 parent 00792bf
commit 1afa196
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 50 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
   }