Welcome banner

Author: Florian Maas

frontend/src/components/WelcomeBanner.tsx

@@ -0,0 +1,28 @@
+import { X } from "lucide-react";
+import { useGalaxyStore } from "../store/useGalaxyStore";
+
+export function WelcomeBanner() {
+  const dismissWelcome = useGalaxyStore((s) => s.dismissWelcome);
+
+  return (
+    <div className="bg-gray-900/95 backdrop-blur-md rounded-lg px-4 py-4 sm:px-6 sm:py-4 shadow-2xl w-full sm:w-96 border border-gray-700/50 relative">
+      <button
+        onClick={dismissWelcome}
+        className="absolute top-3 right-3 text-white bg-gray-700 hover:bg-gray-600 transition-colors p-1.5 rounded-full"
+        aria-label="Dismiss welcome message"
+      >
+        <X size={16} />
+      </button>
+
+      <h2 className="text-white text-lg font-bold mb-2 pr-8">
+        Welcome to PyAtlas
+      </h2>
+
+      <p className="text-gray-300 text-sm leading-relaxed">
+        Explore 10,000 popular Python packages on an interactive map. Packages
+        with similar functionality are displayed close together. Click any point
+        to learn more, or use search to find a specific package.
+      </p>
+    </div>
+  );
+}

frontend/src/components/layout/DesktopLayout.tsx

@@ -1,6 +1,7 @@
 import { Menu } from "lucide-react";
 import { Sidebar } from "./Sidebar/Sidebar";
 import { PackageDetail } from "../PackageDetail";
+import { WelcomeBanner } from "../WelcomeBanner";
 import { SearchBar } from "../SearchBar";
 import { FloatingGitHubButton } from "../shared/FloatingGitHubButton";
 import { ZoomControls } from "../shared/ZoomControls";
@@ -33,6 +34,7 @@ function CollapsedTopBar() {
 
 export function DesktopLayout() {
   const isSidebarOpen = useGalaxyStore((s) => s.isSidebarOpen);
+  const welcomeDismissed = useGalaxyStore((s) => s.welcomeDismissed);
 
   return (
     <>
@@ -42,12 +44,12 @@ export function DesktopLayout() {
       {/* Sidebar */}
       <Sidebar />
 
-      {/* Package Detail - positioned next to sidebar when open */}
+      {/* Welcome Banner or Package Detail - positioned next to sidebar when open */}
       <div
         className={`fixed bottom-6 z-40 pointer-events-auto transition-[left] duration-300 ease-in-out
                     ${isSidebarOpen ? "left-[344px]" : "left-6"}`}
       >
-        <PackageDetail />
+        {welcomeDismissed ? <PackageDetail /> : <WelcomeBanner />}
       </div>
 
       {/* Bottom right controls */}

frontend/src/components/layout/MobileLayout.tsx

@@ -1,9 +1,13 @@
 import { TopBar } from "./TopBar";
 import { PackageDetail } from "../PackageDetail";
+import { WelcomeBanner } from "../WelcomeBanner";
 import { FloatingGitHubButton } from "../shared/FloatingGitHubButton";
 import { ZoomControls } from "../shared/ZoomControls";
+import { useGalaxyStore } from "../../store/useGalaxyStore";
 
 export function MobileLayout() {
+  const welcomeDismissed = useGalaxyStore((s) => s.welcomeDismissed);
+
   return (
     <>
       <TopBar />
@@ -16,7 +20,7 @@ export function MobileLayout() {
           <div className="self-end sm:order-2 sm:hidden">
             <ZoomControls />
           </div>
-          <PackageDetail />
+          {welcomeDismissed ? <PackageDetail /> : <WelcomeBanner />}
         </div>
       </div>
 

frontend/src/store/useGalaxyStore.ts

@@ -48,6 +48,7 @@ interface GalaxyStore {
   highlightedClusterId: number | null;
   highlightStartTime: number | null;
   packageDetailExpanded: boolean;
+  welcomeDismissed: boolean;
 
   setPackages: (packages: Package[]) => void;
   setClusters: (clusters: Cluster[]) => void;
@@ -72,6 +73,7 @@ interface GalaxyStore {
   setHighlightedCluster: (clusterId: number | null) => void;
   focusOnCluster: (clusterId: number) => void;
   setPackageDetailExpanded: (expanded: boolean) => void;
+  dismissWelcome: () => void;
 }
 
 export const useGalaxyStore = create<GalaxyStore>((set) => ({
@@ -97,6 +99,7 @@ export const useGalaxyStore = create<GalaxyStore>((set) => ({
   highlightedClusterId: null,
   highlightStartTime: null,
   packageDetailExpanded: true,
+  welcomeDismissed: false,
 
   setPackages: (packages) => set({ packages }),
   setClusters: (clusters) => {
@@ -120,7 +123,11 @@ export const useGalaxyStore = create<GalaxyStore>((set) => ({
       }
       return { selectedClusterIds: newSet };
     }),
-  setSelectedPackageId: (id) => set({ selectedPackageId: id }),
+  setSelectedPackageId: (id) =>
+    set((state) => ({
+      selectedPackageId: id,
+      welcomeDismissed: id !== null ? true : state.welcomeDismissed,
+    })),
   setHoveredIndex: (index) => set({ hoveredIndex: index }),
   setSearchQuery: (query) => set({ searchQuery: query }),
   setSearchResults: (results) => set({ searchResults: results }),
@@ -171,4 +178,5 @@ export const useGalaxyStore = create<GalaxyStore>((set) => ({
     }),
   setPackageDetailExpanded: (expanded) =>
     set({ packageDetailExpanded: expanded }),
+  dismissWelcome: () => set({ welcomeDismissed: true }),
 }));