Fix block numbering and switching with arrow keys (#258)

frontend/app/block/block.less

@@ -255,16 +255,14 @@
             }
 
             &.is-layoutmode .block-mask-inner {
-                margin-top: 35px; // TODO fix this magic
                 background-color: rgba(0, 0, 0, 0.5);
-                height: calc(100% - 35px);
+                height: 100%;
                 width: 100%;
                 display: flex;
                 align-items: center;
                 justify-content: center;
 
                 .bignum {
-                    margin-top: -15%;
                     font-size: 60px;
                     font-weight: bold;
                     opacity: 0.7;

frontend/app/block/blockframe.tsx

@@ -202,13 +202,9 @@ function BlockNum({ blockId }: { blockId: string }) {
     const tabId = jotai.useAtomValue(atoms.activeTabId);
     const tabAtom = WOS.getWaveObjectAtom<Tab>(WOS.makeORef("tab", tabId));
     const layoutModel = useLayoutModel(tabAtom);
-    for (let idx = 0; idx < layoutModel.leafs.length; idx++) {
-        const leaf = layoutModel.leafs[idx];
-        if (leaf?.data?.blockId == blockId) {
-            return String(idx + 1);
-        }
-    }
-    return null;
+    const leafsOrdered = jotai.useAtomValue(layoutModel.leafsOrdered);
+    const index = React.useMemo(() => leafsOrdered.findIndex((leaf) => leaf.data?.blockId == blockId), [leafsOrdered]);
+    return index !== -1 ? index + 1 : null;
 }
 
 const BlockMask = ({ blockId, preview, isFocused }: { blockId: string; preview: boolean; isFocused: boolean }) => {