From c194d0418cea6d01a88790962aba3225d15b0b57 Mon Sep 17 00:00:00 2001
From: Luis <114909465+luiskcc@users.noreply.github.com>
Date: Thu, 30 Oct 2025 19:38:16 +0100
Subject: [PATCH 1/3] added consultation icon to redirect to Google Calendar to
 the bottom sidebar

---
 src/components/Sidebar.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index d3a67e5b..1c6e9650 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -8,9 +8,11 @@ import { UsersIcon } from '@/components/icons/UsersIcon'
 import { KeyIcon } from '@/components/icons/KeyIcon'
 import { GlobeIcon } from '@/components/icons/GlobeIcon'
 import { CalendarDaysIcon } from '@/components/icons/CalendarDaysIcon'
+import { CircleHelpIcon } from '@/components/icons/CircleHelpIcon'
 import { usePermissions } from '@/hooks/usePermissions'
 import { useFriendsWithInsights } from '@/api/hooks/useFriends'
 import { usePaywall } from '@/hooks/usePaywall'
+import { open } from '@tauri-apps/plugin-shell'
 
 export function Sidebar() {
   const location = useLocation()
@@ -122,6 +124,22 @@ export function Sidebar() {
           </div>
         )}
 
+        <div className="p-2 border-t flex justify-center">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <NoAnalyticsButton
+                variant="ghost"
+                iconSize={5}
+                className="w-9 h-9 p-2 text-muted-foreground [&>svg]:text-muted-foreground"
+                onClick={() => open('https://calendar.app.google/UT16rbeEvS5Ye4bx9')}
+              >
+                <CircleHelpIcon size={20} />
+              </NoAnalyticsButton>
+            </TooltipTrigger>
+            <TooltipContent side="right" sideOffset={10}>Book a Consultation</TooltipContent>
+          </Tooltip>
+        </div>
+
         <div className="p-2 border-t flex justify-center">
           <Tooltip>
             <TooltipTrigger asChild>

From 7e9b629903dc2c8cddb0625f78f357ffddb90155 Mon Sep 17 00:00:00 2001
From: Luis <114909465+luiskcc@users.noreply.github.com>
Date: Mon, 3 Nov 2025 20:45:31 +0100
Subject: [PATCH 2/3] Added Massage Icon animated component for Booking
 Consultations

---
 src/components/Sidebar.tsx                 |  4 +-
 src/components/icons/MessageCircleIcon.tsx | 74 ++++++++++++++++++++++
 2 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 src/components/icons/MessageCircleIcon.tsx

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 1c6e9650..1d2d34ba 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -8,7 +8,7 @@ import { UsersIcon } from '@/components/icons/UsersIcon'
 import { KeyIcon } from '@/components/icons/KeyIcon'
 import { GlobeIcon } from '@/components/icons/GlobeIcon'
 import { CalendarDaysIcon } from '@/components/icons/CalendarDaysIcon'
-import { CircleHelpIcon } from '@/components/icons/CircleHelpIcon'
+import { MessageCircleIcon } from '@/components/icons/MessageCircleIcon'
 import { usePermissions } from '@/hooks/usePermissions'
 import { useFriendsWithInsights } from '@/api/hooks/useFriends'
 import { usePaywall } from '@/hooks/usePaywall'
@@ -133,7 +133,7 @@ export function Sidebar() {
                 className="w-9 h-9 p-2 text-muted-foreground [&>svg]:text-muted-foreground"
                 onClick={() => open('https://calendar.app.google/UT16rbeEvS5Ye4bx9')}
               >
-                <CircleHelpIcon size={20} />
+                <MessageCircleIcon size={20} />
               </NoAnalyticsButton>
             </TooltipTrigger>
             <TooltipContent side="right" sideOffset={10}>Book a Consultation</TooltipContent>
diff --git a/src/components/icons/MessageCircleIcon.tsx b/src/components/icons/MessageCircleIcon.tsx
new file mode 100644
index 00000000..ee073bb2
--- /dev/null
+++ b/src/components/icons/MessageCircleIcon.tsx
@@ -0,0 +1,74 @@
+import type { Transition, Variants } from 'motion/react'
+import { motion } from 'motion/react'
+import type { HTMLAttributes } from 'react'
+import { forwardRef } from 'react'
+import { cn } from '@/lib/utils/tailwind.util'
+import type { AnimationHandle } from '@/hooks/useMouseOverAnimation'
+import { useMouseOverAnimation } from '@/hooks/useMouseOverAnimation'
+
+export type MessageCircleIconHandle = AnimationHandle
+
+interface MessageCircleIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number
+}
+
+const defaultTransition: Transition = {
+  duration: 0.6,
+  opacity: { duration: 0.2 }
+}
+
+const pathVariants: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1]
+  }
+}
+
+const MessageCircleIcon = forwardRef<MessageCircleIconHandle, MessageCircleIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const { controls, handleMouseEnter, handleMouseLeave } = useMouseOverAnimation({
+      ref,
+      onMouseEnter,
+      onMouseLeave
+    })
+
+    return (
+      <div
+        className={cn(
+          'cursor-pointer select-none p-2 hover:bg-accent rounded-md transition-colors duration-200 flex items-center justify-center',
+          className
+        )}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <motion.path
+            d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"
+            variants={pathVariants}
+            transition={defaultTransition}
+            animate={controls}
+          />
+        </svg>
+      </div>
+    )
+  }
+)
+
+MessageCircleIcon.displayName = 'MessageCircleIcon'
+
+export { MessageCircleIcon }

From 5286934d1aeba0c70c115a8cbfdc67e1aea39eef Mon Sep 17 00:00:00 2001
From: Luis <114909465+luiskcc@users.noreply.github.com>
Date: Mon, 3 Nov 2025 20:48:08 +0100
Subject: [PATCH 3/3] refactored divs

---
 src/components/Sidebar.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 1d2d34ba..747340df 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -111,8 +111,8 @@ export function Sidebar() {
           </Tooltip>
         </nav>
 
-        {!hasProAccess && (
-          <div className="p-2 border-t flex justify-center">
+        <div className="p-2 border-t flex flex-col items-center space-y-2">
+          {!hasProAccess && (
             <NoAnalyticsButton
               variant="ghost"
               iconSize={5}
@@ -121,10 +121,8 @@ export function Sidebar() {
             >
               <KeyIcon size={20} className="text-yellow-500" />
             </NoAnalyticsButton>
-          </div>
-        )}
+          )}
 
-        <div className="p-2 border-t flex justify-center">
           <Tooltip>
             <TooltipTrigger asChild>
               <NoAnalyticsButton
@@ -138,9 +136,7 @@ export function Sidebar() {
             </TooltipTrigger>
             <TooltipContent side="right" sideOffset={10}>Book a Consultation</TooltipContent>
           </Tooltip>
-        </div>
 
-        <div className="p-2 border-t flex justify-center">
           <Tooltip>
             <TooltipTrigger asChild>
               <NoAnalyticsButton