feat: Implement comment and search functionality with a new frontend component, backend handlers, API client, and Dockerfile.

Author: zerox80

backend/Dockerfile

@@ -37,7 +37,7 @@
 
 # Use latest stable Rust for building
 # Provides access to latest Rust features and optimizations
-FROM rust:latest AS builder
+FROM rust:1.82-bookworm AS builder
 
 # Set working directory for all subsequent commands
 WORKDIR /app

backend/src/handlers/comments.rs

@@ -181,14 +181,8 @@ pub async fn create_comment(
     Path(tutorial_id): Path<String>,
     Json(payload): Json<CreateCommentRequest>,
 ) -> Result<Json<Comment>, (StatusCode, Json<ErrorResponse>)> {
-    if claims.role != "admin" {
-        return Err((
-            StatusCode::FORBIDDEN,
-            Json(ErrorResponse {
-                error: "Insufficient permissions".to_string(),
-            }),
-        ));
-    }
+    // Allow any authenticated user to comment
+    // if claims.role != "admin" { ... } check removed
 
     if let Err(e) = validate_tutorial_id(&tutorial_id) {
         return Err((StatusCode::BAD_REQUEST, Json(ErrorResponse { error: e })));

backend/src/handlers/search.rs

@@ -57,7 +57,7 @@ fn sanitize_fts_query(raw: &str) -> Result<String, String> {
             // Keep only safe characters for FTS5 queries
             let sanitized: String = token
                 .chars()
-                .filter(|c| c.is_ascii_alphanumeric() || matches!(c, '*' | '-' | '_'))
+                .filter(|c| c.is_ascii_alphanumeric() || matches!(c, '*' | '-' | '_' | '.' | '+' | '#' | '@'))
                 .collect();
             if sanitized.is_empty() {
                 None
@@ -71,7 +71,18 @@ fn sanitize_fts_query(raw: &str) -> Result<String, String> {
     if tokens.is_empty() {
         Err("Search query must contain at least one searchable character".to_string())
     } else {
-        Ok(tokens.join(" "))
+        // Join tokens with AND (implicit in FTS5)
+        // Append * to the last token for prefix matching
+        let mut query_parts = Vec::new();
+        for (i, token) in tokens.iter().enumerate() {
+            if i == tokens.len() - 1 {
+                // Last token: add prefix matching
+                query_parts.push(format!("\"{}\"*", token));
+            } else {
+                query_parts.push(format!("\"{}\"", token));
+            }
+        }
+        Ok(query_parts.join(" "))
     }
 }
 

src/api/client.js

@@ -17,7 +17,7 @@ export const getApiBaseUrl = () => {
       }
     }
   }
-  return 'http://localhost:8489/api'
+  return typeof window !== 'undefined' ? '/api' : 'http://localhost:8489/api'
 }
 const API_BASE_URL = getApiBaseUrl()
 const isBinaryBody = (body) => {
@@ -280,12 +280,17 @@ class ApiClient {
       ...options,
     })
   }
