Added help popover

Author: slinjhu

smoosense-gui/src/components/common/HelpPopover.tsx

@@ -0,0 +1,130 @@
+'use client'
+
+import React from 'react'
+import { HelpCircle, ExternalLink, Mail } from 'lucide-react'
+import IconPopover from '@/components/common/IconPopover'
+import { CLS } from '@/lib/utils/styles'
+import { Separator } from '@/components/ui/separator'
+
+export default function HelpPopover() {
+  const sections = [
+    {
+      title: 'Help',
+      links: [
+        {
+          label: 'Read docs',
+          url: 'https://smoosense.ai/docs',
+          icon: <ExternalLink className="h-3 w-3" />
+        },
+        {
+          label: 'Consult tailored solution',
+          url: 'mailto:[email protected]',
+          icon: <Mail className="h-3 w-3" />
+        }
+      ]
+    },
+    {
+      title: 'GitHub',
+      links: [
+        {
+          label: 'Report bugs or feature request',
+          url: 'https://github.com/SmooSenseAI/smoosense/issues/new',
+          icon: <ExternalLink className="h-3 w-3" />
+        }
+      ],
+      badges: [
+        {
+          alt: 'License',
+          src: 'https://img.shields.io/github/license/SmooSenseAI/smoosense',
+          url: 'https://github.com/SmooSenseAI/smoosense/blob/main/LICENSE'
+        },
+        {
+          alt: 'CI Status',
+          src: 'https://github.com/SmooSenseAI/smoosense/actions/workflows/ci.yml/badge.svg',
+          url: 'https://github.com/SmooSenseAI/smoosense/actions/workflows/ci.yml'
+        },
+        {
+          alt: 'Issues',
+          src: 'https://img.shields.io/github/issues/SmooSenseAI/smoosense',
+          url: 'https://github.com/SmooSenseAI/smoosense/issues'
+        }
+      ]
+    },
+    {
+      title: 'Try SmooSense with your data',
+      links: [
+        {
+          label: 'Get started',
+          url: 'https://smoosense.ai/start',
+          icon: <ExternalLink className="h-3 w-3" />
+        }
+      ],
+      badges: [
+        {
+          alt: 'Latest version',
+          src: 'https://img.shields.io/pypi/v/smoosense?label=pypi-latest',
+          url: 'https://pypi.org/project/smoosense/'
+        },
+        {
+          alt: 'Downloads',
+          src: 'https://static.pepy.tech/personalized-badge/smoosense?period=total&units=international_system&left_color=black&right_color=MAGENTA&left_text=downloads',
+          url: 'https://pepy.tech/project/smoosense'
+        }
+      ]
+    }
+  ]
+
+  return (
+    <IconPopover
+      icon={<HelpCircle className="h-4 w-4" />}
+      tooltip="Help & Resources"
+      contentClassName="w-auto p-3"
+      align="end"
+    >
+      <div className="min-w-[240px]">
+        {sections.map((section, sectionIndex) => (
+          <React.Fragment key={sectionIndex}>
+            {sectionIndex > 0 && <Separator className="my-3" />}
+            <div>
+              <h4 className="text-sm font-semibold text-muted-foreground mb-1.5">
+                {section.title}
+              </h4>
+              {section.badges && (
+                <div className="flex flex-wrap gap-1.5 mb-2">
+                  {section.badges.map((badge, badgeIndex) => (
+                    <a
+                      key={badgeIndex}
+                      href={badge.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <img
+                        src={badge.src}
+                        alt={badge.alt}
+                        className="h-6 mx-1"
+                      />
+                    </a>
+                  ))}
+                </div>
+              )}
+              <div className="space-y-1">
+                {section.links.map((link, linkIndex) => (
+                  <a
+                    key={linkIndex}
+                    href={link.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className={`flex items-center justify-between gap-2 text-sm ${CLS.HYPERLINK} py-1`}
+                  >
+                    <span>{link.label}</span>
+                    {link.icon}
+                  </a>
+                ))}
+              </div>
+            </div>
+          </React.Fragment>
+        ))}
+      </div>
+    </IconPopover>
+  )
+}

smoosense-gui/src/components/layout/MiniTableTopBar.tsx

@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button'
 import Logo from '@/components/common/Logo'
 import FilterStatusChips from '@/components/common/FilterStatusChips'
 import GlobalSettingsDropdown from '@/components/settings/GlobalSettings'
+import HelpPopover from '@/components/common/HelpPopover'
 
 export default function MiniTableTopBar() {
   const handleOpenFullView = () => {
@@ -36,6 +37,7 @@ export default function MiniTableTopBar() {
           <ExternalLink className="h-4 w-4" />
         </Button>
 
+        <HelpPopover />
         <GlobalSettingsDropdown context="MiniTable" />
       </div>
     </div>

smoosense-gui/src/components/layout/NavbarSkeleton.tsx

@@ -5,6 +5,7 @@ import { useEffect, ReactNode } from 'react'
 import React from 'react'
 import Logo from '@/components/common/Logo'
 import GlobalSettingsDropdown from '@/components/settings/GlobalSettings'
+import HelpPopover from '@/components/common/HelpPopover'
 
 interface NavbarSkeletonProps {
   className?: string
@@ -45,11 +46,12 @@ export default function NavbarSkeleton({
           <div className="flex-1" />
         )}
 
-        {/* Icon buttons + Global Settings - rightmost */}
+        {/* Icon buttons + Help + Global Settings - rightmost */}
         <div className="flex items-center space-x-2">
           {iconButtons.map((button, index) => (
             <React.Fragment key={index}>{button}</React.Fragment>
           ))}
+          <HelpPopover />
           <GlobalSettingsDropdown context={globalSettingsContext} />
         </div>
       </div>

smoosense-py/intests/screenshots/folder_browser_csv_dark.png

@@ -1,6 +1,6 @@
 [project]
 name = "smoosense"
-version = "0.0.1rc29"
+version = "0.0.1rc30"
 description = "Smoothly make sense of your large multi-modal datasets"
 readme = "README.md"
 requires-python = ">=3.9"