Merge branch 'master' into feat/block-pendant

libs/components/account/src/login/firebase.tsx

@@ -106,7 +106,7 @@ export const Firebase = () => {
             />
             <MuiGrid item xs={8}>
                 <Error
-                    title="Welcome to Affine"
+                    title="Welcome to AFFiNE"
                     subTitle="blocks of knowledge to power your team"
                     action1Text="Login &nbsp; or &nbsp; Register"
                 />

libs/components/common/src/lib/Logo/LogoImg.tsx

@@ -6,7 +6,7 @@ export const LogoImg = ({ style = {} }: { style: CSSProperties }) => {
         <img
             style={style}
             src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABzJJREFUeNrs3T1SHEcUAOAxpQOQON/EOcpdFpwAfAKhE0ikToBEqawTCG6ATiDkUu7NnaxjJXsET0uDDOiHfrM9fzvfV7VFMgzN9Mzr1z3dvVUFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEBhP5U82c+//rGofyweOGz18cPLlUsPw3tU+Hyn9ef4gWOW9edxX/9gHZRSeZ6O7Lqf1EFwObEyP/tR4P7t+T9nTf3nOP/r9S9nGXW3X/94l3G+VK7HdfnWBe+b9Hf3Mw8/qP/2dcY5X9U/9rY5ABxlHLOXMoUes4BFoCL7sPrRwz/iMo85a0vX60X9OavGbW9k9XqxUzBipod/N/Pw5zPOus6VuROn9T24VxGq152CJ4ukrEczveCpJb1Q5s688kznt/4pqysSAOrIuxt8qBczjdZa/27tN+MnZNZrqQygTYv+dGYXXOvfUxbQNEg80PqXDACHLX5nbpFa69+PXV2B/HrdOAA07/7bZAC7zcCh1l+ZSztuXiHyg9a/VAawyUN8OJOLrvUfoCvgWX+4XksEgE368nPIALT+w0jzTc48799v/ZONJgI16f8mo/mpG3A8opstleOy8DnXEyzzaktu+Of1/XUx0annJ9XnWbOd1uumMwFLtOCHzU08Bv/mTOkcmSmWuS9pQPBN/TmYYNmXfdTrpgGgxIy+o/TapuQ8bvrXzO0fY8qd5gYc1ffXlVr6WusxgGYiz6JQOY5UBR0yN6B0AKjKTuQ5VBV0KDVUpy5D2QBQstU+agYUoSsvLBYqFACaSRalH1jdADrvCrgEZTKASPq/7uCc0EYaEHzhMmweAHJb61X9yR193dMNoAenBgT/F34NGNz4Iz3876v8hT/puDPVMj3NrLvsLcE+fng5VD3fLBZ6ptbaZQCREfvL4PtX3QD6YLFQmwDQpE65rfntve9yg8DCSC09eeMSxDOAyEj97Yf+rSyAkVlYLBQfA4ik/+/vBYPciJuCzMlA1+PJSG6KJyMo8/XE1hjclDWS2p+OeLHQu7psXZz3zhbm2QEguO/f+nbfP83zr3//KvP3FwPO3d6vxrVt85Blvphgg5Yajr9bdAWmuFio9y7AceDYbz28kW6AqcHDmuQS2mbMKbqRyf6MdqbaKABE+uZvM4NCibEGypvybkB/VvH9DN7MdW5AVgAIbvyx/lb63iz3zQ0Cu3OOylr/jbKAdRUfQ0oP/6kAUKZFvgpmBiUyDsp5PfV/oGmAomNIs1wstNPBw/i2ZXD4KuiYstm764zvLZyKlAVEN5l5IwB8nf7vbZr+30vPIjeYboC+f9ssYNUim9mb22KhnAwg0vpfZxwT2cDS24B+W//rbfqHmvUG0YxmVouFcuYBRFrhnD5+yhBy12XbL1DrX6Ir8C5w/O5IugLLqpsdpdfZAaDFvn8P9vFTalafdxnoVhxXn1/t9NIKVndnMA4lzQTc77HM623dWTj9X2m2XxWbx3JUdb+d+4OBawy7Akd2/b0KtNSXgQDwtMcA8H7AZaq3A+9ZIACMoswTyAIiy9ir4LFbOwZQOv3PzhRusVEIm2YBbeYGVLMOAMGNP0IPdTNC620AfQaBiypvkFoAaERG4K9aDNRF3gY8V1UU6grwUAAIrvyLpv83ItHYRiGUyALaLBaaZQbQWfp/rzJWgV8xNZgS2iwWml0AiKT/yw3e01shSN9ZQLpXbQj6vQDQIv3f5KupI7+7sJEjhYLAdZusdS4ZQLSlvdqgInQDGEqbxUKzCACRh2xZYO24bgBDZAHpvj0XAO6m/4sqtr/cZYEyRM5hoxBKBoE0ILgUAAZI/zfoBlghSOmuwGw9Gjj9vx1Ictdhp291ObFCkEJZQFos9Gfg/utLV9uC37beuZf+RybbXBYsSHQikW4AJaWxgDk2KFe3uwDR6bbFXqM0r2UiFaAbQMksYK6Lhc53Wraqqw52jrVfIEMGgYtqXouFPu3+vNOk/8U3/tANYILmNEPw0yvQmwwgOsHmsnRpms1EI90AKwQpfQ+uqnnMDfjy3Q83AeA4mP539e7URiEMbQ6Lhb4EuZ0uN/7QDWCCWcC2Lxa6881PKQOIjqhfdnjxo90AawPo4j68rrZ3sdCdLs5OFR/973rqZLQbYKMQurCNi4W++t7HNBPw98AJ+rgg58EsY/VAND+rf5xNrAWaXJnTzVXlv0bL7WOnxuZgiHuz2b7+ILN7vMw850EFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMC2+0+AAQDgljs/XVSdVAAAAABJRU5ErkJggg=="
-            alt="Affine Logo"
+            alt="AFFiNE Logo"
         />
     );
 };

