feat: catalog style toggle (classic/new) with admin mode & favorites

2026-06-20 15:36:18 +00:00 · 2026-03-22 16:54:40 +01:00
parent ccaec9185e
commit a5ea88010e
34 changed files with 2799 additions and 575 deletions
@@ -0,0 +1,39 @@
+import { FC } from 'react';
+import { FaChevronRight, FaHome } from 'react-icons/fa';
+import { LocalizeText } from '../../../../api';
+import { useCatalog } from '../../../../hooks';
+
+export const CatalogBreadcrumbView: FC<{}> = () =>
+{
+    const { activeNodes = [], activateNode } = useCatalog();
+
+    if(!activeNodes || activeNodes.length === 0)
+    {
+        return (
+            <div className="flex items-center gap-1.5 text-xs text-catalog-text-muted">
+                <FaHome className="text-[10px]" />
+                <span>{ LocalizeText('catalog.title') }</span>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex items-center gap-1 text-[11px] text-catalog-text-muted overflow-hidden min-w-0">
+            <FaHome
+                className="text-[10px] cursor-pointer hover:text-catalog-accent transition-colors shrink-0"
+                onClick={ () => activateNode(activeNodes[0]) }
+            />
+            { activeNodes.map((node, i) => (
+                <span key={ node.pageId } className="flex items-center gap-1 min-w-0">
+                    <FaChevronRight className="text-[7px] opacity-30 shrink-0" />
+                    <span
+                        className={ `truncate ${ i === activeNodes.length - 1 ? 'text-catalog-text font-semibold' : 'cursor-pointer hover:text-catalog-accent transition-colors' }` }
+                        onClick={ i < activeNodes.length - 1 ? () => activateNode(node) : undefined }
+                    >
+                        { node.localization }
+                    </span>
+                </span>
+            )) }
+        </div>
+    );
+};