Merge pull request #30 from 8JP8/fix-routing-and-voip-features-10337885148275067199

Fix 404 routing, Globe scrolling, and VoIP UI logic

Author: 8JP8

frontend/components/ChatRoom/ChatRoomContainer.tsx

@@ -991,7 +991,8 @@ const ChatRoomContainer: React.FC<ChatRoomContainerProps> = ({
               {/* Action Buttons */}
               <div className="flex flex-wrap sm:flex-nowrap items-center gap-2 mt-2 sm:mt-0 w-full sm:w-auto">
                 {/* VOIP Button */}
-                {!room.is_public && (roomData?.voip_enabled ?? room.voip_enabled) && (
+                {/* Logic: Group Chat (no topic_id) -> Always Show. Private Topic Chat -> Show if enabled. Public -> Hide. */}
+                {((!room.topic_id) || (!room.is_public && (roomData?.voip_enabled ?? room.voip_enabled))) && (
                   <div className="flex-1 sm:flex-none">
                     <VoipButton
                       roomId={room.id}

frontend/components/ChatRoom/ChatRoomMembersModal.tsx

@@ -514,7 +514,7 @@ const ChatRoomSettingsSection: React.FC<ChatRoomSettingsSectionProps> = ({
           aria-checked={voipEnabled}
           onClick={handleToggleVoip}
           disabled={updating}
-          className={`${voipEnabled ? 'bg-blue-600' : 'bg-gray-200 dark:bg-gray-700'} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 disabled:opacity-50`}
+          className={`${voipEnabled ? 'bg-blue-600' : 'bg-gray-400 dark:bg-gray-600'} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 disabled:opacity-50`}
         >
           <span
             aria-hidden="true"

frontend/components/UI/GlobeBackground.tsx

@@ -328,7 +328,7 @@ function GlobeBackgroundInner({ className = '' }: GlobeBackgroundProps) {
                     }}
                     width={1200}
                     height={1200}
-                    className="w-full h-full opacity-0 transition-opacity duration-1000 pointer-events-auto"
+                    className="w-full h-full opacity-0 transition-opacity duration-1000 pointer-events-auto touch-pan-y"
                     style={{
                         contain: 'layout paint size',
                         cursor: 'grab',

frontend/pages/index.tsx

@@ -354,37 +354,63 @@ export default function Home() {
     };
   }, [topics]); // Add topics dependency to find associated topic
 
-  // Handle deep linking via query params
+  // Handle deep linking via query params and path (SPA fallback)
   useEffect(() => {
     if (!router.isReady) return;
 
     const { chatRoomId, postId } = router.query;
+    const path = router.asPath.split('?')[0];
 
+    // Handle Query Params (Legacy/Direct)
     if (chatRoomId) {
-      // Remove query param to clean URL
       router.replace('/', undefined, { shallow: true });
-
       const event = new CustomEvent('openChatRoom', { detail: { chatRoomId } });
-      // Small delay to ensure listeners are ready/state is settled
       setTimeout(() => window.dispatchEvent(event), 100);
-    } else if (postId) {
-      // Remove query param
-      router.replace('/', undefined, { shallow: true });
+      return;
+    }
 
+    if (postId) {
+      router.replace('/', undefined, { shallow: true });
       const event = new CustomEvent('openPost', { detail: { postId } });
       setTimeout(() => window.dispatchEvent(event), 100);
-    } else if (router.query.topicId) {
+      return;
+    }
+
+    if (router.query.topicId) {
       const topicId = router.query.topicId as string;
-      // Remove query param
       router.replace('/', undefined, { shallow: true });
-
-      // Find and select the topic
       const topic = topics.find(t => t.id === topicId);
       if (topic) {
         handleTopicSelect(topic);
       }
+      return;
+    }
+
+    // Handle Path-based Routing (SPA Fallback)
+    // Only if we are effectively on the root page logic but the path is different
+    if (path !== '/') {
+        // Regex for /post/[id]
+        const postMatch = path.match(/^\/post\/([a-zA-Z0-9_-]+)$/);
+        if (postMatch) {
+           const id = postMatch[1];
+           const event = new CustomEvent('openPost', { detail: { postId: id } });
+           setTimeout(() => window.dispatchEvent(event), 100);
+           return;
+        }
+
+        // Regex for /chat-room/[id]
+        const chatMatch = path.match(/^\/chat-room\/([a-zA-Z0-9_-]+)$/);
+        if (chatMatch) {
+           const id = chatMatch[1];
+           const event = new CustomEvent('openChatRoom', { detail: { chatRoomId: id } });
+           setTimeout(() => window.dispatchEvent(event), 100);
+           return;
+        }
+
+        // If it's an unknown path served by index.html fallback, redirect to 404
+        router.replace('/404');
     }
-  }, [router.isReady, router.query, topics]);
+  }, [router.isReady, router.query, router.asPath, topics]);
 
 
   // Socket listeners for badge counts