From fa7dcc2b081653b93ef22c0e90efaefdf0e76c02 Mon Sep 17 00:00:00 2001
From: echo <petrovskidimitar@yandex.com>
Date: Sat, 28 Feb 2026 18:47:11 +0100
Subject: [PATCH] feat: add general category, fix header wrapping, show last 5
 live blog updates

---
 backend/src/modules/strapi.service.ts         |   1 +
 .../article/content-types/article/schema.json |   4 +-
 .../home/PinnedLiveBlogsSidebar.tsx           | 104 +++++++++++++++++-
 frontend/src/components/layout/Header.tsx     |   2 +-
 4 files changed, 107 insertions(+), 4 deletions(-)

diff --git a/backend/src/modules/strapi.service.ts b/backend/src/modules/strapi.service.ts
index f823bdd..ce40944 100644
--- a/backend/src/modules/strapi.service.ts
+++ b/backend/src/modules/strapi.service.ts
@@ -131,6 +131,7 @@ export class StrapiService {
 
     // Map CMS category slugs to Macedonian display names
     const categoryMap: Record<string, { name: string; description: string }> = {
+      general: { name: 'Општо', description: 'Општи вести и теми' },
       sport: { name: 'Спорт', description: 'Спортски вести и анализи' },
       art: { name: 'Уметност', description: 'Уметност, култура и забава' },
       science: { name: 'Наука', description: 'Научни откритија и технологија' },
diff --git a/cms/cms/src/api/article/content-types/article/schema.json b/cms/cms/src/api/article/content-types/article/schema.json
index d387c37..a90b185 100644
--- a/cms/cms/src/api/article/content-types/article/schema.json
+++ b/cms/cms/src/api/article/content-types/article/schema.json
@@ -65,8 +65,8 @@
     },
     "category": {
       "type": "enumeration",
-      "enum": ["sport", "art", "science"],
-      "default": "sport",
+      "enum": ["general", "sport", "art", "science"],
+      "default": "general",
       "required": true
     }
   }
diff --git a/frontend/src/components/home/PinnedLiveBlogsSidebar.tsx b/frontend/src/components/home/PinnedLiveBlogsSidebar.tsx
index bd6f74d..77b8a17 100644
--- a/frontend/src/components/home/PinnedLiveBlogsSidebar.tsx
+++ b/frontend/src/components/home/PinnedLiveBlogsSidebar.tsx
@@ -2,9 +2,12 @@ import { useQuery } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
 import { fetchPinnedLiveBlogs } from '@/lib/api';
 import { Button } from '@/components/ui/button';
-import { Calendar, Eye, MessageSquare, Pin } from 'lucide-react';
+import { Calendar, Eye, MessageSquare, Pin, ChevronDown, ChevronUp, Clock } from 'lucide-react';
+import { useState } from 'react';
 
 export function PinnedLiveBlogsSidebar() {
+  const [showUpdates, setShowUpdates] = useState(false);
+  
   const { data: liveBlogs, isLoading, error } = useQuery({
     queryKey: ['pinned-live-blogs'],
     queryFn: fetchPinnedLiveBlogs,
@@ -47,6 +50,52 @@ export function PinnedLiveBlogsSidebar() {
     });
   };
 
+  const formatRelativeTime = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'сега';
+    if (diffMins < 60) return `${diffMins}м`;
+    if (diffHours < 24) return `${diffHours}ч`;
+    return `${diffDays}д`;
+  };
+
+  // Collect last 5 updates from all pinned live blogs
+  const getLastFiveUpdates = () => {
+    if (!liveBlogs) return [];
+    
+    const allUpdates: Array<{
+      id: string;
+      content: string;
+      createdAt: string;
+      liveBlogTitle: string;
+      liveBlogSlug: string;
+    }> = [];
+
+    liveBlogs.forEach((liveBlog) => {
+      if (liveBlog.updates && liveBlog.updates.length > 0) {
+        liveBlog.updates.forEach((update) => {
+          allUpdates.push({
+            ...update,
+            liveBlogTitle: liveBlog.title,
+            liveBlogSlug: liveBlog.slug,
+          });
+        });
+      }
+    });
+
+    // Sort by date descending and take first 5
+    return allUpdates
+      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+      .slice(0, 5);
+  };
+
+  const lastFiveUpdates = getLastFiveUpdates();
+
   if (isLoading) {
     return (
       <div className="border-brutal-sm bg-card p-6">
@@ -102,6 +151,59 @@ export function PinnedLiveBlogsSidebar() {
 
   return (
     <div className="border-brutal-sm bg-card p-6">
+      {/* Latest Updates Section - Collapsible */}
+      {lastFiveUpdates.length > 0 && (
+        <div className="mb-6 pb-6 border-b-2 border-foreground/10">
+          <button
+            onClick={() => setShowUpdates(!showUpdates)}
+            className="w-full flex items-center justify-between mb-4 group"
+          >
+            <div className="flex items-center gap-2">
+              <Clock className="h-5 w-5 text-accent" />
+              <h3 className="text-xl font-display">Последни Update</h3>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="px-2 py-1 border-2 border-foreground bg-foreground text-background text-xs font-body font-bold uppercase">
+                {lastFiveUpdates.length}
+              </span>
+              {showUpdates ? (
+                <ChevronUp className="h-4 w-4 transition-transform" />
+              ) : (
+                <ChevronDown className="h-4 w-4 transition-transform" />
+              )}
+            </div>
+          </button>
+
+          {showUpdates && (
+            <div className="space-y-3 animate-scale-in">
+              {lastFiveUpdates.map((update) => (
+                <Link
+                  key={update.id}
+                  to="/live-blogs/$slug"
+                  params={{ slug: update.liveBlogSlug }}
+                  className="block group"
+                >
+                  <div className="p-3 border-2 border-foreground/10 hover:border-accent hover:bg-accent/5 transition-all duration-150">
+                    <div className="flex items-start justify-between gap-2 mb-2">
+                      <span className="text-xs font-body font-bold text-muted-foreground line-clamp-1">
+                        {update.liveBlogTitle}
+                      </span>
+                      <span className="text-xs font-body text-muted-foreground whitespace-nowrap">
+                        {formatRelativeTime(update.createdAt)}
+                      </span>
+                    </div>
+                    <p className="text-sm font-body text-foreground line-clamp-2 group-hover:text-accent transition-colors">
+                      {update.content.replace(/<[^>]*>/g, '').substring(0, 120)}
+                      {update.content.length > 120 ? '...' : ''}
+                    </p>
+                  </div>
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
       <div className="flex items-center justify-between mb-6 pb-4 border-b-2 border-foreground/10">
         <div className="flex items-center gap-2">
           <Pin className="h-5 w-5 text-accent" />
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index 826a3c0..a5e92c5 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -58,7 +58,7 @@ export function Header() {
       <div className="container mx-auto max-w-6xl px-4 py-4">
         <div className="flex items-center justify-between">
           <Link to="/" className="group">
-            <h1 className="text-4xl md:text-5xl font-display tracking-tight">
+            <h1 className="text-4xl md:text-5xl font-display tracking-tight whitespace-nowrap">
               <span className="inline-block transition-transform group-hover:-translate-y-1 group-hover:translate-x-1">P</span>
               <span className="inline-block transition-transform group-hover:-translate-y-1 group-hover:translate-x-0.5 delay-75">l</span>
               <span className="inline-block transition-transform group-hover:-translate-y-1 group-hover:translate-x-0 delay-100">a</span>