ISL Verse marker CRUD + Handle vimeo url in ISL table

frontend/src/components/ContentTypeAction.tsx

@@ -28,6 +28,8 @@ export default function ContentTypeAction<T, E>({
   identityKey,
   normalizeApiRow = (row: any) => row as E,
   remoteTestConfig,
+  viewOnlyColumns,
+  extraViewActions
 }: ContentTypeActionProps<T, E>) {
   const { isAdmin, isEditor } = useUserRole();
 
@@ -166,6 +168,8 @@ export default function ContentTypeAction<T, E>({
         normalizeApiRow={normalizeApiRow}
         clearPreview={() => setPreviewRows([])}
         remoteTestConfig={remoteTestConfig}
+        viewOnlyColumns={viewOnlyColumns}
+        extraViewActions={extraViewActions}
       />
       <DuplicateCsvDialog
         open={duplicateDialogOpen}

frontend/src/components/UploadOrViewDialog.tsx

@@ -35,6 +35,8 @@ export default function UploadOrViewDialog<T>({
   normalizeApiRow = (row: any) => row,
   clearPreview,
   remoteTestConfig,
+  viewOnlyColumns = [],
+  extraViewActions,
 }: UploadOrViewDialogProps<T>) {
   const [isUploading, setIsUploading] = useState(false);
   const [overwrite, setOverwrite] = useState(false);
@@ -159,12 +161,23 @@ export default function UploadOrViewDialog<T>({
 
   const columnsWithStatus: ColumnDef<T & { status?: string }>[] =
     useMemo(() => {
-      if (!previewWithExistingData)
-        return columns as ColumnDef<T & { status?: string }>[];
+      // Base columns — preview gets these only
+      const base = columns as ColumnDef<T & { status?: string }>[];
+
+      // View-only columns appended before the status column in view mode
+      const withViewOnly: ColumnDef<T & { status?: string }>[] =
+        mode === "view"
+          ? [
+              ...base,
+              ...(viewOnlyColumns as ColumnDef<T & { status?: string }>[]),
+            ]
+          : base;
+
+      if (!previewWithExistingData) return withViewOnly;
 
       const helper = createColumnHelper<T & { status?: string }>();
       return [
-        ...(columns as ColumnDef<T & { status?: string }>[]),
+        ...withViewOnly,
         helper.accessor((row) => row.status, {
           id: "status",
           header: ({ column }) => (
@@ -184,7 +197,7 @@ export default function UploadOrViewDialog<T>({
           },
         }),
       ] as ColumnDef<T & { status?: string }>[];
-    }, [columns, previewWithExistingData]);
+    }, [columns, viewOnlyColumns, mode, previewWithExistingData]);
 
   // handle upload action
   const handleUpload = async () => {
@@ -316,13 +329,13 @@ export default function UploadOrViewDialog<T>({
 
     const filteredRows: Record<string, any>[] = requiredHeaders?.length
       ? rows.map((row) =>
-        Object.fromEntries(
-          requiredHeaders.map((key) => [
-            key,
-            (row as Record<string, any>)[key] ?? "",
-          ]),
-        ),
-      )
+          Object.fromEntries(
+            requiredHeaders.map((key) => [
+              key,
+              (row as Record<string, any>)[key] ?? "",
+            ]),
+          ),
+        )
       : (rows as Record<string, any>[]);
 
     const csv = Papa.unparse(filteredRows, {
@@ -427,7 +440,7 @@ export default function UploadOrViewDialog<T>({
 
             {mode === "view" && (
               <div className="flex flex-wrap w-full items-center justify-end gap-4">
-                {remoteTestConfig && (isAdmin) && (
+                {remoteTestConfig && isAdmin && (
                   <Button
                     variant="outline"
                     className="cursor-pointer"
@@ -459,6 +472,7 @@ export default function UploadOrViewDialog<T>({
                     {remoteTestConfig.buttonLabel}
                   </Button>
                 )}
+                {(isAdmin || isEditor) && extraViewActions}
                 {(isAdmin || isEditor) && (
                   <Button
                     onClick={() => onRequestFilePick?.()}