@mdguggenbichler/slugbase-core 0.0.4 → 0.0.6

package/frontend/src/components/AppSidebar.tsx

@@ -0,0 +1,214 @@
+import { Link, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useState, useEffect } from 'react';
+import {
+  Bookmark,
+  Folder,
+  Tag,
+  Settings,
+  LayoutDashboard,
+  ChevronLeft,
+  ChevronRight,
+  ChevronDown,
+  Github,
+  Users,
+  UserCog,
+  Key,
+  Sparkles,
+} from 'lucide-react';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarSeparator,
+  useSidebar,
+} from './ui/sidebar';
+import { useAppConfig } from '../contexts/AppConfigContext';
+import type { User } from '../contexts/AuthContext';
+import { cn } from '@/lib/utils';
+
+const SIDEBAR_ADMIN_OPEN_KEY = 'slugbase_sidebar_admin_open';
+
+interface AppSidebarProps {
+  user: User | null;
+  version?: string | null;
+}
+
+export default function AppSidebar({ user, version = null }: AppSidebarProps) {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const pathname = location.pathname;
+  const { appBasePath } = useAppConfig();
+  const { setOpenMobile, toggleSidebar, isMobile, state } = useSidebar();
+  const adminBase = `${appBasePath || ''}/admin`;
+
+  const adminNavItems = [
+    { path: `${adminBase}/members`, label: t('admin.users'), icon: Users },
+    { path: `${adminBase}/teams`, label: t('admin.teams'), icon: UserCog },
+    { path: `${adminBase}/oidc`, label: t('admin.oidcProviders'), icon: Key },
+    { path: `${adminBase}/settings`, label: t('admin.settings'), icon: Settings },
+    { path: `${adminBase}/ai`, label: t('admin.ai.nav'), icon: Sparkles },
+  ];
+
+  const isOverviewActive =
+    pathname === appBasePath ||
+    pathname === appBasePath + '/' ||
+    pathname === (appBasePath || '/');
+
+  const showAdmin = user?.is_admin;
+  const [adminOpen, setAdminOpen] = useState(() => {
+    if (typeof window === 'undefined') return true;
+    const stored = localStorage.getItem(SIDEBAR_ADMIN_OPEN_KEY);
+    return stored !== 'false';
+  });
+
+  useEffect(() => {
+    localStorage.setItem(SIDEBAR_ADMIN_OPEN_KEY, String(adminOpen));
+  }, [adminOpen]);
+
+  const primaryNavItems = [
+    { path: appBasePath || '/', label: t('dashboard.overview'), icon: LayoutDashboard },
+    { path: `${appBasePath}/bookmarks`, label: t('bookmarks.title'), icon: Bookmark },
+    { path: `${appBasePath}/folders`, label: t('folders.title'), icon: Folder },
+    { path: `${appBasePath}/tags`, label: t('tags.title'), icon: Tag },
+  ];
+
+  const handleNavClick = () => {
+    if (isMobile) {
+      setOpenMobile(false);
+    }
+  };
+
+  return (
+    <Sidebar collapsible="icon" side="left">
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {primaryNavItems.map((item) => (
+                <SidebarMenuItem key={item.path}>
+                  <SidebarMenuButton
+                    asChild
+                    isActive={
+                      item.path === (appBasePath || '/') ? isOverviewActive : pathname === item.path
+                    }
+                    tooltip={item.label}
+                  >
+                    <Link to={item.path} onClick={handleNavClick} aria-current={pathname === item.path ? 'page' : undefined}>
+                      <item.icon className="h-5 w-5" />
+                      <span>{item.label}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+
+        {showAdmin && (
+          <>
+            <SidebarSeparator />
+            <SidebarGroup>
+              <button
+                type="button"
+                onClick={() => setAdminOpen((prev) => !prev)}
+                data-sidebar="group-label"
+                className={cn(
+                  'flex h-8 w-full shrink-0 items-center gap-2 overflow-hidden rounded-md px-2 text-left text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+                  'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                  'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 group-data-[collapsible=icon]:!rounded-lg'
+                )}
+                aria-expanded={adminOpen}
+              >
+                {adminOpen ? (
+                  <ChevronDown className="h-5 w-5 shrink-0" />
+                ) : (
+                  <ChevronRight className="h-5 w-5 shrink-0" />
+                )}
+                <span className="truncate group-data-[collapsible=icon]:hidden">{t('admin.title')}</span>
+              </button>
+              {adminOpen && (
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {adminNavItems.map((item) => {
+                      const Icon = item.icon;
+                      return (
+                        <SidebarMenuItem key={item.path}>
+                          <SidebarMenuButton
+                            asChild
+                            isActive={pathname === item.path}
+                            tooltip={item.label}
+                          >
+                            <Link
+                              to={item.path}
+                              onClick={handleNavClick}
+                              aria-current={pathname === item.path ? 'page' : undefined}
+                            >
+                              <Icon className="h-5 w-5" />
+                              <span>{item.label}</span>
+                            </Link>
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      );
+                    })}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              )}
+            </SidebarGroup>
+          </>
+        )}
+      </SidebarContent>
+
+      <SidebarFooter>
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton
+                  asChild
+                  tooltip="GitHub Repository"
+                >
+                  <a
+                    href="https://github.com/mdg-labs/slugbase"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="GitHub Repository"
+                  >
+                    <Github className="h-5 w-5" />
+                    <span>GitHub</span>
+                    {version && state === 'expanded' && (
+                      <span className="ml-1 truncate text-xs text-muted-foreground font-mono">
+                        {version}
+                      </span>
+                    )}
+                  </a>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+              {!isMobile && (
+                <SidebarMenuItem>
+                  <SidebarMenuButton
+                    onClick={toggleSidebar}
+                    tooltip={state === 'collapsed' ? t('common.expandSidebar') : t('common.collapseSidebar')}
+                    aria-label={state === 'collapsed' ? t('common.expandSidebar') : t('common.collapseSidebar')}
+                  >
+                    {state === 'collapsed' ? (
+                      <ChevronRight className="h-5 w-5" />
+                    ) : (
+                      <ChevronLeft className="h-5 w-5" />
+                    )}
+                    <span>{t('common.collapseSidebar')}</span>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              )}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

package/frontend/src/components/EmptyState.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { LucideIcon } from 'lucide-react';
+import { Card, CardContent } from './ui/card';
+import { cn } from '@/lib/utils';
+
+interface EmptyStateProps {
+  icon: LucideIcon;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+  className?: string;
+}
+
+export function EmptyState({ icon: Icon, title, description, action, className }: EmptyStateProps) {
+  return (
+    <Card className={cn('flex flex-col items-center justify-center py-16 px-6', className)}>
+      <CardContent className="flex flex-col items-center text-center">
+        <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-4">
+          <Icon className="h-8 w-8 text-muted-foreground" />
+        </div>
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+          {title}
+        </h3>
+        {description && (
+          <p className="text-sm text-gray-600 dark:text-gray-400 mb-6 max-w-md">
+            {description}
+          </p>
+        )}
+        {action && <div>{action}</div>}
+      </CardContent>
+    </Card>
+  );
+}

package/frontend/src/components/Favicon.tsx

@@ -0,0 +1,76 @@
+import { useState, useEffect } from 'react';
+import { Bookmark as BookmarkIcon } from 'lucide-react';
+import { fetchFavicon } from '../utils/favicon';
+
+interface FaviconProps {
+  url: string;
+  className?: string;
+  size?: number;
+}
+
+export default function Favicon({ url, className = '', size = 20 }: FaviconProps) {
+  const [faviconUrl, setFaviconUrl] = useState<string>('');
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (url) {
+      setLoading(true);
+      setError(false);
+      setFaviconUrl('');
+      fetchFavicon(url)
+        .then((favicon) => {
+          if (favicon) {
+            setFaviconUrl(favicon);
+            setError(false);
+          } else {
+            setError(true);
+            setFaviconUrl('');
+          }
+          setLoading(false);
+        })
+        .catch(() => {
+          setError(true);
+          setFaviconUrl('');
+          setLoading(false);
+        });
+    } else {
+      setError(true);
+      setFaviconUrl('');
+      setLoading(false);
+    }
+  }, [url]);
+
+  const handleImageError = () => {
+    setError(true);
+    setFaviconUrl('');
+    setLoading(false);
+  };
+
+  if (loading) {
+    return (
+      <div className={`flex items-center justify-center ${className}`} style={{ width: `${size}px`, height: `${size}px` }}>
+        <div className="w-3 h-3 border-2 border-input border-t-primary rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  if (error || !faviconUrl) {
+    return (
+      <div className={`flex items-center justify-center ${className}`} style={{ width: `${size}px`, height: `${size}px` }}>
+        <BookmarkIcon className="text-primary" style={{ width: `${size}px`, height: `${size}px` }} />
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={faviconUrl}
+      alt=""
+      className={`object-contain ${className}`}
+      style={{ width: `${size}px`, height: `${size}px`, minWidth: `${size}px`, minHeight: `${size}px` }}
+      onError={handleImageError}
+      loading="lazy"
+    />
+  );
+}

package/frontend/src/components/FilterChips.tsx

@@ -0,0 +1,60 @@
+import { X } from 'lucide-react';
+
+export interface FilterChipItem {
+  key: string;
+  label: string;
+  ariaLabel: string;
+}
+
+interface FilterChipsProps {
+  chips: FilterChipItem[];
+  onRemove: (key: string) => void;
+  onClearAll: () => void;
+  clearAllLabel: string;
+  clearAllAriaLabel: string;
+}
+
+export function FilterChips({ chips, onRemove, onClearAll, clearAllLabel, clearAllAriaLabel }: FilterChipsProps) {
+  if (chips.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {chips.map(({ key, label, ariaLabel }) => (
+        <span
+          key={key}
+          className="inline-flex items-center gap-1.5 pl-2.5 pr-1.5 py-1 rounded-md bg-muted text-muted-foreground text-sm border border-border"
+        >
+          <span>{label}</span>
+          <button
+            type="button"
+            onClick={() => onRemove(key)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onRemove(key);
+              }
+            }}
+            className="p-0.5 rounded hover:bg-muted-foreground/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            aria-label={ariaLabel}
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        </span>
+      ))}
+      <button
+        type="button"
+        onClick={onClearAll}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClearAll();
+          }
+        }}
+        className="text-sm text-muted-foreground hover:text-foreground underline focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded px-1"
+        aria-label={clearAllAriaLabel}
+      >
+        {clearAllLabel}
+      </button>
+    </div>
+  );
+}

