feat: add history back & forward for desktop app (#1926)

apps/web/src/components/affine/pinboard/styles.ts

@@ -12,7 +12,8 @@ export const StyledCollapsedButton = styled('button')<{
 }>(({ collapse, show = true, theme }) => {
   return {
     width: '16px',
-    height: '16px',
+    height: '100%',
+    ...displayFlex('center', 'center'),
     fontSize: '16px',
     position: 'absolute',
     left: '0',
@@ -21,9 +22,13 @@ export const StyledCollapsedButton = styled('button')<{
     margin: 'auto',
     color: theme.colors.iconColor,
     opacity: '.6',
+    transition: 'opacity .15s ease-in-out',
     display: show ? 'flex' : 'none',
     svg: {
-      transform: `rotate(${collapse ? '0' : '-90'}deg)`,
+      transform: `rotate(${collapse ? '-90' : '0'}deg)`,
+    },
+    ':hover': {
+      opacity: '1',
     },
   };
 });