vibepulse 0.2.0 → 0.2.1

package/.next/standalone/src/components/opencode-config/GeneralSettingsForm.tsx

@@ -0,0 +1,288 @@
+'use client';
+
+import * as React from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useForm, Controller } from 'react-hook-form';
+import { Settings as SettingsIcon, Save, Loader2, Check, AlertCircle } from 'lucide-react';
+import type { OpenEditorTargetMode } from '@/types/opencodeConfig';
+
+interface GeneralSettingsFormData {
+  stickyBusyDelaySeconds: number;
+  sessionsRefreshIntervalSeconds: number;
+  openEditorTargetMode: OpenEditorTargetMode;
+}
+
+interface VibepulseConfig {
+  stickyBusyDelayMs?: number;
+  sessionsRefreshIntervalMs?: number;
+  openEditorTargetMode?: OpenEditorTargetMode;
+}
+
+interface ConfigResponse {
+  vibepulse?: VibepulseConfig;
+  [key: string]: unknown;
+}
+
+export function GeneralSettingsForm() {
+  const queryClient = useQueryClient();
+  const [toast, setToast] = React.useState<{
+    type: 'success' | 'error';
+    message: string;
+  } | null>(null);
+
+  const { data: config, isLoading } = useQuery<ConfigResponse>({
+    queryKey: ['opencode-config'],
+    queryFn: async () => {
+      const res = await fetch('/api/opencode-config');
+      if (!res.ok) throw new Error('Failed to fetch config');
+      return res.json();
+    }
+  });
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isDirty, isSubmitting }
+  } = useForm<GeneralSettingsFormData>({
+    defaultValues: {
+      stickyBusyDelaySeconds: 1,
+      sessionsRefreshIntervalSeconds: 5,
+      openEditorTargetMode: 'remote'
+    }
+  });
+
+  React.useEffect(() => {
+    if (config) {
+      reset({
+        stickyBusyDelaySeconds: typeof config.vibepulse?.stickyBusyDelayMs === 'number'
+          ? Math.round(config.vibepulse.stickyBusyDelayMs / 1000)
+          : 1,
+        sessionsRefreshIntervalSeconds: typeof config.vibepulse?.sessionsRefreshIntervalMs === 'number'
+          ? Math.round(config.vibepulse.sessionsRefreshIntervalMs / 1000)
+          : 5,
+        openEditorTargetMode: config.vibepulse?.openEditorTargetMode === 'hub' ? 'hub' : 'remote'
+      });
+    }
+  }, [config, reset]);
+
+  React.useEffect(() => {
+    if (toast) {
+      const timer = setTimeout(() => setToast(null), 3000);
+      return () => clearTimeout(timer);
+    }
+  }, [toast]);
+
+  const mutation = useMutation({
+    mutationFn: async (data: GeneralSettingsFormData) => {
+      const res = await fetch('/api/opencode-config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          vibepulse: {
+            stickyBusyDelayMs: data.stickyBusyDelaySeconds * 1000,
+            sessionsRefreshIntervalMs: data.sessionsRefreshIntervalSeconds * 1000,
+            openEditorTargetMode: data.openEditorTargetMode
+          }
+        })
+      });
+      if (!res.ok) {
+        const error = await res.json();
+        throw new Error(error.error || 'Failed to save settings');
+      }
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['opencode-config'] });
+      setToast({ type: 'success', message: 'Settings saved successfully' });
+    },
+    onError: (error: Error) => {
+      setToast({ type: 'error', message: error.message });
+    }
+  });
+
+  const onSubmit = (data: GeneralSettingsFormData) => {
+    mutation.mutate(data);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex h-40 items-center justify-center">
+        <Loader2 className="h-6 w-6 animate-spin text-zinc-400" />
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+      <div className="rounded-xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
+        <div className="mb-6 flex items-center gap-3 border-b border-zinc-100 pb-4 dark:border-zinc-800">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
+            <SettingsIcon className="h-4 w-4" />
+          </div>
+          <h3 className="text-lg font-medium text-zinc-900 dark:text-zinc-100">
+            Application Settings
+          </h3>
+        </div>
+
+        {toast && (
+          <div
+            role="alert"
+            className={`mb-6 flex items-center gap-2 rounded-lg px-4 py-3 text-sm ${
+              toast.type === 'success'
+                ? 'bg-emerald-50 text-emerald-800 dark:bg-emerald-900/20 dark:text-emerald-300'
+                : 'bg-red-50 text-red-800 dark:bg-red-900/20 dark:text-red-300'
+            }`}
+          >
+            {toast.type === 'success' ? (
+              <Check className="h-4 w-4 shrink-0" aria-hidden="true" />
+            ) : (
+              <AlertCircle className="h-4 w-4 shrink-0" aria-hidden="true" />
+            )}
+            <span>{toast.message}</span>
+          </div>
+        )}
+
+        <div className="space-y-8">
+          <div className="space-y-3">
+            <label htmlFor="open-editor-target-mode" className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+              Remote Open Target
+            </label>
+            <Controller
+              name="openEditorTargetMode"
+              control={control}
+              render={({ field }) => (
+                <select
+                  id="open-editor-target-mode"
+                  value={field.value}
+                  onChange={field.onChange}
+                  className="w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100"
+                  aria-label="Remote open target"
+                >
+                  <option value="remote">Remote node</option>
+                  <option value="hub">Hub browser machine</option>
+                </select>
+              )}
+            />
+            <p className="text-xs text-zinc-500 dark:text-zinc-400">
+              Choose whether remote session open actions execute on the remote node itself or use the current hub/browser machine editor flow. Default is remote node.
+            </p>
+          </div>
+
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <label htmlFor="sticky-busy-slider" className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                Sticky Busy Delay
+              </label>
+              <Controller
+                name="stickyBusyDelaySeconds"
+                control={control}
+                render={({ field }) => (
+                  <span className="rounded-md bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
+                    {field.value}s
+                  </span>
+                )}
+              />
+            </div>
+            <Controller
+              name="stickyBusyDelaySeconds"
+              control={control}
+              render={({ field }) => (
+                <div className="flex items-center gap-3">
+                  <input
+                    id="sticky-busy-slider"
+                    type="range"
+                    min={0}
+                    max={60}
+                    step={1}
+                    value={field.value}
+                    onChange={(e) => field.onChange(parseInt(e.target.value, 10))}
+                    className="flex-1 h-2 cursor-pointer appearance-none rounded-lg bg-zinc-200 accent-blue-600 dark:bg-zinc-700"
+                    aria-label="Sticky busy delay slider"
+                  />
+                  <input
+                    type="number"
+                    min={0}
+                    max={300}
+                    step={1}
+                    value={field.value}
+                    onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 0)}
+                    className="w-20 rounded-lg border border-zinc-200 bg-white px-2 py-1 text-center text-sm dark:border-zinc-800 dark:bg-zinc-950"
+                    aria-label="Sticky busy delay value"
+                  />
+                </div>
+              )}
+            />
+            <p className="text-xs text-zinc-500 dark:text-zinc-400">
+              The duration to keep a session marked as &quot;busy&quot; after activity stops. This prevents the UI from flickering when agents pause briefly. Default is 1 second.
+            </p>
+          </div>
+
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <label htmlFor="refresh-interval-slider" className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+                Sessions Refresh Interval
+              </label>
+              <Controller
+                name="sessionsRefreshIntervalSeconds"
+                control={control}
+                render={({ field }) => (
+                  <span className="rounded-md bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
+                    {field.value}s
+                  </span>
+                )}
+              />
+            </div>
+            <Controller
+              name="sessionsRefreshIntervalSeconds"
+              control={control}
+              render={({ field }) => (
+                <div className="flex items-center gap-3">
+                  <input
+                    id="refresh-interval-slider"
+                    type="range"
+                    min={1}
+                    max={30}
+                    step={1}
+                    value={field.value}
+                    onChange={(e) => field.onChange(parseInt(e.target.value, 10))}
+                    className="flex-1 h-2 cursor-pointer appearance-none rounded-lg bg-zinc-200 accent-blue-600 dark:bg-zinc-700"
+                    aria-label="Sessions refresh interval slider"
+                  />
+                  <input
+                    type="number"
+                    min={1}
+                    max={300}
+                    step={1}
+                    value={field.value}
+                    onChange={(e) => field.onChange(parseInt(e.target.value, 10) || 1)}
+                    className="w-20 rounded-lg border border-zinc-200 bg-white px-2 py-1 text-center text-sm dark:border-zinc-800 dark:bg-zinc-950"
+                    aria-label="Sessions refresh interval value"
+                  />
+                </div>
+              )}
+            />
+            <p className="text-xs text-zinc-500 dark:text-zinc-400">
+              How often the board polls the server for session updates. Lower values provide more real-time feedback but increase server load. Default is 5 seconds.
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-8 flex justify-end border-t border-zinc-100 pt-6 dark:border-zinc-800">
+          <button
+            type="submit"
+            disabled={!isDirty || isSubmitting || mutation.isPending}
+            className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:hover:bg-blue-500 dark:focus:ring-offset-zinc-900"
+          >
+            {(isSubmitting || mutation.isPending) ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Save className="h-4 w-4" />
+            )}
+            Save Settings
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+}

