feat: read only publish of drawings

src/client/components/DrawingSidebar.tsx

@@ -1,16 +1,22 @@
-import { type DrawingMeta } from "../../core/shared";
+import { type DrawingMeta, type DrawingPublication } from "../../core/shared";
 
 type DrawingSidebarProps = {
   open: boolean;
   drawings: DrawingMeta[];
   activeId: string | null;
   activeTitle: string;
+  publication: DrawingPublication;
+  publicationSlug: string;
+  publicationBusy: boolean;
   onClose: () => void;
   onCreate: () => void;
   onSelect: (drawingId: string) => void;
   onDelete: (drawingId: string) => void;
   onTitleChange: (title: string) => void;
   onTitleSubmit: () => void;
+  onPublicationSlugChange: (slug: string) => void;
+  onPublish: () => void;
+  onDisablePublication: () => void;
 };
 
 function DrawerIcon() {
@@ -42,13 +48,22 @@ export function DrawingSidebar({
   drawings,
   activeId,
   activeTitle,
+  publication,
+  publicationSlug,
+  publicationBusy,
   onClose,
   onCreate,
   onSelect,
   onDelete,
   onTitleChange,
   onTitleSubmit,
+  onPublicationSlugChange,
+  onPublish,
+  onDisablePublication,
 }: DrawingSidebarProps) {
+  const publicPath = publication.enabled ? `/p/${publication.slug}` : null;
+  const publicationStatus = publication.enabled ? `Published at ${publicPath}` : "Not published";
+
   return (
     <>
       <div
@@ -75,32 +90,80 @@ export function DrawingSidebar({
               className={drawing.id === activeId ? "drawing-item drawing-item-active" : "drawing-item"}
             >
               {drawing.id === activeId ? (
-                <div className="drawing-link">
-                  <input
-                    className="title-input"
-                    value={activeTitle}
-                    onChange={(event) => onTitleChange(event.target.value)}
-                    onBlur={onTitleSubmit}
-                    onKeyDown={(event) => {
-                      if (event.key === "Enter") {
-                        event.currentTarget.blur();
-                      }
-                    }}
-                  />
+                <div className="drawing-link drawing-link-active">
+                  <div className="drawing-item-header">
+                    <input
+                      className="title-input"
+                      value={activeTitle}
+                      onChange={(event) => onTitleChange(event.target.value)}
+                      onBlur={onTitleSubmit}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter") {
+                          event.currentTarget.blur();
+                        }
+                      }}
+                    />
+                    <button
+                      type="button"
+                      className="icon-button drawing-delete-button"
+                      onClick={() => onDelete(drawing.id)}
+                      aria-label={`Delete ${drawing.title}`}
+                    >
+                      ×
+                    </button>
+                  </div>
+                  <div className="publication-panel">
+                    <label className="publication-label" htmlFor="publication-slug">
+                      Public name
+                    </label>
+                    <input
+                      id="publication-slug"
+                      className="title-input publication-input"
+                      value={publicationSlug}
+                      onChange={(event) => onPublicationSlugChange(event.target.value)}
+                      spellCheck={false}
+                      autoCapitalize="none"
+                      autoCorrect="off"
+                    />
+                    <div className="publication-actions">
+                      <button type="button" className="secondary-button" onClick={onPublish} disabled={publicationBusy}>
+                        {publication.enabled ? "Update link" : "Publish"}
+                      </button>
+                      <button
+                        type="button"
+                        className="secondary-button"
+                        onClick={onDisablePublication}
+                        disabled={!publication.enabled || publicationBusy}
+                      >
+                        Unpublish
+                      </button>
+                    </div>
+                    <div className="publication-status">
+                      {publication.enabled ? (
+                        <a href={publicPath ?? "#"} target="_blank" rel="noreferrer" className="publication-link">
+                          {publicationStatus}
+                        </a>
+                      ) : (
+                        <span>{publicationStatus}</span>
+                      )}
+                    </div>
+                  </div>
                 </div>
               ) : (
                 <button type="button" className="drawing-link" onClick={() => onSelect(drawing.id)}>
                   <span className="drawing-title">{drawing.title}</span>
                 </button>
               )}
-              <button
-                type="button"
-                className="icon-button"
-                onClick={() => onDelete(drawing.id)}
-                aria-label={`Delete ${drawing.title}`}
-              >
-                ×
-              </button>
+              {drawing.id !== activeId ? (
+                <button
+                  type="button"
+                  className="icon-button"
+                  onClick={() => onDelete(drawing.id)}
+                  aria-label={`Delete ${drawing.title}`}
+                >
+                  ×
+                </button>
+              ) : null}
             </div>
           ))}
         </div>

src/client/components/EditorCanvas.tsx

@@ -1,11 +1,11 @@
 import { memo } from "react";
-import "../../../node_modules/@excalidraw/excalidraw/dist/prod/index.css";
 import { Excalidraw } from "@excalidraw/excalidraw";
 import type {
   AppState,
   BinaryFiles,
   ExcalidrawInitialDataState,
 } from "@excalidraw/excalidraw/types";
+import "../../../node_modules/@excalidraw/excalidraw/dist/prod/index.css";
 import { type ScenePayload } from "../../core/shared";
 
 type EditorCanvasProps = {

src/client/components/PublicViewer.tsx

@@ -0,0 +1,53 @@
+import { memo } from "react";
+import { Excalidraw } from "@excalidraw/excalidraw";
+import type { ExcalidrawInitialDataState } from "@excalidraw/excalidraw/types";
+import "../../../node_modules/@excalidraw/excalidraw/dist/prod/index.css";
+import { type PublicDrawing } from "../../core/shared";
+
+type PublicViewerProps = {
+  drawing: PublicDrawing | null;
+  loading: boolean;
+  error: string | null;
+};
+
+function drawingToInitialData(
+  drawing: PublicDrawing,
+): ExcalidrawInitialDataState {
+  return drawing as ExcalidrawInitialDataState;
+}
+
+const viewerUiOptions = {
+  canvasActions: {
+    changeViewBackgroundColor: false,
+    clearCanvas: false,
+    export: false,
+    loadScene: false,
+    saveAsImage: false,
+    saveToActiveFile: false,
+    toggleTheme: false,
+  },
+  tools: {
+    image: false,
+  },
+} as const;
+
+export const PublicViewer = memo(function PublicViewer({
+  drawing,
+  loading,
+  error,
+}: PublicViewerProps) {
+  if (loading || !drawing) {
+    return <div className="editor-loading">{error ?? "Loading..."}</div>;
+  }
+
+  return (
+    <div className="public-viewer-shell">
+      <Excalidraw
+        initialData={drawingToInitialData(drawing)}
+        viewModeEnabled={true}
+        zenModeEnabled={true}
+        UIOptions={viewerUiOptions}
+      />
+    </div>
+  );
+});