From 1bbce9295d3bd2e120bdec2705981bdaba93bb37 Mon Sep 17 00:00:00 2001
From: Bas van den Aakster <bvdaakster@gmail.com>
Date: Wed, 12 Nov 2025 22:20:37 +0100
Subject: [PATCH] Add topics list with pagination and update to api.ronde.vu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Features:
- Added TopicsList component with pagination support
- Shows active topics with peer counts
- Pagination controls (Previous/Next)
- Refresh button to reload topics
- Modal UI with proper styling
- Floating "View Topics" button on main screens

Changes:
- Updated API URL from rondevu.xtrdev.workers.dev to api.ronde.vu
- Added TopicsList component with pagination UI
- Added modal overlay and styles
- Integrated topics modal into main App

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 README.md                     |   2 +-
 src/App.jsx                   |  24 +++-
 src/components/TopicsList.jsx | 120 ++++++++++++++++++++
 src/index.css                 | 201 ++++++++++++++++++++++++++++++++++
 4 files changed, 345 insertions(+), 2 deletions(-)
 create mode 100644 src/components/TopicsList.jsx

diff --git a/README.md b/README.md
index 9aff077..b806b93 100644
--- a/README.md
+++ b/README.md
@@ -123,7 +123,7 @@ The easiest way to test:
 
 ### Server Configuration
 
-This demo connects to: `https://rondevu.xtrdev.workers.dev`
+This demo connects to: `https://api.ronde.vu`
 
 To use a different server, modify the `baseUrl` in `src/main.js`:
 
diff --git a/src/App.jsx b/src/App.jsx
index be1fac3..d798c80 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,9 +6,10 @@ import ActionSelector from './components/ActionSelector';
 import MethodSelector from './components/MethodSelector';
 import ConnectionForm from './components/ConnectionForm';
 import ChatView from './components/ChatView';