libs/components/editor-blocks/src/blocks/group/scene-kanban/CardItem.tsx

@@ -1,14 +1,6 @@
-import { styled } from '@toeverything/components/ui';
-import { RenderBlock, useKanban } from '@toeverything/components/editor-core';
 import type { KanbanCard } from '@toeverything/components/editor-core';
-
-const CardContainer = styled('div')({
-    display: 'flex',
-    flexDirection: 'column',
-    backgroundColor: '#fff',
-    border: '1px solid #E2E7ED',
-    borderRadius: '5px',
-});
+import { RenderBlock, useKanban } from '@toeverything/components/editor-core';
+import { styled } from '@toeverything/components/ui';
 
 const CardContent = styled('div')({
     margin: '20px',
@@ -20,12 +12,16 @@ const CardActions = styled('div')({
     alignItems: 'center',
     width: '100%',
     height: '29px',
-    background: 'rgba(152, 172, 189, 0.1)',
     borderRadius: '0px 0px 5px 5px',
     padding: '6px 0 6px 19px',
     fontSize: '12px',
     fontWeight: '300',
     color: '#98ACBD',
+    transition: 'all ease-in 0.2s',
+
+    ':hover': {
+        background: '#F5F7F8',
+    },
 });
 
 const PlusIcon = styled('div')({
@@ -37,6 +33,23 @@ const PlusIcon = styled('div')({
     },
 });
 
+const CardContainer = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: '#fff',
+    border: '1px solid #E2E7ED',
+    borderRadius: '5px',
+
+    [CardActions.toString()]: {
+        opacity: '0',
+    },
+    ':hover': {
+        [CardActions.toString()]: {
+            opacity: '1',
+        },
+    },
+});
+
 export const CardItem = ({
     id,
     block,
@@ -56,7 +69,7 @@ export const CardItem = ({
             </CardContent>
             <CardActions onClick={onAddItem}>
                 <PlusIcon />
-                Add item
+                <span>Add item</span>
             </CardActions>
         </CardContainer>
     );

libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/helper.ts

@@ -6,6 +6,7 @@ import type { DndableItems } from './type';
 import type {
     KanbanCard,
     KanbanGroup,
+    RecastItem,
 } from '@toeverything/components/editor-core';
 import { isEqual } from '@toeverything/utils';
 
@@ -33,15 +34,44 @@ const findContainer = (id: string, items: DndableItems) => {
     );
 };
 
+type FindMoveInfo = (params: {
+    id: string;
+    activeContainer: string;
+    overContainer: string;
+    kanban: KanbanGroup[];
+}) => {
+    targetCard: RecastItem;
+    targetGroup: KanbanGroup | null;
+};
+
+const findMoveInfo: FindMoveInfo = ({
+    id,
+    activeContainer,
+    overContainer,
+    kanban,
+}) => {
+    const activeGroup = kanban.find(group => group.id === activeContainer);
+    const overGroup = kanban.find(group => group.id === overContainer);
+    const activityCard = activeGroup.items.find(item => item.id === id);
+
+    return {
+        targetCard: activityCard.block,
+        targetGroup: overGroup,
+    };
+};
+
 /**
  * Find the sibling node after the dragging of the moved node ends
  * @param cards
  * @param currentCardId
  */
-const findSibling = (cards: KanbanCard[], currentCardId: string) => {
+const findSibling = (
+    cards: KanbanCard[],
+    currentCardId: string
+): [string, string, number] => {
     const index = cards.findIndex(card => card.id === currentCardId);
 
-    return [cards[index - 1]?.id ?? null, cards[index + 1]?.id ?? null];
+    return [cards[index - 1]?.id ?? null, cards[index + 1]?.id ?? null, index];
 };
 
 /**
@@ -84,4 +114,5 @@ export {
     findSibling,
     pickIdFromCards,
     shouldUpdate,
+    findMoveInfo,
 };

libs/components/editor-blocks/src/blocks/group/scene-kanban/dndable/wrapper/use-dndable.ts

@@ -11,6 +11,7 @@ import {
     findSibling,
     pickIdFromCards,
     shouldUpdate,
+    findMoveInfo,
 } from '../helper';
 import type {
     CollisionDetection,
@@ -19,11 +20,13 @@ import type {
     DragEndEvent,
 } from '@dnd-kit/core';
 import type { DndableItems, UseDndableRes } from '../type';
+import { useKanban } from '@toeverything/components/editor-core';
 
 export const useDndable = (
     dndableItems: DndableItems,
     dndableContainerIds: string[]
 ): UseDndableRes => {
+    const { kanban, moveCard } = useKanban();
     const [items, setItems] = useState(dndableItems);
     const [containerIds, setContainerIds] = useState(dndableContainerIds);
     const [active, setActive] = useState(null);
@@ -259,16 +262,14 @@ export const useDndable = (
                         ).filter(Boolean),
                     };
 
-                    const activeItems = items[activeContainer];
-                    const activeItem = activeItems.find(
-                        item => item.id === activeId
-                    );
-                    const [beforeId, afterId] = findSibling(
-                        items[overContainer],
-                        activeId
-                    );
+                    const { targetCard } = findMoveInfo({
+                        id: activeId,
+                        activeContainer,
+                        overContainer,
+                        kanban,
+                    });
 
-                    activeItem?.moveTo(overContainer, beforeId, afterId);
+                    moveCard(targetCard, null, overIndex);
 
                     return data;
                 });

libs/components/editor-blocks/src/blocks/group/scene-kanban/styles.ts

@@ -31,7 +31,7 @@ export const KanbanContainer = styled('div')({
     // overscrollBehavior: 'contain',
 
     '& > * + *': {
-        marginLeft: '10px',
+        marginLeft: '20px',
     },
 });
 

libs/components/editor-core/src/editor/editor.ts

@@ -59,7 +59,7 @@ export class Editor implements Virgo {
     public bdCommands: Commands;
     public ui_container?: HTMLDivElement;
     public version = '0.0.1';
-    public copyright = '@Affine 2019-2022';
+    public copyright = '@AFFiNE 2020-2022';
     private plugin_manager: PluginManager;
     private hooks: Hooks;
     private views: Record<string, BaseView> = {};

libs/components/layout/src/header/file-exporter/file-exporter.ts

@@ -34,7 +34,7 @@ const FileExporter = {
         </html>`;
     },
     decoreateAffineBrand: (pageTitle: string) => {
-        return pageTitle + ` Created in Affine`;
+        return pageTitle + ` Created in AFFiNE`;
     },
     exportHtml: (pageTitle: string, htmlContent: string) => {
         FileExporter.exportFile(

libs/components/layout/src/settings-sidebar/Settings/util/file-exporter.ts

@@ -34,7 +34,7 @@ export const fileExporter = {
         </html>`;
     },
     decoreateAffineBrand: (pageTitle: string) => {
-        return pageTitle + ` Created in Affine`;
+        return pageTitle + ` Created in AFFiNE`;
     },
     exportHtml: (pageTitle: string, htmlContent: string) => {
         fileExporter.exportFile(