fix(electron): all docs cannot be dragged after selection mode is on

packages/frontend/component/src/components/resize-panel/resize-panel.tsx

@@ -1,7 +1,7 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
-import { useTransition } from 'react-transition-state';
+import { useTransitionState } from 'react-transition-state';
 
 import { useDropTarget } from '../../ui/dnd';
 import { Tooltip, type TooltipProps } from '../../ui/tooltip';
@@ -186,12 +186,12 @@ export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
     ref
   ) {
     const safeWidth = Math.min(maxWidth, Math.max(minWidth, width));
-    const [{ status }, toggle] = useTransition({
+    const [{ status }, toggle] = useTransitionState({
       timeout: animationTimeout,
     });
     useLayoutEffect(() => {
       toggle(open);
-    }, [open]);
+    }, [open, toggle]);
     return (
       <div
         {...rest}

packages/frontend/core/src/components/blocksuite/block-suite-editor/journal-doc-title.tsx

@@ -23,7 +23,9 @@ export const BlocksuiteEditorJournalDocTitle = ({ page }: { page: Blocks }) => {
     <div className="doc-title-container" data-testid="journal-title">
       <span data-testid="date">{localizedJournalDate}</span>
       {isTodayJournal ? (
-        <span className={styles.titleTodayTag}>{t['com.affine.today']()}</span>
+        <span className={styles.titleTodayTag} data-testid="date-today-label">
+          {t['com.affine.today']()}
+        </span>
       ) : (
         <span className={styles.titleDayTag}>{day}</span>
       )}

packages/frontend/core/src/components/blocksuite/block-suite-header/journal/today-button.tsx

@@ -8,7 +8,9 @@ export const JournalTodayButton = () => {
   const journalHelper = useJournalRouteHelper();
 
   const onToday = useCallback(() => {
-    journalHelper.openToday();
+    journalHelper.openToday({
+      replaceHistory: true,
+    });
   }, [journalHelper]);
 
   return (

packages/frontend/core/src/components/hooks/use-journal.ts

@@ -5,6 +5,7 @@ import {
   JournalService,
   type MaybeDate,
 } from '@affine/core/modules/journal';
+import type { WorkbenchOpenOptions } from '@affine/core/modules/workbench/entities/workbench';
 import { i18nTime } from '@affine/i18n';
 import { track } from '@affine/track';
 import { useService, useServices } from '@toeverything/infra';
@@ -60,9 +61,9 @@ export const useJournalRouteHelper = () => {
    * open journal by date, create one if not exist
    */
   const openJournal = useCallback(
-    (maybeDate: MaybeDate, newTab?: boolean) => {
+    (maybeDate: MaybeDate, options: WorkbenchOpenOptions) => {
       const page = getJournalByDate(maybeDate);
-      workbench.openDoc(page.id, { at: newTab ? 'new-tab' : 'active' });
+      workbench.openDoc(page.id, options);
       track.$.navigationPanel.journal.navigate({
         to: 'journal',
       });
@@ -75,9 +76,9 @@ export const useJournalRouteHelper = () => {
    * open today's journal
    */
   const openToday = useCallback(
-    (newTab?: boolean) => {
+    (options: WorkbenchOpenOptions) => {
       const date = dayjs().format(JOURNAL_DATE_FORMAT);
-      return openJournal(date, newTab);
+      return openJournal(date, options);
     },
     [openJournal]
   );

packages/frontend/core/src/components/page-list/docs/page-list-item.tsx

@@ -180,7 +180,8 @@ export const PageListItem = (props: PageListItemProps) => {
         },
       },
     }),
-    [props.draggable, props.pageId]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.draggable, props.pageId, props.selectable]
   );
 
   return (

packages/frontend/core/src/components/root-app-sidebar/journal-button.tsx

@@ -1,32 +1,19 @@
-import { useCatchEventCallback } from '@affine/core/components/hooks/use-catch-event-hook';
-import {
-  useJournalInfoHelper,
-  useJournalRouteHelper,
-} from '@affine/core/components/hooks/use-journal';
-import { MenuItem } from '@affine/core/modules/app-sidebar/views';
+import { MenuLinkItem } from '@affine/core/modules/app-sidebar/views';
 import { DocDisplayMetaService } from '@affine/core/modules/doc-display-meta';
+import { JournalService } from '@affine/core/modules/journal';
 import { WorkbenchService } from '@affine/core/modules/workbench';
-import { isNewTabTrigger } from '@affine/core/utils';
 import { useI18n } from '@affine/i18n';
 import { TodayIcon } from '@blocksuite/icons/rc';
 import { useLiveData, useService } from '@toeverything/infra';
-import { type MouseEvent } from 'react';
 
 export const AppSidebarJournalButton = () => {
   const t = useI18n();
   const docDisplayMetaService = useService(DocDisplayMetaService);
+  const journalService = useService(JournalService);
   const workbench = useService(WorkbenchService).workbench;
   const location = useLiveData(workbench.location$);
-  const { openToday } = useJournalRouteHelper();
   const maybeDocId = location.pathname.split('/')[1];
-  const { isJournal } = useJournalInfoHelper(maybeDocId);
-
-  const handleOpenToday = useCatchEventCallback(
-    (e: MouseEvent) => {
-      openToday(isNewTabTrigger(e));
-    },
-    [openToday]
-  );
+  const isJournal = !!useLiveData(journalService.journalDate$(maybeDocId));
 
   const JournalIcon = useLiveData(
     docDisplayMetaService.icon$(maybeDocId, {
@@ -36,14 +23,13 @@ export const AppSidebarJournalButton = () => {
   const Icon = isJournal ? JournalIcon : TodayIcon;
 
   return (
-    <MenuItem
+    <MenuLinkItem
       data-testid="slider-bar-journals-button"
       active={isJournal}
-      onClick={handleOpenToday}
-      onAuxClick={handleOpenToday}
+      to={'/journals'}
       icon={<Icon />}
     >
       {t['com.affine.journal.app-sidebar-title']()}
-    </MenuItem>
+    </MenuLinkItem>
   );
 };

packages/frontend/core/src/desktop/components/app-container/styles.css.ts

@@ -78,14 +78,12 @@ export const mainContainerStyle = style({
   width: '100%',
   display: 'flex',
   flex: 1,
-  overflow: 'clip',
   maxWidth: '100%',
 
   selectors: {
     '&[data-client-border="true"]': {
       borderRadius: 6,
       padding: '8px',
-      overflow: 'clip',
       '@media': {
         print: {
           overflow: 'visible',

packages/frontend/core/src/desktop/pages/journals/index.tsx

@@ -0,0 +1,11 @@
+import { useJournalRouteHelper } from '@affine/core/components/hooks/use-journal';
+import { useEffect } from 'react';
+
+// this route page acts as a redirector to today's journal
+export const Component = () => {
+  const { openToday } = useJournalRouteHelper();
+  useEffect(() => {
+    openToday({ replaceHistory: true });
+  }, [openToday]);
+  return null;
+};

packages/frontend/core/src/desktop/workbench-router.ts

@@ -33,6 +33,10 @@ export const workbenchRoutes = [
     path: '/:pageId/attachments/:attachmentId',
     lazy: () => import('./pages/workspace/attachment/index'),
   },
+  {
+    path: '/journals',
+    lazy: () => import('./pages/journals'),
+  },
   {
     path: '*',
     lazy: () => import('./pages/404'),

packages/frontend/core/src/modules/app-sidebar/views/index.tsx

@@ -16,6 +16,7 @@ import type { PropsWithChildren, ReactElement } from 'react';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
 import { WorkbenchService } from '../../workbench';
+import { allowedSplitViewEntityTypes } from '../../workbench/view/split-view/types';
 import { WorkspaceService } from '../../workspace';
 import { AppSidebarService } from '../services/app-sidebar';
 import * as styles from './fallback.css';
@@ -161,12 +162,16 @@ export function AppSidebar({ children }: PropsWithChildren) {
 
         return {
           at: 'workbench:resize-handle',
-          position: 'left', // left of the first view
+          edge: 'left', // left of the first view
           viewId: firstView.id,
         };
       },
       canDrop: (data: DropTargetGetFeedback<AffineDNDData>) => {
-        return data.source.data.entity?.type === 'doc';
+        return (
+          (!!data.source.data.entity?.type &&
+            allowedSplitViewEntityTypes.has(data.source.data.entity?.type)) ||
+          data.source.data.from?.at === 'workbench:link'
+        );
       },
     });
   }, [workbenchService.views$.value]);

packages/frontend/core/src/modules/workbench/entities/workbench.ts

@@ -12,7 +12,7 @@ import { View } from './view';
 
 export type WorkbenchPosition = 'beside' | 'active' | 'head' | 'tail' | number;
 
-type WorkbenchOpenOptions = {
+export type WorkbenchOpenOptions = {
   at?: WorkbenchPosition | 'new-tab';
   replaceHistory?: boolean;
   show?: boolean; // only for new tab
@@ -57,9 +57,15 @@ export class Workbench extends Entity {
     index: number;
   } | null>(null);
 
-  draggingOver$ = new LiveData<{
+  draggingOverView$ = new LiveData<{
     view: View;
     index: number;
+    edge: 'left' | 'right';
+  } | null>(null);
+
+  draggingOverResizeHandle$ = new LiveData<{
+    viewId: string;
+    edge: 'left' | 'right';
   } | null>(null);
 
   location$ = LiveData.computed(get => {

packages/frontend/core/src/modules/workbench/view/split-view/indicator.css.ts

@@ -25,33 +25,54 @@ export const menuTrigger = style({
 });
 
 export const indicator = style({
-  width: 29,
+  padding: '6px 20px',
   height: 15,
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
+  gap: 3,
   cursor: 'grab',
   ['WebkitAppRegion' as string]: 'no-drag',
   color: cssVar('placeholderColor'),
+  transition: 'all 0.2s',
 
   selectors: {
-    '&:hover, &:active, &[data-active="true"]': {
+    '&:hover, &[data-active="true"], &[data-dragging="true"]': {
       color: cssVar('brandColor'),
     },
+    '&[data-dragging="true"]': {
+      gap: 4,
+    },
   },
 });
 
-export const indicatorInner = style({
-  width: 16,
-  height: 3,
-  borderRadius: 10,
+export const indicatorDot = style({
+  width: 4,
+  height: 4,
+  borderRadius: 2,
   backgroundColor: 'currentColor',
-  transition: 'all 0.5s cubic-bezier(0.16, 1, 0.3, 1)',
+  transition: 'all 0.2s',
+  selectors: {
+    [`${indicator}[data-dragging="true"] &:is(:first-child, :last-child)`]: {
+      width: 7,
+    },
+    [`${indicator}[data-dragging="true"] &:nth-child(2)`]: {
+      width: 6,
+    },
+  },
+});
 
+export const indicatorGradient = style({
+  position: 'absolute',
+  inset: 0,
+  height: '2px',
+  background:
+    'linear-gradient(to right, transparent, currentColor, transparent)',
+  transition: 'opacity 0.2s',
+  opacity: 0,
   selectors: {
-    '[data-is-dragging="true"] &, &:active': {
-      width: 24,
-      height: 2,
+    [`${indicator}[data-dragging="true"] &, ${indicator}:hover &`]: {
+      opacity: 1,
     },
   },
 });

packages/frontend/core/src/modules/workbench/view/split-view/indicator.tsx

@@ -9,14 +9,22 @@ import * as styles from './indicator.css';
 
 export interface SplitViewMenuProps extends HTMLAttributes<HTMLDivElement> {
   active?: boolean;
+  dragging?: boolean;
   open?: boolean;
   onOpenMenu?: () => void;
 }
 
 export const SplitViewMenuIndicator = memo(
   forwardRef<HTMLDivElement, SplitViewMenuProps>(
     function SplitViewMenuIndicator(
-      { className, active, open, onOpenMenu, ...attrs }: SplitViewMenuProps,
+      {
+        className,
+        active,
+        open,
+        onOpenMenu,
+        dragging,
+        ...attrs
+      }: SplitViewMenuProps,
       ref
     ) {
       const onClick: MouseEventHandler = useCallback(() => {
@@ -27,12 +35,16 @@ export const SplitViewMenuIndicator = memo(
         <div
           ref={ref}
           data-active={active}
+          data-dragging={dragging}
           data-testid="split-view-indicator"
           className={clsx(className, styles.indicator)}
           onClick={onClick}
           {...attrs}
         >
-          <div className={styles.indicatorInner} />
+          <div className={styles.indicatorGradient} />
+          <div className={styles.indicatorDot} />
+          <div className={styles.indicatorDot} />
+          <div className={styles.indicatorDot} />
         </div>
       );
     }
@@ -98,7 +110,8 @@ export const SplitViewIndicator = memo(
             ref={dragHandleRef}
             open={menuOpen}
             onOpenMenu={openMenu}
-            active={isActive || isDragging}
+            active={isActive}
+            dragging={isDragging}
           />
         </div>
       );