From 4136e3c2540fae4d4c51a49c0bda09ff1382d076 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Tue, 6 May 2025 22:01:13 +0200
Subject: [PATCH] observatoire

---
 components/observatory/observatory-view.tsx | 272 ++++++++++----------
 1 file changed, 137 insertions(+), 135 deletions(-)

diff --git a/components/observatory/observatory-view.tsx b/components/observatory/observatory-view.tsx
index 37a787e8..33fb7f2f 100644
--- a/components/observatory/observatory-view.tsx
+++ b/components/observatory/observatory-view.tsx
@@ -213,150 +213,152 @@ export function ObservatoryView() {
   const countriesMap = extractCountries(news);
 
   return (
-    <div className="flex flex-col h-[calc(100vh-64px)] w-full bg-white">
-      {/* Title */}
-      <div className="bg-white border-b border-gray-100 py-3 px-6">
-        <h1 className="text-xl font-bold text-gray-800">Observatoire de La Paix et du Vivre-Ensemble</h1>
-      </div>
+    <main className="w-full h-screen bg-white">
+      <div className="w-full h-full px-4 pt-12 pb-4 flex flex-col">
+        {/* Title */}
+        <div className="bg-white border-b border-gray-100 py-3 px-6">
+          <h1 className="text-xl font-bold text-gray-800">Observatoire de La Paix et du Vivre-Ensemble</h1>
+        </div>
 
-      {/* Main Content */}
-      <div className="grid grid-cols-2 gap-6 p-6 flex-1 overflow-auto bg-gray-50">
-        {/* News Feed Section */}
-        <div className="h-full overflow-hidden">
-          <div className="bg-white rounded-lg shadow-sm border border-gray-100 h-full flex flex-col">
-            <div className="px-6 py-4 border-b border-gray-100 flex-shrink-0">
-              <div className="flex items-center justify-between">
-                <h2 className="text-lg font-semibold text-gray-800">
-                  Latest News
-                  <span className="text-sm font-normal ml-2 text-gray-500">
-                    ({filteredNews.length} articles)
-                    {news.length < 10 && (
-                      <span className="italic ml-1">
-                        (API limitation)
+        {/* Main Content */}
+        <div className="grid grid-cols-2 gap-6 py-6 px-6 flex-1 overflow-auto bg-gray-50">
+          {/* News Feed Section */}
+          <div className="h-full overflow-hidden">
+            <div className="bg-white rounded-lg shadow-sm border border-gray-100 h-full flex flex-col">
+              <div className="px-6 py-4 border-b border-gray-100 flex-shrink-0">
+                <div className="flex items-center justify-between">
+                  <h2 className="text-lg font-semibold text-gray-800">
+                    Latest News
+                    <span className="text-sm font-normal ml-2 text-gray-500">
+                      ({filteredNews.length} articles)
+                      {news.length < 10 && (
+                        <span className="italic ml-1">
+                          (API limitation)
+                        </span>
+                      )}
+                    </span>
+                  </h2>
+                  <div className="flex gap-2">
+                    <Button 
+                      variant="outline" 
+                      size="sm" 
+                      onClick={() => setUseAccumulatedNews(!useAccumulatedNews)} 
+                      className="h-8 px-3 text-xs"
+                    >
+                      {useAccumulatedNews 
+                        ? `Showing All (${accumulatedNews.length})` 
+                        : `Showing Latest (${news.length})`}
+                    </Button>
+                    <Button 
+                      variant="outline" 
+                      size="sm" 
+                      onClick={() => invalidateCache()} 
+                      className="h-8 px-3 text-xs"
+                      aria-label="Purge cache"
+                    >
+                      Purge Cache
+                    </Button>
+                    <Button 
+                      variant="ghost" 
+                      size="sm" 
+                      onClick={() => fetchNews(true)} 
+                      className="h-8 w-8 p-0"
+                      aria-label="Refresh news"
+                    >
+                      <RefreshCw className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+              <div className="flex-1 overflow-y-auto">
+                {filteredNews.length === 0 ? (
+                  <div className="flex flex-col items-center justify-center h-full text-gray-500">
+                    <Globe className="h-12 w-12 mb-2 text-gray-300" />
+                    <p>{selectedCountry ? `No news found for ${selectedCountry}` : 'No news found'}</p>
+                  </div>
+                ) : (
+                  <ul className="divide-y divide-gray-100">
+                    {filteredNews.map((item) => (
+                      <li key={item.id}>
+                        <a 
+                          href={item.url} 
+                          target="_blank" 
+                          rel="noopener noreferrer"
+                          className="block hover:bg-gray-50 transition-colors"
+                        >
+                          <div className="px-6 py-4">
+                            <div className="flex justify-between items-start mb-2">
+                              <h3 className="font-medium text-gray-900 flex-grow">{item.title}</h3>
+                              <span className="text-xs text-gray-500 whitespace-nowrap ml-2">{item.displayDate}</span>
+                            </div>
+                            
+                            <div className="flex justify-between items-center mb-2">
+                              <span className="text-xs font-medium text-gray-500">{item.source}</span>
+                              {item.category && <span className="text-xs bg-gray-100 text-gray-600 rounded-full px-2 py-0.5">{item.category}</span>}
+                            </div>
+                            
+                            <p className="text-sm text-gray-600 mt-2 line-clamp-2">{item.description}</p>
+                          </div>
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Map Section */}
+          <div className="h-full overflow-hidden">
+            <div className="bg-white rounded-lg shadow-sm border border-gray-100 h-full flex flex-col">
+              <div className="px-6 py-4 border-b border-gray-100 flex-shrink-0">
+                <div className="flex justify-between items-center">
+                  <h2 className="text-lg font-semibold text-gray-800">
+                    World Map
+                    {selectedCountry && (
+                      <span className="text-sm font-normal ml-2 text-gray-500">
+                        (Selected: {selectedCountry})
                       </span>
                     )}
-                  </span>
-                </h2>
-                <div className="flex gap-2">
-                  <Button 
-                    variant="outline" 
-                    size="sm" 
-                    onClick={() => setUseAccumulatedNews(!useAccumulatedNews)} 
-                    className="h-8 px-3 text-xs"
-                  >
-                    {useAccumulatedNews 
-                      ? `Showing All (${accumulatedNews.length})` 
-                      : `Showing Latest (${news.length})`}
-                  </Button>
-                  <Button 
-                    variant="outline" 
-                    size="sm" 
-                    onClick={() => invalidateCache()} 
-                    className="h-8 px-3 text-xs"
-                    aria-label="Purge cache"
-                  >
-                    Purge Cache
-                  </Button>
-                  <Button 
-                    variant="ghost" 
-                    size="sm" 
-                    onClick={() => fetchNews(true)} 
-                    className="h-8 w-8 p-0"
-                    aria-label="Refresh news"
-                  >
-                    <RefreshCw className="h-4 w-4" />
-                  </Button>
+                  </h2>
+                  <div className="flex gap-2">
+                    <Button 
+                      variant="outline" 
+                      size="sm" 
+                      onClick={() => setSelectedCountry(null)}
+                      className="h-8 px-3 text-xs"
+                      disabled={!selectedCountry}
+                    >
+                      Clear Selection
+                    </Button>
+                    <Button 
+                      variant="ghost" 
+                      size="sm" 
+                      onClick={() => fetchNews(true)} 
+                      className="h-8 w-8 p-0"
+                      aria-label="Refresh news"
+                    >
+                      <RefreshCw className="h-4 w-4" />
+                    </Button>
+                  </div>
                 </div>
               </div>
-            </div>
-            <div className="flex-1 overflow-y-auto">
-              {filteredNews.length === 0 ? (
-                <div className="flex flex-col items-center justify-center h-full text-gray-500">
-                  <Globe className="h-12 w-12 mb-2 text-gray-300" />
-                  <p>{selectedCountry ? `No news found for ${selectedCountry}` : 'No news found'}</p>
-                </div>
-              ) : (
-                <ul className="divide-y divide-gray-100">
-                  {filteredNews.map((item) => (
-                    <li key={item.id}>
-                      <a 
-                        href={item.url} 
-                        target="_blank" 
-                        rel="noopener noreferrer"
-                        className="block hover:bg-gray-50 transition-colors"
-                      >
-                        <div className="px-6 py-4">
-                          <div className="flex justify-between items-start mb-2">
-                            <h3 className="font-medium text-gray-900 flex-grow">{item.title}</h3>
-                            <span className="text-xs text-gray-500 whitespace-nowrap ml-2">{item.displayDate}</span>
-                          </div>
-                          
-                          <div className="flex justify-between items-center mb-2">
-                            <span className="text-xs font-medium text-gray-500">{item.source}</span>
-                            {item.category && <span className="text-xs bg-gray-100 text-gray-600 rounded-full px-2 py-0.5">{item.category}</span>}
-                          </div>
-                          
-                          <p className="text-sm text-gray-600 mt-2 line-clamp-2">{item.description}</p>
-                        </div>
-                      </a>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </div>
-          </div>
-        </div>
-
-        {/* Map Section */}
-        <div className="h-full overflow-hidden">
-          <div className="bg-white rounded-lg shadow-sm border border-gray-100 h-full flex flex-col">
-            <div className="px-6 py-4 border-b border-gray-100 flex-shrink-0">
-              <div className="flex justify-between items-center">
-                <h2 className="text-lg font-semibold text-gray-800">
-                  World Map
-                  {selectedCountry && (
-                    <span className="text-sm font-normal ml-2 text-gray-500">
-                      (Selected: {selectedCountry})
-                    </span>
-                  )}
-                </h2>
-                <div className="flex gap-2">
-                  <Button 
-                    variant="outline" 
-                    size="sm" 
-                    onClick={() => setSelectedCountry(null)}
-                    className="h-8 px-3 text-xs"
-                    disabled={!selectedCountry}
-                  >
-                    Clear Selection
-                  </Button>
-                  <Button 
-                    variant="ghost" 
-                    size="sm" 
-                    onClick={() => fetchNews(true)} 
-                    className="h-8 w-8 p-0"
-                    aria-label="Refresh news"
-                  >
-                    <RefreshCw className="h-4 w-4" />
-                  </Button>
-                </div>
+              <div className="flex-1 relative">
+                {isBrowser && (
+                  <ObservatoryMap
+                    countries={Object.entries(countriesMap).map(([name, items]) => ({
+                      name,
+                      count: items.length
+                    }))}
+                    onCountrySelect={handleCountrySelect}
+                    selectedCountry={selectedCountry}
+                  />
+                )}
               </div>
             </div>
-            <div className="flex-1 relative">
-              {isBrowser && (
-                <ObservatoryMap
-                  countries={Object.entries(countriesMap).map(([name, items]) => ({
-                    name,
-                    count: items.length
-                  }))}
-                  onCountrySelect={handleCountrySelect}
-                  selectedCountry={selectedCountry}
-                />
-              )}
-            </div>
           </div>
         </div>
       </div>
-    </div>
+    </main>
   );
 } 
\ No newline at end of file