feat: Add playlist generator with workout AI patterns

packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/playlist-view-actions.tsx

@@ -1,21 +1,32 @@
 'use client';
 
-import React from 'react';
+import React, { useState } from 'react';
 import { Button } from 'antd';
-import { EditOutlined } from '@ant-design/icons';
+import { EditOutlined, ThunderboltOutlined } from '@ant-design/icons';
 import { BoardDetails } from '@/app/lib/types';
 import { constructClimbListWithSlugs } from '@/app/lib/url-utils';
 import BackButton from '@/app/components/back-button';
+import { PlaylistGeneratorDrawer } from '@/app/components/playlist-generator';
 import styles from './playlist-view-actions.module.css';
 
 type PlaylistViewActionsProps = {
   boardDetails: BoardDetails;
   angle: number;
   isOwner: boolean;
+  playlistUuid: string;
   onEditClick: () => void;
+  onPlaylistUpdated?: () => void;
 };
 
-const PlaylistViewActions = ({ boardDetails, angle, isOwner, onEditClick }: PlaylistViewActionsProps) => {
+const PlaylistViewActions = ({
+  boardDetails,
+  angle,
+  isOwner,
+  playlistUuid,
+  onEditClick,
+  onPlaylistUpdated,
+}: PlaylistViewActionsProps) => {
+  const [generatorOpen, setGeneratorOpen] = useState(false);
   const getBackToListUrl = () => {
     const { board_name, layout_name, size_name, size_description, set_names } = boardDetails;
 
@@ -28,36 +39,64 @@ const PlaylistViewActions = ({ boardDetails, angle, isOwner, onEditClick }: Play
     return `/${board_name}/${boardDetails.layout_id}/${boardDetails.size_id}/${boardDetails.set_ids.join(',')}/${angle}/list`;
   };
 
-  return (
-    <div className={styles.container}>
-      {/* Mobile view */}
-      <div className={styles.mobileActions}>
-        <div className={styles.mobileLeft}>
-          <BackButton fallbackUrl={getBackToListUrl()} />
-        </div>
+  const handleGeneratorSuccess = () => {
+    onPlaylistUpdated?.();
+  };
 
-        {isOwner && (
-          <div className={styles.mobileRight}>
-            <Button icon={<EditOutlined />} onClick={onEditClick}>
-              Edit
-            </Button>
+  return (
+    <>
+      <div className={styles.container}>
+        {/* Mobile view */}
+        <div className={styles.mobileActions}>
+          <div className={styles.mobileLeft}>
+            <BackButton fallbackUrl={getBackToListUrl()} />
           </div>
-        )}
-      </div>
 
-      {/* Desktop view */}
-      <div className={styles.desktopActions}>
-        <BackButton fallbackUrl={getBackToListUrl()} className={styles.backButton} />
+          {isOwner && (
+            <div className={styles.mobileRight}>
+              <Button
+                icon={<ThunderboltOutlined />}
+                onClick={() => setGeneratorOpen(true)}
+              >
+                Generate
+              </Button>
+              <Button icon={<EditOutlined />} onClick={onEditClick}>
+                Edit
+              </Button>
+            </div>
+          )}
+        </div>
 
-        {isOwner && (
-          <div className={styles.actionButtons}>
-            <Button icon={<EditOutlined />} onClick={onEditClick}>
-              Edit Playlist
-            </Button>
-          </div>
-        )}
+        {/* Desktop view */}
+        <div className={styles.desktopActions}>
+          <BackButton fallbackUrl={getBackToListUrl()} className={styles.backButton} />
+
+          {isOwner && (
+            <div className={styles.actionButtons}>
+              <Button
+                icon={<ThunderboltOutlined />}
+                onClick={() => setGeneratorOpen(true)}
+              >
+                Generate Playlist
+              </Button>
+              <Button icon={<EditOutlined />} onClick={onEditClick}>
+                Edit Playlist
+              </Button>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+
+      {/* Playlist Generator Drawer */}
+      <PlaylistGeneratorDrawer
+        open={generatorOpen}
+        onClose={() => setGeneratorOpen(false)}
+        playlistUuid={playlistUuid}
+        boardDetails={boardDetails}
+        angle={angle}
+        onSuccess={handleGeneratorSuccess}
+      />
+    </>
   );
 };
 

packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/playlist-view-content.tsx

@@ -49,6 +49,7 @@ export default function PlaylistViewContent({
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [editDrawerOpen, setEditDrawerOpen] = useState(false);
+  const [listRefreshKey, setListRefreshKey] = useState(0);
   const { token, isLoading: tokenLoading } = useWsAuthToken();
 
   const fetchPlaylist = useCallback(async () => {
@@ -86,6 +87,13 @@ export default function PlaylistViewContent({
     setPlaylist(updatedPlaylist);
   }, []);
 
+  const handlePlaylistUpdated = useCallback(() => {
+    // Refresh the climbs list
+    setListRefreshKey((prev) => prev + 1);
+    // Refetch playlist to update count
+    fetchPlaylist();
+  }, [fetchPlaylist]);
+
   // Check if current user is the owner
   const isOwner = playlist?.userRole === 'owner';
 
@@ -140,7 +148,9 @@ export default function PlaylistViewContent({
           boardDetails={boardDetails}
           angle={angle}
           isOwner={isOwner}
+          playlistUuid={playlistUuid}
           onEditClick={() => setEditDrawerOpen(true)}
+          onPlaylistUpdated={handlePlaylistUpdated}
         />
       </div>
 
@@ -223,6 +233,7 @@ export default function PlaylistViewContent({
 
         {/* Climbs List */}
         <PlaylistClimbsList
+          key={listRefreshKey}
           playlistUuid={playlistUuid}
           boardDetails={boardDetails}
           angle={angle}