@stoker-platform/web-app 0.5.124 → 0.5.125

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stoker-platform/web-app
 
+## 0.5.125
+
+### Patch Changes
+
+- feat: improve mobile collection transitions
+
 ## 0.5.124
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.124",
+    "version": "0.5.125",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {

package/src/App.css

@@ -1,5 +1,11 @@
 html,
 body {
+    background-color: #ffffff !important;
+    background-image: none !important;
+}
+
+html[data-mode="app"],
+html[data-mode="app"] body {
     background-color: #000000 !important;
     background-image: none !important;
 }

package/src/Collection.tsx

@@ -1687,20 +1687,23 @@ function Collection({
         [recordTitle],
     )
 
-    const [showCollection, setShowCollection] = useState(window.innerWidth > 1280)
-    useEffect(() => {
-        if (isInitialized) {
-            setTimeout(() => {
-                setShowCollection(true)
-            }, 150)
-        }
-    }, [isInitialized])
+    const willHaveRangeRow = useMemo(() => {
+        return (
+            !formList &&
+            !relationList?.loadAll &&
+            tab !== "calendar" &&
+            (hasRangeFilter ||
+                (isPreloadCacheEnabled && !!preloadCache?.range) ||
+                filters.some((filter) => filter.type === "range") ||
+                (Array.isArray(collection.admin?.filters) &&
+                    collection.admin.filters.some((filter) => filter.type === "range")))
+        )
+    }, [formList, relationList, tab, hasRangeFilter, isPreloadCacheEnabled, filters, collection])
 
     if (!permissions.collections?.[labels.collection]) return null
 
     return (
-        !collection.singleton &&
-        showCollection && (
+        !collection.singleton && (
             <>
                 <div
                     ref={mainContentRef}
@@ -1826,7 +1829,9 @@ function Collection({
                             <Tabs defaultValue="list" onValueChange={onTabChange} value={tab}>
                                 <div
                                     className={cn(
-                                        "flex flex-col items-center print:hidden select-none",
+                                        "flex flex-col items-center justify-between print:hidden select-none",
+                                        willHaveRangeRow ? "h-[116px]" : "h-[72px]",
+                                        "lg:h-auto",
                                         relationList ? "xl:flex-row" : "lg:flex-row",
                                     )}
                                 >
@@ -2545,17 +2550,17 @@ function Collection({
                                 ) : (
                                     !relationList &&
                                     (tab === "list" ? (
-                                        <div className="pb-2 pt-[88px] lg:py-2">
-                                            <Card className="min-h-[calc(100vh-88px)] lg:min-h-full lg:h-[calc(100vh-250px)]"></Card>
+                                        <div className="py-2">
+                                            <Card className="min-h-screen lg:min-h-full lg:h-[calc(100vh-250px)]"></Card>
                                         </div>
                                     ) : tab === "map" ? (
-                                        <div className="pb-2 pt-[88px] lg:py-2">
-                                            <Card className="min-h-[calc(100vh-88px)] lg:min-h-full lg:h-[calc(100vh-204px)]"></Card>
+                                        <div className="py-2">
+                                            <Card className="min-h-screen lg:min-h-full lg:h-[calc(100vh-204px)]"></Card>
                                         </div>
                                     ) : (
                                         tab === "calendar" && (
-                                            <div className="pb-2 pt-[44px] lg:py-2">
-                                                <Card className="min-h-[calc(100vh-44px)] lg:min-h-full lg:h-[calc(100vh-204px)]"></Card>
+                                            <div className="py-2">
+                                                <Card className="min-h-screen lg:min-h-full lg:h-[calc(100vh-204px)]"></Card>
                                             </div>
                                         )
                                     ))

package/src/Tenant.tsx

@@ -60,7 +60,7 @@ import { getFunctions, httpsCallable } from "firebase/functions"
 import { getApp } from "firebase/app"
 import { useTheme } from "./components/theme-provider"
 
-const MOBILE_SHEET_CLOSE_MS = 400
+const MOBILE_SHEET_CLOSE_MS = 320
 
 function Tenant() {
     const [dialogContent, setDialogContent] = useDialog()
@@ -290,9 +290,9 @@ function Tenant() {
 
     const navigateFromSidebar = useCallback(
         (path: string) => {
-            runViewTransition(() => navigate(path))
+            setSidebarOpen(false)
             window.setTimeout(() => {
-                setSidebarOpen(false)
+                runViewTransition(() => navigate(path))
             }, MOBILE_SHEET_CLOSE_MS)
         },
         [navigate],

package/src/main.tsx

@@ -89,6 +89,15 @@ function Main() {
     const [, setDialogContent] = useDialog()
     const { toast } = useToast()
 
+    useEffect(() => {
+        const root = document.documentElement
+        if (mode === "app" && !maintenance) {
+            root.dataset.mode = "app"
+        } else {
+            delete root.dataset.mode
+        }
+    }, [mode, maintenance])
+
     useEffect(() => {
         if (mode === "maintenance") return
         const getRoutes = () => {