hide add cell toolbar when show-chrome is false (#9487)

## 📝 Summary

<!--
If this PR closes any issues, list them here by number (e.g., Closes
#123).

Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->
Closes #9429. Hides the Add cells buttons

## 📋 Pre-Review Checklist
<!-- These checks need to be completed before a PR is reviewed -->

- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] Any AI generated code has been reviewed line-by-line by the human
PR author, who stands by it.
- [x] Video or media evidence is provided for any visual changes
(optional). <!-- PR is more likely to be merged if evidence is provided
for changes made -->

## ✅ Merge Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] Documentation has been updated where applicable, including
docstrings for API changes.
- [ ] Tests have been added for the changes made.

Author: Light2Dark

docs/guides/publishing/playground.md

@@ -199,8 +199,9 @@ providing your users with an interactive code playground.
 
 ??? note "Showing editor controls"
 
-    To show editor controls (such as panels icons and the run button), use
-    the query parameter `show-chrome=true`
+    To show editor controls (such as panels icons, the run button, and the
+    add-cell toolbar at the bottom of each column), use the query parameter
+    `show-chrome=true`.
 
 ### Embedding an existing notebook
 

frontend/src/components/editor/renderers/cell-array.tsx

@@ -59,6 +59,7 @@ interface CellArrayProps {
   mode: AppMode;
   userConfig: UserConfig;
   appConfig: AppConfig;
+  hideControls?: boolean;
 }
 
 export const CellArray: React.FC<CellArrayProps> = (props) => {
@@ -82,6 +83,7 @@ const CellArrayInternal: React.FC<CellArrayProps> = ({
   mode,
   userConfig,
   appConfig,
+  hideControls = false,
 }) => {
   const actions = useCellActions();
   const { theme } = useTheme();
@@ -147,6 +149,7 @@ const CellArrayInternal: React.FC<CellArrayProps> = ({
             mode={mode}
             userConfig={userConfig}
             theme={theme}
+            hideControls={hideControls}
           />
         ))}
       </div>
@@ -166,6 +169,7 @@ const CellColumn: React.FC<{
   mode: AppMode;
   userConfig: UserConfig;
   theme: Theme;
+  hideControls: boolean;
 }> = ({
   columnId,
   index,
@@ -174,6 +178,7 @@ const CellColumn: React.FC<{
   mode,
   userConfig,
   theme,
+  hideControls,
 }) => {
   const cellIds = useCellIds();
   const column = cellIds.get(columnId);
@@ -191,13 +196,15 @@ const CellColumn: React.FC<{
       width={appConfig.width}
       canDelete={columnsLength > 1}
       footer={
-        <AddCellButtons
-          columnId={columnId}
-          className={cn(
-            appConfig.width === "columns" &&
-              "opacity-0 group-hover/column:opacity-100",
-          )}
-        />
+        hideControls ? null : (
+          <AddCellButtons
+            columnId={columnId}
+            className={cn(
+              appConfig.width === "columns" &&
+                "opacity-0 group-hover/column:opacity-100",
+            )}
+          />
+        )
       }
     >
       <SortableContext

frontend/src/core/edit-app.tsx

@@ -137,6 +137,7 @@ export const EditApp: React.FC<AppProps> = ({
       mode={viewState.mode}
       userConfig={userConfig}
       appConfig={appConfig}
+      hideControls={hideControls}
     />
   );