anything

src/modules/comic/ComicLanding.css

@@ -423,6 +423,45 @@
   opacity: 0.5;
 }
 
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.error-toast {
+  position: fixed;
+  top: 2rem;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 1rem 2rem;
+  background: rgba(239, 68, 68, 0.9);
+  border: 1px solid rgba(239, 68, 68, 1);
+  border-radius: 12px;
+  color: white;
+  font-weight: 500;
+  z-index: 9999;
+  animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateX(-50%) translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+  }
+}
+
 @media (max-width: 768px) {
   .hero-content {
     grid-template-columns: 1fr;

src/modules/comic/ComicLanding.tsx

@@ -33,6 +33,7 @@ export function ComicLanding() {
   const [error, setError] = useState('');
   const [searchQuery, setSearchQuery] = useState('');
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
+  const [loadingChapter, setLoadingChapter] = useState(false);
   
   const [ws, setWs] = useState<WebSocket | null>(null);
 
@@ -41,7 +42,7 @@ export function ComicLanding() {
     if (storedSession) {
       const session = JSON.parse(storedSession);
       const now = Date.now();
-  
+
       if (now < session.expiresAt) {
         setIsAuth(true);
         setPassword(session.password);
@@ -50,7 +51,7 @@ export function ComicLanding() {
         sessionStorage.removeItem(`comic_${sessionId}`);
       }
     }
-
+    
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const wsUrl = `${protocol}//${window.location.host}/ws`;
     const websocket = new WebSocket(wsUrl);
@@ -79,12 +80,32 @@ export function ComicLanding() {
         if (message.success) {
           setComicData(message.data);
           setIsAuth(true);
+
           sessionStorage.setItem(`comic_${sessionId}`, JSON.stringify({
             password,
             expiresAt: message.expiresAt
           }));
+          
+          setLoadingChapter(false);
         } else {
           setError(message.error || 'Gagal memuat data');
+          setLoadingChapter(false);
+        }
+      }
+
+      if (message.type === 'chapter_data_response') {
+        setLoadingChapter(false);
+        if (message.success) {
+          navigate(`/read/${sessionId}_chapter`, { 
+            state: { 
+              chapterData: message.data,
+              password,
+              sessionId
+            } 
+          });
+        } else {
+          setError(message.error || 'Gagal memuat chapter');
+          setTimeout(() => setError(''), 3000);
         }
       }
     };
@@ -129,14 +150,19 @@ export function ComicLanding() {
   };
 
   const handleReadChapter = (chapterSlug: string) => {
-    const chapterSessionId = `chapter_${sessionId}_${chapterSlug}`;
-    navigate(`/read/${chapterSessionId}`, { 
-      state: { 
-        chapterSlug,
-        password,
-        comicTitle: comicData?.title 
-      } 
-    });
+    if (!ws) {
+      setError('WebSocket tidak terhubung');
+      return;
+    }
+
+    setLoadingChapter(true);
+    
+    ws.send(JSON.stringify({
+      type: 'request_chapter_data',
+      sessionId,
+      password,
+      chapterSlug
+    }));
   };
 
   const filteredChapters = comicData?.chapters.filter(ch =>
@@ -167,7 +193,7 @@ export function ComicLanding() {
           <div className="error-icon">⚠️</div>
           <h2>Oops!</h2>
           <p>{error}</p>
-          <button onClick={() => navigate('/')}>Kembali ke awal</button>
+          <button onClick={() => navigate('/')}>Kembali ke Home</button>
         </div>
       </div>
     );
@@ -225,6 +251,21 @@ export function ComicLanding() {
 
   return (
     <div className="comic-landing">
+      {loadingChapter && (
+        <div className="loading-overlay">
+          <div className="loading-container">
+            <div className="spinner"></div>
+            <p>Loading chapter...</p>
+          </div>
+        </div>
+      )}
+
+      {error && isAuth && (
+        <div className="error-toast">
+          {error}
+        </div>
+      )}
+
       <div className="hero-section">
         <div className="hero-backdrop" style={{ backgroundImage: `url(${comicData.thumbnailUrl})` }}></div>
         <div className="hero-content">

src/modules/comic/ComicReader.tsx

@@ -25,7 +25,8 @@ interface ReaderData {
 export function ComicReader() {
   const { sessionId } = useParams();
   const navigate = useNavigate();
-  const location = useLocation();  
+  const location = useLocation();
+  
   const [data, setData] = useState<ReaderData | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
@@ -34,16 +35,28 @@ export function ComicReader() {
   const [showControls, setShowControls] = useState(true);
   const [showPageJump, setShowPageJump] = useState(false);
   const [jumpPage, setJumpPage] = useState('');
-  const [_, setWs] = useState<WebSocket | null>(null);  
+  const [ws, setWs] = useState<WebSocket | null>(null);
+  
   const imageRefs = useRef<{ [key: number]: HTMLImageElement | null }>({});
   const controlsTimeout = useRef<number | null>(null);
 
+  // Get data from location state (passed from ComicLanding)
+  const chapterData = location.state?.chapterData;
   const password = location.state?.password || 
     JSON.parse(sessionStorage.getItem(`comic_${sessionId}`) || '{}').password;
+  const originalSessionId = location.state?.sessionId;
 
   useEffect(() => {
-    if (!password) {
-      setError('Unauthorized access');
+    // If we have chapter data from state, use it directly
+    if (chapterData) {
+      setData(chapterData);
+      setLoading(false);
+      return;
+    }
+
+    // Otherwise, this might be a direct link or refresh
+    if (!password || !originalSessionId) {
+      setError('Unauthorized access - please open from comic page');
       setLoading(false);
       return;
     }
@@ -53,25 +66,11 @@ export function ComicReader() {
     const websocket = new WebSocket(wsUrl);
 
     websocket.onopen = () => {
-      websocket.send(JSON.stringify({
-        type: 'request_comic_data',
-        sessionId,
-        password
-      }));
-    };
-
-    websocket.onmessage = (event) => {
-      const message = JSON.parse(event.data);
-      
-      if (message.type === 'comic_data_response') {
-        if (message.success) {
-          setData(message.data);
-          setLoading(false);
-        } else {
-          setError(message.error || 'Failed to load chapter');
-          setLoading(false);
-        }
-      }
+      console.log('[Reader WS] Connected');
+      // Since we don't have chapter slug, we can't request
+      // User should go back to comic landing page
+      setError('Please open chapter from comic page');
+      setLoading(false);
     };
 
     websocket.onerror = () => {
@@ -84,7 +83,7 @@ export function ComicReader() {
     return () => {
       websocket.close();
     };
-  }, [sessionId, password]);
+  }, [sessionId, password, chapterData, originalSessionId]);
 
   useEffect(() => {
     const resetTimeout = () => {
@@ -111,6 +110,7 @@ export function ComicReader() {
     };
   }, []);
 
+  // Keyboard shortcuts
   useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
       if (e.key === 'ArrowRight') nextPage();
@@ -124,6 +124,7 @@ export function ComicReader() {
     return () => window.removeEventListener('keydown', handleKeyPress);
   }, [currentPage, data]);
 
+  // Scroll to current page in scroll mode
   useEffect(() => {
     if (viewMode === 'scroll' && imageRefs.current[currentPage]) {
       imageRefs.current[currentPage]?.scrollIntoView({ 
@@ -151,14 +152,12 @@ export function ComicReader() {
   };
 
   const handleChapterNavigation = (chapterSlug: string) => {
-    const newSessionId = `chapter_${Date.now()}_${chapterSlug}`;
-    navigate(`/read/${newSessionId}`, {
-      state: {
-        chapterSlug,
-        password,
-        comicTitle: data?.title
-      }
-    });
+    // Go back to comic landing and let it handle chapter loading
+    navigate(-1);
+    
+    // Alternatively, we could navigate to the same comic landing
+    // and trigger chapter load from there
+    // But going back is simpler and maintains the flow
   };
 
   const handlePageJump = () => {

src/server/websocket.ts

@@ -14,11 +14,13 @@ interface ComicSession {
   data: any;
   createdAt: number;
   expiresAt: number;
+  clientWs?: ServerWebSocket;
 }
 
 const sessions = new Map<string, Session>();
 const comicSessions = new Map<string, ComicSession>();
 const botConnections = new Set<ServerWebSocket>();
+const clientConnections = new Map<string, ServerWebSocket>();
 
 export function handleWebSocketConnection(ws: ServerWebSocket) {
   // @ts-ignore
@@ -76,6 +78,10 @@ function handleMessage(ws: ServerWebSocket, message: any) {
       handleComicStream(message);
       break;
 
+    case 'chapter_fetched':
+      handleChapterFetched(message);
+      break;
+
     case 'request_comic_data':
       handleComicDataRequest(ws, message);
       break;
@@ -84,6 +90,10 @@ function handleMessage(ws: ServerWebSocket, message: any) {
       handlePasswordValidation(ws, message);
       break;
 
+    case 'request_chapter_data':
+      handleChapterDataRequest(ws, message);
+      break;
+
     default:
       console.log('[WebSocket] Unknown message type:', type);
   }
@@ -138,6 +148,9 @@ function handleComicDataRequest(ws: ServerWebSocket, message: any) {
     return;
   }
 
+  comicSession.clientWs = ws;
+  clientConnections.set(sessionId, ws);
+
   ws.send(JSON.stringify({
     type: 'comic_data_response',
     success: true,
@@ -177,6 +190,80 @@ function handlePasswordValidation(ws: ServerWebSocket, message: any) {
   }));
 }
 
+function handleChapterDataRequest(ws: ServerWebSocket, message: any) {
+  const { sessionId, password, chapterSlug } = message;
+  
+  const comicSession = comicSessions.get(sessionId);
+  
+  if (!comicSession) {
+    ws.send(JSON.stringify({
+      type: 'chapter_data_response',
+      success: false,
+      error: 'Session not found or expired'
+    }));
+    return;
+  }
+
+  if (comicSession.password !== password) {
+    ws.send(JSON.stringify({
+      type: 'chapter_data_response',
+      success: false,
+      error: 'Invalid password'
+    }));
+    return;
+  }
+
+  if (Date.now() > comicSession.expiresAt) {
+    comicSessions.delete(sessionId);
+    ws.send(JSON.stringify({
+      type: 'chapter_data_response',
+      success: false,
+      error: 'Session expired'
+    }));
+    return;
+  }
+
+  comicSession.clientWs = ws;
+  clientConnections.set(sessionId, ws);
+
+  botConnections.forEach(botWs => {
+    try {
+      botWs.send(JSON.stringify({
+        type: 'fetch_chapter_request',
+        sessionId,
+        chapterSlug,
+        sender: comicSession.sender
+      }));
+    } catch (error) {
+      console.error('[WebSocket] Error sending to bot:', error);
+    }
+  });
+
+  console.log(`[WebSocket] Chapter fetch requested: ${chapterSlug} for session: ${sessionId}`);
+}
+
+function handleChapterFetched(message: any) {
+  const { sessionId, chapterData, success, error } = message;
+  const clientWs = clientConnections.get(sessionId);
+  
+  if (!clientWs) {
+    console.log(`[WebSocket] No client connection found for session: ${sessionId}`);
+    return;
+  }
+
+  try {
+    clientWs.send(JSON.stringify({
+      type: 'chapter_data_response',
+      success,
+      data: chapterData,
+      error: error || null
+    }));
+    console.log(`[WebSocket] Chapter data sent to client for session: ${sessionId}`);
+  } catch (err) {
+    console.error('[WebSocket] Error sending chapter data to client:', err);
+  }
+}
+
 function handleRegistrationSubmit(sessionId: string, data: any) {
   const session = sessions.get(sessionId);
   if (!session) {
@@ -244,11 +331,23 @@ function cleanup(ws: ServerWebSocket) {
       session.ws = undefined;
     }
   }
+
+  for (const [sessionId, clientWs] of clientConnections.entries()) {
+    if (clientWs === ws) {
+      clientConnections.delete(sessionId);
+    }
+  }
+
+  for (const [_, comicSession] of comicSessions.entries()) {
+    if (comicSession.clientWs === ws) {
+      comicSession.clientWs = undefined;
+    }
+  }
 }
 
 setInterval(() => {
   const now = Date.now();
- 
+
   for (const [sessionId, session] of sessions.entries()) {
     if (now - session.createdAt > 600000) {
       sessions.delete(sessionId);
@@ -259,6 +358,7 @@ setInterval(() => {
   for (const [sessionId, comicSession] of comicSessions.entries()) {
     if (now > comicSession.expiresAt) {
       comicSessions.delete(sessionId);
+      clientConnections.delete(sessionId);
       console.log('[WebSocket] Cleaned up expired comic session:', sessionId);
     }
   }