fezcode
diff --git a/‎src/components/AnimatedRoutes.js‎
Lines changed: 34 additions & 0 deletions b/‎src/components/AnimatedRoutes.js‎
Lines changed: 34 additions & 0 deletions
diff --git a/‎src/components/BrutalistSidebar.js‎
Lines changed: 10 additions & 2 deletions b/‎src/components/BrutalistSidebar.js‎
Lines changed: 10 additions & 2 deletions
diff --git a/‎src/components/Sidebar.js‎
Lines changed: 7 additions & 1 deletion b/‎src/components/Sidebar.js‎
Lines changed: 7 additions & 1 deletion
diff --git a/‎src/context/AchievementContext.js‎
Lines changed: 1 addition & 1 deletion b/‎src/context/AchievementContext.js‎
Lines changed: 1 addition & 1 deletion
@@ -165,6 +165,8 @@ const SitemapPage = lazy(() => import('../pages/SitemapPage'));
 const WelcomePage = lazy(() => import('../pages/WelcomePage'));
 const KnowledgeGraphPage = lazy(() => import('../pages/KnowledgeGraphPage'));
 const PIMLLabPage = lazy(() => import('../pages/apps/PIMLLabPage'));
+const BrufezPage = lazy(() => import('../pages/BrufezPage'));
+const BrufezPanelsPage = lazy(() => import('../pages/BrufezPanelsPage'));
 const VocabRouteHandler = lazy(() => import('../components/VocabRouteHandler'));
 
 const pageVariants = {
@@ -598,6 +600,38 @@ const AnimatedRoutes = ({
             </motion.div>
           }
         />
+        <Route
+          path="/brufez"
+          element={
+            <motion.div
+              initial="initial"
+              animate="in"
+              exit="out"
+              variants={pageVariants}
+              transition={pageTransition}
+            >
+              <Suspense fallback={<Loading />}>
+                <BrufezPage />
+              </Suspense>
+            </motion.div>
+          }
+        />
+        <Route
+          path="/brufez/panels"
+          element={
+            <motion.div
+              initial="initial"
+              animate="in"
+              exit="out"
+              variants={pageVariants}
+              transition={pageTransition}
+            >
+              <Suspense fallback={<Loading />}>
+                <BrufezPanelsPage />
+              </Suspense>
+            </motion.div>
+          }
+        />
         <Route
           path="/sitemap"
           element={
 
@@ -22,6 +22,7 @@ import {
   GraphIcon,
   CaretDoubleDownIcon,
   CaretDoubleUpIcon,
+  FlaskIcon,
 } from '@phosphor-icons/react';
 
 import { version } from '../version';
@@ -283,11 +284,12 @@ const BrutalistSidebar = ({
             {/* Section: Status */}
             <SectionHeader
               id="isStatusOpen"
-              label="System Status"
+              label="System"
               isOpen={sidebarState.isStatusOpen}
               active={
                 location.pathname.startsWith('/roadmap') ||
-                location.pathname.startsWith('/timeline')
+                location.pathname.startsWith('/timeline') ||
+                location.pathname.startsWith('/brufez')
               }
             />
             {sidebarState.isStatusOpen && (
@@ -304,6 +306,12 @@ const BrutalistSidebar = ({
                   label="Fezzilla"
                   getLinkClass={getLinkClass}
                 />
+                <SidebarLink
+                  to="/brufez"
+                  icon={FlaskIcon}
+                  label="Brufez Spec"
+                  getLinkClass={getLinkClass}
+                />
               </nav>
             )}
 
 
@@ -31,6 +31,7 @@ import {
   TrophyIcon,
   SkullIcon,
   BugBeetleIcon,
+  FlaskIcon,
 } from '@phosphor-icons/react';
 
 import Fez from './Fez';
@@ -142,7 +143,8 @@ const Sidebar = ({
     location.pathname.startsWith('/commands');
   const isStatusActive =
     location.pathname.startsWith('/timeline') ||
-    location.pathname.startsWith('/roadmap');
+    location.pathname.startsWith('/roadmap') ||
+    location.pathname.startsWith('/brufez');
 
   const variants = {
     open: { x: 0 },
@@ -316,6 +318,10 @@ const Sidebar = ({
                     <BugBeetleIcon size={24} />
                     <span>Fezzilla</span>
                   </NavLink>
+                  <NavLink to="/brufez" className={getLinkClass}>
+                    <FlaskIcon size={24} />
+                    <span>Brufez Spec</span>
+                  </NavLink>
                 </nav>
               )}
             </div>
 
@@ -55,7 +55,7 @@ export const AchievementProvider = ({ children }) => {
           title: 'Achievement Unlocked!',
           message: achievement.title,
           duration: 4000,
-          icon: <TrophyIcon weight="duotone" />,
+          icon: <TrophyIcon weight="duotone" className="text-amber-400" />,
           type: 'gold',
           links: [
             { label: 'Settings', to: '/settings' },