From 765d5d97cfd0b93cf0046badf2a80ef7822facf6 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Sat, 2 Aug 2025 06:44:55 +0200
Subject: [PATCH] refactor: readonly inputs in cuesheet

---
 .../components/input/input/Input.module.scss  | 12 ++++++----
 .../input/textarea/Textarea.module.scss       | 16 +++++++++-----
 .../EditableImage.module.scss                 |  4 ++--
 .../cuesheet-table-elements/EditableImage.tsx | 20 +++++++++++------
 .../GhostedText.module.scss                   |  6 +++++
 .../cuesheet-table-elements/GhostedText.tsx   |  7 ++++++
 .../cuesheetColsFactory.tsx                   | 22 +++++++++++++++++--
 7 files changed, 66 insertions(+), 21 deletions(-)
 create mode 100644 apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GhostedText.module.scss
 create mode 100644 apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GhostedText.tsx

diff --git a/apps/client/src/common/components/input/input/Input.module.scss b/apps/client/src/common/components/input/input/Input.module.scss
index 44c428bf7..e37bfde2a 100644
--- a/apps/client/src/common/components/input/input/Input.module.scss
+++ b/apps/client/src/common/components/input/input/Input.module.scss
@@ -10,7 +10,12 @@
   padding-inline: 0.5em;
   outline: none;
 
-  &:hover:not(:disabled) {
+  &::placeholder {
+    color: $gray-500;
+    letter-spacing: 0;
+  }
+
+  &:hover:not(:disabled):not(:read-only) {
     background-color: $gray-1100;
   }
 
@@ -25,9 +30,8 @@
     cursor: not-allowed;
   }
 
-  &::placeholder {
-    color: $gray-500;
-    letter-spacing: 0;
+  &:read-only::placeholder {
+    opacity: 0;
   }
 }
 
diff --git a/apps/client/src/common/components/input/textarea/Textarea.module.scss b/apps/client/src/common/components/input/textarea/Textarea.module.scss
index cb4cb0454..1b5e45525 100644
--- a/apps/client/src/common/components/input/textarea/Textarea.module.scss
+++ b/apps/client/src/common/components/input/textarea/Textarea.module.scss
@@ -9,9 +9,13 @@
   border-radius: $component-border-radius-md;
   border: 1px solid transparent;
 
-  padding-inline: 0.5em;
   outline: none;
 
+  &::placeholder {
+    color: $gray-500;
+    letter-spacing: 0;
+  }
+
   &:hover:not(:disabled) {
     background-color: $gray-1100;
   }
@@ -26,21 +30,21 @@
     cursor: not-allowed;
   }
 