package/frontend/src/components/FolderIcon.tsx

@@ -0,0 +1,207 @@
+import React from 'react';
+import * as LucideIcons from 'lucide-react';
+import { Folder as DefaultFolderIcon } from 'lucide-react';
+
+interface FolderIconProps {
+  iconName?: string | null;
+  className?: string;
+  size?: number;
+}
+
+// Get all available icon names from lucide-react
+// Filter out non-icon exports and get all icon component names
+// Lucide icons are React forward ref components (objects with $$typeof and render method)
+function getAllIconNames(): string[] {
+  const iconNames: string[] = [];
+  const excludeNames = new Set([
+    'createLucideIcon',
+    'Icon',
+    'IconNode',
+    'IconProps',
+    'LucideProps',
+    'default',
+    // Exclude non-icon exports
+    'defaultProps',
+    'forwardRef',
+    'memo',
+    'lazy',
+    'Suspense',
+    'Fragment',
+    'StrictMode',
+  ]);
+
+  for (const name in LucideIcons) {
+    // Skip excluded names
+    if (excludeNames.has(name)) continue;
+    
+    // Skip names starting with lowercase (likely not icon components)
+    if (name[0] && name[0] === name[0].toLowerCase()) continue;
+    
+    // Skip names ending with 'Icon' (these are typically type exports)
+    if (name.endsWith('Icon')) continue;
+    
+    const component = (LucideIcons as any)[name];
+    
+    // Check if it's a valid React component
+    // Lucide icons can be either:
+    // 1. Function components (typeof === 'function')
+    // 2. Forward ref components (object with $$typeof and render method)
+    const isFunctionComponent = typeof component === 'function';
+    const isForwardRefComponent = component && 
+      typeof component === 'object' && 
+      (component.$$typeof || component.render);
+    
+    if (isFunctionComponent || isForwardRefComponent) {
+      iconNames.push(name);
+    }
+  }
+
+  return iconNames.sort();
+}
+
+// Cache the icon names
+let cachedIconNames: string[] | null = null;
+
+export function getAllIcons(): string[] {
+  if (!cachedIconNames) {
+    cachedIconNames = getAllIconNames();
+  }
+  return cachedIconNames;
+}
+
+// Popular/recommended icons for quick access
+const popularIcons = [
+  'Folder',
+  'FolderOpen',
+  'Archive',
+  'Briefcase',
+  'FileText',
+  'Image',
+  'Video',
+  'Music',
+  'Code',
+  'Database',
+  'Book',
+  'GraduationCap',
+  'Heart',
+  'Star',
+  'Home',
+  'Calendar',
+  'Mail',
+  'Settings',
+  'Users',
+  'Package',
+  'Wrench',
+  'Tool',
+  'Hammer',
+  'Screwdriver',
+  'FolderPlus',
+  'FolderMinus',
+  'FolderCheck',
+  'FolderX',
+  'File',
+  'FileCode',
+  'FileImage',
+  'FileVideo',
+  'FileAudio',
+  'FileSpreadsheet',
+  'FileType',
+  'FolderKanban',
+  'FolderTree',
+  'FolderGit',
+  'FolderGit2',
+  'FolderSearch',
+  'FolderSymlink',
+  'FolderUp',
+  'FolderDown',
+  'FolderInput',
+  'FolderOutput',
+  'FolderRoot',
+  'FolderLock',
+  'FolderUnlock',
+  'FolderHeart',
+  'FolderKey',
+  'FolderPen',
+  'FolderArchive',
+  'FolderOpenDot',
+  'FolderDot',
+  'FolderSync',
+  'FolderClock',
+  'FolderCog',
+  'FolderPlus2',
+  'FolderMinus2',
+  'FolderCheck2',
+  'FolderX2',
+  'FolderQuestion',
+  'FolderWarning',
+  'FolderAlert',
+  'FolderBan',
+  'FolderOff',
+  'FolderOn',
+  'FolderUp2',
+  'FolderDown2',
+  'FolderInput2',
+  'FolderOutput2',
+  'FolderRoot2',
+  'FolderLock2',
+  'FolderUnlock2',
+  'FolderHeart2',
+  'FolderKey2',
+  'FolderPen2',
+  'FolderArchive2',
+  'FolderOpenDot2',
+  'FolderDot2',
+  'FolderSync2',
+  'FolderClock2',
+  'FolderCog2',
+  'FolderPlus2',
+  'FolderMinus2',
+  'FolderCheck2',
+  'FolderX2',
+  'FolderQuestion2',
+  'FolderWarning2',
+  'FolderAlert2',
+  'FolderBan2',
+  'FolderOff2',
+  'FolderOn2',
+];
+
+export default function FolderIcon({ iconName, className = '', size = 20 }: FolderIconProps) {
+  if (!iconName) {
+    return <DefaultFolderIcon className={className} style={{ width: `${size}px`, height: `${size}px` }} />;
+  }
+
+  // Try to get the icon from lucide-react (exact match first)
+  let IconComponent = (LucideIcons as any)[iconName] as React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
+
+  // If exact match not found, try case-insensitive lookup
+  if (!IconComponent) {
+    const iconNameLower = iconName.toLowerCase();
+    for (const key in LucideIcons) {
+      if (key.toLowerCase() === iconNameLower) {
+        const candidate = (LucideIcons as any)[key];
+        // Check if it's a valid component (function or forward ref object)
+        const isValid = typeof candidate === 'function' || 
+          (candidate && typeof candidate === 'object' && (candidate.$$typeof || candidate.render));
+        if (isValid) {
+          IconComponent = candidate as React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
+          break;
+        }
+      }
+    }
+  }
+
+  // Verify IconComponent is valid before rendering
+  const isValidComponent = IconComponent && 
+    (typeof IconComponent === 'function' || 
+     (typeof IconComponent === 'object' && IconComponent !== null && ((IconComponent as any).$$typeof || (IconComponent as any).render)));
+
+  if (isValidComponent) {
+    return <IconComponent className={className} style={{ width: `${size}px`, height: `${size}px` }} />;
+  }
+
+  // Fallback to default folder icon
+  return <DefaultFolderIcon className={className} style={{ width: `${size}px`, height: `${size}px` }} />;
+}
+
+export { popularIcons };