Revert "Merge remote-tracking branch 'origin/canary' into stable"

This reverts commit 992ed89a89, reversing
changes made to d272d7922d.

packages/frontend/component/src/components/page-list/page-tags.css.ts

@@ -1,6 +1,4 @@
-import { createVar, style } from '@vanilla-extract/css';
-
-export const hoverMaxWidth = createVar();
+import { style } from '@vanilla-extract/css';
 
 export const root = style({
   position: 'relative',
@@ -17,8 +15,7 @@ export const tagsContainer = style({
 export const tagsScrollContainer = style([
   tagsContainer,
   {
-    overflowX: 'hidden',
-    position: 'relative',
+    overflow: 'auto',
     height: '100%',
     gap: '8px',
   },
@@ -44,7 +41,7 @@ export const innerContainer = style({
   transition: 'all 0.2s 0.3s ease-in-out',
   selectors: {
     [`${root}:hover &`]: {
-      maxWidth: hoverMaxWidth,
+      maxWidth: 'var(--hover-max-width)',
     },
   },
 });
@@ -69,16 +66,6 @@ export const innerBackdrop = style({
 
 export const tag = style({
   height: '20px',
-  display: 'flex',
-  minWidth: 0,
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  ':last-child': {
-    minWidth: 'max-content',
-  },
-});
-
-export const tagInnerWrapper = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -87,7 +74,7 @@ export const tagInnerWrapper = style({
 });
 
 export const tagSticky = style([
-  tagInnerWrapper,
+  tag,
   {
     fontSize: 'var(--affine-font-xs)',
     borderRadius: '10px',
@@ -95,8 +82,10 @@ export const tagSticky = style([
     border: '1px solid var(--affine-border-color)',
     background: 'var(--affine-background-primary-color)',
     maxWidth: '128px',
+    position: 'sticky',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
+    left: 0,
   },
 ]);
 

packages/frontend/component/src/components/page-list/page-tags.tsx

@@ -1,9 +1,8 @@
 import type { Tag } from '@affine/env/filter';
 import { MoreHorizontalIcon } from '@blocksuite/icons';
 import { Menu } from '@toeverything/components/menu';
-import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
 import * as styles from './page-tags.css';
 import { stopPropagation } from './utils';
@@ -43,22 +42,18 @@ const TagItem = ({ tag, idx, mode, style }: TagItemProps) => {
   return (
     <div
       data-testid="page-tag"
-      className={styles.tag}
+      className={mode === 'sticky' ? styles.tagSticky : styles.tagListItem}
       data-idx={idx}
       title={tag.value}
       style={style}
     >
       <div
-        className={mode === 'sticky' ? styles.tagSticky : styles.tagListItem}
-      >
-        <div
-          className={styles.tagIndicator}
-          style={{
-            backgroundColor: tagColorMap(tag.color),
-          }}
-        />
-        <div className={styles.tagLabel}>{tag.value}</div>
-      </div>
+        className={styles.tagIndicator}
+        style={{
+          backgroundColor: tagColorMap(tag.color),
+        }}
+      />
+      <div className={styles.tagLabel}>{tag.value}</div>
     </div>
   );
 };
@@ -74,6 +69,26 @@ export const PageTags = ({
       ? widthOnHover
       : `${widthOnHover}px`
     : 'auto';
+  const tagsContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (tagsContainerRef.current) {
+      const tagsContainer = tagsContainerRef.current;
+      const listener = () => {
+        // on mouseleave, reset scroll position to the hoverExpandDirection
+        tagsContainer.scrollTo({
+          left: hoverExpandDirection === 'left' ? Number.MAX_SAFE_INTEGER : 0,
+          behavior: 'smooth',
+        });
+      };
+      listener();
+      tagsContainerRef.current.addEventListener('mouseleave', listener);
+      return () => {
+        tagsContainer.removeEventListener('mouseleave', listener);
+      };
+    }
+    return;
+  }, [hoverExpandDirection]);
 
   const tagsInPopover = useMemo(() => {
     const lastTags = tags.slice(maxItems);
@@ -92,17 +107,36 @@ export const PageTags = ({
     // sort tags by length
     nTags.sort((a, b) => a.value.length - b.value.length);
 
+    const tagRightCharLength = nTags.reduceRight<number[]>(
+      (acc, tag) => {
+        const curr = acc[0] + Math.min(tag.value.length, 10);
+        return [curr, ...acc];
+      },
+      [0]
+    );
+
+    tagRightCharLength.shift();
+
     return nTags.map((tag, idx) => (
-      <TagItem key={tag.id} tag={tag} idx={idx} mode="sticky" />
+      <TagItem
+        key={tag.id}
+        tag={tag}
+        idx={idx}
+        mode="sticky"
+        style={{
+          right: `calc(${tagRightCharLength[idx]}em)`,
+        }}
+      />
     ));
   }, [maxItems, tags]);
   return (
     <div
       data-testid="page-tags"
       className={styles.root}
-      style={assignInlineVars({
-        [styles.hoverMaxWidth]: sanitizedWidthOnHover,
-      })}
+      style={{
+        // @ts-expect-error it's fine
+        '--hover-max-width': sanitizedWidthOnHover,
+      }}
     >
       <div
         style={{
@@ -112,7 +146,9 @@ export const PageTags = ({
         className={clsx(styles.innerContainer)}
       >
         <div className={styles.innerBackdrop} />
-        <div className={styles.tagsScrollContainer}>{tagsNormal}</div>
+        <div className={styles.tagsScrollContainer} ref={tagsContainerRef}>
+          {tagsNormal}
+        </div>
         {maxItems && tags.length > maxItems ? (
           <Menu
             items={tagsInPopover}

packages/frontend/component/src/components/setting-components/storage-progess.tsx

@@ -11,7 +11,6 @@ import * as styles from './share.css';
 export interface StorageProgressProgress {
   max: number;
   value: number;
-  upgradable?: boolean;
   onUpgrade: () => void;
   plan: SubscriptionPlan;
 }
@@ -24,7 +23,6 @@ enum ButtonType {
 export const StorageProgress = ({
   max: upperLimit,
   value,
-  upgradable = true,
   onUpgrade,
   plan,
 }: StorageProgressProgress) => {
@@ -65,24 +63,22 @@ export const StorageProgress = ({
         </div>
       </div>
 
-      {upgradable ? (
-        <Tooltip
-          options={{ hidden: percent < 100 }}
-          content={t['com.affine.storage.maximum-tips']()}
-        >
-          <span tabIndex={0}>
-            <Button
-              type={buttonType}
-              onClick={onUpgrade}
-              className={styles.storageButton}
-            >
-              {plan === 'Free'
-                ? t['com.affine.storage.upgrade']()
-                : t['com.affine.storage.change-plan']()}
-            </Button>
-          </span>
-        </Tooltip>
-      ) : null}
+      <Tooltip
+        options={{ hidden: percent < 100 }}
+        content={t['com.affine.storage.maximum-tips']()}
+      >
+        <span tabIndex={0}>
+          <Button
+            type={buttonType}
+            onClick={onUpgrade}
+            className={styles.storageButton}
+          >
+            {plan === 'Free'
+              ? t['com.affine.storage.upgrade']()
+              : t['com.affine.storage.change-plan']()}
+          </Button>
+        </span>
+      </Tooltip>
     </div>
   );
 };