-  async listTutorialComments(tutorialId, options = {}) {
+  async listTutorialComments(tutorialId, { limit, offset, ...options } = {}) {
     if (!tutorialId) {
       throw new Error('tutorialId is required')
     }
     const encodedTutorialId = encodeURIComponent(tutorialId)
-    return this.request(`/tutorials/${encodedTutorialId}/comments`, options)
+    const params = new URLSearchParams()
+    if (limit !== undefined) params.append('limit', limit)
+    if (offset !== undefined) params.append('offset', offset)
+    const queryString = params.toString()
+    const endpoint = `/tutorials/${encodedTutorialId}/comments${queryString ? `?${queryString}` : ''}`
+    return this.request(endpoint, options)
   }
   async createComment(tutorialId, content, options = {}) {
     if (!tutorialId) {

src/components/Comments.jsx

@@ -1,18 +1,24 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import { MessageSquare, Send, Trash2 } from 'lucide-react';
+import { MessageSquare, Send, Trash2, ChevronDown } from 'lucide-react';
 import { useAuth } from '../context/AuthContext';
 import { api } from '../api/client';
 import PropTypes from 'prop-types';
+
 const VALID_TUTORIAL_ID = /^[a-zA-Z0-9_-]+$/;
+const COMMENTS_PER_PAGE = 20;
 
 const Comments = ({ tutorialId }) => {
   const [comments, setComments] = useState([]);
   const [newComment, setNewComment] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [loadingComments, setLoadingComments] = useState(false);
   const [loadError, setLoadError] = useState(null);
+  const [offset, setOffset] = useState(0);
+  const [hasMore, setHasMore] = useState(true);
+
   const { isAuthenticated, user } = useAuth();
   const isAdmin = Boolean(user && user.role === 'admin');
+
   const normalizedTutorialId = useMemo(() => {
     if (typeof tutorialId !== 'string') {
       return null;
@@ -24,79 +30,87 @@ const Comments = ({ tutorialId }) => {
     return trimmed;
   }, [tutorialId]);
 
-  const loadComments = useCallback(async () => {
+  const loadComments = useCallback(async (shouldReset = false) => {
     if (!normalizedTutorialId) {
       setComments([]);
       setLoadError(new Error('Kommentare für diese Ressource sind deaktiviert.'));
       return;
     }
+
     setLoadingComments(true);
     setLoadError(null);
+
     try {
-      // Fetch comments from the API using the tutorial ID
-      const data = await api.listTutorialComments(normalizedTutorialId);
-      // Ensure we always have an array, even if API returns unexpected data
-      setComments(Array.isArray(data) ? data : []);
+      const currentOffset = shouldReset ? 0 : offset;
+      const data = await api.listTutorialComments(normalizedTutorialId, {
+        limit: COMMENTS_PER_PAGE,
+        offset: currentOffset
+      });
+
+      const newComments = Array.isArray(data) ? data : [];
+
+      setComments(prev => shouldReset ? newComments : [...prev, ...newComments]);
+      setOffset(prev => shouldReset ? newComments.length : prev + newComments.length);
+      setHasMore(newComments.length === COMMENTS_PER_PAGE);
+
     } catch (error) {
-      // Log error for debugging but don't expose to user
       console.error('Failed to load comments:', error);
-      // Set empty array to maintain consistent state
-      setComments([]);
+      if (shouldReset) setComments([]);
       setLoadError(error);
+    } finally {
+      setLoadingComments(false);
     }
-    setLoadingComments(false);
-  }, [normalizedTutorialId]);
+  }, [normalizedTutorialId, offset]);
 
+  // Initial load
   useEffect(() => {
-    loadComments();
-  }, [loadComments]);
+    loadComments(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [normalizedTutorialId]);
+
+  const handleLoadMore = () => {
+    loadComments(false);
+  };
+
   const handleSubmit = async (e) => {
-    // Prevent default form submission behavior
     e.preventDefault();
-    // Validate form data and user permissions
     if (!canManageComments || !newComment.trim()) return;
-    // Set loading state to prevent duplicate submissions
+
     setIsLoading(true);
     try {
-      // Submit comment to API
       await api.createComment(normalizedTutorialId, newComment);
-      // Clear form for next comment
       setNewComment('');
-      // Refresh comments list to show new comment
-      await loadComments();
+      // Reset and reload to show the new comment at the top (assuming backend sorts by newest)
+      await loadComments(true);
     } catch (error) {
-      // Log error for debugging but don't expose sensitive info to user
       console.error('Failed to post comment:', error);
     } finally {
-      // Always reset loading state
       setIsLoading(false);
     }
   };
+
   const handleDelete = async (commentId) => {
-    // Double-check admin permissions
     if (!canManageComments) return;
-    // Show confirmation dialog to prevent accidental deletion
     if (typeof window !== 'undefined' && !window.confirm('Kommentar wirklich löschen?')) return;
+
     try {
-      // Delete comment from API
       await api.deleteComment(commentId);
-      // Refresh comments list to remove deleted comment
-      await loadComments();
+      // Remove from local state to avoid full reload
+      setComments(prev => prev.filter(c => c.id !== commentId));
     } catch (error) {
-      // Log error for debugging
       console.error('Failed to delete comment:', error);
     }
   };
-  const canManageComments = isAdmin && normalizedTutorialId;
+
+  const canManageComments = isAuthenticated && normalizedTutorialId;
 
   return (
     <div className="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
-      {}
       <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 flex items-center gap-2">
         <MessageSquare className="w-6 h-6" />
-        Kommentare ({comments.length})
+        Kommentare
       </h2>
-      {}
+
       {canManageComments && (
         <form onSubmit={handleSubmit} className="mb-8">
           <textarea
@@ -107,13 +121,10 @@ const Comments = ({ tutorialId }) => {
             rows={4}
             maxLength={1000}
           />
-          {}
           <div className="mt-2 flex justify-between items-center">
-            {}
             <span className="text-sm text-gray-500 dark:text-gray-400">
               {newComment.length}/1000
             </span>
-            {}
             <button
               type="submit"
               disabled={isLoading || !newComment.trim()}
@@ -125,34 +136,19 @@ const Comments = ({ tutorialId }) => {
           </div>
         </form>
       )}
-      {}
+
       {!isAuthenticated && (
         <div className="mb-8 p-4 bg-gray-50 dark:bg-gray-800 rounded-xl text-center">
           <p className="text-gray-600 dark:text-gray-400">
             Bitte melde dich an, um Kommentare zu schreiben.
           </p>
         </div>
       )}
-      {}
-      {isAuthenticated && !isAdmin && (
-        <div className="mb-8 p-4 bg-gray-50 dark:bg-gray-800 rounded-xl text-center">
-          <p className="text-gray-600 dark:text-gray-400">
-            Nur Administratoren können Kommentare hinzufügen oder löschen.
-          </p>
-        </div>
-      )}
-      {}
-      {loadingComments && (
-        <div className="mb-6 text-sm text-gray-500 dark:text-gray-400">Kommentare werden geladen…</div>
-      )}
-      {loadError && !loadingComments && (
-        <div className="mb-6 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-900/40 dark:bg-red-900/20 dark:text-red-200">
-          Kommentare konnten nicht geladen werden.
-        </div>
-      )}
-      {}
+
+
+
       <div className="space-y-4">
-        {comments.length === 0 ? (
+        {comments.length === 0 && !loadingComments ? (
           <p className="text-center text-gray-500 dark:text-gray-400 py-8">
             Noch keine Kommentare. Sei der Erste!
           </p>
@@ -162,19 +158,15 @@ const Comments = ({ tutorialId }) => {
               key={comment.id}
               className="p-4 bg-gray-50 dark:bg-gray-800 rounded-xl"
             >
-              {}
               <div className="flex justify-between items-start mb-2">
                 <div>
-                  {}
                   <span className="font-semibold text-gray-900 dark:text-gray-100">
                     {comment.author}
                   </span>
-                  {}
                   <span className="text-sm text-gray-500 dark:text-gray-400 ml-2">
                     {new Date(comment.created_at).toLocaleDateString('de-DE')}
                   </span>
                 </div>
-                {}
                 {isAdmin && (
                   <button
                     onClick={() => handleDelete(comment.id)}
@@ -185,18 +177,44 @@ const Comments = ({ tutorialId }) => {
                   </button>
                 )}
               </div>
-              {}
               <p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
                 {comment.content}
               </p>
             </div>
           ))
         )}
       </div>
+
+      {loadError && (
+        <div className="mt-6 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-900/40 dark:bg-red-900/20 dark:text-red-200">
+          Kommentare konnten nicht geladen werden.
+        </div>
+      )}
+
+      {hasMore && (
+        <div className="mt-8 text-center">
+          <button
+            onClick={handleLoadMore}
+            disabled={loadingComments}
+            className="inline-flex items-center gap-2 px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors disabled:opacity-50"
+          >
+            {loadingComments ? (
+              'Laden...'
+            ) : (
+              <>
+                <ChevronDown className="w-4 h-4" />
+                Mehr Kommentare laden
+              </>
+            )}
+          </button>
+        </div>
+      )}
     </div>
   );
 };
+
 Comments.propTypes = {
   tutorialId: PropTypes.string.isRequired,
 };
+
 export default Comments;