@tulip-systems/drive 0.9.0 → 0.10.1

package/dist/providers/local/lib/schema.d.mts

@@ -49,7 +49,7 @@ declare const nodes: drizzle_orm_pg_core0.PgTableWithColumns<{
       tableName: "nodes";
       dataType: "string";
       columnType: "PgEnumColumn";
-      data: "folder" | "file";
+      data: "file" | "folder";
       driverParam: string;
       notNull: false;
       hasDefault: false;
@@ -604,7 +604,7 @@ declare const driveSchema: {
         tableName: "nodes";
         dataType: "string";
         columnType: "PgEnumColumn";
-        data: "folder" | "file";
+        data: "file" | "folder";
         driverParam: string;
         notNull: false;
         hasDefault: false;

package/dist/providers/local/lib/search-params.d.mts

@@ -4,7 +4,7 @@ import * as nuqs_server0 from "nuqs/server";
 declare const localDriveTreeFilterSearchParams: {
   readonly subtypes: nuqs_server0.SingleParserBuilder<("image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other")[] | null>;
   readonly hidden: nuqs_server0.SingleParserBuilder<boolean | null>;
-  readonly types: nuqs_server0.SingleParserBuilder<("folder" | "file")[] | null>;
+  readonly types: nuqs_server0.SingleParserBuilder<("file" | "folder")[] | null>;
   readonly contentTypes: nuqs_server0.SingleParserBuilder<string[] | null>;
   readonly nodeIds: nuqs_server0.SingleParserBuilder<string[] | null>;
   readonly isArchived: nuqs_server0.SingleParserBuilder<boolean | null>;

package/dist/providers/local/lib/service.server.d.mts

@@ -104,21 +104,21 @@ declare class LocalDrive<TSchema extends TDatabaseSchema> implements DriveReader
     id: string | null;
     namespace: string;
   }): Promise<(Pick<{
-    type: "folder" | "file" | null;
-    subtype: "image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other";
-    id: string;
-    createdAt: Date;
-    updatedAt: Date;
     name: string;
     namespace: string;
-    size: number | null;
+    parentId: string | null;
     contentType: string | null;
+    size: number | null;
+    type: "file" | "folder" | null;
     readonly: boolean | null;
+    id: string;
+    subtype: "image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other";
+    createdAt: Date;
+    updatedAt: Date;
     hidden: boolean | null;
     archivedAt: Date | null;
-    parentId: string | null;
     assetId: string | null;
-  }, "id" | "name" | "parentId"> & {
+  }, "name" | "parentId" | "id"> & {
     depth: number;
   })[]>;
   /**
@@ -172,7 +172,7 @@ declare class LocalDrive<TSchema extends TDatabaseSchema> implements DriveReader
     updatedAt: Date;
     name: string;
     namespace: string;
-    type: "folder" | "file";
+    type: "file" | "folder";
     subtype: "image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other";
     size: number | null;
     contentType: string | null;
@@ -211,7 +211,7 @@ declare class LocalDrive<TSchema extends TDatabaseSchema> implements DriveReader
     updatedAt: Date;
     name: string;
     namespace: string;
-    type: "folder" | "file";
+    type: "file" | "folder";
     subtype: "image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other";
     size: number | null;
     contentType: string | null;
@@ -309,7 +309,7 @@ declare class LocalDrive<TSchema extends TDatabaseSchema> implements DriveReader
     updatedAt: Date;
     name: string;
     namespace: string;
-    type: "folder" | "file";
+    type: "file" | "folder";
     subtype: "image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other";
     size: number | null;
     contentType: string | null;
@@ -344,7 +344,7 @@ declare class LocalDrive<TSchema extends TDatabaseSchema> implements DriveReader
     updatedAt: Date;
     name: string;
     namespace: string;
-    type: "folder" | "file";
+    type: "file" | "folder";
     subtype: "image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other";
     size: number | null;
     contentType: string | null;
@@ -378,7 +378,7 @@ declare class LocalDrive<TSchema extends TDatabaseSchema> implements DriveReader
     updatedAt: Date;
     name: string;
     namespace: string;
-    type: "folder" | "file";
+    type: "file" | "folder";
     subtype: "image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other";
     size: number | null;
     contentType: string | null;
@@ -412,7 +412,7 @@ declare class LocalDrive<TSchema extends TDatabaseSchema> implements DriveReader
     updatedAt: Date;
     name: string;
     namespace: string;
-    type: "folder" | "file";
+    type: "file" | "folder";
     subtype: "image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other";
     size: number | null;
     contentType: string | null;
@@ -443,7 +443,7 @@ declare class LocalDrive<TSchema extends TDatabaseSchema> implements DriveReader
     updatedAt: Date;
     name: string;
     namespace: string;
-    type: "folder" | "file";
+    type: "file" | "folder";
     subtype: "image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other";
     size: number | null;
     contentType: string | null;

package/dist/providers/local/lib/validators.d.mts

@@ -15,8 +15,8 @@ declare const localDriveNodeSchema: z.ZodObject<{
   name: z.ZodString;
   namespace: z.ZodString;
   type: z.ZodEnum<{
-    folder: "folder";
     file: "file";
+    folder: "folder";
   }>;
   subtype: z.ZodEnum<{
     image: "image";
@@ -68,8 +68,8 @@ declare const localDriveNodeWithChildrenSchema: z.ZodObject<{
   name: z.ZodString;
   namespace: z.ZodString;
   type: z.ZodEnum<{
-    folder: "folder";
     file: "file";
+    folder: "folder";
   }>;
   subtype: z.ZodEnum<{
     image: "image";
@@ -106,8 +106,8 @@ declare const localDriveNodeWithChildrenSchema: z.ZodObject<{
     name: z.ZodString;
     namespace: z.ZodString;
     type: z.ZodEnum<{
-      folder: "folder";
       file: "file";
+      folder: "folder";
     }>;
     subtype: z.ZodEnum<{
       image: "image";
@@ -227,8 +227,8 @@ declare const localDriveTreeFiltersSchema: z.ZodPipe<z.ZodObject<{
   }>>>>;
   hidden: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
   types: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodEnum<{
-    folder: "folder";
     file: "file";
+    folder: "folder";
   }>>>>;
   contentTypes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
   nodeIds: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
@@ -241,7 +241,7 @@ declare const localDriveTreeFiltersSchema: z.ZodPipe<z.ZodObject<{
   namespace: string;
   parentId: string | null;
   subtypes?: ("image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other")[] | null | undefined;
-  types?: ("folder" | "file")[] | null | undefined;
+  types?: ("file" | "folder")[] | null | undefined;
   contentTypes?: string[] | null | undefined;
   nodeIds?: string[] | null | undefined;
 }, {
@@ -249,7 +249,7 @@ declare const localDriveTreeFiltersSchema: z.ZodPipe<z.ZodObject<{
   parentId: string | null;
   subtypes?: ("image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other")[] | null | undefined;
   hidden?: boolean | null | undefined;
-  types?: ("folder" | "file")[] | null | undefined;
+  types?: ("file" | "folder")[] | null | undefined;
   contentTypes?: string[] | null | undefined;
   nodeIds?: string[] | null | undefined;
   isArchived?: boolean | null | undefined;
@@ -270,8 +270,8 @@ declare const localDriveFlatFiltersSchema: z.ZodPipe<z.ZodObject<{
   }>>>>;
   hidden: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
   types: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodEnum<{
-    folder: "folder";
     file: "file";
+    folder: "folder";
   }>>>>;
   contentTypes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
   nodeIds: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
@@ -281,14 +281,14 @@ declare const localDriveFlatFiltersSchema: z.ZodPipe<z.ZodObject<{
   hidden: boolean;
   isArchived: boolean;
   subtypes?: ("image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other")[] | null | undefined;
-  types?: ("folder" | "file")[] | null | undefined;
+  types?: ("file" | "folder")[] | null | undefined;
   contentTypes?: string[] | null | undefined;
   nodeIds?: string[] | null | undefined;
   namespace?: string | undefined;
 }, {
   subtypes?: ("image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other")[] | null | undefined;
   hidden?: boolean | null | undefined;
-  types?: ("folder" | "file")[] | null | undefined;
+  types?: ("file" | "folder")[] | null | undefined;
   contentTypes?: string[] | null | undefined;
   nodeIds?: string[] | null | undefined;
   isArchived?: boolean | null | undefined;
@@ -318,8 +318,8 @@ declare const listLocalDriveTreeInputSchema: z.ZodObject<{
     }>>>>;
     hidden: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
     types: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodEnum<{
-      folder: "folder";
       file: "file";
+      folder: "folder";
     }>>>>;
     contentTypes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
     nodeIds: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
@@ -332,7 +332,7 @@ declare const listLocalDriveTreeInputSchema: z.ZodObject<{
     namespace: string;
     parentId: string | null;
     subtypes?: ("image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other")[] | null | undefined;
-    types?: ("folder" | "file")[] | null | undefined;
+    types?: ("file" | "folder")[] | null | undefined;
     contentTypes?: string[] | null | undefined;
     nodeIds?: string[] | null | undefined;
   }, {
@@ -340,7 +340,7 @@ declare const listLocalDriveTreeInputSchema: z.ZodObject<{
     parentId: string | null;
     subtypes?: ("image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other")[] | null | undefined;
     hidden?: boolean | null | undefined;
-    types?: ("folder" | "file")[] | null | undefined;
+    types?: ("file" | "folder")[] | null | undefined;
     contentTypes?: string[] | null | undefined;
     nodeIds?: string[] | null | undefined;
     isArchived?: boolean | null | undefined;
@@ -372,8 +372,8 @@ declare const listLocalDriveFlatInputSchema: z.ZodObject<{
     }>>>>;
     hidden: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
     types: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodEnum<{
-      folder: "folder";
       file: "file";
+      folder: "folder";
     }>>>>;
     contentTypes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
     nodeIds: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
@@ -383,14 +383,14 @@ declare const listLocalDriveFlatInputSchema: z.ZodObject<{
     hidden: boolean;
     isArchived: boolean;
     subtypes?: ("image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other")[] | null | undefined;
-    types?: ("folder" | "file")[] | null | undefined;
+    types?: ("file" | "folder")[] | null | undefined;
     contentTypes?: string[] | null | undefined;
     nodeIds?: string[] | null | undefined;
     namespace?: string | undefined;
   }, {
     subtypes?: ("image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other")[] | null | undefined;
     hidden?: boolean | null | undefined;
-    types?: ("folder" | "file")[] | null | undefined;
+    types?: ("file" | "folder")[] | null | undefined;
     contentTypes?: string[] | null | undefined;
     nodeIds?: string[] | null | undefined;
     isArchived?: boolean | null | undefined;
@@ -420,8 +420,8 @@ declare const getLocalDriveNodesByParentIdInputSchema: z.ZodObject<{
     }>>>>;
     hidden: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
     types: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodEnum<{
-      folder: "folder";
       file: "file";
+      folder: "folder";
     }>>>>;
     contentTypes: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
     nodeIds: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodString>>>;
@@ -434,7 +434,7 @@ declare const getLocalDriveNodesByParentIdInputSchema: z.ZodObject<{
     namespace: string;
     parentId: string | null;
     subtypes?: ("image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other")[] | null | undefined;
-    types?: ("folder" | "file")[] | null | undefined;
+    types?: ("file" | "folder")[] | null | undefined;
     contentTypes?: string[] | null | undefined;
     nodeIds?: string[] | null | undefined;
   }, {
@@ -442,7 +442,7 @@ declare const getLocalDriveNodesByParentIdInputSchema: z.ZodObject<{
     parentId: string | null;
     subtypes?: ("image" | "document" | "spreadsheet" | "video" | "audio" | "archive" | "other")[] | null | undefined;
     hidden?: boolean | null | undefined;
-    types?: ("folder" | "file")[] | null | undefined;
+    types?: ("file" | "folder")[] | null | undefined;
     contentTypes?: string[] | null | undefined;
     nodeIds?: string[] | null | undefined;
     isArchived?: boolean | null | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tulip-systems/drive",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "type": "module",
   "sideEffects": false,
   "license": "AGPL-3.0",
@@ -65,7 +65,7 @@
     "uuid": "^14.0.0",
     "vaul": "^1.1.2",
     "zod": "^4.4.3",
-    "@tulip-systems/core": "0.9.0"
+    "@tulip-systems/core": "0.10.1"
   },
   "peerDependencies": {
     "@tailwindcss/typography": "^0.5.19",

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { useDraggable, useDroppable } from "@dnd-kit/react";
-import type { CommandDef } from "@tulip-systems/core/commands";
+import type { CommandFor } from "@tulip-systems/core/commands";
 import {
   ContextCommandMenu,
   ContextCommandMenuContent,
@@ -29,7 +29,7 @@ import { useDriveSelectionContext } from "./selection.client";
  */
 type DriveGridCardProps<TData extends DriveNode> = ComponentProps<"div"> & {
   node: TData;
-  commands?: CommandDef[];
+  commands?: CommandFor<TData>[];
   imageLoader?: (props: ImageLoaderProps) => string;
   unoptimized?: boolean;
 };

package/src/entry.client.ts

@@ -5,3 +5,8 @@ export * from "@/components/grid-card.client";
  */
 export * from "@/components/selection.client";
 export * from "@/components/view.client";
+
+/**
+ * Lib
+ */
+export * from "@/lib/view-config.client";

package/src/lib/view-config.client.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import type { VisibilityState } from "@tanstack/react-table";
+import type { CommandFor } from "@tulip-systems/core/commands";
+import type {
+  Selection,
+  TableColumnDef,
+  TableFiltersResult,
+  TableMetaInput,
+} from "@tulip-systems/core/data-tables";
+import {
+  createTableConfig,
+  type TableConfigContextValue,
+  TableConfigProvider,
+  type useInfiniteStrategy,
+  useTableConfigContext,
+} from "@tulip-systems/core/data-tables/client";
+import { createContext, type PropsWithChildren, use } from "react";
+
+/**
+ * DriveViewConfig context
+ */
+export type DriveViewCommands<TData, TMeta = object> = {
+  node?: CommandFor<TData, TMeta>[];
+  selectedNodes?: CommandFor<TData[], TMeta>[];
+};
+
+type DriveViewConfigContextValue<TData, TMeta = object> = {
+  commands?: DriveViewCommands<TData, TMeta>;
+};
+
+const DriveViewConfigContext = createContext({} as DriveViewConfigContextValue<any, any>);
+
+/**
+ * Drive View configuration
+ */
+export type DriveViewConfig<
+  TData,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+> = DriveViewConfigContextValue<TData, TMeta> &
+  Omit<TableConfigContextValue<TData, TableFiltersResult, TMeta>, "commands">;
+
+export type CreateDriveViewConfigInput<
+  TData,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+> = {
+  queryData: TData[];
+  columns: TableColumnDef<TData>[];
+  strategy: ReturnType<typeof useInfiniteStrategy>;
+  commands?: DriveViewCommands<TData, TMeta>;
+  meta?: TMeta;
+  columnVisibility?: VisibilityState;
+  selection?: Selection;
+  getRowId?: (row: TData) => string;
+};
+
+export function createDriveViewConfig<
+  TData,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+>({
+  queryData,
+  columns,
+  strategy,
+  commands,
+  meta,
+  columnVisibility,
+  selection,
+  getRowId = (row) => (row as { id: string }).id,
+}: CreateDriveViewConfigInput<TData, TMeta>) {
+  const { commands: _commands, ...table } = createTableConfig<TData, TableFiltersResult, TMeta>({
+    queryData,
+    columns,
+    getRowId,
+    strategy,
+    meta,
+    columnVisibility,
+    selection,
+  });
+
+  return { ...table, commands } as DriveViewConfig<TData, TMeta>;
+}
+
+/**
+ * DriveViewConfigProvider component
+ * Wraps the children components with the DriveViewConfigContext provider
+ * and provides the configuration for the drive view
+ */
+type DriveViewConfigProviderProps<
+  TData,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+> = PropsWithChildren<{
+  config: ReturnType<typeof createDriveViewConfig<TData, TMeta>>;
+}>;
+
+export function DriveViewConfigProvider<
+  TData,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+>({ config, children }: DriveViewConfigProviderProps<TData, TMeta>) {
+  return (
+    <DriveViewConfigContext value={config}>
+      <TableConfigProvider config={{ ...config, commands: config.commands?.selectedNodes }}>
+        {children}
+      </TableConfigProvider>
+    </DriveViewConfigContext>
+  );
+}
+
+export function useDriveViewConfig<
+  TData,
+  TMeta extends TableMetaInput<TData> = TableMetaInput<TData>,
+>() {
+  const tableConfig = useTableConfigContext<TData, TableFiltersResult, TMeta>();
+  const viewConfig = use(DriveViewConfigContext) as DriveViewConfigContextValue<TData, TMeta>;
+
+  return { ...tableConfig, ...viewConfig } as DriveViewConfig<TData, TMeta>;
+}

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

@@ -1,16 +1,12 @@
 "use client";
 
 import type { VisibilityState } from "@tanstack/react-table";
-import type { CommandDef } from "@tulip-systems/core/commands";
 import { FloatingCommandMenu } from "@tulip-systems/core/commands/client";
 import { type TableColumnDef, TableLayout, TableSkeleton } from "@tulip-systems/core/data-tables";
 import {
-  createTableConfig,
   DataTable,
   type InfiniteStrategyMeta,
-  TableConfigProvider,
   type useInfiniteStrategy,
-  useTableConfigContext,
 } from "@tulip-systems/core/data-tables/client";
 import { type ComponentProps, useMemo } from "react";
 import {
@@ -22,6 +18,12 @@ import {
 import { DriveGridCard, DriveGridCardSkeleton } from "@/components/grid-card.client";
 import { useDriveSelectionContext } from "@/components/selection.client";
 import { useDriveViewContext } from "@/components/view.client";
+import {
+  createDriveViewConfig,
+  type DriveViewCommands,
+  DriveViewConfigProvider,
+  useDriveViewConfig,
+} from "@/lib/view-config.client";
 import { googleDriveColumns } from "../config/columns-data";
 import type { GoogleDriveNode } from "../lib/validators";
 import { useGoogleDriveContext } from "./provider.client";
@@ -34,7 +36,7 @@ type GoogleDriveViewProviderProps<TData extends GoogleDriveNode = GoogleDriveNod
     queryData: TData[];
     columns?: TableColumnDef<TData>[];
     strategy: ReturnType<typeof useInfiniteStrategy>;
-    commands?: CommandDef[];
+    commands?: DriveViewCommands<TData>;
     columnVisibility?: VisibilityState;
   };
 
@@ -49,14 +51,9 @@ export function GoogleDriveViewProvider<TData extends GoogleDriveNode = GoogleDr
 }: GoogleDriveViewProviderProps<TData>) {
   const { meta } = useGoogleDriveContext();
   const selectionContext = useDriveSelectionContext();
-
-  /**
-   * Table
-   */
-  const config = createTableConfig<TData>({
+  const config = createDriveViewConfig<TData>({
     queryData,
     columns,
-    getRowId: (row) => row.id,
     strategy,
     commands,
     meta,
@@ -65,9 +62,9 @@ export function GoogleDriveViewProvider<TData extends GoogleDriveNode = GoogleDr
   });
 
   return (
-    <TableConfigProvider config={config}>
+    <DriveViewConfigProvider config={config}>
       <TableLayout {...props}>{children}</TableLayout>
-    </TableConfigProvider>
+    </DriveViewConfigProvider>
   );
 }
 
@@ -92,8 +89,7 @@ export function GoogleDriveView() {
  * GoogleDriveGrid
  */
 function GoogleDriveGrid(props: ComponentProps<"div">) {
-  const { queryData, strategy, commands, selection, meta } =
-    useTableConfigContext<GoogleDriveNode>();
+  const { queryData, strategy, commands, selection, meta } = useDriveViewConfig<GoogleDriveNode>();
   const { rowCount, paginationState } = strategy;
   const { isFetching, isFetchingNextPage, fetchNextPage } = strategy.meta as InfiniteStrategyMeta;
 
@@ -108,7 +104,7 @@ function GoogleDriveGrid(props: ComponentProps<"div">) {
     <DriveGrid {...props}>
       {queryData.length > 0 ? (
         queryData.map((node) => (
-          <DriveGridCard key={node.id} node={node} commands={commands} unoptimized />
+          <DriveGridCard key={node.id} node={node} commands={commands?.node} unoptimized />
         ))
       ) : (
         <DriveGridEmpty title="Geen resultaten gevonden" />
@@ -126,10 +122,10 @@ function GoogleDriveGrid(props: ComponentProps<"div">) {
         isFetchingNextPage={isFetchingNextPage}
       />
 
-      {commands && commands.length > 0 && (
+      {commands?.selectedNodes && commands.selectedNodes.length > 0 && (
         <FloatingCommandMenu
-          data={selectedData as never}
-          commands={commands as never}
+          data={selectedData}
+          commands={commands.selectedNodes}
           meta={meta}
           state={selectedData.length > 0 ? "open" : "closed"}
           onSuccess={() => selection?.setRowSelection?.({})}

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

@@ -1,16 +1,12 @@
 "use client";
 
 import type { VisibilityState } from "@tanstack/react-table";
-import type { CommandDef } from "@tulip-systems/core/commands";
 import { FloatingCommandMenu } from "@tulip-systems/core/commands/client";
 import { type TableColumnDef, TableLayout, TableSkeleton } from "@tulip-systems/core/data-tables";
 import {
-  createTableConfig,
   DataTable,
   type InfiniteStrategyMeta,
-  TableConfigProvider,
   type useInfiniteStrategy,
-  useTableConfigContext,
 } from "@tulip-systems/core/data-tables/client";
 import { type ComponentProps, useMemo } from "react";
 import {
@@ -22,6 +18,12 @@ import {
 import { DriveGridCard, DriveGridCardSkeleton } from "@/components/grid-card.client";
 import { useDriveSelectionContext } from "@/components/selection.client";
 import { useDriveViewContext } from "@/components/view.client";
+import {
+  createDriveViewConfig,
+  type DriveViewCommands,
+  DriveViewConfigProvider,
+  useDriveViewConfig,
+} from "@/lib/view-config.client";
 import { localDriveColumns } from "../config/columns-data";
 import { localDriveImageLoader } from "../lib/helpers";
 import type { LocalDriveNodeWithAsset } from "../lib/validators";
@@ -33,7 +35,7 @@ type LocalDriveViewProviderProps<TData extends LocalDriveNodeWithAsset = LocalDr
     queryData: TData[];
     columns?: TableColumnDef<TData>[];
     strategy: ReturnType<typeof useInfiniteStrategy>;
-    commands?: CommandDef[];
+    commands?: DriveViewCommands<TData>;
     columnVisibility?: VisibilityState;
   };
 
@@ -50,11 +52,9 @@ export function LocalDriveViewProvider<
 }: LocalDriveViewProviderProps<TData>) {
   const { meta } = useLocalDriveContext();
   const selectionContext = useDriveSelectionContext();
-
-  const config = createTableConfig<TData>({
+  const config = createDriveViewConfig<TData>({
     queryData,
     columns,
-    getRowId: (row) => row.id,
     strategy,
     commands,
     meta,
@@ -63,9 +63,9 @@ export function LocalDriveViewProvider<
   });
 
   return (
-    <TableConfigProvider config={config}>
+    <DriveViewConfigProvider config={config}>
       <TableLayout {...props}>{children}</TableLayout>
-    </TableConfigProvider>
+    </DriveViewConfigProvider>
   );
 }
 
@@ -80,7 +80,7 @@ export function LocalDriveView() {
 
 function LocalDriveGrid(props: ComponentProps<"div">) {
   const { queryData, strategy, commands, selection, meta } =
-    useTableConfigContext<LocalDriveNodeWithAsset>();
+    useDriveViewConfig<LocalDriveNodeWithAsset>();
   const { optimistic } = useLocalDriveUploadZone();
 
   const { rowCount, paginationState } = strategy;
@@ -102,7 +102,7 @@ function LocalDriveGrid(props: ComponentProps<"div">) {
             <DriveGridCard
               key={node.id}
               node={node}
-              commands={commands}
+              commands={commands?.node}
               imageLoader={localDriveImageLoader}
             />
           ))
@@ -122,10 +122,10 @@ function LocalDriveGrid(props: ComponentProps<"div">) {
         isFetchingNextPage={isFetchingNextPage}
       />
 
-      {commands && commands.length > 0 && (
+      {commands?.selectedNodes && commands?.selectedNodes.length > 0 && (
         <FloatingCommandMenu
-          data={selectedData as never}
-          commands={commands as never}
+          data={selectedData}
+          commands={commands.selectedNodes}
           meta={meta}
           state={selectedData.length > 0 ? "open" : "closed"}
           onSuccess={() => {