refactor(core): new back&forward button base on workbench (#6012)

# feature:

## In Browser:
- hidden back&forward button in sidebar.
- back and forward is equal with `window.history.back()` `window.history.forward()`

## In Desktop:
- Back and forward can be controlled through the sidebar, cmdk, and shortcut keys.
- back and forward act on the currently **active** view.
- buttons change disable&enable style based on current active view history

# Refactor:

Move app-sidebar and app-container from @affine/component to @affine/core

packages/frontend/component/src/ui/scrollbar/index.ts

@@ -1,2 +1,3 @@
 export * from './scrollable';
 export * from './scrollbar';
+export * from './use-has-scroll-top';

packages/frontend/component/src/ui/scrollbar/scrollbar.tsx

@@ -2,8 +2,8 @@ import * as ScrollArea from '@radix-ui/react-scroll-area';
 import clsx from 'clsx';
 import { type PropsWithChildren, useRef } from 'react';
 
-import { useHasScrollTop } from '../../components/app-sidebar/sidebar-containers/use-has-scroll-top';
 import * as styles from './index.css';
+import { useHasScrollTop } from './use-has-scroll-top';
 
 export type ScrollableContainerProps = {
   showScrollTopBorder?: boolean;

packages/frontend/component/src/ui/scrollbar/use-has-scroll-top.tsx

@@ -0,0 +1,30 @@
+import { type RefObject, useEffect, useState } from 'react';
+
+export function useHasScrollTop(ref: RefObject<HTMLElement> | null) {
+  const [hasScrollTop, setHasScrollTop] = useState(false);
+
+  useEffect(() => {
+    if (!ref?.current) {
+      return;
+    }
+
+    const container = ref.current;
+
+    function updateScrollTop() {
+      if (container) {
+        setTimeout(() => {
+          const hasScrollTop = container.scrollTop > 0;
+          setHasScrollTop(hasScrollTop);
+        });
+      }
+    }
+
+    container.addEventListener('scroll', updateScrollTop);
+    updateScrollTop();
+    return () => {
+      container.removeEventListener('scroll', updateScrollTop);
+    };
+  }, [ref]);
+
+  return hasScrollTop;
+}