@stoker-platform/web-app 0.5.123 → 0.5.125

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stoker-platform/web-app
 
+## 0.5.125
+
+### Patch Changes
+
+- feat: improve mobile collection transitions
+
+## 0.5.124
+
+### Patch Changes
+
+- feat: use inclusive dates for all day events
+
 ## 0.5.123
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.123",
+    "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/Calendar.tsx

@@ -85,6 +85,21 @@ import { useConnection } from "./providers/ConnectionProvider"
 import { SortingState } from "@tanstack/react-table"
 import { cn } from "./lib/utils"
 
+function getExclusiveEnd(inclusiveEnd: Date, timezone: string): Date {
+    return DateTime.fromJSDate(inclusiveEnd).setZone(timezone).startOf("day").plus({ days: 1 }).toJSDate()
+}
+
+function getInclusiveEnd(exclusiveEnd: Date, timezone: string): Date {
+    return DateTime.fromJSDate(exclusiveEnd).setZone(timezone).startOf("day").minus({ days: 1 }).toJSDate()
+}
+
+function isAllDayEvent(record: StokerRecord, calendarConfig: CalendarConfig): boolean {
+    if (calendarConfig.allDayField !== undefined) {
+        return !!record[calendarConfig.allDayField]
+    }
+    return !!(calendarConfig.fullCalendarLarge?.defaultAllDay || calendarConfig.fullCalendarSmall?.defaultAllDay)
+}
+
 function Row({
     collection,
     record,
@@ -655,10 +670,13 @@ export function Calendar({
                     resourceEditable: !isPendingServer && !isUpdateDisabled && hasReourceUpdateAccess,
                 }
                 if (calendarConfig.endField && record[calendarConfig.endField]) {
-                    event.end = record[calendarConfig.endField].toDate()
+                    const rawEnd = record[calendarConfig.endField].toDate()
+                    event.end = isAllDayEvent(record, calendarConfig) ? getExclusiveEnd(rawEnd, timezone) : rawEnd
                 }
                 if (calendarConfig.allDayField !== undefined) {
                     event.allDay = record[calendarConfig.allDayField]
+                } else if (isAllDayEvent(record, calendarConfig)) {
+                    event.allDay = true
                 }
                 if (calendarConfig.resourceField && record[calendarConfig.resourceField] !== undefined) {
                     const resource = getResource(labels.collection, record, calendarConfig.resourceField)
@@ -722,6 +740,7 @@ export function Calendar({
         hasEndUpdateAccess,
         hasReourceUpdateAccess,
         isGlobalLoading,
+        timezone,
     ])
 
     const updateEvent = useCallback(
@@ -733,10 +752,23 @@ export function Calendar({
 
             const updatedFields: Partial<StokerRecord> = {}
             if (calendarConfig.startField && info.event.start) {
-                updatedFields[calendarConfig.startField] = Timestamp.fromDate(info.event.start)
+                const startDate = info.event.allDay
+                    ? DateTime.fromJSDate(info.event.start).setZone(timezone).startOf("day").toJSDate()
+                    : info.event.start
+                updatedFields[calendarConfig.startField] = Timestamp.fromDate(startDate)
             }
             if (calendarConfig.endField && info.event.start) {
-                updatedFields[calendarConfig.endField] = Timestamp.fromDate(info.event.end || info.event.start)
+                let endDate: Date
+                if (info.event.allDay) {
+                    if (info.event.end) {
+                        endDate = getInclusiveEnd(info.event.end, timezone)
+                    } else {
+                        endDate = DateTime.fromJSDate(info.event.start).setZone(timezone).startOf("day").toJSDate()
+                    }
+                } else {
+                    endDate = info.event.end ?? info.event.start
+                }
+                updatedFields[calendarConfig.endField] = Timestamp.fromDate(endDate)
             }
             if (calendarConfig.allDayField !== undefined) {
                 updatedFields[calendarConfig.allDayField] = info.event.allDay
@@ -816,7 +848,7 @@ export function Calendar({
                 })
             }
         },
-        [calendarConfig, list, unscheduledRecords, recordTitleField, recordTitle],
+        [calendarConfig, list, unscheduledRecords, recordTitleField, recordTitle, timezone],
     )
 
     const createEvent = useCallback(
@@ -1021,7 +1053,14 @@ export function Calendar({
             createEvent({ start: info.date })
         },
         select(info: DateSelectArg) {
-            createEvent({ start: info.start, end: info.end })
+            if (info.allDay && info.end) {
+                createEvent({
+                    start: info.start,
+                    end: getInclusiveEnd(info.end, timezone),
+                })
+            } else {
+                createEvent({ start: info.start, end: info.end })
+            }
         },
         eventInteractive: true,
         height: "auto",

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 = () => {