Add proposal implementation for discussion of bindings as first class in menu

Author: vibegui

apps/mesh/src/web/components/add-binding/add-binding-modal.tsx

@@ -0,0 +1,10 @@
+export { AddBindingModal } from "./add-binding-modal";
+export {
+  type BindingDefinition,
+  type BindingImplementation,
+  type BindingStatus,
+  BINDING_DEFINITIONS,
+  getBindingById,
+  getAvailableBindings,
+  getComingSoonBindings,
+} from "./binding-definitions";

apps/mesh/src/web/components/add-binding/binding-definitions.ts

@@ -10,12 +10,15 @@ import {
 } from "@deco/ui/components/dropdown-menu.tsx";
 import { Button } from "@deco/ui/components/button.tsx";
 import { DotsVertical, Eye, Edit01, Copy01, Trash01 } from "@untitledui/icons";
+import type { ReactNode } from "react";
 
 interface CollectionCardProps<T extends BaseCollectionEntity> {
   item: T;
   schema: JsonSchema;
   readOnly?: boolean;
   actions?: Record<string, (item: T) => void | Promise<void>>;
+  /** Custom icon renderer for the item */
+  renderIcon?: (item: T) => ReactNode;
 }
 
 function findImageField(schema: JsonSchema, item: unknown): string | undefined {
@@ -65,6 +68,7 @@ export function CollectionCard<T extends BaseCollectionEntity>({
   item,
   schema,
   actions,
+  renderIcon,
 }: CollectionCardProps<T>) {
   const iconUrl = findImageField(schema, item);
   const description =
@@ -80,12 +84,16 @@ export function CollectionCard<T extends BaseCollectionEntity>({
   return (
     <Card className="cursor-pointer transition-colors h-full flex flex-col group relative">
       <div className="flex flex-col gap-4 p-6 flex-1">
-        <IntegrationIcon
-          icon={iconUrl}
-          name={item.title}
-          size="md"
-          className="shrink-0 shadow-sm"
-        />
+        {renderIcon ? (
+          renderIcon(item)
+        ) : (
+          <IntegrationIcon
+            icon={iconUrl}
+            name={item.title}
+            size="md"
+            className="shrink-0 shadow-sm"
+          />
+        )}
         <div className="flex flex-col gap-0 flex-1">
           <h3 className="text-base font-medium text-foreground truncate">
             {item.title}

apps/mesh/src/web/components/add-binding/index.ts

@@ -1,3 +1,4 @@
+import type React from "react";
 import type { BaseCollectionEntity } from "@decocms/bindings/collections";
 import { CollectionCard } from "./collection-card.tsx";
 import { CollectionTableWrapper } from "./collection-table-wrapper.tsx";
@@ -83,6 +84,7 @@ export function CollectionsList<T extends BaseCollectionEntity>({
   hideToolbar = false,
   sortableFields = undefined,
   simpleDeleteOnly = false,
+  renderIcon,
 }: CollectionsListProps<T>) {
   // Generate sort options from columns or schema
   const sortOptions = columns
@@ -148,6 +150,7 @@ export function CollectionsList<T extends BaseCollectionEntity>({
                     schema={schema}
                     readOnly={readOnly}
                     actions={actions}
+                    renderIcon={renderIcon}
                   />
                 </div>
               ))}
@@ -156,7 +159,14 @@ export function CollectionsList<T extends BaseCollectionEntity>({
         </div>
       ) : (
         <CollectionTableWrapper
-          columns={getTableColumns(columns, schema, sortableFields, actions, simpleDeleteOnly)}
+          columns={getTableColumns(
+            columns,
+            schema,
+            sortableFields,
+            actions,
+            simpleDeleteOnly,
+            renderIcon,
+          )}
           data={data}
           sortKey={sortKey}
           sortDirection={sortDirection}
@@ -433,33 +443,52 @@ function generateColumnsFromSchema<T extends BaseCollectionEntity>(
   });
 }
 
+// Helper to generate icon column from renderIcon
+function generateIconColumn<T extends BaseCollectionEntity>(
+  renderIcon: (item: T) => React.ReactNode,
+): TableColumn<T> {
+  return {
+    id: "_icon",
+    header: "",
+    render: (row) => renderIcon(row),
+    cellClassName: "w-[50px] pr-0",
+    sortable: false,
+  };
+}
+
 // Helper to get table columns with actions column appended
 function getTableColumns<T extends BaseCollectionEntity>(
   columns: TableColumn<T>[] | undefined,
   schema: JsonSchema,
   sortableFields: string[] | undefined,
   actions: Record<string, (item: T) => void | Promise<void>>,
   simpleDeleteOnly: boolean,
+  renderIcon?: (item: T) => React.ReactNode,
 ): TableColumn<T>[] {
   const baseColumns =
     columns || generateColumnsFromSchema(schema, sortableFields);
 
+  // Add icon column at the beginning if renderIcon is provided
+  const columnsWithIcon = renderIcon
+    ? [generateIconColumn(renderIcon), ...baseColumns]
+    : baseColumns;
+
   // Check if actions column already exists
-  const hasActionsColumn = baseColumns.some((col) => col.id === "actions");
+  const hasActionsColumn = columnsWithIcon.some((col) => col.id === "actions");
 
   if (hasActionsColumn) {
-    return baseColumns;
+    return columnsWithIcon;
   }
 
   // For simpleDeleteOnly, show only a trash icon if delete action exists
   if (simpleDeleteOnly && actions.delete) {
-    return [...baseColumns, generateSimpleDeleteColumn(actions.delete)];
+    return [...columnsWithIcon, generateSimpleDeleteColumn(actions.delete)];
   }
 
   // Append actions column only if there are any actions available
   const hasActions = Object.keys(actions).length > 0;
   if (hasActions) {
-    return [...baseColumns, generateActionsColumn(actions)];
+    return [...columnsWithIcon, generateActionsColumn(actions)];
   }
-  return baseColumns;
+  return columnsWithIcon;
 }

apps/mesh/src/web/components/collections/collection-card.tsx

@@ -123,4 +123,11 @@ export interface CollectionsListProps<T extends BaseCollectionEntity> {
    * instead of the dropdown menu. Useful for FILES collection.
    */
   simpleDeleteOnly?: boolean;
+
+  /**
+   * Custom icon renderer for collection items.
+   * If provided, renders custom icons instead of the default IntegrationIcon.
+   * Useful for file-specific icons, custom badges, etc.
+   */
+  renderIcon?: (item: T) => ReactNode;
 }

apps/mesh/src/web/components/collections/collections-list.tsx

@@ -7,6 +7,7 @@ import {
   generateSortOptionsFromSchema,
 } from "@/web/components/collections/collections-list.tsx";
 import { EmptyState } from "@/web/components/empty-state.tsx";
+import { FileIcon } from "@/web/components/files/file-icon";
 import type { ValidatedCollection } from "@/web/hooks/use-binding";
 import { PinToSidebarButton } from "@/web/components/pin-to-sidebar-button";
 import { useConnection } from "@/web/hooks/collections/use-connection";
@@ -240,24 +241,27 @@ export function CollectionTab({
     if (files.length === 0) return;
 
     // Add files to uploading state
-    const newUploads = files.map((f) => ({ name: f.name, status: "uploading" as const }));
+    const newUploads = files.map((f) => ({
+      name: f.name,
+      status: "uploading" as const,
+    }));
     setUploadingFiles((prev) => [...prev, ...newUploads]);
 
     for (const file of files) {
       try {
         await uploadMutation.mutateAsync({ file });
         setUploadingFiles((prev) =>
           prev.map((f) =>
-            f.name === file.name ? { ...f, status: "done" as const } : f
-          )
+            f.name === file.name ? { ...f, status: "done" as const } : f,
+          ),
         );
         toast.success(`Uploaded ${file.name}`);
       } catch (error) {
         console.error("Upload failed:", error);
         setUploadingFiles((prev) =>
           prev.map((f) =>
-            f.name === file.name ? { ...f, status: "error" as const } : f
-          )
+            f.name === file.name ? { ...f, status: "error" as const } : f,
+          ),
         );
         toast.error(`Failed to upload ${file.name}`);
       }
@@ -286,24 +290,27 @@ export function CollectionTab({
     if (!files || files.length === 0) return;
 
     const fileArray = Array.from(files);
-    const newUploads = fileArray.map((f) => ({ name: f.name, status: "uploading" as const }));
+    const newUploads = fileArray.map((f) => ({
+      name: f.name,
+      status: "uploading" as const,
+    }));
     setUploadingFiles((prev) => [...prev, ...newUploads]);
 
     for (const file of fileArray) {
       try {
         await uploadMutation.mutateAsync({ file });
         setUploadingFiles((prev) =>
           prev.map((f) =>
-            f.name === file.name ? { ...f, status: "done" as const } : f
-          )
+            f.name === file.name ? { ...f, status: "done" as const } : f,
+          ),
         );
         toast.success(`Uploaded ${file.name}`);
       } catch (error) {
         console.error("Upload failed:", error);
         setUploadingFiles((prev) =>
           prev.map((f) =>
-            f.name === file.name ? { ...f, status: "error" as const } : f
-          )
+            f.name === file.name ? { ...f, status: "error" as const } : f,
+          ),
         );
         toast.error(`Failed to upload ${file.name}`);
       }
@@ -333,7 +340,9 @@ export function CollectionTab({
           ) : (
             <Upload01 className="mr-2 h-4 w-4" />
           )}
-          {isUploading ? `Uploading (${uploadingFiles.filter((f) => f.status === "uploading").length})...` : "Upload"}
+          {isUploading
+            ? `Uploading (${uploadingFiles.filter((f) => f.status === "uploading").length})...`
+            : "Upload"}
         </span>
       </Button>
       <input
@@ -421,6 +430,25 @@ export function CollectionTab({
             onItemClick={(item) => handleEdit(item)}
             readOnly={isReadOnly}
             simpleDeleteOnly={isFilesCollection}
+            renderIcon={
+              isFilesCollection
+                ? (item) => {
+                    const fileItem = item as unknown as {
+                      path?: string;
+                      mimeType?: string;
+                      isDirectory?: boolean;
+                    };
+                    return (
+                      <FileIcon
+                        path={fileItem.path}
+                        mimeType={fileItem.mimeType}
+                        isDirectory={fileItem.isDirectory}
+                        size="sm"
+                      />
+                    );
+                  }
+                : undefined
+            }
             emptyState={
               isFilesCollection ? (
                 <div className="flex flex-col items-center justify-center py-12 text-center">
@@ -456,20 +484,28 @@ export function CollectionTab({
               <Loading01 className="h-4 w-4 animate-spin text-muted-foreground shrink-0" />
               <div className="flex-1 min-w-0">
                 <div className="text-sm font-medium">
-                  Uploading {uploadingFiles.filter((f) => f.status === "uploading").length} file(s)
+                  Uploading{" "}
+                  {
+                    uploadingFiles.filter((f) => f.status === "uploading")
+                      .length
+                  }{" "}
+                  file(s)
                 </div>
                 <div className="flex items-center gap-2 overflow-x-auto text-xs text-muted-foreground">
                   {uploadingFiles.map((f) => (
                     <span
                       key={f.name}
                       className={cn(
                         "inline-flex items-center gap-1 shrink-0 px-2 py-0.5 rounded-full",
-                        f.status === "uploading" && "bg-primary/10 text-primary",
+                        f.status === "uploading" &&
+                          "bg-primary/10 text-primary",
                         f.status === "done" && "bg-green-100 text-green-700",
-                        f.status === "error" && "bg-red-100 text-red-700"
+                        f.status === "error" && "bg-red-100 text-red-700",
                       )}
                     >
-                      {f.status === "uploading" && <Loading01 className="h-3 w-3 animate-spin" />}
+                      {f.status === "uploading" && (
+                        <Loading01 className="h-3 w-3 animate-spin" />
+                      )}
                       {f.status === "done" && "✓"}
                       {f.status === "error" && "✗"}
                       {f.name}
@@ -520,9 +556,11 @@ export function CollectionTab({
               }
               className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              {(isFilesCollection
-                ? fileMutations.isDeleting
-                : actions.delete.isPending)
+              {(
+                isFilesCollection
+                  ? fileMutations.isDeleting
+                  : actions.delete.isPending
+              )
                 ? "Deleting..."
                 : "Delete"}
             </AlertDialogAction>

apps/mesh/src/web/components/collections/types.ts

@@ -6,7 +6,13 @@
 
 import { useParams } from "@tanstack/react-router";
 import { Button } from "@deco/ui/components/button.tsx";
-import { Download01, Trash01, File06, Folder, Loading01 } from "@untitledui/icons";
+import {
+  Download01,
+  Trash01,
+  File06,
+  Folder,
+  Loading01,
+} from "@untitledui/icons";
 import { FileBrowser } from "@/web/components/files/file-browser";
 import { FilePreview } from "@/web/components/files/file-preview";
 import { useFileContent, useFileMutations } from "@/web/hooks/use-file-storage";
@@ -96,7 +102,11 @@ export function FileDetailsView({ itemId, onBack }: FileDetailsProps) {
       </ViewActions>
 
       <div className="h-full overflow-hidden">
-        <FilePreview connectionId={connectionId} file={file} className="h-full" />
+        <FilePreview
+          connectionId={connectionId}
+          file={file}
+          className="h-full"
+        />
       </div>
     </ViewLayout>
   );
@@ -143,4 +153,3 @@ export function FolderDetailsView({ itemId, onBack }: FileDetailsProps) {
     </ViewLayout>
   );
 }
-

apps/mesh/src/web/components/details/connection/collection-tab.tsx

@@ -113,7 +113,8 @@ export function FileDropZone({ children, className }: FileDropZoneProps) {
             <div>
               <h3 className="text-lg font-medium">Drop files to upload</h3>
               <p className="text-sm text-muted-foreground">
-                Files will be stored in {primaryStorage?.title ?? "local storage"}
+                Files will be stored in{" "}
+                {primaryStorage?.title ?? "local storage"}
               </p>
             </div>
           </div>
@@ -154,4 +155,3 @@ export function useFileDropUpload() {
     storageConnection: primaryStorage,
   };
 }
-