Implement Unclearable Notes when Frozen

__tests__/Speednote.test.tsx

@@ -63,18 +63,15 @@ beforeAll(async () => {
 });
 
 const assertEditor = () => {
-  const [title, content, clearContentButton, shareNoteButton, undoClearButton] =
-    [
-      screen.getByRole('textbox', { name: 'Note title' }),
-      screen.getByRole('textbox', { name: 'Note content' }),
-      screen.getByRole('button', { name: 'Clear content' }),
-      screen.getByRole('button', { name: 'Copy/share note link' }),
-      screen.queryByRole('button', { name: 'Undo clear' }), // This is not supposed to be there on the first render.
-    ];
+  const [title, content, shareNoteButton, undoClearButton] = [
+    screen.getByRole('textbox', { name: 'Note title' }),
+    screen.getByRole('textbox', { name: 'Note content' }),
+    screen.getByRole('button', { name: 'Copy/share note link' }),
+    screen.queryByRole('button', { name: 'Undo clear' }), // This is not supposed to be there on the first render.
+  ];
 
   expect(title).toBeInTheDocument();
   expect(content).toBeInTheDocument();
-  expect(clearContentButton).toBeInTheDocument();
   expect(shareNoteButton).toBeInTheDocument();
   expect(undoClearButton).not.toBeInTheDocument(); // This is not supposed to be in the DOM on the first render.
 
@@ -84,7 +81,7 @@ const assertEditor = () => {
 
   // `undoClearButton` is not returned because we'd rather do the query again when we want to test it. The current state
   // of the `undoClearButton` here will be stale by the time we wanted to do tests against it.
-  return { title, content, shareNoteButton, clearContentButton };
+  return { title, content, shareNoteButton };
 };
 
 const assertConfiguration = () => {
@@ -184,11 +181,14 @@ test('able to edit title and content', async () => {
 test('able to clear content and undo clear', async () => {
   const { user } = renderWithProviders();
 
-  const { content, clearContentButton } = assertEditor();
+  const { content } = assertEditor();
   await user.type(content, "Tears Don't Fall, Enchanted, Beautiful Trauma");
   expect(content).not.toHaveValue('');
   expect(content).toHaveValue("Tears Don't Fall, Enchanted, Beautiful Trauma");
 
+  const clearContentButton = screen.getByRole('button', {
+    name: 'Clear content',
+  });
   expect(clearContentButton).toBeEnabled();
   await user.click(clearContentButton);
   expect(content).toHaveValue('');
@@ -235,11 +235,21 @@ test('able to freeze notes and unfreeze them', async () => {
   await user.type(content, 'Hi there!');
   expect(content).toHaveValue('');
 
+  // The `Clear content` button should be disabled.
+  const clearContentButton = screen.getByRole('button', {
+    name: 'Clear content',
+  });
+  expect(clearContentButton).toBeInTheDocument();
+  expect(clearContentButton).toBeDisabled();
+
   // Unfreeze the note.
   expect(freezeNoteButton).toBeEnabled();
   await user.click(freezeNoteButton);
   expect(freezeNoteButton).toHaveAccessibleName('Freeze note');
 
+  // `Clear content` should not be disabled.
+  expect(clearContentButton).toBeEnabled();
+
   // Try to type, should be possible.
   expect(title).not.toHaveAttribute('readOnly');
   expect(content).not.toHaveAttribute('readOnly');

app/Button.module.scss

@@ -9,6 +9,15 @@
   cursor: pointer;
   transition: all 0.2s;
 
+  &:disabled {
+    color: var(--time);
+    opacity: 0.25;
+
+    &:hover {
+      cursor: not-allowed;
+    }
+  }
+
   &:hover {
     color: var(--time);
   }

app/Editor.tsx

@@ -210,23 +210,26 @@ const Editor = () => {
         )}
       </section>
 
-      <section className={styles.section}>
-        <Button onClick={handleContentActionButtonClick('clear')}>
-          Clear content
-        </Button>
+      {!sharedNote.isShared && (
+        <section className={styles.section}>
+          <Button
+            onClick={handleContentActionButtonClick('clear')}
+            disabled={frozen === 'true'}
+          >
+            Clear content
+          </Button>
 
-        {!sharedNote.isShared && (
           <Button onClick={handleFreezeButtonClick}>
             {frozen === 'true' ? 'Unfreeze note' : 'Freeze note'}
           </Button>
-        )}
 
-        {lastChanges && (
-          <Button onClick={handleContentActionButtonClick('undo')}>
-            Undo clear
-          </Button>
-        )}
-      </section>
+          {lastChanges && (
+            <Button onClick={handleContentActionButtonClick('undo')}>
+              Undo clear
+            </Button>
+          )}
+        </section>
+      )}
 
       <section className={styles.section}>
         {sharedNote.isShared && (

e2e/Speednote.test.tsx

@@ -1,26 +1,22 @@
 import { chromium, expect, type Page, test } from '@playwright/test';
 
 const getAndAssertEditor = async (page: Page) => {
-  const [title, content, clearContentButton, shareNoteButton, undoClearButton] =
-    [
-      page.getByRole('textbox', { name: 'Note title' }),
-      page.getByRole('textbox', { name: 'Note content' }),
-      page.getByRole('button', { name: 'Clear content' }),
-      page.getByRole('button', { name: 'Share note ' }),
-      page.getByRole('button', { name: 'Undo clear' }),
-    ];
+  const [title, content, shareNoteButton, undoClearButton] = [
+    page.getByRole('textbox', { name: 'Note title' }),
+    page.getByRole('textbox', { name: 'Note content' }),
+    page.getByRole('button', { name: 'Share note ' }),
+    page.getByRole('button', { name: 'Undo clear' }),
+  ];
 
   await expect(title).toBeVisible();
   await expect(content).toBeVisible();
-  await expect(clearContentButton).toBeVisible();
-
   await expect(shareNoteButton).toBeVisible();
   await expect(undoClearButton).not.toBeVisible();
 
   const inputs = page.getByRole('textbox');
   await expect(inputs).toHaveCount(2);
 
-  return { title, content, clearContentButton, shareNoteButton };
+  return { title, content, shareNoteButton };
 };
 
 const getAndAssertConfiguration = async (page: Page) => {
@@ -116,13 +112,17 @@ test('able to edit title and content', async ({ page }) => {
 test('able to clear content and undo clear', async ({ page }) => {
   await renderPage(page);
 
-  const { content, clearContentButton } = await getAndAssertEditor(page);
+  const { content } = await getAndAssertEditor(page);
   await content.fill("Tears Don't Fall, Enchanted, Beautiful Trauma");
   await expect(content).not.toHaveValue('');
   await expect(content).toHaveValue(
     "Tears Don't Fall, Enchanted, Beautiful Trauma"
   );
 
+  const clearContentButton = page.getByRole('button', {
+    name: 'Clear content',
+  });
+  await expect(clearContentButton).toBeVisible();
   await expect(clearContentButton).toBeEnabled();
   await clearContentButton.click();
   await expect(content).toHaveValue('');
@@ -170,11 +170,21 @@ test('able to freeze notes and unfreeze them', async ({ page }) => {
   await content.fill('Hi there!', { force: true });
   await expect(content).toHaveValue('');
 
+  // The `Clear content` button should be disabled.
+  const clearContentButton = page.getByRole('button', {
+    name: 'Clear content',
+  });
+  await expect(clearContentButton).toBeVisible();
+  await expect(clearContentButton).toBeDisabled();
+
   // Unfreeze the note.
   await expect(freezeNoteButton).toBeEnabled();
   await freezeNoteButton.click();
   await expect(freezeNoteButton).toHaveText('Freeze note');
 
+  // `Clear content` should not be disabled.
+  await expect(clearContentButton).toBeEnabled();
+
   // Try to type, should be possible.
   await expect(title).toBeEditable();
   await expect(content).toBeEditable();