{(icons.length > 0 ? icons : Array(10).fill(null)).map((icon, i) => (
}
- )
-}
+ label?: React.ReactNode;
+ icon?: React.ComponentType;
+ } & ({ color?: string; theme?: never } | { color?: never; theme: Record });
+};
type ChartContextProps = {
- config: ChartConfig
-}
+ config: ChartConfig;
+};
-const ChartContext = React.createContext(null)
+const ChartContext = React.createContext(null);
function useChart() {
- const context = React.useContext(ChartContext)
+ const context = React.useContext(ChartContext);
if (!context) {
- throw new Error("useChart must be used within a ['children'];
}
>(({ id, className, children, config, ...props }, ref) => {
- const uniqueId = React.useId()
- const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+ const uniqueId = React.useId();
+ const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
return (
@@ -53,312 +48,250 @@ const ChartContainer = React.forwardRef<
ref={ref}
className={cn(
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
- className
+ className,
)}
{...props}
>
- {children}
-
+ {children}
- )
-})
-ChartContainer.displayName = "Chart"
+ );
+});
+ChartContainer.displayName = 'Chart';
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
- const colorConfig = Object.entries(config).filter(
- ([_, config]) => config.theme || config.color
- )
+ const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color);
if (!colorConfig.length) {
- return null
+ return null;
}
return (
@@ -28,14 +28,16 @@ export function CategoryCard({ name, description, categoryCount, productCount, i
);
-}
\ No newline at end of file
+}
diff --git a/openframe-frontend-core/src/components/chart.tsx b/openframe-frontend-core/src/components/chart.tsx
index 5734d7f2a..2e02b8f5f 100644
--- a/openframe-frontend-core/src/components/chart.tsx
+++ b/openframe-frontend-core/src/components/chart.tsx
@@ -1,50 +1,45 @@
-"use client"
+'use client';
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
-import { cn } from "../utils/cn"
+import { cn } from '../utils/cn';
// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
+const THEMES = { light: '', dark: '.dark' } as const;
export type ChartConfig = {
[k in string]: {
- label?: React.ReactNode
- icon?: React.ComponentType
- } & (
- | { color?: string; theme?: never }
- | { color?: never; theme: Record{description}
-
+
);
-}
\ No newline at end of file
+}
diff --git a/openframe-frontend-core/src/components/loading/organization-card-skeleton.tsx b/openframe-frontend-core/src/components/loading/organization-card-skeleton.tsx
index ea249502c..a4133e76e 100644
--- a/openframe-frontend-core/src/components/loading/organization-card-skeleton.tsx
+++ b/openframe-frontend-core/src/components/loading/organization-card-skeleton.tsx
@@ -1,26 +1,26 @@
-import type React from "react"
-import { cn } from "../../utils/cn"
-import { OrganizationIconSkeleton } from "./organization-icon-skeleton"
-import { TextSkeleton, MediaSkeleton, InteractiveSkeleton } from "./unified-skeleton"
+import type React from 'react';
+import { cn } from '../../utils/cn';
+import { OrganizationIconSkeleton } from './organization-icon-skeleton';
+import { InteractiveSkeleton, MediaSkeleton, TextSkeleton } from './unified-skeleton';
export interface OrganizationCardSkeletonProps {
/**
* Additional CSS classes
*/
- className?: string
+ className?: string;
/**
* Show footer stats area
*/
- showFooter?: boolean
+ showFooter?: boolean;
/**
* Show description area
*/
- showDescription?: boolean
+ showDescription?: boolean;
/** Optional tailwind classes to override the card container background & border */
- containerClassName?: string
+ containerClassName?: string;
}
/**
@@ -39,14 +39,14 @@ export function OrganizationCardSkeleton({
className,
containerClassName,
showFooter = true,
- showDescription = true
+ showDescription = true,
}: OrganizationCardSkeletonProps) {
return (
- {/* Progress text */}
+ {/* Progress text */}
- {progress != undefined && progress > 0 ? Math.floor(progress) : 0}% /100% + {progress != undefined && progress > 0 ? Math.floor(progress) : 0}%{' '} + /100%
{/* Progress text */} -- {label ?? `Processingβ¦`} -
+{label ?? `Processingβ¦`}
You can safely navigate away from this page, report generation will continue in the background.
@@ -49,4 +68,4 @@ export function OpenmspHeartbeatLoader({ className = '', progress = 0, label, ba
-
+
- )
+ );
}
/**
@@ -128,20 +128,17 @@ export function OrganizationCardSkeletonGrid({
className,
containerClassName,
showFooter = true,
- showDescription = true
+ showDescription = true,
}: {
- count?: number
- className?: string
- containerClassName?: string
- showFooter?: boolean
- showDescription?: boolean
+ count?: number;
+ className?: string;
+ containerClassName?: string;
+ showFooter?: boolean;
+ showDescription?: boolean;
}) {
return (
@@ -154,5 +151,5 @@ export function OrganizationCardSkeletonGrid({
/>
))}
- )
+ );
}
diff --git a/openframe-frontend-core/src/components/loading/organization-icon-skeleton.tsx b/openframe-frontend-core/src/components/loading/organization-icon-skeleton.tsx
index 9763da992..c8b03a361 100644
--- a/openframe-frontend-core/src/components/loading/organization-icon-skeleton.tsx
+++ b/openframe-frontend-core/src/components/loading/organization-icon-skeleton.tsx
@@ -1,5 +1,5 @@
-import type React from "react"
-import { cn } from "../../utils/cn"
+import type React from 'react';
+import { cn } from '../../utils/cn';
export interface OrganizationIconSkeletonProps {
/**
@@ -11,22 +11,22 @@ export interface OrganizationIconSkeletonProps {
* - l: 56px (w-14 h-14)
* - xl: 64px (w-16 h-16) - for detail views
*/
- size?: 'xs' | 'sm' | 'md' | 'lg' | 'l' | 'xl'
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'l' | 'xl';
/**
* Additional CSS classes
*/
- className?: string
+ className?: string;
/**
* Show background container (default: true)
*/
- showBackground?: boolean
+ showBackground?: boolean;
/**
* Background style variant (default: 'dark')
*/
- backgroundStyle?: 'dark' | 'light' | 'white'
+ backgroundStyle?: 'dark' | 'light' | 'white';
}
/**
@@ -38,17 +38,17 @@ const sizeClasses = {
md: 'w-10 h-10',
lg: 'w-12 h-12',
l: 'w-14 h-14',
- xl: 'w-16 h-16'
-}
+ xl: 'w-16 h-16',
+};
/**
* Background style classes matching VendorIcon/OrganizationIcon exactly
*/
const backgroundClasses = {
- dark: 'bg-[#161616] border border-ods-border',
+ dark: 'bg-ods-bg border border-ods-border',
light: 'bg-ods-card border border-ods-border',
- white: 'bg-white border border-[#E5E5E5]'
-}
+ white: 'bg-white border border-ods-border',
+};
/**
* OrganizationIconSkeleton - Loading skeleton for OrganizationIcon
@@ -77,23 +77,19 @@ export function OrganizationIconSkeleton({
size = 'md',
className = '',
showBackground = true,
- backgroundStyle = 'dark'
+ backgroundStyle = 'dark',
}: OrganizationIconSkeletonProps) {
const containerClasses = cn(
sizeClasses[size],
'rounded-lg flex items-center justify-center flex-shrink-0',
showBackground && backgroundClasses[backgroundStyle],
!showBackground && 'overflow-hidden',
- className
- )
+ className,
+ );
return (
-
+
- )
+ );
}
diff --git a/openframe-frontend-core/src/components/loading/page-layout-skeleton.tsx b/openframe-frontend-core/src/components/loading/page-layout-skeleton.tsx
index b2d031970..5f9503e47 100644
--- a/openframe-frontend-core/src/components/loading/page-layout-skeleton.tsx
+++ b/openframe-frontend-core/src/components/loading/page-layout-skeleton.tsx
@@ -1,10 +1,10 @@
-import type React from "react"
-import { cn } from "../../utils/cn"
-import { UnifiedSkeleton, TextSkeleton, MediaSkeleton, InteractiveSkeleton } from "./unified-skeleton"
-import { CardSkeletonGrid } from "./card-skeleton"
+import type React from 'react';
+import { cn } from '../../utils/cn';
+import { CardSkeletonGrid } from './card-skeleton';
+import { InteractiveSkeleton, MediaSkeleton, TextSkeleton, UnifiedSkeleton } from './unified-skeleton';
interface PageLayoutSkeletonProps {
- className?: string
+ className?: string;
}
/**
@@ -12,24 +12,24 @@ interface PageLayoutSkeletonProps {
*/
export function AnnouncementBarSkeleton() {
return (
-
{/* Title skeleton */}
- )
+ );
}
/**
* Search container skeleton with filters
*/
-export function SearchContainerSkeleton({
+export function SearchContainerSkeleton({
className,
- showFilters = true
+ showFilters = true,
}: PageLayoutSkeletonProps & { showFilters?: boolean }) {
return (
-
+
- )
+ );
}
/**
@@ -40,7 +40,7 @@ export function HeaderSkeleton() {
{/* Left: Logo skeleton */}
- )
+ );
}
/**
@@ -78,33 +78,33 @@ export function HeroSkeleton() {
{/* Logo skeleton */}
-
+
{/* Text content skeleton */}
-
+
{/* Close button skeleton */}
-
+
{/* Center: Navigation skeleton - hidden on mobile, visible on desktop */}
@@ -58,7 +58,7 @@ export function HeaderSkeleton() {
+
{/* Search input and button */}
- )
+ );
}
/**
@@ -129,11 +129,11 @@ export function SearchContainerSkeleton({
*/
export function CategorySidebarSkeleton({ className }: PageLayoutSkeletonProps) {
return (
-
+
- )
+ );
}
/**
@@ -166,7 +166,7 @@ export function CategorySidebarSkeleton({ className }: PageLayoutSkeletonProps)
*/
export function BreadcrumbSkeleton({ className }: PageLayoutSkeletonProps) {
return (
-
{/* Sidebar header */}
{Array.from({ length: 8 }).map((_, index) => (
@@ -158,7 +158,7 @@ export function CategorySidebarSkeleton({ className }: PageLayoutSkeletonProps)
+
+
+
+
+
{/* Article header */}
{/* Category/tags */}
@@ -242,13 +244,13 @@ export function ArticleLayoutSkeleton({ className }: PageLayoutSkeletonProps) {
-
+
{/* Title */}
{sidebarPosition === 'left' ? (
<>
@@ -226,7 +228,7 @@ export function TwoColumnLayoutSkeleton({
)}
- )
+ );
}
/**
@@ -234,7 +236,7 @@ export function TwoColumnLayoutSkeleton({
*/
export function ArticleLayoutSkeleton({ className }: PageLayoutSkeletonProps) {
return (
-
@@ -276,7 +278,7 @@ export function ArticleLayoutSkeleton({ className }: PageLayoutSkeletonProps) {
))}
-
+
{/* Subheading in content */}
{/* Breadcrumb */}
{/* Left Content Area */}
-
{/* Vendor Hero Section */}
{/* Header - Logo and Title Side by Side */}
@@ -340,38 +341,38 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
-
+
@@ -331,7 +332,7 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
{/* Vendor Image Display Skeleton */}
{/* Large title skeleton */}
-
+
{/* Category text */}
-
+
-
+
{/* Pricing tags */}
-
-
+
+
-
+
{/* Deploy Button */}
-
+
{/* Voting Buttons */}
-
+
{/* GitHub Score Section */}
{/* Header */}
-
+
{/* Action Buttons */}
-
+
-
+
{/* Stats */}
-
-
+
+
{Array.from({ length: 4 }).map((_, i) => (
-
+
))}
-
-
+
+
@@ -383,24 +384,30 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
{/* Alternatives Container */}
-
-
+
+
{/* Open Source Alternatives */}
-
+
{/* Commercial Alternatives */}
{Array.from({ length: 6 }).map((_, i) => (
-
+
))}
-
+
@@ -408,28 +415,28 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
{/* About Section */}
{Array.from({ length: 4 }).map((_, i) => (
-
+
))}
-
-
+
+
{/* Key Features Section */}
-
-
-
-
+
+
+
+
-
+
{Array.from({ length: 6 }).map((_, i) => (
-
+
))}
@@ -438,30 +445,30 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
{/* Pros and Cons Section */}
-
-
+
+
-
+
{/* Pros Column */}
-
+
{Array.from({ length: 3 }).map((_, i) => (
{/* Cons Column */}
-
+
))}
-
-
+
+
-
+
{Array.from({ length: 3 }).map((_, i) => (
-
+
))}
@@ -471,71 +478,71 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
{/* Alternatives Section */}
-
-
+
+
-
+
{/* Comments Section */}
{Array.from({ length: 6 }).map((_, i) => (
{/* Show All Button */}
-
+
{/* Header */}
))}
-
+
-
+
{/* Description */}
-
-
+
+
-
+
-
-
-
+
+
+
-
+
{/* Footer */}
-
-
+
+
-
-
+
+
{/* Comment Form Skeleton */}
@@ -574,38 +581,38 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
-
-
+
{/* Sample Comment Cards */}
+
{/* Title Section */}
-
+
{/* Send Button */}
-
-
+
+
-
+
{/* Description Section */}
-
+
-
-
-
+
+
+
-
+
{Array.from({ length: 3 }).map((_, i) => (
@@ -545,22 +552,22 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
-
+
{/* Comment Content */}
{/* User Info */}
-
-
+
+
-
+
{/* Timestamp */}
-
+
-
+
-
-
-
+
+
+
{/* Deploy Button */}
-
+
{/* Voting Buttons */}
-
+
{/* GitHub Score Section */}
- )
+ );
}
/**
* Stats/features section skeleton for homepage
*/
-export function StatsSectionSkeleton({
- className,
- columns = 3
-}: PageLayoutSkeletonProps & { columns?: number }) {
+export function StatsSectionSkeleton({ className, columns = 3 }: PageLayoutSkeletonProps & { columns?: number }) {
return (
-
{/* Header */}
-
+
{/* Action Buttons */}
-
+
-
+
{/* Stats */}
-
-
+
+
{Array.from({ length: 4 }).map((_, i) => (
-
+
))}
-
-
+
+
@@ -617,23 +624,22 @@ export function VendorDetailLayoutSkeleton({ className }: PageLayoutSkeletonProp
+
{Array.from({ length: columns }).map((_, i) => (
- )
+ );
}
-
/**
* Blog Card Grid Skeleton - Always displays exactly 4 blog card skeletons
* Used for consistent blog page layout with predictable height
*/
export function BlogCardGridSkeleton({ className }: PageLayoutSkeletonProps) {
return (
-
@@ -647,24 +653,19 @@ export function StatsSectionSkeleton({
))}
-
+
- )
+ );
}
/**
@@ -673,14 +674,10 @@ export function BlogCardGridSkeleton({ className }: PageLayoutSkeletonProps) {
*/
export function VendorGridSkeleton({ className }: PageLayoutSkeletonProps) {
return (
-
-
{/* Frame 651 Container */}
+
- )
+ );
}
/**
@@ -689,42 +686,40 @@ export function VendorGridSkeleton({ className }: PageLayoutSkeletonProps) {
*/
export function SlackCommunitySkeleton() {
return (
-
-
{/* Title Skeleton */}
-
+
{/* Content Area - Channel List + Chat Interface */}
-
{/* Channel List Skeleton */}
-
+
{/* Header */}
{/* Channels */}
-
-
+
+
-
+
-
+
{Array.from({ length: 5 }).map((_, i) => (
@@ -748,27 +743,26 @@ export function SlackCommunitySkeleton() {
{/* Chat Interface Skeleton */}
-
+
))}
@@ -734,12 +729,12 @@ export function SlackCommunitySkeleton() {
-
-
+
+
-
-
+
+
-
-
+
+
-
{/* Header */}
-
+
{/* Messages */}
- {
- className?: string
- variant?: 'default' | 'text' | 'circular' | 'rectangular'
- width?: string | number
- height?: string | number
+ className?: string;
+ variant?: 'default' | 'text' | 'circular' | 'rectangular';
+ width?: string | number;
+ height?: string | number;
/**
* Disable animation for users who prefer reduced motion
*/
- animate?: boolean
+ animate?: boolean;
/**
* Accessibility label for screen readers
*/
- 'aria-label'?: string
+ 'aria-label'?: string;
}
/**
* UnifiedSkeleton Component
- *
+ *
* Base skeleton component with consistent styling across the application.
- *
+ *
* Design Specifications:
* - Color: #2A2A2A base with #3A3A3A pulse highlight
* - Animation: 1.5s pulse duration, ease-in-out timing
* - Responsive: Mobile-first approach with proper scaling
* - Accessibility: ARIA labels and reduced motion support
- *
+ *
* @param variant - Shape variant: default (rounded), text (rounded-sm), circular, rectangular
* @param width - Custom width (defaults to full width)
* @param height - Custom height (defaults to auto based on variant)
@@ -42,47 +42,45 @@ export function UnifiedSkeleton({
'aria-label': ariaLabel,
...props
}: UnifiedSkeletonProps) {
- const baseClasses = "bg-[#2A2A2A]"
-
+ const baseClasses = 'bg-ods-bg-secondary';
+
const variantClasses = {
- default: "rounded-md",
- text: "rounded-sm",
- circular: "rounded-full",
- rectangular: "rounded-none"
- }
-
+ default: 'rounded-md',
+ text: 'rounded-sm',
+ circular: 'rounded-full',
+ rectangular: 'rounded-none',
+ };
+
const defaultHeights = {
- default: "h-4",
- text: "h-4",
- circular: "h-12 w-12",
- rectangular: "h-4"
- }
-
- const animationClasses = animate
- ? "animate-pulse motion-reduce:animate-none"
- : ""
-
+ default: 'h-4',
+ text: 'h-4',
+ circular: 'h-12 w-12',
+ rectangular: 'h-4',
+ };
+
+ const animationClasses = animate ? 'animate-pulse motion-reduce:animate-none' : '';
+
const style: React.CSSProperties = {
width: width,
height: height,
- }
-
+ };
+
return (
- )
+ );
}
/**
@@ -93,50 +91,40 @@ export const TextSkeleton = {
* Large heading skeleton (h1, h2)
*/
Heading: ({ className, ...props }: Omit) => (
- ) => (
- ) => (
- ) => (
- ) => (
- ) => (
- ) => (
- & { size?: 'sm' | 'md' | 'lg' }) => {
+ Avatar: ({
+ size = 'md',
+ className,
+ ...props
+ }: Omit & { size?: 'sm' | 'md' | 'lg' }) => {
const sizeClasses = {
- sm: "h-8 w-8",
- md: "h-12 w-12",
- lg: "h-16 w-16"
- }
-
+ sm: 'h-8 w-8',
+ md: 'h-12 w-12',
+ lg: 'h-16 w-16',
+ };
+
return (
- ) => (
- & { size?: 'sm' | 'md' | 'lg' }) => {
+ Icon: ({
+ size = 'md',
+ className,
+ ...props
+ }: Omit & { size?: 'sm' | 'md' | 'lg' }) => {
const sizeClasses = {
- sm: "h-4 w-4",
- md: "h-6 w-6",
- lg: "h-8 w-8"
- }
-
+ sm: 'h-4 w-4',
+ md: 'h-6 w-6',
+ lg: 'h-8 w-8',
+ };
+
return (
-
-
-
+
+
-
+
+
);
-}
\ No newline at end of file
+}
diff --git a/openframe-frontend-core/src/components/loading/unified-skeleton.tsx b/openframe-frontend-core/src/components/loading/unified-skeleton.tsx
index 1f5d45b11..c68576dcc 100644
--- a/openframe-frontend-core/src/components/loading/unified-skeleton.tsx
+++ b/openframe-frontend-core/src/components/loading/unified-skeleton.tsx
@@ -1,32 +1,32 @@
-import type React from "react"
-import { cn } from "../../utils/cn"
+import type React from 'react';
+import { cn } from '../../utils/cn';
interface UnifiedSkeletonProps extends React.HTMLAttributes
{Array.from({ length: 6 }).map((_, i) => (
@@ -785,4 +779,4 @@ export function SlackCommunitySkeleton() {
-
+
))}
@@ -777,7 +771,7 @@ export function SlackCommunitySkeleton() {
{/* Input Area */}
-
-
+
+
-
+
-
+
-
-
+
+
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/openframe-frontend-core/src/components/loading/wizard-layout-skeleton.tsx b/openframe-frontend-core/src/components/loading/wizard-layout-skeleton.tsx
index 403a4271e..5439091d7 100644
--- a/openframe-frontend-core/src/components/loading/wizard-layout-skeleton.tsx
+++ b/openframe-frontend-core/src/components/loading/wizard-layout-skeleton.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
-import { cn } from "../../utils/cn"
-import { UnifiedSkeleton, TextSkeleton } from './unified-skeleton'
+import React from 'react';
+import { cn } from '../../utils/cn';
+import { TextSkeleton, UnifiedSkeleton } from './unified-skeleton';
interface WizardLayoutSkeletonProps {
- steps?: number
- className?: string
+ steps?: number;
+ className?: string;
}
export function WizardLayoutSkeleton({ steps = 6, className }: WizardLayoutSkeletonProps) {
@@ -29,5 +29,5 @@ export function WizardLayoutSkeleton({ steps = 6, className }: WizardLayoutSkele
(
+ ({ severity, size = 'md', className }, ref) => {
+ const sizeClasses = {
+ sm: 'w-4 h-4',
+ md: 'w-6 h-6',
+ lg: 'w-8 h-8',
+ };
- const dotSizeClasses = {
- sm: 'w-2 h-2',
- md: 'w-3 h-3',
- lg: 'w-4 h-4'
- }
+ const dotSizeClasses = {
+ sm: 'w-2 h-2',
+ md: 'w-3 h-3',
+ lg: 'w-4 h-4',
+ };
- return (
-
- )
-}
+ );
+};
-export const LogsList = React.forwardRef<
- HTMLDivElement,
- LogsListProps
->(({
- logs,
- maxHeight = '400px',
- showConnector = true,
- onLogClick,
- loading = false,
- emptyMessage = 'No logs to display',
- className
-}, ref) => {
- const containerRef = React.useRef(null)
+export const LogsList = React.forwardRef(
+ (
+ {
+ logs,
+ maxHeight = '400px',
+ showConnector = true,
+ onLogClick,
+ loading = false,
+ emptyMessage = 'No logs to display',
+ className,
+ },
+ ref,
+ ) => {
+ const containerRef = React.useRef(null);
- const isFullHeight = maxHeight === '100%'
+ const isFullHeight = maxHeight === '100%';
- const getContainerStyles = () => {
- if (isFullHeight) return undefined
- return { maxHeight, minHeight: '200px' }
- }
+ const getContainerStyles = () => {
+ if (isFullHeight) return undefined;
+ return { maxHeight, minHeight: '200px' };
+ };
- const getContainerClasses = () => {
- if (isFullHeight) return 'h-full'
- return ''
- }
+ const getContainerClasses = () => {
+ if (isFullHeight) return 'h-full';
+ return '';
+ };
- if (loading) {
- return (
-
| {h} | + {['Name', 'Email', 'Role', 'Created', 'Last Sign-In'].map(h => ( ++ {h} + | ))}
|---|---|
+ return (
-
- )
-})
+ ref={ref}
+ className={cn('relative flex items-center justify-center shrink-0', sizeClasses[size], className)}
+ aria-label={`${LOG_SEVERITY_LABELS[severity]} severity`}
+ >
+
+
+ );
+ },
+);
-LogSeverityDot.displayName = 'LogSeverityDot'
\ No newline at end of file
+LogSeverityDot.displayName = 'LogSeverityDot';
diff --git a/openframe-frontend-core/src/components/logs-list.tsx b/openframe-frontend-core/src/components/logs-list.tsx
index 4a09196f4..35b0bcaeb 100644
--- a/openframe-frontend-core/src/components/logs-list.tsx
+++ b/openframe-frontend-core/src/components/logs-list.tsx
@@ -1,162 +1,157 @@
-import * as React from 'react'
-import { cn } from '../utils/cn'
-import { LogsListProps, LogEntry } from '../types/logs.types'
-import { LogSeverityDot } from './log-severity-dot'
-import { ToolIcon } from './tool-icon'
+import * as React from 'react';
+import { LogEntry, LogsListProps } from '../types/logs.types';
+import { cn } from '../utils/cn';
+import { LogSeverityDot } from './log-severity-dot';
+import { ToolIcon } from './tool-icon';
const formatTimestamp = (timestamp: string | Date): string => {
- const date = timestamp instanceof Date ? timestamp : new Date(timestamp)
-
- const year = date.getFullYear()
- const month = String(date.getMonth() + 1).padStart(2, '0')
- const day = String(date.getDate()).padStart(2, '0')
- const hours = String(date.getHours()).padStart(2, '0')
- const minutes = String(date.getMinutes()).padStart(2, '0')
-
- return `${year}/${month}/${day},${hours}:${minutes}`
-}
+ const date = timestamp instanceof Date ? timestamp : new Date(timestamp);
+
+ const year = date.getFullYear();
+ const month = String(date.getMonth() + 1).padStart(2, '0');
+ const day = String(date.getDate()).padStart(2, '0');
+ const hours = String(date.getHours()).padStart(2, '0');
+ const minutes = String(date.getMinutes()).padStart(2, '0');
+
+ return `${year}/${month}/${day},${hours}:${minutes}`;
+};
const LogCard: React.FC<{
- log: LogEntry
- isLast: boolean
- showConnector: boolean
- onClick?: () => void
+ log: LogEntry;
+ isLast: boolean;
+ showConnector: boolean;
+ onClick?: () => void;
}> = ({ log, isLast, showConnector, onClick }) => {
return (
{
+ onKeyDown={e => {
if (e.key === 'Enter' || e.key === ' ') {
- e.preventDefault()
- onClick?.()
+ e.preventDefault();
+ onClick?.();
}
}}
>
-
+
{showConnector && !isLast && (
-
)}
-
- {log.title} -
+{log.title}
-
+
{formatTimestamp(log.timestamp)}
- {log.toolType && ( -
-
- )
- }
+ if (loading) {
+ return (
+ Loading logs...
-
+
+ );
+ }
+
+ if (logs.length === 0) {
+ return (
+ Loading logs...
+
+
+ );
+ }
- if (logs.length === 0) {
return (
- {emptyMessage}
+
-
- )
- }
-
- return (
- {emptyMessage}
-
-
- )
-})
+ );
+ },
+);
-LogsList.displayName = 'LogsList'
\ No newline at end of file
+LogsList.displayName = 'LogsList';
diff --git a/openframe-frontend-core/src/components/made-with-love.tsx b/openframe-frontend-core/src/components/made-with-love.tsx
index 15b434666..bdc3f6c65 100644
--- a/openframe-frontend-core/src/components/made-with-love.tsx
+++ b/openframe-frontend-core/src/components/made-with-love.tsx
@@ -1,8 +1,8 @@
-'use client'
+'use client';
-import React, { useState, useEffect } from 'react';
-import { FlamingoLogo } from './flamingo-logo';
+import React, { useEffect, useState } from 'react';
import { getBaseUrl } from '../utils';
+import { FlamingoLogo } from './flamingo-logo';
interface MadeWithLoveProps {
/** Custom class name for the container */
@@ -13,11 +13,7 @@ interface MadeWithLoveProps {
showOnMobile?: boolean;
}
-export function MadeWithLove({
- className = '',
- size = 'md',
- showOnMobile = true
-}: MadeWithLoveProps) {
+export function MadeWithLove({ className = '', size = 'md', showOnMobile = true }: MadeWithLoveProps) {
const [isMobile, setIsMobile] = useState(false);
const [isHovered, setIsHovered] = useState(false);
@@ -38,20 +34,20 @@ export function MadeWithLove({
logoSize: 14,
fontSizeMobile: '12px',
fontSizeDesktop: '14px',
- gap: '4px'
+ gap: '4px',
},
md: {
logoSize: 16,
fontSizeMobile: '14px',
fontSizeDesktop: '16px',
- gap: '4px'
+ gap: '4px',
},
lg: {
logoSize: 20,
fontSizeMobile: '16px',
fontSizeDesktop: '18px',
- gap: '6px'
- }
+ gap: '6px',
+ },
};
const config = sizeConfig[size];
@@ -59,13 +55,13 @@ export function MadeWithLove({
// Container styles using primitive CSS
const containerStyle: React.CSSProperties = {
- display: (!showOnMobile && isMobile) ? 'none' : 'inline-flex',
+ display: !showOnMobile && isMobile ? 'none' : 'inline-flex',
alignItems: 'center',
gap: config.gap,
fontSize: isMobile ? config.fontSizeMobile : config.fontSizeDesktop,
lineHeight: 1.5,
color: '#ffffff',
- fontFamily: 'inherit'
+ fontFamily: 'inherit',
};
// Button/link styles using primitive CSS
@@ -83,7 +79,7 @@ export function MadeWithLove({
fontSize: '14px',
fontFamily: '"Azeret Mono", monospace',
transition: 'text-decoration 0.2s ease',
- outline: 'none'
+ outline: 'none',
};
// Logo container styles
@@ -91,21 +87,18 @@ export function MadeWithLove({
marginLeft: '2px',
flexShrink: 0,
display: 'flex',
- alignItems: 'center'
+ alignItems: 'center',
};
// Text span styles
const textStyle: React.CSSProperties = {
color: '#ffffff',
marginLeft: '4px',
- textDecoration: 'none'
+ textDecoration: 'none',
};
return (
-
- {logs.map((log, index) => (
- onLogClick?.(log)}
- />
- ))}
+
-
+ {logs.map((log, index) => (
+ onLogClick?.(log)}
+ />
+ ))}
+
+
);
-}
\ No newline at end of file
+}
diff --git a/openframe-frontend-core/src/components/media-carousel.tsx b/openframe-frontend-core/src/components/media-carousel.tsx
index 0f6535d19..ac7319451 100644
--- a/openframe-frontend-core/src/components/media-carousel.tsx
+++ b/openframe-frontend-core/src/components/media-carousel.tsx
@@ -1,26 +1,26 @@
-"use client";
+'use client';
-import { useState, useRef, useEffect, memo, useCallback } from 'react';
-import { cn } from "../utils/cn";
-import { MediaItem } from '../utils/media-carousel-utils-stub';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { cn } from '../utils/cn';
import { LiteYouTubeEmbed } from '../utils/lite-youtube-embed-stub';
+import { MediaItem } from '../utils/media-carousel-utils-stub';
// Navigation icons
const ChevronLeftIcon = () => (
);
const ChevronRightIcon = () => (
);
const PlayIcon = () => (
);
@@ -105,83 +105,74 @@ const CarouselYouTubeEmbed = ({ videoId, title }: { videoId: string; title: stri
);
};
-export const MediaCarousel = memo(function MediaCarousel({
- media,
+export const MediaCarousel = memo(function MediaCarousel({
+ media,
className,
- aspectRatio = "16/9",
+ aspectRatio = '16/9',
showThumbnails = true,
autoPlay = false,
- objectFit = 'contain'
+ objectFit = 'contain',
}: MediaCarouselProps) {
const [currentIndex, setCurrentIndex] = useState(0);
const [touchStart, setTouchStart] = useState(null);
const [touchEnd, setTouchEnd] = useState(null);
- const [playingVideos, setPlayingVideos] = useState>(new Set());
+ const [_playingVideos, setPlayingVideos] = useState>(new Set());
const carouselRef = useRef(null);
const thumbnailsRef = useRef(null);
- // Early return if no media provided
- if (!media || media.length === 0) {
- return null;
- }
-
- const currentItem = media[currentIndex] || media[0];
-
- // Additional safety check
- if (!currentItem) {
- return null;
- }
-
// Handle video play/pause
- const handleVideoClick = useCallback((index: number) => {
- const item = media[index];
- if (item.type !== 'video') return;
-
- // Find the video element
- const videoElements = document.querySelectorAll(`video[data-video-index="${index}"]`);
- const video = videoElements[0] as HTMLVideoElement;
-
- if (!video) {
- console.log('β Video element not found for index:', index);
- return;
- }
-
- if (video.paused) {
- const playPromise = video.play();
-
- if (playPromise !== undefined) {
- playPromise
- .then(() => {
- const playButton = video.parentElement?.querySelector('.video-play-button');
- if (playButton) {
- (playButton as HTMLElement).style.display = 'none';
- }
- })
- .catch((error) => {
- if (error.name === 'NotSupportedError' || error.name === 'MediaElementError') {
- const fallbackDiv = document.createElement('div');
- fallbackDiv.className = 'absolute inset-0 flex items-center justify-center bg-ods-card text-center p-4';
- fallbackDiv.innerHTML = `
+ const handleVideoClick = useCallback(
+ (index: number) => {
+ const item = media[index];
+ if (item.type !== 'video') return;
+
+ // Find the video element
+ const videoElements = document.querySelectorAll(`video[data-video-index="${index}"]`);
+ const video = videoElements[0] as HTMLVideoElement;
+
+ if (!video) {
+ console.log('β Video element not found for index:', index);
+ return;
+ }
+
+ if (video.paused) {
+ const playPromise = video.play();
+
+ if (playPromise !== undefined) {
+ playPromise
+ .then(() => {
+ const playButton = video.parentElement?.querySelector('.video-play-button');
+ if (playButton) {
+ (playButton as HTMLElement).style.display = 'none';
+ }
+ })
+ .catch(error => {
+ if (error.name === 'NotSupportedError' || error.name === 'MediaElementError') {
+ const fallbackDiv = document.createElement('div');
+ fallbackDiv.className = 'absolute inset-0 flex items-center justify-center bg-ods-card text-center p-4';
+ fallbackDiv.innerHTML = `
`;
- video.parentElement?.appendChild(fallbackDiv);
- }
- });
+ video.parentElement?.appendChild(fallbackDiv);
+ }
+ });
+ }
+ } else {
+ video.pause();
+ const playButton = video.parentElement?.querySelector('.video-play-button');
+ if (playButton) {
+ (playButton as HTMLElement).style.display = 'flex';
+ }
}
- } else {
- video.pause();
- const playButton = video.parentElement?.querySelector('.video-play-button');
- if (playButton) {
- (playButton as HTMLElement).style.display = 'flex';
- }
- }
- }, [media]);
+ },
+ [media],
+ );
// Navigation functions
const nextSlide = useCallback(() => {
@@ -190,7 +181,7 @@ export const MediaCarousel = memo(function MediaCarousel({
currentVideo.pause();
}
setPlayingVideos(new Set());
- setCurrentIndex((prev) => (prev + 1) % media.length);
+ setCurrentIndex(prev => (prev + 1) % media.length);
}, [currentIndex, media.length]);
const prevSlide = useCallback(() => {
@@ -199,32 +190,50 @@ export const MediaCarousel = memo(function MediaCarousel({
currentVideo.pause();
}
setPlayingVideos(new Set());
- setCurrentIndex((prev) => (prev - 1 + media.length) % media.length);
+ setCurrentIndex(prev => (prev - 1 + media.length) % media.length);
}, [currentIndex, media.length]);
- const selectSlide = useCallback((index: number) => {
- if (index === currentIndex) return;
-
- const currentVideo = document.querySelector(`[data-video-index="${currentIndex}"]`) as HTMLVideoElement;
- if (currentVideo && !currentVideo.paused) {
- currentVideo.pause();
- }
- setPlayingVideos(new Set());
- setCurrentIndex(index);
- }, [currentIndex]);
+ const selectSlide = useCallback(
+ (index: number) => {
+ if (index === currentIndex) return;
+
+ const currentVideo = document.querySelector(`[data-video-index="${currentIndex}"]`) as HTMLVideoElement;
+ if (currentVideo && !currentVideo.paused) {
+ currentVideo.pause();
+ }
+ setPlayingVideos(new Set());
+ setCurrentIndex(index);
+ },
+ [currentIndex],
+ );
// Keyboard navigation - only when carousel is focused
- const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
- if (media.length <= 1) return;
-
- if (e.key === 'ArrowLeft') {
- e.preventDefault();
- prevSlide();
- } else if (e.key === 'ArrowRight') {
- e.preventDefault();
- nextSlide();
- }
- }, [nextSlide, prevSlide, media.length]);
+ const handleKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (media.length <= 1) return;
+
+ if (e.key === 'ArrowLeft') {
+ e.preventDefault();
+ prevSlide();
+ } else if (e.key === 'ArrowRight') {
+ e.preventDefault();
+ nextSlide();
+ }
+ },
+ [nextSlide, prevSlide, media.length],
+ );
+
+ // Early return if no media provided
+ if (!media || media.length === 0) {
+ return null;
+ }
+
+ const currentItem = media[currentIndex] || media[0];
+
+ // Additional safety check
+ if (!currentItem) {
+ return null;
+ }
// Touch/swipe handling
const minSwipeDistance = 50;
@@ -240,7 +249,7 @@ export const MediaCarousel = memo(function MediaCarousel({
const onTouchEnd = () => {
if (!touchStart || !touchEnd) return;
-
+
const distance = touchStart - touchEnd;
const isLeftSwipe = distance > minSwipeDistance;
const isRightSwipe = distance < -minSwipeDistance;
@@ -275,7 +284,7 @@ export const MediaCarousel = memo(function MediaCarousel({
// Render video
const renderVideo = (item: MediaItem, index: number) => (
Video format not supported
+ class="text-ods-accent hover:text-ods-open-yellow text-sm"> Open Video Directly
-
-
+
{/* Play Button Overlay */}
-
handleVideoClick(index)}
>
@@ -344,12 +357,12 @@ export const MediaCarousel = memo(function MediaCarousel({
// Render image
const renderImage = (item: MediaItem, index: number) => (
- 
{
+ onError={e => {
console.log('β Image failed to load:', item.src);
const target = e.target as HTMLImageElement;
target.style.display = 'none';
@@ -361,7 +374,7 @@ export const MediaCarousel = memo(function MediaCarousel({
// Render main media item
const renderMainMedia = (item: MediaItem, index: number) => {
console.log('π¬ Rendering media item:', { type: item.type, src: item.src.substring(0, 100) + '...' });
-
+
switch (item.type) {
case 'youtube':
return renderYouTubeEmbed(item, index);
@@ -376,7 +389,7 @@ export const MediaCarousel = memo(function MediaCarousel({
// Render thumbnail
const renderThumbnail = (item: MediaItem, index: number) => {
const isActive = index === currentIndex;
-
+
let thumbnailSrc = item.src;
if (item.type === 'youtube') {
const videoId = getYouTubeVideoId(item.src);
@@ -390,11 +403,11 @@ export const MediaCarousel = memo(function MediaCarousel({
key={index}
onClick={() => selectSlide(index)}
className={cn(
- "relative flex-shrink-0 overflow-hidden transition-all duration-200",
- "w-20 h-20 md:w-24 md:h-24 rounded-lg border-2",
- isActive
- ? "border-[#FFC008] ring-2 ring-[#FFC008]/20"
- : "border-ods-border hover:border-[#888888]"
+ 'relative flex-shrink-0 overflow-hidden transition-all duration-200',
+ 'w-20 h-20 md:w-24 md:h-24 rounded-lg border-2',
+ isActive
+ ? 'border-ods-open-yellow ring-2 ring-ods-open-yellow/20'
+ : 'border-ods-border hover:border-ods-text-secondary',
)}
>
![]()
-
+
{/* Play icon overlay for videos */}
{(item.type === 'video' || item.type === 'youtube') && (
)}
-
+
{/* Active indicator */}
{isActive && (
-
+
)}
);
@@ -439,21 +452,21 @@ export const MediaCarousel = memo(function MediaCarousel({
};
return (
-
+ (
- STORAGE_KEY,
- !isLgUp || (config.minimized ?? false)
- )
+ const [minimized, setMinimized] = useLocalStorage(STORAGE_KEY, !isLgUp || (config.minimized ?? false));
// Enable transitions only after the correct width is painted
- const [transitionsEnabled, setTransitionsEnabled] = useState(false)
+ const [transitionsEnabled, setTransitionsEnabled] = useState(false);
- const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const handleToggleMinimized = useCallback(() => {
if (!isLgUp) {
- setMobileMenuOpen(prev => !prev)
+ setMobileMenuOpen(prev => !prev);
} else {
- setMinimized(prev => !prev)
- config.onToggleMinimized?.()
- }
- }, [isLgUp, setMinimized, config])
-
- const handleItemClick = useCallback((item: NavigationSidebarItem, event?: React.MouseEvent) => {
- event?.stopPropagation()
-
- // Close mobile menu on navigation
- if (!isLgUp && mobileMenuOpen) {
- setMobileMenuOpen(false)
- }
-
- if (item.onClick) {
- item.onClick()
- } else if (item.path) {
- config.onNavigate?.(item.path)
+ setMinimized(prev => !prev);
+ config.onToggleMinimized?.();
}
- }, [config, isLgUp, mobileMenuOpen])
-
- const renderNavigationItem = useCallback((
- item: NavigationSidebarItem,
- inOverlay: boolean
- ) => {
- const isActive = item.isActive ?? false
- const isMinimized = !isLgUp && !inOverlay ? true : minimized
- const shouldShowLabel = !isLgUp ? inOverlay : (inOverlay || !minimized)
-
- return (
-
- )
- }, [minimized, isLgUp, handleItemClick])
+ {/* Label - only render when needed */}
+ {shouldShowLabel && {item.label}}
+
+ {/* Badge - only show with label */}
+ {item.badge && shouldShowLabel && (
+
+ {item.badge}
+
+ )}
+
+ );
+ },
+ [minimized, isLgUp, handleItemClick],
+ );
// Memoize items separation
- const { primaryItems, secondaryItems } = useMemo(() => ({
- primaryItems: config.items.filter(item => item.section !== 'secondary'),
- secondaryItems: config.items.filter(item => item.section === 'secondary')
- }), [config.items])
-
- const renderSidebarContent = useCallback((inOverlay: boolean) => (
- <>
- {/* Header */}
-
{/* Main Display Area with Fixed Aspect Ratio */}
-
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/openframe-frontend-core/src/components/navigation/navigation-sidebar.tsx b/openframe-frontend-core/src/components/navigation/navigation-sidebar.tsx
index 30d03adcd..ab4e5d18b 100644
--- a/openframe-frontend-core/src/components/navigation/navigation-sidebar.tsx
+++ b/openframe-frontend-core/src/components/navigation/navigation-sidebar.tsx
@@ -1,293 +1,253 @@
-"use client"
+'use client';
-import { cloneElement, useCallback, useLayoutEffect, useMemo, useState } from 'react'
-import { useLocalStorage } from '../../hooks/ui/use-local-storage'
-import { useLgUp } from '../../hooks/ui/use-media-query'
-import { NavigationSidebarConfig, NavigationSidebarItem } from '../../types/navigation'
-import { cn } from '../../utils'
-import { DoubleChevronIcon, OpenFrameLogo, OpenFrameText } from '../icons'
+import { cloneElement, useCallback, useLayoutEffect, useMemo, useState } from 'react';
+import { useLocalStorage } from '../../hooks/ui/use-local-storage';
+import { useLgUp } from '../../hooks/ui/use-media-query';
+import { NavigationSidebarConfig, NavigationSidebarItem } from '../../types/navigation';
+import { cn } from '../../utils';
+import { DoubleChevronIcon, OpenFrameLogo, OpenFrameText } from '../icons';
// Constants
-const MINIMIZED_WIDTH = 56 // 3.5rem = 56px
-const EXPANDED_WIDTH = 224 // 14rem = 224px
-const STORAGE_KEY = 'of.navigationSidebar.minimized'
+const MINIMIZED_WIDTH = 56; // 3.5rem = 56px
+const EXPANDED_WIDTH = 224; // 14rem = 224px
+const STORAGE_KEY = 'of.navigationSidebar.minimized';
export interface NavigationSidebarProps {
- config: NavigationSidebarConfig
+ config: NavigationSidebarConfig;
}
export function NavigationSidebar({ config }: NavigationSidebarProps) {
-
- const isLgUp = useLgUp() ?? false
+ const isLgUp = useLgUp() ?? false;
// Initialize minimized state based on tablet mode or config
// useLocalStorage will read from localStorage first, then fall back to this value
- const [minimized, setMinimized] = useLocalStorage 1 ? handleKeyDown : undefined}
tabIndex={media.length > 1 ? 0 : undefined}
- role={media.length > 1 ? "region" : undefined}
- aria-label={media.length > 1 ? "Media carousel, use arrow keys to navigate" : undefined}
+ role={media.length > 1 ? 'region' : undefined}
+ aria-label={media.length > 1 ? 'Media carousel, use arrow keys to navigate' : undefined}
>
{/* Media content */}
{renderMainMedia(currentItem, currentIndex)}
@@ -488,7 +501,7 @@ export const MediaCarousel = memo(function MediaCarousel({
{/* Thumbnail Navigation - only show if multiple items and showThumbnails is true */}
{media.length > 1 && showThumbnails && (
{/* Footer with action button - fixed at bottom */}
- {config.footer && (
-
- (null)
+ const panelRef = useRef(null);
// Prevent body scroll when menu is open - using the original working approach
useEffect(() => {
if (isOpen) {
- document.body.style.overflow = 'hidden'
+ document.body.style.overflow = 'hidden';
} else {
- document.body.style.overflow = 'unset'
+ document.body.style.overflow = 'unset';
}
return () => {
- document.body.style.overflow = 'unset'
- }
- }, [isOpen])
+ document.body.style.overflow = 'unset';
+ };
+ }, [isOpen]);
// Handle escape key
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape' && isOpen) {
- config.onClose?.()
+ config.onClose?.();
}
- }
+ };
if (isOpen) {
- document.addEventListener('keydown', handleKeyDown)
- return () => document.removeEventListener('keydown', handleKeyDown)
+ document.addEventListener('keydown', handleKeyDown);
+ return () => document.removeEventListener('keydown', handleKeyDown);
}
- }, [isOpen, config])
+ }, [isOpen, config]);
- if (!isOpen) return null
+ if (!isOpen) return null;
const renderNavigationItem = (item: NavigationItem) => {
if (item.element) {
- return
);
-});
\ No newline at end of file
+});
diff --git a/openframe-frontend-core/src/components/menu-icon.tsx b/openframe-frontend-core/src/components/menu-icon.tsx
index 14811996b..089ac67e0 100644
--- a/openframe-frontend-core/src/components/menu-icon.tsx
+++ b/openframe-frontend-core/src/components/menu-icon.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
import { Menu } from 'lucide-react';
+import React from 'react';
interface MenuIconProps {
className?: string;
@@ -7,16 +7,6 @@ interface MenuIconProps {
height?: number;
}
-export const MenuIcon: React.FC = ({
- className = "",
- width = 24,
- height = 24
-}) => {
- return (
-
- );
-};
\ No newline at end of file
+export const MenuIcon: React.FC = ({ className = '', width = 24, height = 24 }) => {
+ return ;
+};
diff --git a/openframe-frontend-core/src/components/menubar.tsx b/openframe-frontend-core/src/components/menubar.tsx
index 64fcaa3c0..7a1d3b23c 100644
--- a/openframe-frontend-core/src/components/menubar.tsx
+++ b/openframe-frontend-core/src/components/menubar.tsx
@@ -1,20 +1,20 @@
-"use client"
+'use client';
-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+import * as React from 'react';
-import { cn } from "../utils/cn"
+import { cn } from '../utils/cn';
-const MenubarMenu = MenubarPrimitive.Menu
+const MenubarMenu = MenubarPrimitive.Menu;
-const MenubarGroup = MenubarPrimitive.Group
+const MenubarGroup = MenubarPrimitive.Group;
-const MenubarPortal = MenubarPrimitive.Portal
+const MenubarPortal = MenubarPrimitive.Portal;
-const MenubarSub = MenubarPrimitive.Sub
+const MenubarSub = MenubarPrimitive.Sub;
-const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
const Menubar = React.forwardRef<
React.ElementRef,
@@ -22,14 +22,11 @@ const Menubar = React.forwardRef<
>(({ className, ...props }, ref) => (
,
@@ -38,34 +35,34 @@ const MenubarTrigger = React.forwardRef<
,
React.ComponentPropsWithoutRef & {
- inset?: boolean
+ inset?: boolean;
}
>(({ className, inset, children, ...props }, ref) => (
{children}
-))
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
const MenubarSubContent = React.forwardRef<
React.ElementRef,
@@ -74,56 +71,51 @@ const MenubarSubContent = React.forwardRef<
,
React.ComponentPropsWithoutRef
->(
- (
- { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
- ref
- ) => (
-
-
- )
-)
-MenubarContent.displayName = MenubarPrimitive.Content.displayName
+>(({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+
+
+));
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
const MenubarItem = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef & {
- inset?: boolean
+ inset?: boolean;
}
>(({ className, inset, ...props }, ref) => (
,
@@ -132,8 +124,8 @@ const MenubarCheckboxItem = React.forwardRef<
{children}
-))
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
const MenubarRadioItem = React.forwardRef<
React.ElementRef,
@@ -155,8 +147,8 @@ const MenubarRadioItem = React.forwardRef<
@@ -167,54 +159,35 @@ const MenubarRadioItem = React.forwardRef<
{children}
-))
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
const MenubarLabel = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef & {
- inset?: boolean
+ inset?: boolean;
}
>(({ className, inset, ...props }, ref) => (
,
React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
- ) => {
- return (
-
- )
-}
-MenubarShortcut.displayname = "MenubarShortcut"
+ ) => {
+ return ;
+};
+MenubarShortcut.displayname = 'MenubarShortcut';
export {
Menubar,
@@ -233,4 +206,4 @@ export {
MenubarGroup,
MenubarSub,
MenubarShortcut,
-}
+};
diff --git a/openframe-frontend-core/src/components/metric-value.tsx b/openframe-frontend-core/src/components/metric-value.tsx
index 7f694fee6..0c966859d 100644
--- a/openframe-frontend-core/src/components/metric-value.tsx
+++ b/openframe-frontend-core/src/components/metric-value.tsx
@@ -1,7 +1,7 @@
-"use client"
+'use client';
import React from 'react';
-import { cn } from "../utils/cn";
+import { cn } from '../utils/cn';
interface MetricValueProps {
value: string | number;
@@ -15,11 +15,14 @@ interface MetricValueProps {
*/
export function MetricValue({ value, label, className }: MetricValueProps) {
return (
- >({})
- const dropdownRefs = useRef>({})
- const triggerRefs = useRef>({})
-
+ const [show, setShow] = useState(true);
+ const [_lastScrollY, setLastScrollY] = useState(0);
+ const [openDropdowns, setOpenDropdowns] = useState>({});
+ const dropdownRefs = useRef>({});
+ const triggerRefs = useRef>({});
+
// Handle click outside and escape key for custom dropdown
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
- const target = event.target as HTMLElement
- if (!target) return
+ const target = event.target as HTMLElement;
+ if (!target) return;
// Check if click is outside all dropdowns
const isOutsideAllDropdowns = Object.keys(openDropdowns).every(id => {
- const dropdown = dropdownRefs.current[id]
- const trigger = triggerRefs.current[id]
-
- if (!dropdown || !trigger) return true
-
- return !dropdown.contains(target) && !trigger.contains(target)
- })
+ const dropdown = dropdownRefs.current[id];
+ const trigger = triggerRefs.current[id];
+
+ if (!dropdown || !trigger) return true;
+
+ return !dropdown.contains(target) && !trigger.contains(target);
+ });
if (isOutsideAllDropdowns) {
- setOpenDropdowns({})
+ setOpenDropdowns({});
}
- }
+ };
const handleEscapeKey = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
- setOpenDropdowns({})
+ setOpenDropdowns({});
}
- }
+ };
// Only add listeners if any dropdown is open
- const hasOpenDropdowns = Object.values(openDropdowns).some(Boolean)
+ const hasOpenDropdowns = Object.values(openDropdowns).some(Boolean);
if (hasOpenDropdowns) {
- document.addEventListener('mousedown', handleClickOutside)
- document.addEventListener('keydown', handleEscapeKey)
+ document.addEventListener('mousedown', handleClickOutside);
+ document.addEventListener('keydown', handleEscapeKey);
}
return () => {
- document.removeEventListener('mousedown', handleClickOutside)
- document.removeEventListener('keydown', handleEscapeKey)
- }
- }, [openDropdowns])
+ document.removeEventListener('mousedown', handleClickOutside);
+ document.removeEventListener('keydown', handleEscapeKey);
+ };
+ }, [openDropdowns]);
// Force close all dropdowns and cleanup on unmount
useEffect(() => {
return () => {
// Close all dropdowns before unmounting to prevent focus errors
- setOpenDropdowns({})
+ setOpenDropdowns({});
// Clear any stored refs
- dropdownRefs.current = {}
- triggerRefs.current = {}
- }
- }, [])
-
+ dropdownRefs.current = {};
+ triggerRefs.current = {};
+ };
+ }, []);
+
useEffect(() => {
// Only add scroll listener if autoHide is enabled
if (!config.autoHide) {
- setShow(true) // Always show header when autoHide is disabled
- return
+ setShow(true); // Always show header when autoHide is disabled
+ return;
}
-
+
const handleScroll = () => {
- const currentScrollY = window.scrollY
-
+ const currentScrollY = window.scrollY;
+
setLastScrollY(prevScrollY => {
// Determine if we should show or hide the header
- const shouldHide = currentScrollY > prevScrollY && currentScrollY > 50
- const shouldShow = currentScrollY < prevScrollY || currentScrollY <= 10
-
+ const shouldHide = currentScrollY > prevScrollY && currentScrollY > 50;
+ const shouldShow = currentScrollY < prevScrollY || currentScrollY <= 10;
+
if (shouldHide) {
- setShow(false)
+ setShow(false);
} else if (shouldShow) {
- setShow(true)
+ setShow(true);
}
-
- return currentScrollY
- })
- }
- window.addEventListener('scroll', handleScroll, { passive: true })
-
- return () => {
- window.removeEventListener('scroll', handleScroll)
- }
- }, [config.autoHide])
+ return currentScrollY;
+ });
+ };
+ window.addEventListener('scroll', handleScroll, { passive: true });
+
+ return () => {
+ window.removeEventListener('scroll', handleScroll);
+ };
+ }, [config.autoHide]);
const renderNavigationItem = (item: NavigationItem) => {
// If custom element provided, use it
if (item.element) {
- return {item.element}
+ return {item.element} ;
}
// If it has children, render as custom dropdown
if (item.children && item.children.length > 0) {
- const isOpen = openDropdowns[item.id] || false
-
+ const isOpen = openDropdowns[item.id] || false;
+
return (
{/* Action Buttons */}
- )
+ );
}
diff --git a/openframe-frontend-core/src/components/navigation/mobile-nav-panel.tsx b/openframe-frontend-core/src/components/navigation/mobile-nav-panel.tsx
index da69ed47b..16049dcef 100644
--- a/openframe-frontend-core/src/components/navigation/mobile-nav-panel.tsx
+++ b/openframe-frontend-core/src/components/navigation/mobile-nav-panel.tsx
@@ -1,59 +1,59 @@
-"use client"
+'use client';
-import React, { useEffect, useRef } from 'react'
-import { cn } from '../../utils'
-import { MobileNavConfig, NavigationItem } from '../../types/navigation'
-import { Button } from '../ui/button'
-import { X } from 'lucide-react'
+import { X } from 'lucide-react';
+import React, { useEffect, useRef } from 'react';
+import { MobileNavConfig, NavigationItem } from '../../types/navigation';
+import { cn } from '../../utils';
+import { Button } from '../ui/button';
export interface MobileNavPanelProps {
- isOpen: boolean
- config: MobileNavConfig
+ isOpen: boolean;
+ config: MobileNavConfig;
}
export function MobileNavPanel({ isOpen, config }: MobileNavPanelProps) {
- const panelRef = useRef
+ {
- className?: string
+ className?: string;
}
export function MinusCircleIcon({ className, ...props }: MinusCircleIconProps) {
return (
-
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/openframe-frontend-core/src/components/moon-icon.tsx b/openframe-frontend-core/src/components/moon-icon.tsx
index c88b99f02..4efb6c70b 100644
--- a/openframe-frontend-core/src/components/moon-icon.tsx
+++ b/openframe-frontend-core/src/components/moon-icon.tsx
@@ -6,21 +6,20 @@ interface MoonIconProps {
height?: number;
}
-export const MoonIcon: React.FC = ({
- className = "",
- width = 23,
- height = 24
-}) => {
+export const MoonIcon: React.FC = ({ className = '', width = 23, height = 24 }) => {
return (
-
);
-};
\ No newline at end of file
+};
diff --git a/openframe-frontend-core/src/components/ms-icon.tsx b/openframe-frontend-core/src/components/ms-icon.tsx
index 46800d303..b8addfc29 100644
--- a/openframe-frontend-core/src/components/ms-icon.tsx
+++ b/openframe-frontend-core/src/components/ms-icon.tsx
@@ -1,18 +1,14 @@
-import React from 'react'
+import React from 'react';
interface MsIconProps {
- width?: number | string
- height?: number | string
- className?: string
+ width?: number | string;
+ height?: number | string;
+ className?: string;
}
-export function MicrosoftIcon({
- width = 24,
- height = 24,
- className = "text-current"
- }: MsIconProps) {
+export function MicrosoftIcon({ width = 24, height = 24, className = 'text-current' }: MsIconProps) {
return (
-
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/openframe-frontend-core/src/components/msp-display.tsx b/openframe-frontend-core/src/components/msp-display.tsx
index d6ec63e77..7cde7ab35 100644
--- a/openframe-frontend-core/src/components/msp-display.tsx
+++ b/openframe-frontend-core/src/components/msp-display.tsx
@@ -1,23 +1,21 @@
-"use client"
+'use client';
import React from 'react';
-import { cn } from "../utils/cn";
+import { cn } from '../utils/cn';
import { SquareAvatar } from './square-avatar';
-interface MSPDisplayProps {
+interface MspDisplayProps {
name: string;
logoUrl?: string | null;
size?: number; // avatar size in px (square)
className?: string;
}
-export function MSPDisplay({ name, logoUrl, size = 40, className }: MSPDisplayProps) {
+export function MSPDisplay({ name, logoUrl, size = 40, className }: MspDisplayProps) {
return (
,
@@ -11,17 +11,14 @@ const NavigationMenu = React.forwardRef<
>(({ className, children, ...props }, ref) => (
{children}
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
const NavigationMenuList = React.forwardRef<
React.ElementRef,
@@ -29,20 +26,17 @@ const NavigationMenuList = React.forwardRef<
>(({ className, ...props }, ref) => (
,
@@ -50,17 +44,17 @@ const NavigationMenuTrigger = React.forwardRef<
>(({ className, children, ...props }, ref) => (
- {children}{" "}
+ {children}{' '}
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
const NavigationMenuContent = React.forwardRef<
React.ElementRef,
@@ -69,33 +63,32 @@ const NavigationMenuContent = React.forwardRef<
,
React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
-
- loadingFallback?: React.ReactNode
- mainClassName?: string
- className?: string
- mobileBurgerMenuProps: Omit
+ children: React.ReactNode;
+ sidebarConfig: NavigationSidebarConfig;
+ headerProps: Omit;
+ loadingFallback?: React.ReactNode;
+ mainClassName?: string;
+ className?: string;
+ mobileBurgerMenuProps: Omit;
}
export function AppLayout({
@@ -26,18 +26,18 @@ export function AppLayout({
className,
mobileBurgerMenuProps,
}: AppLayoutProps) {
- const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+ const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const handleToggleMobileMenu = useCallback(() => {
- setMobileMenuOpen(prev => !prev)
- }, [])
+ setMobileMenuOpen(prev => !prev);
+ }, []);
const handleCloseMobileMenu = useCallback(() => {
- setMobileMenuOpen(false)
- }, [])
+ setMobileMenuOpen(false);
+ }, []);
return (
- {
/** Whether the button is in active/pressed state */
- isActive?: boolean
+ isActive?: boolean;
/** Icon to display in the button */
- icon: React.ReactNode
+ icon: React.ReactNode;
/** Additional class names */
- className?: string
+ className?: string;
}
-export function HeaderButton({
- isActive = false,
- icon,
- className,
- ...props
-}: HeaderButtonProps) {
+export function HeaderButton({ isActive = false, icon, className, ...props }: HeaderButtonProps) {
return (
- )
+ );
}
-export default HeaderButton
+export default HeaderButton;
diff --git a/openframe-frontend-core/src/components/navigation/header-global-search.tsx b/openframe-frontend-core/src/components/navigation/header-global-search.tsx
index f3ea0df4d..8c8d03289 100644
--- a/openframe-frontend-core/src/components/navigation/header-global-search.tsx
+++ b/openframe-frontend-core/src/components/navigation/header-global-search.tsx
@@ -1,20 +1,20 @@
-'use client'
+'use client';
-import React from 'react'
-import { cn } from '../../utils/cn'
-import { SearchIcon } from '../icons-v2-generated'
+import React from 'react';
+import { cn } from '../../utils/cn';
+import { SearchIcon } from '../icons-v2-generated';
export interface HeaderGlobalSearchProps {
/** Current search value */
- value?: string
+ value?: string;
/** Callback when search value changes */
- onChange?: (value: string) => void
+ onChange?: (value: string) => void;
/** Callback when search is submitted */
- onSubmit?: (value: string) => void
+ onSubmit?: (value: string) => void;
/** Placeholder text */
- placeholder?: string
+ placeholder?: string;
/** Additional class names */
- className?: string
+ className?: string;
}
export function HeaderGlobalSearch({
@@ -22,40 +22,36 @@ export function HeaderGlobalSearch({
onChange,
onSubmit,
placeholder = 'Global Search',
- className
+ className,
}: HeaderGlobalSearchProps) {
- const [internalValue, setInternalValue] = React.useState(value)
+ const [internalValue, setInternalValue] = React.useState(value);
- const currentValue = onChange ? value : internalValue
+ const currentValue = onChange ? value : internalValue;
const handleChange = (e: React.ChangeEvent) => {
- const newValue = e.target.value
+ const newValue = e.target.value;
if (onChange) {
- onChange(newValue)
+ onChange(newValue);
} else {
- setInternalValue(newValue)
+ setInternalValue(newValue);
}
- }
+ };
const handleSubmit = (e: React.FormEvent) => {
- e.preventDefault()
- onSubmit?.(currentValue)
- }
+ e.preventDefault();
+ onSubmit?.(currentValue);
+ };
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
- onSubmit?.(currentValue)
+ onSubmit?.(currentValue);
}
- }
+ };
return (
- )
+ );
}
-export default HeaderGlobalSearch
+export default HeaderGlobalSearch;
diff --git a/openframe-frontend-core/src/components/navigation/header-organization-filter.tsx b/openframe-frontend-core/src/components/navigation/header-organization-filter.tsx
index 46b8459a9..80a347906 100644
--- a/openframe-frontend-core/src/components/navigation/header-organization-filter.tsx
+++ b/openframe-frontend-core/src/components/navigation/header-organization-filter.tsx
@@ -1,26 +1,26 @@
-'use client'
+'use client';
-import { cn } from '../../utils/cn'
-import { Filter02Icon } from '../icons-v2-generated'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui'
+import { cn } from '../../utils/cn';
+import { Filter02Icon } from '../icons-v2-generated';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui';
export interface HeaderOrganizationFilterOrganization {
- id: string
- name: string
- deviceCount?: number
+ id: string;
+ name: string;
+ deviceCount?: number;
}
export interface HeaderOrganizationFilterProps {
/** List of organizations */
- organizations?: HeaderOrganizationFilterOrganization[]
+ organizations?: HeaderOrganizationFilterOrganization[];
/** Currently selected organization ID */
- selectedOrgId?: string
+ selectedOrgId?: string;
/** Callback when organization changes */
- onOrgChange?: (id: string) => void
+ onOrgChange?: (id: string) => void;
/** Total device count (shown when "All Organizations" is selected) */
- totalDeviceCount?: number
+ totalDeviceCount?: number;
/** Additional class names */
- className?: string
+ className?: string;
}
export function HeaderOrganizationFilter({
@@ -28,22 +28,22 @@ export function HeaderOrganizationFilter({
selectedOrgId,
onOrgChange,
totalDeviceCount,
- className
+ className,
}: HeaderOrganizationFilterProps) {
- const selectedOrg = organizations.find(o => o.id === selectedOrgId)
- const displayName = selectedOrg?.name || 'All Organizations'
- const deviceCount = selectedOrg?.deviceCount ?? totalDeviceCount
+ const selectedOrg = organizations.find(o => o.id === selectedOrgId);
+ const displayName = selectedOrg?.name || 'All Organizations';
+ const deviceCount = selectedOrg?.deviceCount ?? totalDeviceCount;
return (
- onOrgChange?.('')}>
- All Organizations
-
+ onOrgChange?.('')}>All Organizations
{organizations.map(org => (
- onOrgChange?.(org.id)}
- >
+ onOrgChange?.(org.id)}>
{org.name}
))}
- )
+ );
}
-export default HeaderOrganizationFilter
+export default HeaderOrganizationFilter;
diff --git a/openframe-frontend-core/src/components/navigation/header-skeleton.tsx b/openframe-frontend-core/src/components/navigation/header-skeleton.tsx
index 64829fda4..564d40551 100644
--- a/openframe-frontend-core/src/components/navigation/header-skeleton.tsx
+++ b/openframe-frontend-core/src/components/navigation/header-skeleton.tsx
@@ -1,25 +1,25 @@
-import { cn } from '../../utils'
-import { HeaderConfig } from '../../types/navigation'
+import { HeaderConfig } from '../../types/navigation';
+import { cn } from '../../utils';
export interface HeaderSkeletonProps {
- config?: HeaderConfig
+ config?: HeaderConfig;
}
export function HeaderSkeleton({ config }: HeaderSkeletonProps) {
- const showNavigation = config?.navigation && config.navigation.items.length > 0
- const showActions = config?.actions?.right && config.actions.right.length > 0
- const showMobileMenu = config?.mobile?.enabled
- const isAdminHeader = config?.className?.includes('admin')
-
+ const showNavigation = config?.navigation && config.navigation.items.length > 0;
+ const showActions = config?.actions?.right && config.actions.right.length > 0;
+ const showMobileMenu = config?.mobile?.enabled;
+ const isAdminHeader = config?.className?.includes('admin');
+
return (
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/openframe-frontend-core/src/components/navigation/header.tsx b/openframe-frontend-core/src/components/navigation/header.tsx
index 7e9326498..3522777f7 100644
--- a/openframe-frontend-core/src/components/navigation/header.tsx
+++ b/openframe-frontend-core/src/components/navigation/header.tsx
@@ -1,180 +1,183 @@
-"use client"
+'use client';
-import Link from 'next/link'
-import React, { useEffect, useRef, useState } from 'react'
-import { HeaderConfig, NavigationItem } from '../../types/navigation'
-import { cn } from '../../utils'
-import { Button } from '../ui/button'
+import Link from 'next/link';
+import React, { useEffect, useRef, useState } from 'react';
+import { HeaderConfig, NavigationItem } from '../../types/navigation';
+import { cn } from '../../utils';
+import { Button } from '../ui/button';
export interface HeaderProps {
- config: HeaderConfig
- platform?: string
+ config: HeaderConfig;
+ platform?: string;
}
// Re-export from types for convenience
-export type { HeaderConfig } from '../../types/navigation'
+export type { HeaderConfig } from '../../types/navigation';
export function Header({ config, platform }: HeaderProps) {
- const [show, setShow] = useState(true)
- const [lastScrollY, setLastScrollY] = useState(0)
- const [openDropdowns, setOpenDropdowns] = useState
{value}
-
- {label}
-
+ {label}
);
-}
\ No newline at end of file
+}
diff --git a/openframe-frontend-core/src/components/minus-circle-icon.tsx b/openframe-frontend-core/src/components/minus-circle-icon.tsx
index 1e28a9f2d..78d7dcdd7 100644
--- a/openframe-frontend-core/src/components/minus-circle-icon.tsx
+++ b/openframe-frontend-core/src/components/minus-circle-icon.tsx
@@ -1,28 +1,28 @@
-import React from 'react'
+import React from 'react';
interface MinusCircleIconProps extends React.SVGProps- {name} -
+{name}
+
,
@@ -104,16 +97,15 @@ const NavigationMenuIndicator = React.forwardRef<
-))
-NavigationMenuIndicator.displayName =
- NavigationMenuPrimitive.Indicator.displayName
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
export {
navigationMenuTriggerStyle,
@@ -125,4 +117,4 @@ export {
NavigationMenuLink,
NavigationMenuIndicator,
NavigationMenuViewport,
-}
+};
diff --git a/openframe-frontend-core/src/components/navigation/app-header.tsx b/openframe-frontend-core/src/components/navigation/app-header.tsx
index a2986a2ea..31c4cca6b 100644
--- a/openframe-frontend-core/src/components/navigation/app-header.tsx
+++ b/openframe-frontend-core/src/components/navigation/app-header.tsx
@@ -1,36 +1,36 @@
-'use client'
+'use client';
-import { Bell } from 'lucide-react'
-import { useMdUp } from '../../hooks/ui/use-media-query'
-import { cn } from '../../utils/cn'
-import { LogOutIcon, OpenFrameLogo, OpenFrameText, UserIcon } from '../icons'
-import { Menu01Icon, SearchIcon, XmarkIcon } from '../icons-v2-generated'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, SquareAvatar } from '../ui'
-import { HeaderButton } from './header-button'
-import { HeaderGlobalSearch } from './header-global-search'
-import { HeaderOrganizationFilter } from './header-organization-filter'
+import { Bell } from 'lucide-react';
+import { useMdUp } from '../../hooks/ui/use-media-query';
+import { cn } from '../../utils/cn';
+import { LogOutIcon, OpenFrameLogo, OpenFrameText, UserIcon } from '../icons';
+import { Menu01Icon, SearchIcon, XmarkIcon } from '../icons-v2-generated';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, SquareAvatar } from '../ui';
+import { HeaderButton } from './header-button';
+import { HeaderGlobalSearch } from './header-global-search';
+import { HeaderOrganizationFilter } from './header-organization-filter';
export interface AppHeaderProps {
- showSearch?: boolean
- onSearch?: (query: string) => void
- showOrganizations?: boolean
- organizations?: { id: string; name: string }[]
- selectedOrgId?: string
- onOrgChange?: (id: string) => void
- showNotifications?: boolean
- unreadCount?: number
+ showSearch?: boolean;
+ onSearch?: (query: string) => void;
+ showOrganizations?: boolean;
+ organizations?: { id: string; name: string }[];
+ selectedOrgId?: string;
+ onOrgChange?: (id: string) => void;
+ showNotifications?: boolean;
+ unreadCount?: number;
// User block
- showUser?: boolean
- userName?: string
- userEmail?: string
- userAvatarUrl?: string | null
- onProfile?: () => void
- onLogout?: () => void
- className?: string
+ showUser?: boolean;
+ userName?: string;
+ userEmail?: string;
+ userAvatarUrl?: string | null;
+ onProfile?: () => void;
+ onLogout?: () => void;
+ className?: string;
/** Whether the mobile menu is open */
- isMobileMenuOpen: boolean
+ isMobileMenuOpen: boolean;
/** Callback to toggle mobile menu */
- onToggleMobileMenu?: () => void
+ onToggleMobileMenu?: () => void;
}
export function AppHeader({
@@ -50,43 +50,46 @@ export function AppHeader({
onLogout,
className,
isMobileMenuOpen,
- onToggleMobileMenu
-}: AppHeaderProps) {
- const isMdUp = useMdUp() ?? false
-
+ onToggleMobileMenu,
+}: AppHeaderProps) {
+ const isMdUp = useMdUp() ?? false;
+
return (
{/* Mobile: Burger Menu Button */}
- {!isMdUp &&
-
@@ -136,15 +141,9 @@ export function AppHeader({
/>
@@ -189,7 +188,7 @@ export function AppHeader({
/>
)}
- )
+ );
}
-export default AppHeader
+export default AppHeader;
diff --git a/openframe-frontend-core/src/components/navigation/app-layout.tsx b/openframe-frontend-core/src/components/navigation/app-layout.tsx
index 717503843..f6e196d62 100644
--- a/openframe-frontend-core/src/components/navigation/app-layout.tsx
+++ b/openframe-frontend-core/src/components/navigation/app-layout.tsx
@@ -1,20 +1,20 @@
-'use client'
+'use client';
-import { Suspense, useCallback, useState } from 'react'
-import { NavigationSidebarConfig } from '../../types/navigation'
-import { cn } from '../../utils'
-import { AppHeader, AppHeaderProps } from './app-header'
-import { MobileBurgerMenu, MobileBurgerMenuProps } from './mobile-burger-menu'
-import { NavigationSidebar } from './navigation-sidebar'
+import { Suspense, useCallback, useState } from 'react';
+import { NavigationSidebarConfig } from '../../types/navigation';
+import { cn } from '../../utils';
+import { AppHeader, AppHeaderProps } from './app-header';
+import { MobileBurgerMenu, MobileBurgerMenuProps } from './mobile-burger-menu';
+import { NavigationSidebar } from './navigation-sidebar';
export interface AppLayoutProps {
- children: React.ReactNode
- sidebarConfig: NavigationSidebarConfig
- headerProps: Omit
-
}
+ {!isMdUp && (
+
+
+ )}
{/* Desktop: Global Search */}
{showSearch ? (
-
{userName && (
-
- {userName}
-
- )}
- {userEmail && (
-
- {userEmail}
-
+ {userName}
)}
+ {userEmail && {userEmail}
}
+
-
-
- {children}
-
+
+ {children}
- )
+ );
}
diff --git a/openframe-frontend-core/src/components/navigation/client-only-header.tsx b/openframe-frontend-core/src/components/navigation/client-only-header.tsx
index 83db8af8d..21c1699f9 100644
--- a/openframe-frontend-core/src/components/navigation/client-only-header.tsx
+++ b/openframe-frontend-core/src/components/navigation/client-only-header.tsx
@@ -1,6 +1,6 @@
-"use client";
+'use client';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
import { Header, HeaderConfig } from './header';
import { HeaderSkeleton } from './header-skeleton';
@@ -15,11 +15,11 @@ export function ClientOnlyHeader({ config, skeleton }: ClientOnlyHeaderProps) {
useEffect(() => {
setIsClient(true);
}, []);
-
+
if (!isClient) {
// Return custom skeleton or default skeleton while client-side JavaScript loads
return skeleton ||
-
{/* Left: Logo */}
@@ -29,7 +29,7 @@ export function HeaderSkeleton({ config }: HeaderSkeletonProps) {
)}
-
+
@@ -38,11 +38,13 @@ export function HeaderSkeleton({ config }: HeaderSkeletonProps) {
{/* Center: Navigation */}
{showNavigation && (
-
-
+
{isOpen && (
- {/* Left: Logo */}
-
+ >
+ )}
+
+
- )
-}
\ No newline at end of file
+ );
+}
diff --git a/openframe-frontend-core/src/components/navigation/index.ts b/openframe-frontend-core/src/components/navigation/index.ts
index f4295ffe0..c96d97e0f 100644
--- a/openframe-frontend-core/src/components/navigation/index.ts
+++ b/openframe-frontend-core/src/components/navigation/index.ts
@@ -1,47 +1,39 @@
-"use client"
-
-// Navigation component exports
-export { Header } from './header'
-export type { HeaderConfig, HeaderProps } from './header'
-
-export { ClientOnlyHeader } from './client-only-header'
-export type { ClientOnlyHeaderProps } from './client-only-header'
-
-export { HeaderSkeleton } from './header-skeleton'
-export type { HeaderSkeletonProps } from './header-skeleton'
-
-export { MobileNavPanel } from './mobile-nav-panel'
-export type { MobileNavPanelProps } from './mobile-nav-panel'
-
-export { SlidingSidebar } from './sliding-sidebar'
-export type { SlidingSidebarProps } from './sliding-sidebar'
-
-export { StickySectionNav, useSectionNavigation } from './sticky-section-nav'
-export type { StickyNavSection } from './sticky-section-nav'
-
-export { NavigationSidebar } from './navigation-sidebar'
-export type { NavigationSidebarProps } from './navigation-sidebar'
-
-export { AppHeader } from './app-header'
-export type { AppHeaderProps } from './app-header'
-
-export { AppLayout } from './app-layout'
-export type { AppLayoutProps } from './app-layout'
-
-export { MobileBurgerMenu } from './mobile-burger-menu'
-export type { MobileBurgerMenuProps } from './mobile-burger-menu'
-
-export { HeaderButton } from './header-button'
-export type { HeaderButtonProps } from './header-button'
-
-export { HeaderGlobalSearch } from './header-global-search'
-export type { HeaderGlobalSearchProps } from './header-global-search'
-
-export { HeaderOrganizationFilter } from './header-organization-filter'
-export type { HeaderOrganizationFilterOrganization, HeaderOrganizationFilterProps } from './header-organization-filter'
+'use client';
// Re-export types from navigation types
export type {
- MobileNavConfig, NavigationItem, NavigationSidebarConfig,
- NavigationSidebarItem, SlidingSidebarConfig, UnifiedSidebarUser
-} from '../../types/navigation'
+ MobileNavConfig,
+ NavigationItem,
+ NavigationSidebarConfig,
+ NavigationSidebarItem,
+ SlidingSidebarConfig,
+ UnifiedSidebarUser,
+} from '../../types/navigation';
+export type { AppHeaderProps } from './app-header';
+export { AppHeader } from './app-header';
+export type { AppLayoutProps } from './app-layout';
+export { AppLayout } from './app-layout';
+export type { ClientOnlyHeaderProps } from './client-only-header';
+export { ClientOnlyHeader } from './client-only-header';
+export type { HeaderConfig, HeaderProps } from './header';
+// Navigation component exports
+export { Header } from './header';
+export type { HeaderButtonProps } from './header-button';
+export { HeaderButton } from './header-button';
+export type { HeaderGlobalSearchProps } from './header-global-search';
+export { HeaderGlobalSearch } from './header-global-search';
+export type { HeaderOrganizationFilterOrganization, HeaderOrganizationFilterProps } from './header-organization-filter';
+export { HeaderOrganizationFilter } from './header-organization-filter';
+export type { HeaderSkeletonProps } from './header-skeleton';
+export { HeaderSkeleton } from './header-skeleton';
+export type { MobileBurgerMenuProps } from './mobile-burger-menu';
+
+export { MobileBurgerMenu } from './mobile-burger-menu';
+export type { MobileNavPanelProps } from './mobile-nav-panel';
+export { MobileNavPanel } from './mobile-nav-panel';
+export type { NavigationSidebarProps } from './navigation-sidebar';
+export { NavigationSidebar } from './navigation-sidebar';
+export type { SlidingSidebarProps } from './sliding-sidebar';
+export { SlidingSidebar } from './sliding-sidebar';
+export type { StickyNavSection } from './sticky-section-nav';
+export { StickySectionNav, useSectionNavigation } from './sticky-section-nav';
diff --git a/openframe-frontend-core/src/components/navigation/mobile-burger-menu.tsx b/openframe-frontend-core/src/components/navigation/mobile-burger-menu.tsx
index a5231803b..3c2229b0c 100644
--- a/openframe-frontend-core/src/components/navigation/mobile-burger-menu.tsx
+++ b/openframe-frontend-core/src/components/navigation/mobile-burger-menu.tsx
@@ -1,34 +1,34 @@
-"use client"
+'use client';
-import React, { useCallback, useEffect } from 'react'
-import { NavigationSidebarConfig, NavigationSidebarItem } from '../../types/navigation'
-import { cn } from '../../utils'
-import { Logout02Icon, PenEditIcon, UserSearchIcon } from '../icons-v2-generated'
-import { Button, SquareAvatar } from '../ui'
+import React, { useCallback, useEffect } from 'react';
+import { NavigationSidebarConfig, NavigationSidebarItem } from '../../types/navigation';
+import { cn } from '../../utils';
+import { Logout02Icon, PenEditIcon, UserSearchIcon } from '../icons-v2-generated';
+import { Button, SquareAvatar } from '../ui';
// Header height constant (h-12 = 48px)
-const HEADER_HEIGHT = 48
+const HEADER_HEIGHT = 48;
export interface MobileBurgerMenuProps {
/** Whether the menu is open */
- isOpen: boolean
+ isOpen: boolean;
/** Callback to close the menu */
- onClose: () => void
+ onClose: () => void;
/** Sidebar configuration */
- config: NavigationSidebarConfig
+ config: NavigationSidebarConfig;
/** User info for the header card */
user?: {
- userName?: string
- userEmail?: string
- userAvatarUrl?: string | null
- userRole?: string
- }
+ userName?: string;
+ userEmail?: string;
+ userAvatarUrl?: string | null;
+ userRole?: string;
+ };
/** Callback when search user button is clicked */
- onSearchUser?: () => void
+ onSearchUser?: () => void;
/** Callback when edit profile button is clicked */
- onEditProfile?: () => void
+ onEditProfile?: () => void;
/** Callback when logout button is clicked */
- onLogout?: () => void
+ onLogout?: () => void;
}
export function MobileBurgerMenu({
@@ -38,63 +38,66 @@ export function MobileBurgerMenu({
user,
onSearchUser,
onEditProfile,
- onLogout
+ onLogout,
}: MobileBurgerMenuProps) {
// Prevent body scroll when menu is open
useEffect(() => {
if (isOpen) {
- document.body.style.overflow = 'hidden'
+ document.body.style.overflow = 'hidden';
} else {
- document.body.style.overflow = 'unset'
+ document.body.style.overflow = 'unset';
}
return () => {
- document.body.style.overflow = 'unset'
- }
- }, [isOpen])
+ document.body.style.overflow = 'unset';
+ };
+ }, [isOpen]);
// Handle escape key
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === 'Escape' && isOpen) {
- onClose()
+ onClose();
}
- }
+ };
if (isOpen) {
- document.addEventListener('keydown', handleKeyDown)
- return () => document.removeEventListener('keydown', handleKeyDown)
+ document.addEventListener('keydown', handleKeyDown);
+ return () => document.removeEventListener('keydown', handleKeyDown);
}
- }, [isOpen, onClose])
+ }, [isOpen, onClose]);
- const handleItemClick = useCallback((item: NavigationSidebarItem) => {
- if (item.onClick) {
- item.onClick()
- } else if (item.path) {
- config.onNavigate?.(item.path)
- }
- onClose()
- }, [config, onClose])
+ const handleItemClick = useCallback(
+ (item: NavigationSidebarItem) => {
+ if (item.onClick) {
+ item.onClick();
+ } else if (item.path) {
+ config.onNavigate?.(item.path);
+ }
+ onClose();
+ },
+ [config, onClose],
+ );
// Separate primary and secondary items
- const primaryItems = config.items.filter(item => item.section !== 'secondary')
- const secondaryItems = config.items.filter(item => item.section === 'secondary')
+ const primaryItems = config.items.filter(item => item.section !== 'secondary');
+ const secondaryItems = config.items.filter(item => item.section === 'secondary');
const renderNavigationItem = (item: NavigationSidebarItem, isGridItem = false) => {
- const isActive = item.isActive ?? false
+ const isActive = item.isActive ?? false;
return (
- )
- }
+ );
+ };
// Render grid of navigation items (2 columns)
const renderNavigationGrid = (items: NavigationSidebarItem[]) => {
- const rows: NavigationSidebarItem[][] = []
+ const rows: NavigationSidebarItem[][] = [];
for (let i = 0; i < items.length; i += 2) {
- rows.push(items.slice(i, i + 2))
+ rows.push(items.slice(i, i + 2));
}
return (
{ dropdownRefs.current[item.id] = el }}
+ ref={el => {
+ dropdownRefs.current[item.id] = el;
+ }}
className={cn(
- "absolute top-full left-0 mt-1",
- item.dropdownClassName ? "" : "bg-ods-card border border-ods-border",
- "rounded-lg shadow-xl z-[9999]",
- item.id === 'community' ? "min-w-[240px]" : "min-w-[220px]",
- item.dropdownClassName || ''
+ 'absolute top-full left-0 mt-1',
+ item.dropdownClassName ? '' : 'bg-ods-card border border-ods-border',
+ 'rounded-lg shadow-xl z-[9999]',
+ item.id === 'community' ? 'min-w-[240px]' : 'min-w-[220px]',
+ item.dropdownClassName || '',
)}
>
- )
+ );
}
// Regular navigation item
@@ -207,19 +208,19 @@ export function Header({ config, platform }: HeaderProps) {
leftIcon={item.icon}
rightIcon={item.badge}
className={cn(
- "h-10 px-3 py-2",
+ 'h-10 px-3 py-2',
"font-['DM_Sans'] font-bold text-[16px] leading-none tracking-[-0.32px]",
- "hover:bg-ods-bg-hover focus:bg-ods-bg-hover",
- "whitespace-nowrap",
- "text-ods-text-primary", // All items use primary text color
+ 'hover:bg-ods-bg-hover focus:bg-ods-bg-hover',
+ 'whitespace-nowrap',
+ 'text-ods-text-primary', // All items use primary text color
item.isActive && 'bg-ods-bg-hover', // Active items get subtle gray background
- item.className
+ item.className,
)}
{...(item.isExternal && { isExternal: true })}
>
{item.label}
- )
+ );
}
// Button with onClick
@@ -231,94 +232,82 @@ export function Header({ config, platform }: HeaderProps) {
leftIcon={item.icon}
rightIcon={item.badge}
className={cn(
- "h-10 px-3 py-2",
+ 'h-10 px-3 py-2',
"font-['DM_Sans'] font-bold text-[16px] leading-none tracking-[-0.32px]",
- "hover:bg-ods-bg-hover focus:bg-ods-bg-hover",
- "whitespace-nowrap",
- "text-ods-text-primary", // All items use primary text color
+ 'hover:bg-ods-bg-hover focus:bg-ods-bg-hover',
+ 'whitespace-nowrap',
+ 'text-ods-text-primary', // All items use primary text color
item.isActive && 'bg-ods-bg-hover', // Active items get gray background
- item.className
+ item.className,
)}
>
{item.label}
- )
- }
-
-
+ );
+ };
+
return (
-
{item.children.map((child, index) => (
-
)}
- {config.actions?.left && (
-
+ {/* Left: Logo */}
+
- {config.actions.left}
-
- )}
-
-
- {config.logo.element}
-
-
+ {config.actions?.left &&
- {/* Right: Actions */}
- {config.actions.left}
}
- {/* Center: Navigation */}
- {config.navigation && config.navigation.items.length > 0 && (
-
- )}
+
+ {config.logo.element}
+
+
- {/* Desktop Actions */}
- {config.actions?.right && (
-
-
- {config.actions.right}
-
+ {/* Center: Navigation */}
+ {config.navigation && config.navigation.items.length > 0 && (
+
)}
- {/* Mobile Menu Toggle */}
- {config.mobile && config.mobile.enabled && (
-
{rows.map((row, rowIndex) => (
- )
- }
+ );
+ };
return (
<>
{/* Blur backdrop - positioned below header */}
- {row.map((item) => (
-
- {renderNavigationItem(item, true)}
-
+ {row.map(item => (
+ {renderNavigationItem(item, true)}
))}
{/* Fill empty space if odd number of items in last row */}
{row.length === 1 && }
))}
-
- {user.userName || 'User'}
-
+ {user.userName || 'User'}
{user.userRole && (
{user.userRole}
@@ -205,31 +204,19 @@ export function MobileBurgerMenu({
)}
{user.userEmail && (
-
- {user.userEmail}
-
+ {user.userEmail}
)}
{onSearchUser && (
-
{/* Footer */}
- {config.footer && (
-
- {config.footer}
-
- )}
+ {config.footer && {config.footer}
}
{item.element}
+ return {item.element}
;
}
const handleClick = () => {
if (item.onClick) {
- item.onClick()
+ item.onClick();
}
- config.onClose?.()
- }
+ config.onClose?.();
+ };
if (item.href) {
return (
@@ -66,13 +66,13 @@ export function MobileNavPanel({ isOpen, config }: MobileNavPanelProps) {
leftIcon={item.icon}
rightIcon={item.badge}
className={cn(
- "justify-start h-12 px-4 bg-transparent border-none text-ods-text-primary hover:bg-ods-bg-hover gap-3 rounded-md transition-colors",
- item.isActive ? "bg-ods-bg-hover" : ""
+ 'justify-start h-12 px-4 bg-transparent border-none text-ods-text-primary hover:bg-ods-bg-hover gap-3 rounded-md transition-colors',
+ item.isActive ? 'bg-ods-bg-hover' : '',
)}
>
{item.label}
- )
+ );
}
return (
@@ -83,41 +83,36 @@ export function MobileNavPanel({ isOpen, config }: MobileNavPanelProps) {
onClick={handleClick}
leftIcon={item.icon}
className={cn(
- "justify-start h-12 px-4 bg-transparent border-none text-ods-text-primary hover:bg-ods-bg-hover gap-3 rounded-md transition-colors",
- item.isActive ? "bg-ods-bg-hover" : ""
+ 'justify-start h-12 px-4 bg-transparent border-none text-ods-text-primary hover:bg-ods-bg-hover gap-3 rounded-md transition-colors',
+ item.isActive ? 'bg-ods-bg-hover' : '',
)}
>
{item.label}
- {item.badge !== undefined && (
- {item.badge}
- )}
+ {item.badge !== undefined && {item.badge}}
- )
- }
+ );
+ };
return (
<>
{/* Backdrop - closes nav when clicked outside */}
-
+
{/* Navigation Panel - modal style like the original working version */}
e.stopPropagation()} // Prevent closing when clicking inside nav
+ onClick={e => e.stopPropagation()} // Prevent closing when clicking inside nav
>
{/* Header with close button - fixed at top */}
))}
@@ -141,21 +136,15 @@ export function MobileNavPanel({ isOpen, config }: MobileNavPanelProps) {
{section.title}
)}
-
- {section.items.map(renderNavigationItem)}
-
+ {section.items.map(renderNavigationItem)}
- {config.footer}
-
- )}
+ {config.footer && {config.footer}
}
-
-
-
- {(inOverlay || !minimized) && (
-
-
+
+ {(inOverlay || !minimized) && (
+
+
- )}
- {/* Mobile close button */}
- {inOverlay && (
-
- )}
-
+
+ )}
- {/* Navigation items */}
-
- {/* Primary section */}
-
+ {/* Mobile close button */}
+ {inOverlay && (
+
+ )}
+
- {/* Secondary section */}
- {secondaryItems.length > 0 && (
-