package/.next/standalone/src/components/opencode-config/categories/CategoriesList.tsx

@@ -0,0 +1,382 @@
+'use client';
+
+import * as React from 'react';
+import { Pencil, Trash2, Layers, AlertTriangle, AlertCircle } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { CategoryConfig } from '../../../types/opencodeConfig';
+
+
+interface ModelsResponse {
+  models: string[];
+  source: string;
+  error?: string;
+}
+
+function isModelsResponse(value: unknown): value is ModelsResponse {
+  if (!value || typeof value !== 'object') return false;
+  const candidate = value as { models?: unknown };
+  return Array.isArray(candidate.models);
+}
+
+interface CategoriesListProps {
+  /** Record of category key to category configuration */
+  categories: Record<string, CategoryConfig>;
+  /** Callback when edit button is clicked */
+  onEdit: (categoryKey: string, config: CategoryConfig) => void;
+  /** Callback when delete button is clicked (only for custom categories) */
+  onDelete: (categoryKey: string) => void;
+}
+
+interface CategoryDefinition {
+  key: string;
+  name: string;
+  description: string;
+}
+
+const CATEGORY_FALLBACK_CHAINS: Record<string, string[]> = {
+  'visual-engineering': ['google/gemini-3.1-pro', 'glm-5', 'anthropic/claude-opus-4-6'],
+  ultrabrain: ['openai/gpt-5.3-codex', 'google/gemini-3.1-pro', 'anthropic/claude-opus-4-6'],
+  deep: ['openai/gpt-5.3-codex', 'anthropic/claude-opus-4-6', 'google/gemini-3.1-pro'],
+  artistry: ['google/gemini-3.1-pro', 'anthropic/claude-opus-4-6', 'openai/gpt-5.4'],
+  quick: ['anthropic/claude-haiku-4-5', 'google/gemini-3-flash', 'opencode/gpt-5-nano'],
+  'unspecified-low': ['anthropic/claude-sonnet-4-6', 'openai/gpt-5.3-codex', 'google/gemini-3-flash'],
+  'unspecified-high': ['openai/gpt-5.4', 'anthropic/claude-opus-4-6', 'glm-5', 'kimi-for-coding/k2p5'],
+  writing: ['google/gemini-3-flash', 'anthropic/claude-sonnet-4-6'],
+};
+
+const BUILT_IN_CATEGORIES: CategoryDefinition[] = [
+  {
+    key: 'visual-engineering',
+    name: 'Visual Engineering',
+    description: 'Visual and UI component engineering tasks',
+  },
+  {
+    key: 'ultrabrain',
+    name: 'Ultrabrain',
+    description: 'Complex reasoning and deep analysis tasks',
+  },
+  {
+    key: 'deep',
+    name: 'Deep',
+    description: 'Deep research and comprehensive tasks',
+  },
+  {
+    key: 'artistry',
+    name: 'Artistry',
+    description: 'Creative and design-focused tasks',
+  },
+  {
+    key: 'quick',
+    name: 'Quick',
+    description: 'Fast, simple tasks requiring minimal processing',
+  },
+  {
+    key: 'unspecified-low',
+    name: 'Unspecified Low',
+    description: 'Default low-complexity tasks',
+  },
+  {
+    key: 'unspecified-high',
+    name: 'Unspecified High',
+    description: 'Default high-complexity tasks',
+  },
+  {
+    key: 'writing',
+    name: 'Writing',
+    description: 'Content creation and writing tasks',
+  },
+];
+
+/** Check if a category key is a built-in category */
+function isBuiltInCategory(key: string): boolean {
+  return BUILT_IN_CATEGORIES.some((cat) => cat.key === key);
+}
+
+/** Get display info for a category */
+function getCategoryInfo(key: string): CategoryDefinition {
+  const builtIn = BUILT_IN_CATEGORIES.find((cat) => cat.key === key);
+  if (builtIn) {
+    return builtIn;
+  }
+  // For custom categories, use the key as the name
+  return {
+    key,
+    name: key,
+    description: 'Custom category',
+  };
+}
+
+/** Format variant display */
+function formatVariant(variant?: string): string {
+  if (!variant) return '—';
+  return variant;
+}
+
+function formatProvider(model?: string): string {
+  if (!model) return 'Default provider';
+
+  const slashIndex = model.indexOf('/');
+  if (slashIndex === -1) return 'Unknown provider';
+
+  return model.substring(0, slashIndex);
+}
+
+/** Format model display */
+function formatModel(model?: string): string {
+  if (!model) return 'Default model';
+  // Extract just the model name from a full path like "google/gemini-3.1-pro"
+  const parts = model.split('/');
+  return parts[parts.length - 1];
+}
+
+interface CategoryCardProps {
+  categoryKey: string;
+  config: CategoryConfig;
+  isBuiltIn: boolean;
+  availableModels: Set<string> | null;
+  onEdit: (key: string, config: CategoryConfig) => void;
+  onDelete: (key: string) => void;
+}
+
+function CategoryCard({
+  categoryKey,
+  config,
+  isBuiltIn,
+  availableModels,
+  onEdit,
+  onDelete,
+}: CategoryCardProps) {
+  const info = getCategoryInfo(categoryKey);
+  const hasConfig = !!(config.model || config.variant);
+  const isModelInvalid = config.model && availableModels && availableModels.size > 0 && !availableModels.has(config.model);
+  
+  // Dynamic border/bg classes based on status
+  let cardStateClasses = hasConfig
+    ? 'bg-white border-zinc-200 dark:bg-zinc-900 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600'
+    : 'bg-zinc-50/50 border-zinc-200/50 dark:bg-zinc-900/50 dark:border-zinc-800/50 hover:border-zinc-300 dark:hover:border-zinc-600';
+    
+  if (isModelInvalid) {
+    cardStateClasses = 'bg-amber-50/50 border-amber-200 dark:bg-amber-900/10 dark:border-amber-800/50 hover:border-amber-300 dark:hover:border-amber-700';
+  }
+
+  return (
+    <div
+      className={`
+        group relative flex items-center justify-between p-4 rounded-lg border flex-col sm:flex-row items-start sm:items-center gap-4
+        transition-all duration-200
+        ${cardStateClasses}
+      `}
+    >
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <h4 className="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate">
+            {info.name}
+          </h4>
+          {!isBuiltIn && (
+            <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
+              Custom
+            </span>
+          )}
+          {isModelInvalid && (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
+              <AlertTriangle className="h-3 w-3" />
+              Model Unavailable
+            </span>
+          )}
+          {!isModelInvalid && hasConfig && (
+            <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300">
+              Configured
+            </span>
+          )}
+          {!hasConfig && (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400">
+              <AlertCircle className="h-3 w-3" />
+              Built-in fallback
+            </span>
+          )}
+        </div>
+        <p className="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400 truncate">
+          {info.description}
+        </p>
+        <div className="mt-2 flex items-center gap-3 text-xs">
+          <span className="text-zinc-600 dark:text-zinc-400">
+            <span className="text-zinc-400 dark:text-zinc-500">Provider:</span>{' '}
+            {formatProvider(config.model)}
+          </span>
+          <span className="text-zinc-600 dark:text-zinc-400">
+            <span className="text-zinc-400 dark:text-zinc-500">Model:</span>{' '}
+            {formatModel(config.model)}
+          </span>
+          {config.variant && (
+            <span className="text-zinc-600 dark:text-zinc-400">
+              <span className="text-zinc-400 dark:text-zinc-500">Variant:</span>{' '}
+              {formatVariant(config.variant)}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center gap-1 ml-4 opacity-0 group-hover:opacity-100 transition-opacity">
+        <button
+          type="button"
+          onClick={() => onEdit(categoryKey, config)}
+          className="p-1.5 rounded-md text-zinc-500 hover:text-zinc-900 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:text-zinc-100 dark:hover:bg-zinc-800 transition-colors"
+          aria-label={`Edit ${info.name} category`}
+          title={`Edit ${info.name}`}
+        >
+          <Pencil className="h-4 w-4" />
+        </button>
+        {!isBuiltIn && (
+          <button
+            type="button"
+            onClick={() => onDelete(categoryKey)}
+            className="p-1.5 rounded-md text-zinc-500 hover:text-red-600 hover:bg-red-50 dark:text-zinc-400 dark:hover:text-red-400 dark:hover:bg-red-900/20 transition-colors"
+            aria-label={`Delete ${info.name} category`}
+            title={`Delete ${info.name}`}
+          >
+            <Trash2 className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function CategoriesList({
+  categories,
+  onEdit,
+  onDelete,
+}: CategoriesListProps) {
+  const { data: modelsData } = useQuery<ModelsResponse>({
+    queryKey: ['opencode-models'],
+    queryFn: async () => {
+      const res = await fetch('/api/opencode-models');
+      let parsed: unknown = null;
+      try {
+        parsed = await res.json();
+      } catch {
+        parsed = null;
+      }
+
+      const errorMessage =
+        parsed &&
+        typeof parsed === 'object' &&
+        'error' in parsed &&
+        typeof parsed.error === 'string'
+          ? parsed.error
+          : null;
+
+      if (!res.ok || errorMessage) {
+        throw new Error(errorMessage || `Failed to fetch models (${res.status})`);
+      }
+
+      if (!isModelsResponse(parsed)) {
+        throw new Error('Invalid models response');
+      }
+
+      const data = parsed;
+      return data;
+    },
+    retry: false,
+  });
+
+  const availableModels = React.useMemo(
+    () => (modelsData ? new Set(modelsData.models) : null),
+    [modelsData]
+  );
+
+  // Separate built-in and custom categories
+  const { builtIn, custom } = React.useMemo(() => {
+    const builtIn: { key: string; config: CategoryConfig }[] = [];
+    const custom: { key: string; config: CategoryConfig }[] = [];
+
+    // First, add all built-in categories (even if not in config)
+    BUILT_IN_CATEGORIES.forEach((cat) => {
+      builtIn.push({
+        key: cat.key,
+        config: categories[cat.key] || {},
+      });
+    });
+
+    // Then add custom categories
+    Object.entries(categories).forEach(([key, config]) => {
+      if (!isBuiltInCategory(key)) {
+        custom.push({ key, config });
+      }
+    });
+
+    return { builtIn, custom };
+  }, [categories]);
+
+  const hasCustomCategories = custom.length > 0;
+
+  return (
+    <div className="space-y-6">
+      {/* Built-in Categories */}
+      <section>
+        <div className="flex items-center gap-2 mb-3">
+          <Layers className="h-4 w-4 text-zinc-500 dark:text-zinc-400" />
+          <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+            Built-in Categories
+          </h3>
+          <span className="text-xs text-zinc-500 dark:text-zinc-400">
+            ({builtIn.length})
+          </span>
+        </div>
+        <div className="space-y-2">
+          {builtIn.map(({ key, config }) => (
+            <CategoryCard
+              key={key}
+              categoryKey={key}
+              config={config}
+              isBuiltIn={true}
+              availableModels={availableModels}
+              onEdit={onEdit}
+              onDelete={onDelete}
+            />
+          ))}
+        </div>
+      </section>
+
+      {/* Custom Categories */}
+      {hasCustomCategories && (
+        <section>
+          <div className="flex items-center gap-2 mb-3">
+            <Layers className="h-4 w-4 text-blue-500" />
+            <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+              Custom Categories
+            </h3>
+            <span className="text-xs text-zinc-500 dark:text-zinc-400">
+              ({custom.length})
+            </span>
+          </div>
+          <div className="space-y-2">
+            {custom.map(({ key, config }) => (
+              <CategoryCard
+                key={key}
+                categoryKey={key}
+                config={config}
+                isBuiltIn={false}
+                availableModels={availableModels}
+                onEdit={onEdit}
+                onDelete={onDelete}
+              />
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Empty state when no categories at all */}
+      {builtIn.length === 0 && !hasCustomCategories && (
+        <div className="text-center py-8">
+          <Layers className="h-8 w-8 mx-auto text-zinc-300 dark:text-zinc-600 mb-2" />
+          <p className="text-sm text-zinc-500 dark:text-zinc-400">
+            No categories configured
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CategoriesList;