+
-
-
{plugin.name}
-
by {plugin.author}
-
- {/* Capability Pills */}
-
- {Array.from(plugin.capabilities).map((cap) => {
- const formattedCap = formatCapabilityName(cap);
- const Icon = getCapabilityIcon(formattedCap);
- return (
-
-
- {formattedCap}
-
- );
- })}
-
-
-
- {plugin.description}
-
+
+ {/* Content Column - 2 columns */}
+
+
+ {/* App Info Container */}
+
+
{plugin.name}
+
by {plugin.author}
- {/* Stats */}
-
-
-
-
- {(plugin.rating_avg ?? 0).toFixed(1)} ({plugin.rating_count})
-
+ {/* Stats Section */}
+
+
+
+ {plugin.rating_avg?.toFixed(1)}
+
+
+ ★
+
+ ({plugin.rating_count} reviews)
+
+
+
+
+
+
+ {plugin.installs.toLocaleString()}
+
+ downloads
+
-
•
-
-
-
- {plugin.installs.toLocaleString()} installs
-
+
+ {/* Action Button */}
+
+
+ {/* Store Buttons */}
+
+
+
+
- {/* Action Button */}
-
-
+ {/* Product Banner */}
+
+
+ {/* About Section */}
+
+ About
+
+
+ {plugin.description}
+
+
+
+ {/* Additional Details Section */}
+
+ Additional Details
+
+
+
+
+ {formatDate(plugin.created_at)}
+
+
+
+
+
+
+
+ {Array.from(plugin.capabilities).map((cap) => (
+
+ {cap}
+
+ ))}
-
+
- {/* Related Apps Section */}
-
-
- More {categoryName} Apps
-
-
- {relatedApps.map((app, index) => (
-
- ))}
-
+ {/* Related Apps Section */}
+
+
+ More {categoryName} Apps
+
+
+ {relatedApps.map((app, index) => (
+ s.id === app.id)}
+ index={index + 1}
+ />
+ ))}
+
+
-
+
);
}
diff --git a/frontend/src/app/apps/category/[category]/page.tsx b/frontend/src/app/apps/category/[category]/page.tsx
index 954e4292a..fa7c4afdd 100644
--- a/frontend/src/app/apps/category/[category]/page.tsx
+++ b/frontend/src/app/apps/category/[category]/page.tsx
@@ -1,8 +1,20 @@
import envConfig from '@/src/constants/envConfig';
import { CompactPluginCard } from '../../components/plugin-card/compact';
-import { CategoryNav } from '../../components/category-nav';
+import { FeaturedPluginCard } from '../../components/plugin-card/featured';
+import { ScrollableCategoryNav } from '../../components/scrollable-category-nav';
+import { CategoryBreadcrumb } from '../../components/category-breadcrumb';
+import { CategoryHeader } from '../../components/category-header';
import type { Plugin, PluginStat } from '../../components/types';
-import { getCategoryDisplay } from '../../utils/category';
+import { Metadata } from 'next';
+import {
+ categoryMetadata,
+ getBaseMetadata,
+ generateProductSchema,
+ generateCollectionPageSchema,
+ generateBreadcrumbSchema,
+ generateAppListSchema,
+} from '../../utils/metadata';
+import { ProductBanner } from '@/src/app/components/product-banner';
interface CategoryPageProps {
params: {
@@ -10,15 +22,15 @@ interface CategoryPageProps {
};
}
-async function getPluginsData() {
+async function getCategoryData(category: string) {
const [pluginsResponse, statsResponse] = await Promise.all([
fetch(`${envConfig.API_URL}/v1/approved-apps?include_reviews=true`, {
- cache: 'no-store',
+ next: { revalidate: 3600 },
}),
fetch(
'https://raw.githubusercontent.com/BasedHardware/omi/refs/heads/main/community-plugin-stats.json',
{
- cache: 'no-store',
+ next: { revalidate: 3600 },
},
),
]);
@@ -26,86 +38,158 @@ async function getPluginsData() {
const plugins = (await pluginsResponse.json()) as Plugin[];
const stats = (await statsResponse.json()) as PluginStat[];
- return { plugins, stats };
+ const categoryPlugins =
+ category === 'integration'
+ ? plugins.filter(
+ (plugin) =>
+ Array.isArray(plugin.capabilities) &&
+ plugin.capabilities.includes('external_integration'),
+ )
+ : plugins.filter((plugin) => plugin.category === category);
+
+ return { categoryPlugins, stats };
+}
+
+export async function generateMetadata({ params }: CategoryPageProps): Promise
{
+ const { category } = params;
+ const { categoryPlugins } = await getCategoryData(category);
+ const metadata = categoryMetadata[category];
+
+ if (!metadata) {
+ return {
+ title: 'Category Not Found - OMI Apps',
+ description: 'The requested category could not be found.',
+ };
+ }
+
+ const title = `${metadata.title} - OMI Apps Marketplace`;
+ const description = `${metadata.description} Browse ${categoryPlugins.length}+ ${category} apps for your OMI Necklace.`;
+
+ const baseMetadata = getBaseMetadata(title, description);
+ const canonicalUrl = `https://omi.me/apps/category/${category}`;
+
+ return {
+ ...baseMetadata,
+ keywords: metadata.keywords.join(', '),
+ alternates: {
+ canonical: canonicalUrl,
+ },
+ robots: {
+ index: true,
+ follow: true,
+ googleBot: {
+ index: true,
+ follow: true,
+ },
+ },
+ verification: {
+ other: {
+ 'structured-data': JSON.stringify([
+ generateCollectionPageSchema(title, description, canonicalUrl),
+ generateProductSchema(),
+ generateBreadcrumbSchema(category),
+ generateAppListSchema(categoryPlugins),
+ ]),
+ },
+ },
+ };
+}
+
+// Helper for Fisher-Yates shuffle
+function shuffleArray(array: T[]): T[] {
+ const newArray = [...array];
+ for (let i = newArray.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
+ }
+ return newArray;
+}
+
+// Get new or recent apps
+function getNewOrRecentApps(apps: Plugin[]): Plugin[] {
+ // First try zero downloads
+ const zeroDownloads = apps.filter((plugin) => plugin.installs === 0);
+
+ if (zeroDownloads.length >= 4) {
+ // If we have enough zero download apps, shuffle and take 4
+ return shuffleArray(zeroDownloads).slice(0, 4);
+ } else {
+ // If not enough zero downloads, get the lowest download count apps
+ return shuffleArray([...apps].sort((a, b) => a.installs - b.installs).slice(0, 4));
+ }
}
export default async function CategoryPage({ params }: CategoryPageProps) {
- const { plugins, stats } = await getPluginsData();
-
- // Filter plugins for this category
- const categoryPlugins = plugins.filter((plugin) => plugin.category === params.category);
-
- // Sort plugins by different criteria
- const mostPopular = [...categoryPlugins]
- .sort((a, b) => b.installs - a.installs)
- .slice(0, 9);
-
- const highestRated = [...categoryPlugins]
- .sort((a, b) => (b.rating_avg || 0) - (a.rating_avg || 0))
- .slice(0, 9);
-
- // For now, use remaining plugins for "Most Recent" section
- const mostRecent = [...categoryPlugins]
- .filter((plugin) => !mostPopular.includes(plugin) && !highestRated.includes(plugin))
- .slice(0, 9);
-
- // Group remaining plugins by category for nav
- const groupedPlugins = plugins.reduce((acc, plugin) => {
- const category = plugin.category;
- if (!acc[category]) {
- acc[category] = [];
- }
- acc[category].push(plugin);
- return acc;
- }, {} as Record);
+ const { categoryPlugins, stats } = await getCategoryData(params.category);
+
+ // Get new/recent apps
+ const newOrRecentApps = getNewOrRecentApps(categoryPlugins);
+
+ // Get most popular apps (if we have enough)
+ const mostPopular =
+ categoryPlugins.length > 6
+ ? [...categoryPlugins].sort((a, b) => b.installs - a.installs).slice(0, 6)
+ : [];
+
+ // Get all apps sorted by installs
+ const allApps = [...categoryPlugins].sort((a, b) => b.installs - a.installs);
return (
-
+
{/* Fixed Header and Navigation */}
-
Omi App Store
-
- Discover our most popular AI-powered applications
-
+
+
+
+
-
-
({
- name,
- count: plugins.length,
- }))}
- />
+
{/* Main Content */}
-
-
+
+
- {/* Category Header */}
-
-
- {getCategoryDisplay(params.category)}
-
- ({categoryPlugins.length})
-
-
-
-
-
- {/* Most Popular Section */}
+
+ {/* New/Recent This Week Section */}
+
+
+ {newOrRecentApps.some((p) => p.installs === 0)
+ ? 'New This Week'
+ : 'Recently Added'}
+
+
+ {newOrRecentApps.map((plugin) => (
+ s.id === plugin.id)}
+ />
+ ))}
+
+
+
+ {/* Most Popular Section - Only show if we have enough apps */}
{mostPopular.length > 0 && (
Most Popular
-
+
{mostPopular.map((plugin, index) => (
)}
- {/* Highest Rated Section */}
- {highestRated.length > 0 && (
-
- Highest Rated
-
- {highestRated.map((plugin, index) => (
- s.id === plugin.id)}
- index={index + 1}
- />
- ))}
-
-
- )}
-
- {/* Most Recent Section */}
- {mostRecent.length > 0 && (
-
- Most Recent
-
- {mostRecent.map((plugin, index) => (
- s.id === plugin.id)}
- index={index + 1}
- />
- ))}
-
-
- )}
+ {/* All Apps Section */}
+
+ All Apps
+
+ {allApps.map((plugin, index) => (
+ s.id === plugin.id)}
+ index={index + 1}
+ />
+ ))}
+
+
diff --git a/frontend/src/app/apps/components/app-action-button/index.tsx b/frontend/src/app/apps/components/app-action-button/index.tsx
new file mode 100644
index 000000000..399aa9444
--- /dev/null
+++ b/frontend/src/app/apps/components/app-action-button/index.tsx
@@ -0,0 +1,26 @@
+/* eslint-disable prettier/prettier */
+import { ArrowRight } from 'lucide-react';
+import { Button } from '@/src/components/ui/button';
+import Link from 'next/link';
+
+interface AppActionButtonProps {
+ link: string;
+ className?: string;
+}
+
+export function AppActionButton({ link, className = '' }: AppActionButtonProps) {
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/app/apps/components/app-header/index.tsx b/frontend/src/app/apps/components/app-header/index.tsx
new file mode 100644
index 000000000..9c84c2d2b
--- /dev/null
+++ b/frontend/src/app/apps/components/app-header/index.tsx
@@ -0,0 +1,103 @@
+/* eslint-disable prettier/prettier */
+import { Brain, Cpu, Bell, Plug2, MessageSquare, Info } from 'lucide-react';
+import { cn } from '@/src/lib/utils';
+import type { Plugin } from '../types';
+
+interface AppHeaderProps {
+ plugin: Plugin;
+}
+
+const getCapabilityColor = (capability: string): string => {
+ const colors: Record
= {
+ 'ai-powered': 'bg-indigo-500/15 text-indigo-300',
+ memories: 'bg-rose-500/15 text-rose-300',
+ notification: 'bg-emerald-500/15 text-emerald-300',
+ integration: 'bg-sky-500/15 text-sky-300',
+ chat: 'bg-violet-500/15 text-violet-300',
+ };
+ return colors[capability.toLowerCase()] ?? 'bg-gray-700/20 text-gray-300';
+};
+
+const formatCapabilityName = (capability: string): string => {
+ const nameMap: Record = {
+ memories: 'memories',
+ external_integration: 'integration',
+ proactive_notification: 'notification',
+ chat: 'chat',
+ };
+ return nameMap[capability.toLowerCase()] ?? capability;
+};
+
+const getCapabilityIcon = (capability: string) => {
+ const icons: Record = {
+ 'ai-powered': Brain,
+ memories: Cpu,
+ notification: Bell,
+ integration: Plug2,
+ chat: MessageSquare,
+ };
+ return icons[capability.toLowerCase()] ?? Info;
+};
+
+export function AppHeader({ plugin }: AppHeaderProps) {
+ return (
+
+
+
+
+
+
+
+
{plugin.name}
+
by {plugin.author}
+
+ {/* Capability Pills */}
+
+ {Array.from(plugin.capabilities).map((cap) => {
+ const formattedCap = formatCapabilityName(cap);
+ const Icon = getCapabilityIcon(formattedCap);
+ return (
+
+
+ {formattedCap}
+
+ );
+ })}
+
+
+ {/* Store Buttons */}
+
+
+
+
{/* Fixed Header and Navigation */}
-
+
Omi App Store
@@ -74,22 +106,17 @@ export default async function AppList() {
- ({
- name,
- count: plugins.length,
- }))}
- />
+
{/* Main Content */}
-
+
-
+
{/* New This Week Section */}
@@ -123,11 +150,39 @@ export default async function AppList() {
+ {/* Integration Apps Section */}
+ {integrationApps.length > 0 && (
+
+
+
Integration Apps
+ {totalIntegrationApps > 9 && (
+
+ See all
+
+
+ )}
+
+ {integrationApps.map((plugin, index) => (
+ s.id === plugin.id)}
+ index={index + 1}
+ />
+ ))}
+
+
+ )}
+
{/* Category Sections */}
{Object.entries(sortedCategories).map(([category, plugins]) => (
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/app/apps/components/category-breadcrumb/index.tsx b/frontend/src/app/apps/components/category-breadcrumb/index.tsx
new file mode 100644
index 000000000..643910c1c
--- /dev/null
+++ b/frontend/src/app/apps/components/category-breadcrumb/index.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable prettier/prettier */
+'use client';
+
+import Link from 'next/link';
+import { ChevronRight } from 'lucide-react';
+import { getCategoryIcon, getCategoryMetadata } from '../../utils/category';
+
+interface CategoryBreadcrumbProps {
+ category: string;
+}
+
+export function CategoryBreadcrumb({ category }: CategoryBreadcrumbProps) {
+ const metadata = getCategoryMetadata(category);
+ const Icon = getCategoryIcon(category);
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/app/apps/components/category-header/index.tsx b/frontend/src/app/apps/components/category-header/index.tsx
index 4e7334e24..516a6624b 100644
--- a/frontend/src/app/apps/components/category-header/index.tsx
+++ b/frontend/src/app/apps/components/category-header/index.tsx
@@ -1,17 +1,32 @@
'use client';
-import { getCategoryDisplay } from '../../utils/category';
+import { getCategoryMetadata } from '../../utils/category';
interface CategoryHeaderProps {
category: string;
- pluginCount: number;
+ totalApps: number;
}
-export function CategoryHeader({ category, pluginCount }: CategoryHeaderProps) {
+export function CategoryHeader({ category, totalApps }: CategoryHeaderProps) {
+ const metadata = getCategoryMetadata(category);
+ const Icon = metadata.icon;
+
return (
-
- {getCategoryDisplay(category)}
- ({pluginCount})
-
+
+
+
+
+
+
+
+ {metadata.displayName}
+
+ ({totalApps})
+
+
+
{metadata.description}
+
+
+
- {/* Title */}
-
{plugin.name}
+ {/* Title and NEW badge */}
+
+
{plugin.name}
+
+
{/* Author and Stats Row */}
diff --git a/frontend/src/app/apps/components/plugin-card/featured.tsx b/frontend/src/app/apps/components/plugin-card/featured.tsx
index 9f5b18b2e..368dfb033 100644
--- a/frontend/src/app/apps/components/plugin-card/featured.tsx
+++ b/frontend/src/app/apps/components/plugin-card/featured.tsx
@@ -3,6 +3,7 @@
import { Star, Download } from 'lucide-react';
import Link from 'next/link';
import type { Plugin, PluginStat } from '../types';
+import { NewBadge } from '../new-badge';
export interface FeaturedPluginCardProps {
plugin: Plugin;
@@ -33,10 +34,13 @@ export function FeaturedPluginCard({ plugin, hideStats }: FeaturedPluginCardProp
{/* Content */}
- {/* Title */}
-
- {plugin.name}
-
+ {/* Title and NEW badge */}
+
+
+ {plugin.name}
+
+
+
{/* Author Row */}
diff --git a/frontend/src/app/apps/components/scrollable-category-nav/index.tsx b/frontend/src/app/apps/components/scrollable-category-nav/index.tsx
new file mode 100644
index 000000000..1f508d803
--- /dev/null
+++ b/frontend/src/app/apps/components/scrollable-category-nav/index.tsx
@@ -0,0 +1,91 @@
+/* eslint-disable prettier/prettier */
+'use client';
+
+import Link from 'next/link';
+import { useRef, useEffect } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { categoryMetadata, type CategoryMetadata } from '../../utils/category';
+
+interface ScrollableCategoryNavProps {
+ currentCategory: string;
+}
+
+export function ScrollableCategoryNav({ currentCategory }: ScrollableCategoryNavProps) {
+ const scrollContainerRef = useRef
(null);
+ const categories = Object.values(categoryMetadata);
+
+ // Scroll to active category on mount
+ useEffect(() => {
+ const container = scrollContainerRef.current;
+ const activeItem = container?.querySelector('[data-active="true"]');
+
+ if (container && activeItem) {
+ const containerWidth = container.offsetWidth;
+ const itemLeft = (activeItem as HTMLElement).offsetLeft;
+ const itemWidth = (activeItem as HTMLElement).offsetWidth;
+
+ // Center the active item
+ container.scrollLeft = itemLeft - containerWidth / 2 + itemWidth / 2;
+ }
+ }, [currentCategory]);
+
+ const scroll = (direction: 'left' | 'right') => {
+ const container = scrollContainerRef.current;
+ if (!container) return;
+
+ const scrollAmount = container.offsetWidth * 0.8;
+ const targetScroll = container.scrollLeft + (direction === 'left' ? -scrollAmount : scrollAmount);
+
+ container.scrollTo({
+ left: targetScroll,
+ behavior: 'smooth'
+ });
+ };
+
+ return (
+
+ {/* Left scroll button */}
+
+
+ {/* Scrollable container */}
+
+ {categories.map((category) => (
+
+
+
+ {category.displayName}
+
+
+ ))}
+
+
+ {/* Right scroll button */}
+
+
+
+
+
+
+
+
+
+
+ Experience {appName} with {PRODUCT_INFO.name}
+
+
+ AI-Powered Voice Assistant - {PRODUCT_INFO.shipping}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {PRODUCT_INFO.name}
+
+
{PRODUCT_INFO.price}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Enhance your {category} experience
+
+
+ {PRODUCT_INFO.name} - {PRODUCT_INFO.price}
+
+
+
+
+ Order Now
+
+
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+ {renderContent()}
+
+ );
+}
diff --git a/frontend/src/app/components/product-banner/types.ts b/frontend/src/app/components/product-banner/types.ts
new file mode 100644
index 000000000..41580d868
--- /dev/null
+++ b/frontend/src/app/components/product-banner/types.ts
@@ -0,0 +1,30 @@
+export interface ProductBannerBase {
+ className?: string;
+ onClick?: () => void;
+ productUrl?: string;
+}
+
+export interface DetailBannerProps extends ProductBannerBase {
+ appName: string;
+ appCategory: string;
+}
+
+export interface FloatingBannerProps extends ProductBannerBase {
+ showShipping?: boolean;
+}
+
+export interface CategoryBannerProps extends ProductBannerBase {
+ category: string;
+ appsCount: number;
+}
+
+export const PRODUCT_INFO = {
+ name: 'OMI Necklace',
+ price: '$69.99',
+ url: 'https://www.omi.me/products/friend-dev-kit-2',
+ shipping: 'Ships Worldwide',
+ images: {
+ primary: '/omi_1.webp',
+ secondary: '/omi_2.webp',
+ },
+} as const;
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index c7ff68f92..f021f0bcb 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1,44 +1,14 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-/*
-:root {
- --foreground-rgb: 0, 0, 0;
- --background-start-rgb: 214, 219, 220;
- --background-end-rgb: 255, 255, 255;
-} */
-
-/* @media (prefers-color-scheme: dark) {
- :root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
- }
-}
@layer utilities {
- .text-balance {
- text-wrap: balance;
+ .no-scrollbar::-webkit-scrollbar {
+ display: none;
}
-} */
-
-input[type='search']::-webkit-search-cancel-button {
- -webkit-appearance: none;
- appearance: none;
-}
-
-::selection {
- background-color: #ffffff;
- /* Color de fondo de la selección */
- color: #000000;
- /* Color del texto seleccionado */
-}
-body {
- background: #181818;
- color: rgba(var(--foreground-rgb), 1);
-}
-@layer base {
- :root {
- --radius: 0.5rem;
+
+ .no-scrollbar {
+ -ms-overflow-style: none;
+ scrollbar-width: none;
}
}
diff --git a/frontend/src/components/shared/footer.tsx b/frontend/src/components/shared/footer.tsx
index e4cf843ae..b99648746 100644
--- a/frontend/src/components/shared/footer.tsx
+++ b/frontend/src/components/shared/footer.tsx
@@ -3,7 +3,7 @@ import Image from 'next/image';
export default function Footer() {
return (
-