display image for each user in activities

Author: Pazl27

rocket-backend/internal/database/activities_table.go

@@ -53,8 +53,7 @@ func (s *service) GetActivitiesForUserAndFriends(userID uuid.UUID) ([]types.Acti
 	var activities []types.ActivityWithUser
 	for rows.Next() {
 		var activity types.ActivityWithUser
-		var uid uuid.UUID
-		if err := rows.Scan(&uid, &activity.Name, &activity.Time, &activity.Message); err != nil {
+		if err := rows.Scan(&activity.UserID, &activity.Name, &activity.Time, &activity.Message); err != nil {
 			logger.Error(fmt.Sprintf("Failed to scan activity row: %v", err))
 			return nil, custom_error.ErrDatabaseQuery
 		}

rocket-backend/internal/server/activity_handlers.go

@@ -1,8 +1,12 @@
 package server
 
 import (
+	"encoding/base64"
 	"net/http"
 
+	"rocket-backend/internal/types"
+	"rocket-backend/pkg/logger"
+
 	"github.com/gin-gonic/gin"
 	"github.com/google/uuid"
 )
@@ -31,5 +35,36 @@ func (s *Server) GetActivityHandler(c *gin.Context) {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to fetch user data"})
 		return
 	}
-	c.JSON(http.StatusOK, gin.H{"username": user.Username ,"activities": activities})
+
+	var activitiesWithImages []types.ActivityWithUserAndImage
+	for _, activity := range activities {
+		img, err := s.db.GetUserImage(activity.UserID)
+		if err != nil {
+			logger.Error("Failed to get image", err)
+			img = nil
+		}
+
+		if img != nil {
+			encodedImage := base64.StdEncoding.EncodeToString(img.Data)
+			activitiesWithImages = append(activitiesWithImages, types.ActivityWithUserAndImage{
+				Name:      activity.Name,
+				Time:      activity.Time,
+				Message:   activity.Message,
+				ImageName: img.Name,
+				ImageType: http.DetectContentType(img.Data),
+				ImageData: encodedImage,
+			})
+		} else {
+			activitiesWithImages = append(activitiesWithImages, types.ActivityWithUserAndImage{
+				Name:      activity.Name,
+				Time:      activity.Time,
+				Message:   activity.Message,
+				ImageName: "",
+				ImageType: "",
+				ImageData: "",
+			})
+		}
+	}
+
+	c.JSON(http.StatusOK, gin.H{"username": user.Username, "activities": activitiesWithImages})
 }

rocket-backend/internal/types/dto.go

@@ -58,10 +58,14 @@ type RunDTO struct {
 	CreatedAt string  `json:"created_at"`
 }
 
-type ActivityWithUser struct {
-	Name    string    `json:"name"`
-	Time    time.Time `json:"time"`
-	Message string    `json:"message"`
+
+type ActivityWithUserAndImage struct {
+	Name      string    `json:"name"`
+	Time      time.Time `json:"time"`
+	Message   string    `json:"message"`
+	ImageName string    `json:"image_name"`
+	ImageType string    `json:"image_type"`
+	ImageData string    `json:"image_data"`
 }
 
 type ChatMessage struct {

rocket-backend/internal/types/models.go

@@ -39,3 +39,10 @@ type Activity struct {
 	Time    time.Time `json:"time"`
 	Message string    `json:"message"`
 }
+
+type ActivityWithUser struct {
+	UserID  uuid.UUID `json:"user_id"`
+	Name    string    `json:"name"`
+	Time    time.Time `json:"time"`
+	Message string    `json:"message"`
+}

website/src/components/dashboard/ActivityPanel.vue

@@ -3,7 +3,14 @@
     <h2 class="panel-title">Activity Feed</h2>
     <ul class="activity-list">
       <li v-for="(activity, idx) in activities" :key="idx" class="activity-item" :class="{ 'user-activity': activity.isUser }">
-        <div class="avatar" :style="{ backgroundColor: activity.color }">
+        <span v-if="activity.image_data" class="avatar avatar-img">
+          <img
+            :src="`data:${activity.image_type || 'image/jpeg'};base64,${activity.image_data}`"
+            alt="User"
+            style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;"
+          />
+        </span>
+        <div v-else class="avatar" :style="{ backgroundColor: activity.color }">
           <span>{{ activity.initials }}</span>
         </div>
         <div class="activity-content">
@@ -28,6 +35,8 @@ interface Activity {
   description: string
   time: string
   isUser?: boolean
+  image_data?: string | null
+  image_type?: string
 }
 
 function formatRelativeTime(iso: string): string {
@@ -47,15 +56,17 @@ const activities = ref<Activity[]>([])
 onMounted(async () => {
   try {
     const { username, activities: backendActivities } = (await api.getActivityFeed()).data
-    activities.value = backendActivities.map(({ name, time, message }) => {
-      const displayName = name === 'You' ? username: name
+    activities.value = backendActivities.map(({ name, time, message, image_data, image_type }) => {
+      const displayName = name === 'You' ? username : name
       return {
         name: displayName,
         initials: getInitials(displayName),
         color: getColor(displayName),
         description: message,
         time: formatRelativeTime(time),
-        isUser: name === 'You'
+        isUser: name === 'You',
+        image_data,
+        image_type
       }
     })
   } catch {