@stoker-platform/web-app 0.5.109 → 0.5.111

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @stoker-platform/web-app
 
+## 0.5.111
+
+### Patch Changes
+
+- fix: hide convert button when target collection create access not granted
+
+## 0.5.110
+
+### Patch Changes
+
+- feat: add image thumbnails option
+    - @stoker-platform/node-client@0.5.62
+    - @stoker-platform/utils@0.5.53
+    - @stoker-platform/web-client@0.5.63
+
 ## 0.5.109
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.109",
+    "version": "0.5.111",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {
@@ -51,9 +51,9 @@
         "@radix-ui/react-tooltip": "^1.2.8",
         "@react-google-maps/api": "^2.20.8",
         "@sentry/react": "^10.50.0",
-        "@stoker-platform/node-client": "0.5.61",
-        "@stoker-platform/utils": "0.5.52",
-        "@stoker-platform/web-client": "0.5.62",
+        "@stoker-platform/node-client": "0.5.62",
+        "@stoker-platform/utils": "0.5.53",
+        "@stoker-platform/web-client": "0.5.63",
         "@tanstack/react-table": "^8.21.3",
         "@types/react": "18.3.13",
         "@types/react-dom": "18.3.1",

package/src/Breadcrumbs.tsx

@@ -59,7 +59,7 @@ export const Breadcrumbs = ({
                 const titleField = field.titleField
                 if (titleField && field.includeFields?.includes(titleField)) {
                     const relationCollection = schema.collections[field.collection]
-                    if (!record[breadcrumb]) continue
+                    if (!(record[breadcrumb] && Object.values(record[breadcrumb])[0])) continue
                     recordMap[breadcrumb] = {
                         title: (Object.values(record[breadcrumb])[0] as StokerRelation)[titleField],
                         collection: relationCollection,

package/src/Files.tsx

@@ -27,6 +27,7 @@ import {
     getMetadata,
     updateMetadata,
 } from "firebase/storage"
+import type { FirebaseStorage } from "firebase/storage"
 import { getAuth } from "firebase/auth"
 import { Progress } from "./components/ui/progress"
 import { Button } from "./components/ui/button"
@@ -71,6 +72,83 @@ import {
 import { FilePermissionsDialog, FilePermissions } from "./FilePermissions"
 import { prepareFile } from "./utils/prepareFile"
 
+const IMAGE_FILE_EXTENSIONS = new Set([
+    "avif",
+    "bmp",
+    "gif",
+    "heic",
+    "heif",
+    "ico",
+    "jpeg",
+    "jpg",
+    "png",
+    "svg",
+    "webp",
+])
+
+const isImageFile = (name: string): boolean => {
+    const dot = name.lastIndexOf(".")
+    if (dot <= 0) return false
+    return IMAGE_FILE_EXTENSIONS.has(name.slice(dot + 1).toLowerCase())
+}
+
+interface FileImageThumbnailProps {
+    storage: FirebaseStorage
+    fullPath: string
+    fileName: string
+    pathPrefix: string
+}
+
+const FileImageThumbnail = ({ storage, fullPath, fileName, pathPrefix }: FileImageThumbnailProps) => {
+    const [phase, setPhase] = useState<"loading" | "display" | "fallback">("loading")
+    const [url, setUrl] = useState<string | null>(null)
+
+    useEffect(() => {
+        if (!pathPrefix || !fullPath.startsWith(pathPrefix)) {
+            setPhase("fallback")
+            return
+        }
+        let cancelled = false
+        setPhase("loading")
+        setUrl(null)
+        const load = async () => {
+            try {
+                const fileRef = ref(storage, fullPath)
+                const downloadUrl = await getDownloadURL(fileRef)
+                if (!cancelled) {
+                    setUrl(downloadUrl)
+                    setPhase("display")
+                }
+            } catch {
+                if (!cancelled) {
+                    setPhase("fallback")
+                }
+            }
+        }
+        void load()
+        return () => {
+            cancelled = true
+        }
+    }, [storage, fullPath, pathPrefix])
+
+    if (phase === "loading") {
+        return <div className="h-12 w-12 shrink-0 rounded-md border bg-muted animate-pulse" aria-hidden />
+    }
+    if (phase === "fallback" || !url) {
+        return <File className="h-5 w-5 shrink-0 text-gray-500" aria-hidden />
+    }
+    return (
+        <img
+            src={url}
+            alt={`Thumbnail for ${fileName}`}
+            className="max-h-12 w-12 shrink-0 rounded-md object-contain"
+            loading="lazy"
+            decoding="async"
+            onError={() => setPhase("fallback")}
+        />
+    )
+}
+
 interface FilesProps {
     collection: CollectionSchema
     record: StokerRecord | undefined
@@ -1038,9 +1116,20 @@ export const RecordFiles = ({ collection, record }: FilesProps) => {
                                         >
                                             <div className="flex items-center space-x-3 flex-1 min-w-0">
                                                 {item.isFolder ? (
-                                                    <Folder className="h-5 w-5 text-blue-500" />
+                                                    <Folder className="h-5 w-5 shrink-0 text-blue-500" />
+                                                ) : fileOptions?.thumbnails === true && isImageFile(item.name) ? (
+                                                    <FileImageThumbnail
+                                                        storage={storage}
+                                                        fullPath={item.fullPath}
+                                                        fileName={item.name}
+                                                        pathPrefix={
+                                                            record
+                                                                ? `${tenantId}/${labels.collection}/${record.id}`
+                                                                : ""
+                                                        }
+                                                    />
                                                 ) : (
-                                                    <File className="h-5 w-5 text-gray-500" />
+                                                    <File className="h-5 w-5 shrink-0 text-gray-500" />
                                                 )}
 
                                                 {editingFile === item.name && !isDisabled ? (

package/src/Form.tsx

@@ -2477,7 +2477,6 @@ function RecordForm({
     const [showDuplicateModal, setShowDuplicateModal] = useState(false)
     const [duplicateRecordData, setDuplicateRecordData] = useState<Partial<StokerRecord> | undefined>(undefined)
     const [convert, setConvert] = useState<Convert[] | undefined>(undefined)
-    const [convertAllowed, setConvertAllowed] = useState<Record<string, boolean>>({})
     const [showConvertModal, setShowConvertModal] = useState(false)
     const [convertRecordData, setConvertRecordData] = useState<Partial<StokerRecord> | undefined>(undefined)
     const [convertTargetCollection, setConvertTargetCollection] = useState<CollectionSchema | undefined>(undefined)
@@ -2504,6 +2503,21 @@ function RecordForm({
         return collectionAccess("Delete", collectionPermissions)
     }, [collection, permissions])
 
+    const convertMenuItems = useMemo(() => {
+        if (!convert?.length || !permissions?.Role) return []
+        const role = permissions.Role
+        return convert.filter((convertConfig) => {
+            const targetPermissions = permissions.collections?.[convertConfig.collection] as
+                | CollectionPermissions
+                | undefined
+            if (!collectionAccess("Create", targetPermissions as CollectionPermissions)) return false
+            if (convertConfig.roles && convertConfig.roles.length > 0) {
+                return convertConfig.roles.includes(role)
+            }
+            return true
+        })
+    }, [convert, permissions])
+
     const isPending = !!(id && isGlobalLoading.has(id))
     const isPendingServer = !!(id && isGlobalLoading.get(id)?.server)
     const [isAddingServer, setIsAddingServer] = useState(false)
@@ -3624,12 +3638,6 @@ function RecordForm({
                     ...prev,
                     [collection.labels.collection]: collectionTitles?.record || collection.labels.record,
                 }))
-                if (convert && convert.length > 0) {
-                    setConvertAllowed((prev) => ({
-                        ...prev,
-                        [collection.labels.collection]: !disableCreate,
-                    }))
-                }
             })
             permissionTitleResults.forEach(({ collection, titles: collectionTitles }) => {
                 setPermissionsTitles((prev) => ({
@@ -4502,10 +4510,17 @@ function RecordForm({
     const convertRecord = useCallback(
         async (targetCollection: CollectionSchema) => {
             if (!formValues || !originalRecord) return
+            const targetPermissions = permissions?.collections?.[targetCollection.labels.collection] as
+                | CollectionPermissions
+                | undefined
+            if (!collectionAccess("Create", targetPermissions as CollectionPermissions)) return
             const record = cloneDeep(originalRecord) as Partial<StokerRecord>
 
             const convertConfig = convert?.find((convert) => convert.collection === targetCollection.labels.collection)
             if (!convertConfig) return
+            if (convertConfig.roles && convertConfig.roles.length > 0 && permissions?.Role) {
+                if (!convertConfig.roles.includes(permissions.Role)) return
+            }
 
             const convertedRecord = await convertConfig.convert(record as StokerRecord)
 
@@ -4513,7 +4528,7 @@ function RecordForm({
             setConvertTargetCollection(targetCollection)
             setShowConvertModal(true)
         },
-        [formValues, originalRecord, permissions],
+        [formValues, originalRecord, permissions, convert],
     )
 
     const hasBreadcrumbs = useMemo(() => {
@@ -5651,7 +5666,7 @@ function RecordForm({
                                                 Duplicate
                                             </Button>
                                         )}
-                                        {convert && convert.length > 0 && (
+                                        {convertMenuItems.length > 0 && (
                                             <DropdownMenu>
                                                 <DropdownMenuTrigger asChild>
                                                     <Button variant="outline" disabled={isCreateDisabled}>
@@ -5660,36 +5675,19 @@ function RecordForm({
                                                     </Button>
                                                 </DropdownMenuTrigger>
                                                 <DropdownMenuContent align="end">
-                                                    {convert
-                                                        .filter((convertConfig) => {
-                                                            if (!permissions?.Role) return false
-                                                            if (!convertAllowed[convertConfig.collection]) return false
-                                                            if (
-                                                                convertConfig.roles &&
-                                                                convertConfig.roles.length > 0 &&
-                                                                permissions.collections?.[convertConfig.collection] &&
-                                                                collectionAccess(
-                                                                    "Create",
-                                                                    permissions.collections[convertConfig.collection],
-                                                                )
-                                                            ) {
-                                                                return convertConfig.roles.includes(permissions?.Role)
-                                                            }
-                                                            return true
-                                                        })
-                                                        .map((convertConfig) => {
-                                                            const targetCollection =
-                                                                schema.collections[convertConfig.collection]
-                                                            if (!targetCollection) return null
-                                                            return (
-                                                                <DropdownMenuItem
-                                                                    key={convertConfig.collection}
-                                                                    onClick={() => convertRecord(targetCollection)}
-                                                                >
-                                                                    {allRecordTitles[convertConfig.collection]}
-                                                                </DropdownMenuItem>
-                                                            )
-                                                        })}
+                                                    {convertMenuItems.map((convertConfig) => {
+                                                        const targetCollection =
+                                                            schema.collections[convertConfig.collection]
+                                                        if (!targetCollection) return null
+                                                        return (
+                                                            <DropdownMenuItem
+                                                                key={convertConfig.collection}
+                                                                onClick={() => convertRecord(targetCollection)}
+                                                            >
+                                                                {allRecordTitles[convertConfig.collection]}
+                                                            </DropdownMenuItem>
+                                                        )
+                                                    })}
                                                 </DropdownMenuContent>
                                             </DropdownMenu>
                                         )}