refactor(mascot): remove useMascotSummary integration from sidebar

services/frontend/src/widgets/DashboardLayout.tsx

@@ -3,7 +3,6 @@ import type { ReactNode } from "react";
 import type { DashboardTab } from "../entities/ui/types";
 import type { MessageRecord, VoiceStatus } from "../shared/api/client";
 import { fadeSlideUp } from "../shared/hooks/useFramerStagger";
-import { useMascotSummary } from "../shared/hooks/useMascotSummary";
 import type { WsStatus } from "../shared/ws/socket";
 import { Header } from "./Header";
 import { ParticleBackground } from "./particles/ParticleBackground";
@@ -30,11 +29,6 @@ export function DashboardLayout({
   guildId,
   channelId,
 }: DashboardLayoutProps) {
-  // Generate mascot summary from recent messages
-  const mascotSummary = useMascotSummary({
-    messages: recentMessages,
-    enabled: activeTab === "messages" && recentMessages.length > 0,
-  });
   return (
     <div className="relative min-h-screen bg-background text-foreground">
       {/* Sakura particle layer */}
@@ -44,7 +38,6 @@ export function DashboardLayout({
         <Sidebar
           activeTab={activeTab}
           onTabChange={onTabChange}
-          mascotChatMessage={mascotSummary}
           recentMessages={recentMessages}
           guildId={guildId}
           channelId={channelId}

services/frontend/src/widgets/Sidebar.tsx

@@ -18,7 +18,6 @@ interface SidebarProps {
   activeTab: DashboardTab;
   onTabChange: (tab: DashboardTab) => void;
   collapsed?: boolean;
-  mascotChatMessage?: string;
   recentMessages?: MessageRecord[];
   guildId?: string;
   channelId?: string;
@@ -28,14 +27,15 @@ export function Sidebar({
   activeTab,
   onTabChange,
   collapsed = true,
-  mascotChatMessage = "",
   recentMessages = [],
   guildId,
   channelId,
 }: SidebarProps) {
   const mascotChat = useMascotChat({
     messageCount: recentMessages.length,
-    activeParticipants: new Set(recentMessages.map((message) => message.user_id)).size,
+    activeParticipants: new Set(
+      recentMessages.map((message) => message.user_id),
+    ).size,
     lastActivity: recentMessages.length > 0 ? "Active" : "Idle",
     topicsDiscussed: ["Messages", "Moderation", "Analytics"],
     guildId,
@@ -58,7 +58,11 @@ export function Sidebar({
             collapsed ? "justify-center" : "flex-col px-4",
           )}
         >
-        <img src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/docs/logo.svg" alt="GMW" className="h-8 w-8 rounded-xl" />
+          <img
+            src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/docs/logo.svg"
+            alt="GMW"
+            className="h-8 w-8 rounded-xl"
+          />
 
           {/* Mascot image — only when expanded */}
           {!collapsed && (
@@ -88,7 +92,8 @@ export function Sidebar({
                     : "text-muted-foreground hover:bg-primary-soft/40 hover:text-primary/80",
                 )}
                 onMouseEnter={(e) => {
-                e.currentTarget.style.transform = "translateX(2px) scale(1.1)";
+                  e.currentTarget.style.transform =
+                    "translateX(2px) scale(1.1)";
                 }}
                 onMouseLeave={(e) => {
                   e.currentTarget.style.transform = "translateX(0) scale(1)";
@@ -111,15 +116,15 @@ export function Sidebar({
               initial={{ opacity: 0, x: -8, y: 6, scale: 0.96 }}
               animate={{ opacity: 1, x: 0, y: 0, scale: 1 }}
               transition={{ type: "spring", stiffness: 280, damping: 24 }}
-            className="pointer-events-none absolute bottom-20 left-12 z-40 w-64"
+              className="pointer-events-none absolute -top-28 left-12 z-40 w-64"
             >
               <div className="relative rounded-2xl border border-sky-200/80 bg-white/95 px-4 py-3 text-left shadow-xl shadow-sky-100/70 backdrop-blur-md">
                 <p className="text-[11px] font-semibold uppercase tracking-wide text-primary/70">
                   Discord Watcher
                 </p>
                 <p className="mt-1 text-xs leading-relaxed text-slate-700">
-                {mascotChatMessage ||
-                  "Halo! Saya mascot mu. Klik aku kalau mau tanya soal obrolan atau moderasi ✨"}
+                  Halo! Saya mascot mu. Klik aku kalau mau tanya soal obrolan
+                  atau moderasi ✨
                 </p>
                 {/* Outer: border layer — 1px larger, extends left & down to show border on diagonal/bottom edges */}
                 <div className="absolute -left-[13px] bottom-[7px] z-10 h-[21px] w-[21px] bg-sky-200/80 [clip-path:polygon(100%_0,0_100%,100%_70%)]" />
@@ -143,7 +148,7 @@ export function Sidebar({
         onClose={() => mascotChat.setIsOpen(false)}
         onSendMessage={mascotChat.handleSendMessage}
         mascotName="Discord Watcher"
-      className="fixed bottom-20 left-[80px] z-[9999]"
+        className="fixed bottom-[170px] left-[80px] z-[9999]"
       />
     </>
   );