From 9ac236575c3091e7394f02f726161a26208ca17f Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Mon, 24 Aug 2026 01:46:45 -0400
Subject: [PATCH] feat: add sticker wall section to SessionDetail view

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/pages/SessionDetail.jsx | 33 ++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/frontend/src/pages/SessionDetail.jsx b/frontend/src/pages/SessionDetail.jsx
index 1124722..72be9d6 100644
--- a/frontend/src/pages/SessionDetail.jsx
+++ b/frontend/src/pages/SessionDetail.jsx
@@ -6,6 +6,9 @@ import { useToast } from '../components/Toast';
 import api from '../api/axios';
 import { formatLocalDateTime, formatLocalTime, isSunday } from '../utils/dateUtils';
 import PopularityBadge from '../components/PopularityBadge';
+import { useStickerWall } from '../hooks/useStickerWall';
+import StickerWallThumbnail from '../components/StickerWallThumbnail';
+import StickerWallModal from '../components/StickerWallModal';
 
 function SessionDetail() {
   const { id } = useParams();
@@ -23,6 +26,8 @@ function SessionDetail() {
   const [showDeleteSessionConfirm, setShowDeleteSessionConfirm] = useState(false);
   const [showChatImport, setShowChatImport] = useState(false);
   const [closingSession, setClosingSession] = useState(false);
+  const [showStickerWallModal, setShowStickerWallModal] = useState(false);
+  const { imageUrl: stickerWallUrl, loading: stickerWallLoading, error: stickerWallError } = useStickerWall(id);
 
   const loadSession = useCallback(async () => {
     try {
@@ -285,6 +290,34 @@ function SessionDetail() {
         />
       </div>
 
+      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-6">
+        <h2 className="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-3">Sticker Wall</h2>
+        {stickerWallLoading ? (
+          <div className="flex items-center gap-2 text-gray-500 dark:text-gray-400">
+            <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            <span className="text-sm">Loading sticker wall...</span>
+          </div>
+        ) : stickerWallError || !stickerWallUrl ? (
+          <p className="text-sm text-gray-500 dark:text-gray-400 italic">No sticker wall for this session</p>
+        ) : (
+          <StickerWallThumbnail
+            imageUrl={stickerWallUrl}
+            loading={false}
+            error={false}
+            onClick={() => setShowStickerWallModal(true)}
+          />
+        )}
+      </div>
+
+      <StickerWallModal
+        isOpen={showStickerWallModal}
+        onClose={() => setShowStickerWallModal(false)}
+        imageUrl={stickerWallUrl}
+      />
+
       {showChatImport && (
         <div className="mb-6">
           <ChatImportPanel