-  &::placeholder {
-    color: $gray-500;
-    letter-spacing: 0;
+  &:read-only::placeholder {
+    opacity: 0;
   }
 }
 
 .subtle {
   background-color: $gray-1200;
-  padding-top: 0.5em;
+  padding-inline: 0.5em;
+  padding-top: 0.25em;
 }
 
 .ghosted {
   background-color: transparent;
   padding: 0;
-  padding-top: 0.5em;
+  padding-top: 0.25em;
 }
 
 .fluid {
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.module.scss b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.module.scss
index 6ee7ef57a..194d166b8 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.module.scss
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.module.scss
@@ -1,8 +1,8 @@
 .imageInput {
-  &::placeholder {
+  &:not(:read-only)::placeholder {
     opacity: 0.2;
   }
-  &:hover::placeholder {
+  &:not(:read-only):hover::placeholder {
     opacity: 1;
   }
 }
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx
index cd0f7a0d6..4ebf07968 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx
@@ -7,12 +7,13 @@ import style from './EditableImage.module.scss';
 
 interface EditableImageProps {
   initialValue: string;
+  readOnly?: boolean;
   updateValue: (newValue: string) => void;
 }
 
 export default memo(EditableImage);
 
-function EditableImage({ initialValue, updateValue }: EditableImageProps) {
+function EditableImage({ initialValue, readOnly, updateValue }: EditableImageProps) {
   const handleUpdate = (newValue: string) => {
     if (newValue === initialValue) {
       return;
@@ -35,6 +36,9 @@ function EditableImage({ initialValue, updateValue }: EditableImageProps) {
         variant='ghosted'
         className={style.imageInput}
         fluid
+        readOnly={readOnly}
+        // we disable the field to prevent receiving focus
+        disabled={readOnly}
         placeholder='Paste image URL'
         onBlur={(event) => handleUpdate(event.currentTarget.value)}
         onKeyDown={(event) => {
@@ -49,12 +53,14 @@ function EditableImage({ initialValue, updateValue }: EditableImageProps) {
 
   return (
     <div className={style.imageCell}>
-      <div className={style.overlay}>
-        <Button onClick={openInNewTab}>Preview</Button>
-        <Button variant='subtle-destructive' onClick={() => handleUpdate('')}>
-          Delete
-        </Button>
-      </div>
+      {!readOnly && (
+        <div className={style.overlay}>
+          <Button onClick={openInNewTab}>Preview</Button>
+          <Button variant='subtle-destructive' onClick={() => handleUpdate('')}>
+            Delete
+          </Button>
+        </div>
+      )}
       {Boolean(initialValue) && <img loading='lazy' src={initialValue} className={style.image} />}
     </div>
   );
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GhostedText.module.scss b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GhostedText.module.scss
new file mode 100644
index 000000000..905f61c91
--- /dev/null
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GhostedText.module.scss
@@ -0,0 +1,6 @@
+.ghostedText {
+  min-height: 2rem;
+  padding: 0;
+  padding-top: 0.25em;
+  width: 100%;
+}
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GhostedText.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GhostedText.tsx
new file mode 100644
index 000000000..56f3bcf35
--- /dev/null
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/GhostedText.tsx
@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+
+import style from './GhostedText.module.scss';
+
+export default function GhostedText({ children }: PropsWithChildren) {
+  return <div className={style.ghostedText}>{children}</div>;
+}
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory.tsx
index 839b52891..2651e421b 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/cuesheetColsFactory.tsx
@@ -10,6 +10,7 @@ import { AppMode } from '../../../../ontimeConfig';
 import DurationInput from './DurationInput';
 import EditableImage from './EditableImage';
 import FlagCell from './FlagCell';
+import GhostedText from './GhostedText';
 import MultiLineCell from './MultiLineCell';
 import MutedText from './MutedText';
 import SingleLineCell from './SingleLineCell';
@@ -139,6 +140,11 @@ function MakeMultiLineField({ row, column, table }: CellContext<OntimeEntry, unk
     return null;
   }
 
+  const canWrite = column.columnDef.meta?.canWrite;
+  if (!canWrite) {
+    return <GhostedText>{initialValue}</GhostedText>;
+  }
+
   return <MultiLineCell initialValue={initialValue as string} handleUpdate={update} />;
 }
 
@@ -155,8 +161,9 @@ function LazyImage({ row, column, table }: CellContext<OntimeEntry, unknown>) {
     return null;
   }
 
+  const canWrite = column.columnDef.meta?.canWrite;
   const initialValue = event.custom[column.id];
-  return <EditableImage initialValue={initialValue} updateValue={update} />;
+  return <EditableImage initialValue={initialValue} updateValue={update} readOnly={!canWrite} />;
 }
 
 function MakeSingleLineField({ row, column, table }: CellContext<OntimeEntry, unknown>) {
@@ -173,6 +180,11 @@ function MakeSingleLineField({ row, column, table }: CellContext<OntimeEntry, un
     return null;
   }
 
+  const canWrite = column.columnDef.meta?.canWrite;
+  if (!canWrite) {
+    return <GhostedText>{initialValue}</GhostedText>;
+  }
+
   return <SingleLineCell initialValue={initialValue as string} handleUpdate={update} />;
 }
 
@@ -197,9 +209,15 @@ function MakeCustomField({ row, column, table }: CellContext<OntimeEntry, unknow
     return null;
   }
 
-  // fields will not contain the field if there is no value set by the user
+  // entries will not contain the field if there is no value set by the user
   // event if there is no initial value, we still render the cell
   const initialValue = event.custom[column.id] ?? '';
+
+  const canWrite = column.columnDef.meta?.canWrite;
+  if (!canWrite) {
+    return <GhostedText>{initialValue}</GhostedText>;
+  }
+
   return <MultiLineCell initialValue={initialValue} handleUpdate={update} />;
 }