From 73a856a05c5b5821af7685a9ae102b6a9f83c90c Mon Sep 17 00:00:00 2001
From: kike <112205366+kike-alt@users.noreply.github.com>
Date: Thu, 24 Sep 2026 21:58:29 +0100
Subject: [PATCH] feat(analytics): map base canvas container and localized
 recent gists feed

---
 .../components/analytics/MapBaseComponent.tsx | 29 +++++++++++++++
 .../components/analytics/RecentGistsFeed.tsx  | 37 +++++++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 Frontend/src/components/analytics/MapBaseComponent.tsx
 create mode 100644 Frontend/src/components/analytics/RecentGistsFeed.tsx

diff --git a/Frontend/src/components/analytics/MapBaseComponent.tsx b/Frontend/src/components/analytics/MapBaseComponent.tsx
new file mode 100644
index 00000000..80a3514f
--- /dev/null
+++ b/Frontend/src/components/analytics/MapBaseComponent.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+export interface MapBaseProps {
+  latitude?: number;
+  longitude?: number;
+  zoom?: number;
+  children?: React.ReactNode;
+}
+
+export const MapBaseComponent: React.FC<MapBaseProps> = ({
+  latitude = 0,
+  longitude = 0,
+  zoom = 12,
+  children,
+}) => {
+  return (
+    <div className="relative w-full h-80 bg-gray-100 dark:bg-gray-850 border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden flex flex-col items-center justify-center">
+      <div className="absolute top-2 left-2 bg-white/90 dark:bg-gray-900/90 backdrop-blur px-2 py-1 rounded text-[10px] font-mono border border-gray-200 dark:border-gray-700 z-10">
+        Lat: {latitude.toFixed(4)} | Lng: {longitude.toFixed(4)} | Zoom: {zoom}
+      </div>
+      <div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
+        [Interactive Spatial Map Canvas Viewport]
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default MapBaseComponent;
diff --git a/Frontend/src/components/analytics/RecentGistsFeed.tsx b/Frontend/src/components/analytics/RecentGistsFeed.tsx
new file mode 100644
index 00000000..066fe649
--- /dev/null
+++ b/Frontend/src/components/analytics/RecentGistsFeed.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+export interface FeedGistItem {
+  id: string;
+  snippet: string;
+  timestamp: string;
+}
+
+export interface RecentGistsFeedProps {
+  items?: FeedGistItem[];
+}
+
+export const RecentGistsFeed: React.FC<RecentGistsFeedProps> = ({
+  items = [],
+}) => {
+  return (
+    <div className="p-4 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800">
+      <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-gray-100">
+        Recent Gists in Selected Area
+      </h4>
+      <div className="space-y-2 max-h-48 overflow-y-auto">
+        {items.length === 0 ? (
+          <p className="text-xs text-gray-400">No recent gists found in this bounding box.</p>
+        ) : (
+          items.map(item => (
+            <div key={item.id} className="p-2 bg-gray-50 dark:bg-gray-800 rounded text-xs border border-gray-100 dark:border-gray-750">
+              <p className="text-gray-800 dark:text-gray-200 font-mono">{item.snippet}</p>
+              <span className="text-[10px] text-gray-400">{item.timestamp}</span>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default RecentGistsFeed;