+import TopicsList from './components/TopicsList';
 
 const rdv = new Rondevu({
-  baseUrl: 'https://rondevu.xtrdev.workers.dev',
+  baseUrl: 'https://api.ronde.vu',
   rtcConfig: {
     iceServers: [
       { urls: 'stun:stun.l.google.com:19302' },
@@ -60,6 +61,9 @@ function App() {
   const [demoVersion, setDemoVersion] = useState('unknown');
   const [serverVersion, setServerVersion] = useState('unknown');
 
+  // Topics modal state
+  const [showTopicsList, setShowTopicsList] = useState(false);
+
   const connectionRef = useRef(null);
   const dataChannelRef = useRef(null);
   const fileTransfersRef = useRef(new Map()); // Track ongoing file transfers
@@ -529,6 +533,24 @@ function App() {
         )}
 
         <div className="peer-id-badge">Your Peer ID: {rdv.peerId}</div>
+
+        {/* Floating button to view topics */}
+        {step !== 4 && (
+          <button
+            className="view-topics-button"
+            onClick={() => setShowTopicsList(true)}
+          >
+            📊 View Topics
+          </button>
+        )}
+
+        {/* Topics modal */}
+        {showTopicsList && (
+          <TopicsList
+            rdv={rdv}
+            onClose={() => setShowTopicsList(false)}
+          />
+        )}
       </main>
 
       <footer className="footer">
diff --git a/src/components/TopicsList.jsx b/src/components/TopicsList.jsx
new file mode 100644
index 0000000..1618155
--- /dev/null
+++ b/src/components/TopicsList.jsx
@@ -0,0 +1,120 @@
+import { useState, useEffect } from 'react';
+
+function TopicsList({ rdv, onClose }) {
+  const [topics, setTopics] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [page, setPage] = useState(1);
+  const [pagination, setPagination] = useState(null);
+  const [limit] = useState(20);
+
+  useEffect(() => {
+    loadTopics();
+  }, [page]);
+
+  const loadTopics = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await rdv.api.listTopics(page, limit);
+      setTopics(response.topics);
+      setPagination(response.pagination);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleRefresh = () => {
+    loadTopics();
+  };
+
+  const handlePrevPage = () => {
+    if (page > 1) {
+      setPage(page - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    if (pagination?.hasMore) {
+      setPage(page + 1);
+    }
+  };
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div className="modal-content topics-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-header">
+          <h2>Active Topics</h2>
+          <button className="close-button" onClick={onClose}>×</button>
+        </div>
+
+        <div className="modal-body">
+          {error && (
+            <div className="error-message" style={{ marginBottom: '1rem' }}>
+              Error: {error}
+            </div>
+          )}
+
+          {loading ? (
+            <div className="loading-message">Loading topics...</div>
+          ) : (
+            <>
+              {topics.length === 0 ? (
+                <div className="empty-message">
+                  No active topics found. Be the first to create one!
+                </div>
+              ) : (
+                <div className="topics-list">
+                  {topics.map((topic) => (
+                    <div key={topic.topic} className="topic-item">
+                      <div className="topic-name">{topic.topic}</div>
+                      <div className="topic-count">
+                        {topic.count} {topic.count === 1 ? 'peer' : 'peers'}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {pagination && (
+                <div className="pagination">
+                  <button
+                    onClick={handlePrevPage}
+                    disabled={page === 1}
+                    className="pagination-button"
+                  >
+                    ← Previous
+                  </button>
+                  <span className="pagination-info">
+                    Page {pagination.page} of {Math.ceil(pagination.total / pagination.limit)}
+                    {' '}({pagination.total} total)
+                  </span>
+                  <button
+                    onClick={handleNextPage}
+                    disabled={!pagination.hasMore}
+                    className="pagination-button"
+                  >
+                    Next →
+                  </button>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        <div className="modal-footer">
+          <button onClick={handleRefresh} className="button button-secondary">
+            🔄 Refresh
+          </button>
+          <button onClick={onClose} className="button button-primary">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TopicsList;
diff --git a/src/index.css b/src/index.css
index 98cd6ec..f0cba6c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -790,3 +790,204 @@ input[type="text"]:disabled {
     width: 100%;
   }
 }
+
+/* Topics List Modal */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease-out;
+}
+
+.modal-content {
+  background: white;
+  border-radius: 12px;
+  max-width: 600px;
+  width: 90%;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+  animation: slideUp 0.3s ease-out;
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.modal-header {
+  padding: 24px 32px;
+  border-bottom: 1px solid #e8eaf0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  color: #1a1a1a;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 2rem;
+  color: #6c757d;
+  cursor: pointer;
+  padding: 0;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: all 0.2s;
+}
+
+.close-button:hover {
+  background: #f8f9fc;
+  color: #1a1a1a;
+}
+
+.modal-body {
+  padding: 24px 32px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.modal-footer {
+  padding: 20px 32px;
+  border-top: 1px solid #e8eaf0;
+  display: flex;
+  gap: 12px;
+  justify-content: flex-end;
+}
+
+.topics-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.topic-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  background: #f8f9fc;
+  border: 1px solid #e8eaf0;
+  border-radius: 8px;
+  transition: all 0.2s;
+}
+
+.topic-item:hover {
+  background: #f0f2f8;
+  border-color: #d0d5dd;
+}
+
+.topic-name {
+  font-weight: 500;
+  color: #1a1a1a;
+  font-size: 1rem;
+  word-break: break-all;
+}
+
+.topic-count {
+  font-size: 0.9rem;
+  color: #6c757d;
+  background: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 24px;
+  padding-top: 20px;
+  border-top: 1px solid #e8eaf0;
+}
+
+.pagination-button {
+  padding: 10px 20px;
+  border: 1px solid #e8eaf0;
+  background: white;
+  color: #1a1a1a;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-weight: 500;
+}
+
+.pagination-button:hover:not(:disabled) {
+  background: #f8f9fc;
+  border-color: #5568d3;
+  color: #5568d3;
+}
+
+.pagination-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.pagination-info {
+  font-size: 0.9rem;
+  color: #6c757d;
+}
+
+.loading-message, .empty-message, .error-message {
+  text-align: center;
+  padding: 40px 20px;
+  color: #6c757d;
+  font-size: 1rem;
+}
+
+.error-message {
+  color: #dc3545;
+  background: #ffe8eb;
+  border: 1px solid #ffccd2;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.view-topics-button {
+  position: fixed;
+  bottom: 80px;
+  right: 20px;
+  padding: 14px 24px;
+  background: #5568d3;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 1rem;
+  font-weight: 500;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(85, 104, 211, 0.3);
+  transition: all 0.2s;
+  z-index: 100;
+}
+
+.view-topics-button:hover {
+  background: #667eea;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(85, 104, 211, 0.4);
+}