From 64116ad78a5df9bffb9b81271e211dd8f9e9c162 Mon Sep 17 00:00:00 2001
From: hamidahoderinwale <oderinwaleh@gmail.com>
Date: Mon, 6 Jan 2025 17:47:30 -0800
Subject: [PATCH 1/2] cell numbers

---
 .../frontend/src/notebook/notebook_editor.css | 10 +++
 .../frontend/src/notebook/notebook_editor.tsx | 88 ++++++++++---------
 2 files changed, 58 insertions(+), 40 deletions(-)

diff --git a/packages/frontend/src/notebook/notebook_editor.css b/packages/frontend/src/notebook/notebook_editor.css
index f7722c5a..9905a50e 100644
--- a/packages/frontend/src/notebook/notebook_editor.css
+++ b/packages/frontend/src/notebook/notebook_editor.css
@@ -27,3 +27,13 @@
         color: darkgray;
     }
 }
+
+.cell-number {
+    display: flex;
+    margin-right: 11px;
+    color: darkgray;
+    p {
+        font-family: monospace;
+        font-size: 11px;
+    }
+}
diff --git a/packages/frontend/src/notebook/notebook_editor.tsx b/packages/frontend/src/notebook/notebook_editor.tsx
index e7b1ff01..78c59bae 100644
--- a/packages/frontend/src/notebook/notebook_editor.tsx
+++ b/packages/frontend/src/notebook/notebook_editor.tsx
@@ -66,6 +66,7 @@ A notebook has two types of cells:
 Rich text cells are the same in all notebooks, whereas formal cells are handled
 by custom components supplied to the notebook.
  */
