feat: add sticker wall section to SessionDetail view
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -6,6 +6,9 @@ import { useToast } from '../components/Toast';
|
|||||||
import api from '../api/axios';
|
import api from '../api/axios';
|
||||||
import { formatLocalDateTime, formatLocalTime, isSunday } from '../utils/dateUtils';
|
import { formatLocalDateTime, formatLocalTime, isSunday } from '../utils/dateUtils';
|
||||||
import PopularityBadge from '../components/PopularityBadge';
|
import PopularityBadge from '../components/PopularityBadge';
|
||||||
|
import { useStickerWall } from '../hooks/useStickerWall';
|
||||||
|
import StickerWallThumbnail from '../components/StickerWallThumbnail';
|
||||||
|
import StickerWallModal from '../components/StickerWallModal';
|
||||||
|
|
||||||
function SessionDetail() {
|
function SessionDetail() {
|
||||||
const { id } = useParams();
|
const { id } = useParams();
|
||||||
@@ -23,6 +26,8 @@ function SessionDetail() {
|
|||||||
const [showDeleteSessionConfirm, setShowDeleteSessionConfirm] = useState(false);
|
const [showDeleteSessionConfirm, setShowDeleteSessionConfirm] = useState(false);
|
||||||
const [showChatImport, setShowChatImport] = useState(false);
|
const [showChatImport, setShowChatImport] = useState(false);
|
||||||
const [closingSession, setClosingSession] = 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 () => {
|
const loadSession = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
@@ -285,6 +290,34 @@ function SessionDetail() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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 && (
|
{showChatImport && (
|
||||||
<div className="mb-6">
|
<div className="mb-6">
|
||||||
<ChatImportPanel
|
<ChatImportPanel
|
||||||
|
|||||||
Reference in New Issue
Block a user