chore: move social media from left panel into footer

web/containers/Layout/BottomBar/SystemItem/index.tsx

@@ -9,7 +9,7 @@ export default function SystemItem({ name, value }: Props) {
   return (
     <div className="flex items-center gap-x-1">
       <p className="text-xs">{name}</p>
-      <span className="text-xs">{value}</span>
+      <span className="text-xs font-bold">{value}</span>
     </div>
   )
 }

web/containers/Layout/BottomBar/index.tsx

@@ -1,6 +1,15 @@
-import { Badge, Button } from '@janhq/uikit'
+import {
+  Badge,
+  Button,
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipTrigger,
+} from '@janhq/uikit'
 import { useAtomValue } from 'jotai'
 
+import { FaGithub, FaDiscord } from 'react-icons/fa'
+
 import DownloadingState from '@/containers/Layout/BottomBar/DownloadingState'
 
 import SystemItem from '@/containers/Layout/BottomBar/SystemItem'
@@ -27,6 +36,19 @@ const BottomBar = () => {
   const { setMainViewState } = useMainViewState()
   const { downloadStates } = useDownloadState()
 
+  const linksMenu = [
+    {
+      name: 'Discord',
+      icon: <FaDiscord size={20} className="flex-shrink-0" />,
+      link: 'https://discord.gg/FTk2MvZwJH',
+    },
+    {
+      name: 'Github',
+      icon: <FaGithub size={16} className="flex-shrink-0" />,
+      link: 'https://github.com/janhq/jan',
+    },
+  ]
+
   return (
     <div className="fixed bottom-0 left-16 z-20 flex h-12 w-[calc(100%-64px)] items-center justify-between border-t border-border bg-background/80 px-3">
       <div className="flex flex-shrink-0 items-center gap-x-2">
@@ -69,11 +91,39 @@ const BottomBar = () => {
 
         <DownloadingState />
       </div>
-      <div className="flex gap-x-2">
+      <div className="flex items-center gap-x-4">
-        <SystemItem name="CPU:" value={`${cpu}%`} />
+        <div className="flex items-center gap-x-2">
-        <SystemItem name="Mem:" value={`${ram}%`} />
+          <SystemItem name="CPU:" value={`${cpu}%`} />
+          <SystemItem name="Mem:" value={`${ram}%`} />
+        </div>
         {/* VERSION is defined by webpack, please see next.config.js */}
-        <span className="text-xs font-semibold ">Jan v{VERSION ?? ''}</span>
+        <span className="text-xs">Jan v{VERSION ?? ''}</span>
+        <div className="mt-1 flex items-center gap-x-2">
+          {linksMenu
+            .filter((link) => !!link)
+            .map((link, i) => {
+              return (
+                <div className="relative" key={i}>
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <a
+                        href={link.link}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center"
+                      >
+                        {link.icon}
+                      </a>
+                    </TooltipTrigger>
+                    <TooltipContent side="top" sideOffset={10}>
+                      <span>{link.name}</span>
+                      <TooltipArrow />
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+              )
+            })}
+        </div>
       </div>
     </div>
   )

web/containers/Layout/Ribbon/index.tsx

@@ -11,8 +11,6 @@ import {
   SettingsIcon,
   MonitorIcon,
   LayoutGridIcon,
-  Twitter,
-  Github,
 } from 'lucide-react'
 
 import { twMerge } from 'tailwind-merge'
@@ -54,23 +52,6 @@ export default function RibbonNav() {
     },
   ]
 
-  const linksMenu = [
-    {
-      name: 'Twitter',
-      icon: (
-        <Twitter size={20} className="flex-shrink-0 text-muted-foreground" />
-      ),
-      link: 'https://twitter.com/janhq_',
-    },
-    {
-      name: 'Github',
-      icon: (
-        <Github size={20} className="flex-shrink-0 text-muted-foreground" />
-      ),
-      link: 'https://github.com/janhq/jan',
-    },
-  ]
-
   const secondaryMenus = [
     {
       name: 'System Monitor',
@@ -138,33 +119,6 @@ export default function RibbonNav() {
           </div>
 
           <div>
-            <>
-              {linksMenu
-                .filter((link) => !!link)
-                .map((link, i) => {
-                  return (
-                    <div className="relative flex p-2" key={i}>
-                      <Tooltip>
-                        <TooltipTrigger>
-                          <a
-                            href={link.link}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="relative flex w-full flex-shrink-0 cursor-pointer items-center justify-center"
-                          >
-                            {link.icon}
-                          </a>
-                        </TooltipTrigger>
-                        <TooltipContent side="right" sideOffset={10}>
-                          <span>{link.name}</span>
-                          <TooltipArrow />
-                        </TooltipContent>
-                      </Tooltip>
-                    </div>
-                  )
-                })}
-            </>
-
             {secondaryMenus
               .filter((secondary) => !!secondary)
               .map((secondary, i) => {

web/package.json

@@ -34,6 +34,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.47.0",
     "react-hot-toast": "^2.4.1",
+    "react-icons": "^4.12.0",
     "react-scroll-to-bottom": "^4.2.0",
     "react-toastify": "^9.1.3",
     "sass": "^1.69.4",
@@ -49,6 +50,7 @@
     "@types/node": "20.8.10",
     "@types/react": "18.2.34",
     "@types/react-dom": "18.2.14",
+    "@types/react-icons": "^3.0.0",
     "@types/react-scroll-to-bottom": "^4.2.4",
     "@types/uuid": "^9.0.6",
     "@typescript-eslint/eslint-plugin": "^6.8.0",