Add login prompt to pinned post

.gitignore

@@ -6,6 +6,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .DS_Store
+.env
 webroot
 dist
 old_pixelary
@@ -36,3 +37,6 @@ src/server/dist/
 # TypeScript build outputs
 dist/types/
 dist/*.tsbuildinfo
+
+# Dev app playtest script
+tools/devvit-playtest.mjs

package.json

@@ -30,13 +30,14 @@
     "upload": "npm run build && devvit upload"
   },
   "dependencies": {
-    "@devvit/public-api": "0.12.4",
-    "@devvit/web": "0.12.4",
+    "@devvit/public-api": "0.12.23-next-2026-05-04-20-45-11-9c6d33a22.0",
+    "@devvit/start": "0.12.23-next-2026-05-04-20-45-11-9c6d33a22.0",
+    "@devvit/web": "0.12.23-next-2026-05-04-20-45-11-9c6d33a22.0",
     "@tanstack/react-query": "^5.90.10",
     "@trpc/client": "^11.7.1",
     "@trpc/react-query": "^11.7.1",
     "@trpc/server": "^11.7.1",
-    "devvit": "0.12.4",
+    "devvit": "0.12.23-next-2026-05-04-20-45-11-9c6d33a22.0",
     "express": "5.1.0",
     "preact": "^10.27.2",
     "zod": "^4.1.12"

src/client/entries/pinned-post/_components/Menu.test.tsx

@@ -0,0 +1,115 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/preact';
+import { Menu } from './Menu';
+
+const mockContext = { userId: 't2_user123' as string | null };
+const mockRequestExpandedMode = vi.fn();
+const mockShowLoginPrompt = vi.fn();
+
+vi.mock('@client/hooks/useTelemetry', () => ({
+  useTelemetry: () => ({
+    track: vi.fn(async () => ({ ok: true })),
+  }),
+}));
+
+vi.mock('@client/trpc/client', () => {
+  const prefetch = vi.fn(async () => undefined);
+  return {
+    trpc: {
+      useUtils: () => ({
+        app: {
+          user: {
+            getProfile: { prefetch },
+            colors: { getRecent: { prefetch } },
+          },
+          rewards: {
+            getEffectiveBonuses: { prefetch },
+          },
+          dictionary: {
+            getCandidates: { prefetch },
+          },
+        },
+      }),
+      app: {
+        user: {
+          getProfile: {
+            useQuery: () => ({
+              data: { levelProgressPercentage: 42, level: 5 },
+            }),
+          },
+          isAdmin: {
+            useQuery: () => ({ data: false }),
+          },
+          getPendingNavigation: {
+            useMutation: () => ({
+              mutateAsync: vi.fn(async () => ({ url: null })),
+            }),
+          },
+        },
+      },
+    },
+  };
+});
+
+vi.mock('@devvit/web/client', () => ({
+  requestExpandedMode: (e: MouseEvent, mode: string) =>
+    mockRequestExpandedMode(e, mode),
+  showLoginPrompt: () => mockShowLoginPrompt(),
+  addWebViewModeListener: vi.fn(),
+  removeWebViewModeListener: vi.fn(),
+  navigateTo: vi.fn(),
+  context: mockContext,
+}));
+
+describe('Pinned menu logged-out actions', () => {
+  beforeEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it('shows logged-out draw CTA and hides account buttons for logged-out users', () => {
+    mockContext.userId = null;
+
+    render(
+      <Menu
+        onMyDrawings={() => {}}
+        onLeaderboard={() => {}}
+        onHowToPlay={() => {}}
+        onLevelClick={() => {}}
+      />
+    );
+
+    const drawButton = screen.getByRole('button', { name: /log in to draw/i });
+    expect(drawButton).toBeEnabled();
+    fireEvent.click(drawButton);
+    expect(mockShowLoginPrompt).toHaveBeenCalledTimes(1);
+    expect(mockRequestExpandedMode).not.toHaveBeenCalled();
+    expect(
+      screen.queryByRole('button', { name: /my drawings/i })
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: /my rewards/i })
+    ).not.toBeInTheDocument();
+  });
+
+  it('shows full menu for logged-in users', () => {
+    mockContext.userId = 't2_user123';
+
+    render(
+      <Menu
+        onMyDrawings={() => {}}
+        onLeaderboard={() => {}}
+        onHowToPlay={() => {}}
+        onLevelClick={() => {}}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: /draw/i })).toBeEnabled();
+    expect(
+      screen.getByRole('button', { name: /my drawings/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: /my rewards/i })
+    ).toBeInTheDocument();
+  });
+});

src/client/entries/pinned-post/_components/Menu.tsx

@@ -9,6 +9,7 @@ import { useEffect, useRef } from 'react';
 import { ActiveEffectsBadge } from '@components/ActiveEffectsBadge';
 import {
   requestExpandedMode,
+  showLoginPrompt,
   addWebViewModeListener,
   removeWebViewModeListener,
   navigateTo,
@@ -24,6 +25,7 @@ type MenuProps = {
 
 export function Menu(props: MenuProps) {
   const { onMyDrawings, onLeaderboard, onHowToPlay, onLevelClick } = props;
+  const isLoggedIn = Boolean(context.userId);
 
   // Telemetry
   const { track } = useTelemetry();
@@ -111,32 +113,40 @@ export function Menu(props: MenuProps) {
       {/* Menu */}
       <nav className="flex flex-col gap-3 w-full max-w-3xs">
         <Button
-          onClick={async (e) => {
+          onClick={(e) => {
+            if (!isLoggedIn) {
+              showLoginPrompt();
+              return;
+            }
             void requestExpandedMode(e, 'editor');
           }}
           size="large"
-          telemetryEvent="click_draw"
+          telemetryEvent={isLoggedIn ? 'click_draw' : 'click_log_in'}
         >
-          Draw
+          {isLoggedIn ? 'Draw' : 'Log in to draw'}
         </Button>
 
-        <Button
-          onClick={onMyDrawings}
-          size="medium"
-          variant="secondary"
-          telemetryEvent="click_my_drawings"
-        >
-          My Drawings
-        </Button>
+        {isLoggedIn && (
+          <Button
+            onClick={onMyDrawings}
+            size="medium"
+            variant="secondary"
+            telemetryEvent="click_my_drawings"
+          >
+            My Drawings
+          </Button>
+        )}
 
-        <Button
-          onClick={onHowToPlay}
-          size="medium"
-          variant="secondary"
-          telemetryEvent="click_my_rewards"
-        >
-          My Rewards
-        </Button>
+        {isLoggedIn && (
+          <Button
+            onClick={onHowToPlay}
+            size="medium"
+            variant="secondary"
+            telemetryEvent="click_my_rewards"
+          >
+            My Rewards
+          </Button>
+        )}
 
         <Button
           onClick={onLeaderboard}

src/server/vite.config.ts

@@ -13,6 +13,9 @@ export default defineConfig({
     outDir: '../../dist/server',
     target: 'node22',
     sourcemap: true,
+    commonjsOptions: {
+      ignoreDynamicRequires: true,
+    },
     rollupOptions: {
       external: [...builtinModules],
 

src/shared/types.ts

@@ -73,6 +73,7 @@ export type TelemetryEventType =
   | 'click_undo'
   | 'click_redo'
   | 'click_fill'
+  | 'click_log_in'
   // Toggle events
   | 'toggle_brush_size'
   | 'toggle_mirror_v'