+
 export function NotebookEditor<T>(props: {
     handle: DocHandle<unknown>;
     path: Prop[];
@@ -225,6 +226,7 @@ export function NotebookEditor<T>(props: {
                     <span>Click button or press Shift-Enter to create a cell</span>
                 </div>
             </Show>
+
             <ul class="notebook-cells">
                 <For each={props.notebook.cells}>
                     {(cell, i) => {
@@ -290,46 +292,52 @@ export function NotebookEditor<T>(props: {
 
                         return (
                             <li>
-                                <NotebookCell
-                                    cellId={cell.id}
-                                    actions={cellActions}
-                                    tag={
-                                        cell.tag === "formal"
-                                            ? props.cellLabel?.(cell.content)
-                                            : undefined
-                                    }
-                                >
-                                    <Switch>
-                                        <Match when={cell.tag === "rich-text"}>
-                                            <RichTextCellEditor
-                                                cellId={cell.id}
-                                                handle={props.handle}
-                                                path={[...props.path, "cells", i()]}
-                                                isActive={isActive()}
-                                                actions={cellActions}
-                                            />
-                                        </Match>
-                                        <Match when={cell.tag === "formal"}>
-                                            <props.formalCellEditor
-                                                content={(cell as FormalCell<T>).content}
-                                                changeContent={(f) => {
-                                                    props.changeNotebook((nb) => {
-                                                        f((nb.cells[i()] as FormalCell<T>).content);
-                                                    });
-                                                }}
-                                                isActive={isActive()}
-                                                actions={cellActions}
-                                            />
-                                        </Match>
-                                        <Match when={cell.tag === "stem"}>
-                                            <StemCellEditor
-                                                completions={replaceCommands(i())}
-                                                isActive={isActive()}
-                                                actions={cellActions}
-                                            />
-                                        </Match>
-                                    </Switch>
-                                </NotebookCell>
+                                <div class="cell-number">
+                                    <p>{i() + 1}</p>
+                                    <NotebookCell
+                                        cellId={cell.id}
+                                        actions={cellActions}
+                                        tag={
+                                            cell.tag === "formal"
+                                                ? props.cellLabel?.(cell.content)
+                                                : undefined
+                                        }
+                                    >
+                                        <Switch>
+                                            <Match when={cell.tag === "rich-text"}>
+                                                <RichTextCellEditor
+                                                    cellId={cell.id}
+                                                    handle={props.handle}
+                                                    path={[...props.path, "cells", i()]}
+                                                    isActive={isActive()}
+                                                    actions={cellActions}
+                                                />
+                                            </Match>
+                                            <Match when={cell.tag === "formal"}>
+                                                <props.formalCellEditor
+                                                    content={(cell as FormalCell<T>).content}
+                                                    changeContent={(f) => {
+                                                        props.changeNotebook((nb) => {
+                                                            f(
+                                                                (nb.cells[i()] as FormalCell<T>)
+                                                                    .content,
+                                                            );
+                                                        });
+                                                    }}
+                                                    isActive={isActive()}
+                                                    actions={cellActions}
+                                                />
+                                            </Match>
+                                            <Match when={cell.tag === "stem"}>
+                                                <StemCellEditor
+                                                    completions={replaceCommands(i())}
+                                                    isActive={isActive()}
+                                                    actions={cellActions}
+                                                />
+                                            </Match>
+                                        </Switch>
+                                    </NotebookCell>
+                                </div>
                             </li>
                         );
                     }}

From e96e53b26a4e862caf0e377a519b61e69c7847d1 Mon Sep 17 00:00:00 2001
From: hamidahoderinwale <oderinwaleh@gmail.com>
Date: Wed, 15 Jan 2025 15:14:56 -0800
Subject: [PATCH 2/2] styling changes

---
 .../frontend/src/notebook/notebook_cell.css   | 45 +++++++++++++++++++
 .../frontend/src/notebook/notebook_editor.css | 10 -----
 .../frontend/src/notebook/notebook_editor.tsx |  4 +-
 3 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/notebook/notebook_cell.css b/packages/frontend/src/notebook/notebook_cell.css
index 810210ea..78b8519f 100644
--- a/packages/frontend/src/notebook/notebook_cell.css
+++ b/packages/frontend/src/notebook/notebook_cell.css
@@ -31,3 +31,48 @@
     height: auto;
     max-width: 100%;
 }
+
+.cell-number {
+    display: flex;
+    align-items: center;
+    position: relative;
+}
+
+.cell-number-gutter p {
+    width: 100%;
+    padding: 0 -1.2rem 0 1.2rem;
+    font-size: 0.85rem;
+    color: --link-color;
+    background-color: transparent;
+    border-radius: 0.125rem;
+    transition: background-color 100ms ease-in-out;
+    color: gray;
+    font-family: monospace;
+}
+
+.cell {
+    position: relative;
+    margin: 0.25em;
+    display: flex;
+    flex-direction: row;
+}
+
+.cell-gutter {
+    position: absolute;
+    transform: translate(-100%, -50%);
+    left: -0.75rem;
+    /* Adjusted to sit between number and content */
+    display: flex;
+    flex-direction: row;
+}
+
+.cell-tag {
+    color: rgb(156, 163, 175);
+    font-size: 11pt;
+}
+
+.cell-content {
+    flex-grow: 1;
+    height: auto;
+    max-width: 100%;
+}
diff --git a/packages/frontend/src/notebook/notebook_editor.css b/packages/frontend/src/notebook/notebook_editor.css
index 9905a50e..f7722c5a 100644
--- a/packages/frontend/src/notebook/notebook_editor.css
+++ b/packages/frontend/src/notebook/notebook_editor.css
@@ -27,13 +27,3 @@
         color: darkgray;
     }
 }
-
-.cell-number {
-    display: flex;
-    margin-right: 11px;
-    color: darkgray;
-    p {
-        font-family: monospace;
-        font-size: 11px;
-    }
-}
diff --git a/packages/frontend/src/notebook/notebook_editor.tsx b/packages/frontend/src/notebook/notebook_editor.tsx
index 78c59bae..e9c27678 100644
--- a/packages/frontend/src/notebook/notebook_editor.tsx
+++ b/packages/frontend/src/notebook/notebook_editor.tsx
@@ -293,7 +293,9 @@ export function NotebookEditor<T>(props: {
                         return (
                             <li>
                                 <div class="cell-number">
-                                    <p>{i() + 1}</p>
+                                    <div class="cell-number-gutter">
+                                        <p>{i() + 1}</p>
+                                    </div>
                                     <NotebookCell
                                         cellId={cell.id}
                                         actions={cellActions}