@tulip-systems/drive 0.7.0 → 0.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tulip-systems/drive",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "type": "module",
   "sideEffects": false,
   "license": "AGPL-3.0",
@@ -65,7 +65,7 @@
     "uuid": "^13.0.0",
     "vaul": "^1.1.2",
     "zod": "^4.3.6",
-    "@tulip-systems/core": "0.8.0"
+    "@tulip-systems/core": "0.8.1"
   },
   "peerDependencies": {
     "@better-auth/passkey": "^1.5.5",

package/src/components/grid-card.client.tsx

@@ -17,7 +17,7 @@ import {
   Skeleton,
 } from "@tulip-systems/core/components";
 import { FolderIcon } from "lucide-react";
-import Image from "next/image";
+import Image, { type ImageLoaderProps } from "next/image";
 import { useRouter } from "next/navigation";
 import type { ComponentProps } from "react";
 import { nodeSubtypeConfig, nodeSubtypeVariants } from "@/config/types";
@@ -30,6 +30,7 @@ import { useDriveSelectionContext } from "./selection.client";
 type DriveGridCardProps<TData extends DriveNode> = ComponentProps<"div"> & {
   node: TData;
   commands?: CommandDef<TData>[];
+  imageLoader?: (props: ImageLoaderProps) => string;
 };
 
 export function DriveGridCard<TData extends DriveNode>(props: DriveGridCardProps<TData>) {
@@ -142,6 +143,7 @@ export function DriveGridFolderCard<TData extends DriveNode>({
 export function DriveGridFileCard<TData extends DriveNode>({
   node,
   commands,
+  imageLoader,
   className,
   ...props
 }: DriveGridCardProps<TData>) {
@@ -218,6 +220,7 @@ export function DriveGridFileCard<TData extends DriveNode>({
                 alt={node.name}
                 width={200}
                 height={200}
+                loader={imageLoader}
                 className="h-full w-full object-cover"
               />
             ) : (

package/src/providers/google/components/view.client.tsx

@@ -23,6 +23,7 @@ import { DriveGridCard, DriveGridCardSkeleton } from "@/components/grid-card.cli
 import { useDriveSelectionContext } from "@/components/selection.client";
 import { useDriveViewContext } from "@/components/view.client";
 import { googleDriveColumns } from "../config/columns-data";
+import { googleDriveImageLoader } from "../lib/helpers";
 import type { GoogleDriveNode } from "../lib/validators";
 import { useGoogleDriveContext } from "./provider.client";
 
@@ -106,7 +107,14 @@ function GoogleDriveGrid(props: ComponentProps<"div">) {
   return (
     <DriveGrid {...props}>
       {queryData.length > 0 ? (
-        queryData.map((node) => <DriveGridCard key={node.id} node={node} commands={commands} />)
+        queryData.map((node) => (
+          <DriveGridCard
+            key={node.id}
+            node={node}
+            commands={commands}
+            imageLoader={googleDriveImageLoader}
+          />
+        ))
       ) : (
         <DriveGridEmpty title="Geen resultaten gevonden" />
       )}

package/src/providers/google/lib/helpers.ts

@@ -1,5 +1,6 @@
 import { Readable } from "node:stream";
 import type { ObjectBodyInput } from "@tulip-systems/core/storage";
+import type { ImageLoaderProps } from "next/image";
 
 /**
  * Escapes dynamic values before interpolating them into Google Drive `q` strings.
@@ -35,3 +36,11 @@ export function toGoogleDriveReadable(body: ObjectBodyInput) {
   if (typeof body === "string") return Readable.from([body]);
   return Readable.from([body]);
 }
+
+/**
+ * Use Google-provided thumbnail URLs directly instead of routing them through
+ * the Next.js optimizer.
+ */
+export function googleDriveImageLoader({ src }: ImageLoaderProps) {
+  return src;
+}

package/src/providers/local/components/provider.client.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Allowed } from "@tulip-systems/core/auth/client";
+import { cn } from "@tulip-systems/core/lib";
 import { createContext, type PropsWithChildren, use } from "react";
 import type { DriveContextValue } from "@/components/context.client";
 import { DriveDragDropProvider, type DriveDragDropProviderProps } from "@/components/dnd.client";
@@ -71,7 +72,7 @@ export function LocalDriveProvider({
             <LocalDriveContext value={{ namespace, permission, meta, readonly }}>
               <LocalDriveUploadZone
                 disabled={isDisabled}
-                className={className}
+                className={cn("flex min-h-dvh flex-col", className)}
                 variables={{ namespace, parentId }}
                 driveUploadClient={driveUploadClient}
                 uploadHooks={uploadHooks}

package/src/providers/local/components/upload-zone-context.client.tsx

@@ -13,6 +13,7 @@ export type LocalDriveUploadZoneContextValue = {
   onRemove: (ids: string[]) => Promise<void>;
   optimistic?: {
     add?: (newValue: LocalDriveNodeWithAsset) => Promise<void> | void;
+    replace?: (input: { id: string; newValue: LocalDriveNodeWithAsset }) => Promise<void> | void;
     remove?: (ids: string[]) => Promise<void> | void;
     invalidate?: () => Promise<void> | void;
     cancel?: () => Promise<void> | void;

package/src/providers/local/components/upload-zone.client.tsx

@@ -109,7 +109,20 @@ export function LocalDriveUploadZone({
 
       await optimistic?.add?.(newNode);
     },
-    onSuccess: async (data) => {
+    onSuccess: async (data, variables) => {
+      await optimistic?.replace?.({
+        id: variables.uploadId,
+        newValue: {
+          ...data,
+          asset: {
+            status: "ready",
+            name: data.name,
+            contentType: data.contentType,
+            size: data.size,
+            visibility: variables.visibility || "private",
+          } as StorageAsset,
+        },
+      });
       await onUploadCompleted?.(data);
       toast.success(`Succesvol geupload: ${data.name}`);
     },

package/src/providers/local/components/view.client.tsx

@@ -23,6 +23,7 @@ import { DriveGridCard, DriveGridCardSkeleton } from "@/components/grid-card.cli
 import { useDriveSelectionContext } from "@/components/selection.client";
 import { useDriveViewContext } from "@/components/view.client";
 import { localDriveColumns } from "../config/columns-data";
+import { localDriveImageLoader } from "../lib/helpers";
 import type { LocalDriveNodeWithAsset } from "../lib/validators";
 import { useLocalDriveContext } from "./provider.client";
 import { useLocalDriveUploadZone } from "./upload-zone-context.client";
@@ -80,7 +81,7 @@ function LocalDriveGrid(props: ComponentProps<"div">) {
   const { queryData, strategy, commands, selection, meta } =
     useTableConfigContext<LocalDriveNodeWithAsset>();
   const { optimistic } = useLocalDriveUploadZone();
-  
+
   const { rowCount, paginationState } = strategy;
   const { isFetching, isFetchingNextPage, fetchNextPage } = strategy.meta as InfiniteStrategyMeta;
 
@@ -96,7 +97,14 @@ function LocalDriveGrid(props: ComponentProps<"div">) {
       {queryData.length > 0 ? (
         queryData
           .filter((node) => !node.hidden)
-          .map((node) => <DriveGridCard key={node.id} node={node} commands={commands} />)
+          .map((node) => (
+            <DriveGridCard
+              key={node.id}
+              node={node}
+              commands={commands}
+              imageLoader={localDriveImageLoader}
+            />
+          ))
       ) : (
         <DriveGridEmpty title="Geen resultaten gevonden" />
       )}