feat(core): adjust ai help island style and behavior, add animation (#7310)

- Move right-sidebar activeTab state into `RightSidebarService`
- Remove `styled` usage and adjust the UI
- Fix the issue that ai-button clicking not work when sidebar opened
- Add an animation if AI-Chat panel hasn't been opened.

![CleanShot 2024-06-24 at 18.10.27.gif](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/14c86fbc-ad4c-44bf-93fe-ca3450db908b.gif)

packages/frontend/core/src/modules/right-sidebar/entities/right-sidebar.ts

@@ -1,13 +1,25 @@
 import type { GlobalState } from '@toeverything/infra';
 import { Entity, LiveData } from '@toeverything/infra';
 
+import type { SidebarTabName } from '../../multi-tab-sidebar';
 import { RightSidebarView } from './right-sidebar-view';
 
 const RIGHT_SIDEBAR_KEY = 'app:settings:rightsidebar';
+const RIGHT_SIDEBAR_TABS_ACTIVE_KEY = 'app:settings:rightsidebar:tabs:active';
+const RIGHT_SIDEBAR_AI_HAS_EVER_OPENED_KEY =
+  'app:settings:rightsidebar:ai:has-ever-opened';
 
 export class RightSidebar extends Entity {
+  _disposables: Array<() => void> = [];
   constructor(private readonly globalState: GlobalState) {
     super();
+
+    const sub = this.activeTabName$.subscribe(name => {
+      if (name === 'chat') {
+        this.globalState.set(RIGHT_SIDEBAR_AI_HAS_EVER_OPENED_KEY, true);
+      }
+    });
+    this._disposables.push(() => sub.unsubscribe());
   }
 
   readonly isOpen$ = LiveData.from(
@@ -19,6 +31,25 @@ export class RightSidebar extends Entity {
     stack => stack[0] as RightSidebarView | undefined
   );
   readonly hasViews$ = this.views$.map(stack => stack.length > 0);
+  readonly activeTabName$ = LiveData.from(
+    this.globalState.watch<SidebarTabName>(RIGHT_SIDEBAR_TABS_ACTIVE_KEY),
+    null
+  );
+
+  /** To determine if AI chat has ever been opened, used to show the animation for the first time */
+  readonly aiChatHasEverOpened$ = LiveData.from(
+    this.globalState.watch<boolean>(RIGHT_SIDEBAR_AI_HAS_EVER_OPENED_KEY),
+    false
+  );
+
+  override dispose() {
+    super.dispose();
+    this._disposables.forEach(dispose => dispose());
+  }
+
+  setActiveTabName(name: SidebarTabName) {
+    this.globalState.set(RIGHT_SIDEBAR_TABS_ACTIVE_KEY, name);
+  }
 
   open() {
     this._set(true);