fix sidebar and add translations to sidebar

frontend/src/components/SettingsSidebar/index.jsx

@@ -4,15 +4,15 @@ import useLogo from "@/hooks/useLogo";
 import {
   House,
   List,
-  Robot,
   Flask,
   Gear,
   UserCircleGear,
   PencilSimpleLine,
   Nut,
   Toolbox,
-  Globe,
 } from "@phosphor-icons/react";
+import AgentIcon from "@/media/animations/agent-static.png";
+import CommunityHubIcon from "@/media/illustrations/community-hub.png";
 import useUser from "@/hooks/useUser";
 import { isMobile } from "react-device-detect";
 import Footer from "../Footer";
@@ -295,30 +295,42 @@ const SidebarOptions = ({ user = null, t }) => (
         />
         <Option
           btnText={t("settings.agent-skills")}
-          icon={<Robot className="h-5 w-5 flex-shrink-0" />}
+          icon={
+            <img
+              src={AgentIcon}
+              alt="Agent"
+              className="h-5 w-5 flex-shrink-0 light:invert"
+            />
+          }
           href={paths.settings.agentSkills()}
           user={user}
           flex={true}
           roles={["admin"]}
         />
         <Option
-          btnText="Community Hub"
-          icon={<Globe className="h-5 w-5 flex-shrink-0" />}
+          btnText={t("settings.community-hub.title")}
+          icon={
+            <img
+              src={CommunityHubIcon}
+              alt="Community Hub"
+              className="h-5 w-5 flex-shrink-0 light:invert"
+            />
+          }
           childOptions={[
             {
-              btnText: "Explore Trending",
+              btnText: t("settings.community-hub.trending"),
               href: paths.communityHub.trending(),
               flex: true,
               roles: ["admin"],
             },
             {
-              btnText: "Your Account",
+              btnText: t("settings.community-hub.your-account"),
               href: paths.communityHub.authentication(),
               flex: true,
               roles: ["admin"],
             },
             {
-              btnText: "Import Item",
+              btnText: t("settings.community-hub.import-item"),
               href: paths.communityHub.importItem(),
               flex: true,
               roles: ["admin"],

frontend/src/locales/en/common.js

@@ -106,6 +106,12 @@ const TRANSLATIONS = {
     privacy: "Privacy & Data",
     "ai-providers": "AI Providers",
     "agent-skills": "Agent Skills",
+    "community-hub": {
+      title: "Community Hub",
+      trending: "Explore Trending",
+      "your-account": "Your Account",
+      "import-item": "Import Item",
+    },
     admin: "Admin",
     tools: "Tools",
     "system-prompt-variables": "System Prompt Variables",