Toolbar - WIP

apps/harika-web/webpack.config.js

@@ -12,39 +12,38 @@ module.exports = (config, context) => {
     ...config.module.rules[0].options,
     plugins: [
       // ... other plugins
-      isDevelopment && require.resolve('react-refresh/babel'),
-    ].filter(Boolean)
-  }
+      // isDevelopment && require.resolve('react-refresh/babel'),
+    ].filter(Boolean),
+  };
 
   return {
     ...config,
     plugins: [
       ...config.plugins,
-      isDevelopment && new webpack.HotModuleReplacementPlugin(),
-      isDevelopment && new ReactRefreshWebpackPlugin(),
+      // isDevelopment && new webpack.HotModuleReplacementPlugin(),
+      // isDevelopment && new ReactRefreshWebpackPlugin({overlay: false}),
     ],
     module: {
       rules: [
         ...config.module.rules,
         webpackTailwindConfig.tailwindWebpackRule,
         {
           test: /\.worker\.js$/,
-          use: { loader: 'worker-loader' }
-        }
+          use: { loader: 'worker-loader' },
+        },
       ],
     },
     output: {
       ...config.output,
       // globalObject: 'this'
     },
     node: {
-     fs: "empty"
+      fs: 'empty',
     },
     devServer: {
       ...config.devServer,
       liveReload: false,
-      hot: true
-    }
+      hot: true,
+    },
   };
 };
-

libs/harika-core/src/lib/VaultRepository.ts

@@ -18,6 +18,8 @@ import { notesSchema } from './NoteRepository/db/notesSchema';
 import { VaultsSyncer } from './VaultRepository/vaultDb/VaultsSyncer';
 import { Socket } from 'phoenix';
 import { v4 as uuidv4 } from 'uuid';
+import * as remotedev from 'remotedev';
+import { connectReduxDevTools } from 'mobx-keystone';
 
 export class VaultRepository {
   // TODO: finde better naming(instead of conatiner)
@@ -138,6 +140,11 @@ export class VaultRepository {
         syncer?.sync()
       ).handlePatch
     );
+    const connection = remotedev.connectViaExtension({
+      name: `Vault ${vault.name}`,
+    });
+
+    connectReduxDevTools(remotedev, connection, vault);
 
     return vault;
   }

libs/harika-core/src/lib/VaultUiState.ts

@@ -2,9 +2,26 @@ import { model, Model, modelAction, prop } from 'mobx-keystone';
 
 @model('FocusedBlockState')
 export class FocusedBlockState extends Model({
-  id: prop<string>(),
+  viewId: prop<string>(),
+  blockId: prop<string>(),
   startAt: prop<number | undefined>(),
-}) {}
+  isEditing: prop<boolean>(),
+}) {
+  // viewId is required cause block could be rendered multiple times on the page
+  static create(
+    viewId: string,
+    blockId: string,
+    isEditing?: boolean,
+    startAt?: number
+  ) {
+    return new FocusedBlockState({
+      viewId,
+      blockId,
+      startAt,
+      isEditing: Boolean(isEditing),
+    });
+  }
+}
 
 // TODO: move views here
 // TODO: maybe big RootState?
@@ -24,9 +41,16 @@ export class VaultUiState extends Model({
   }
 
   getBlockFocusState(viewId: string, blockId: string) {
-    const isFocused = this.focusedBlock?.id === `${viewId}-${blockId}`;
+    const isFocused =
+      this.focusedBlock?.viewId === viewId &&
+      this.focusedBlock?.blockId === blockId;
+
     return isFocused
-      ? { isFocused: true, startAt: this.focusedBlock?.startAt }
-      : { isFocused: false };
+      ? {
+          isFocused: true,
+          startAt: this.focusedBlock?.startAt,
+          isEditing: Boolean(this.focusedBlock?.isEditing),
+        }
+      : { isFocused: false, isEditing: false };
   }
 }

libs/harika-ui/src/lib/components/Note/Note.tsx

@@ -10,6 +10,7 @@ import {
   NoteModel,
   NoteLinkModel,
   BlocksViewModel,
+  FocusedBlockState,
 } from '@harika/harika-core';
 import { Link, useHistory } from 'react-router-dom';
 import { Link as LinkIcon } from 'heroicons-react';
@@ -19,6 +20,8 @@ import { Arrow } from '../Arrow/Arrow';
 import { paths } from '../../paths';
 import { useCurrentVault } from '../../hooks/useCurrentVault';
 import { useCurrentVaultUiState } from '../../contexts/CurrentVaultUiStateContext';
+import { Toolbar } from './Toolbar';
+import { useMedia } from 'react-use';
 
 export interface IFocusBlockState {
   focusOnBlockId: string;
@@ -120,16 +123,18 @@ const Backlinks = observer(
   }
 );
 
-const NoteBlocks = React.memo(
-  observer(
-    ({
-      childBlocks,
-      view,
-    }: {
-      childBlocks: NoteBlockModel[];
-      view: BlocksViewModel;
-    }) => {
-      return (
+const NoteBlocks = observer(
+  ({
+    childBlocks,
+    view,
+  }: {
+    childBlocks: NoteBlockModel[];
+    view: BlocksViewModel;
+  }) => {
+    const isWide = useMedia('(min-width: 768px)');
+
+    return (
+      <>
         <div className="note__body">
           {childBlocks.map((noteBlock) => (
             <NoteBlock
@@ -139,9 +144,10 @@ const NoteBlocks = React.memo(
             />
           ))}
         </div>
-      );
-    }
-  )
+        {!isWide && <Toolbar view={view} />}
+      </>
+    );
+  }
 );
 
 export const Note: React.FC<{ note: NoteModel }> = observer(({ note }) => {
@@ -186,7 +192,9 @@ export const Note: React.FC<{ note: NoteModel }> = observer(({ note }) => {
 
   useEffect(() => {
     if (focusOnBlockId) {
-      vaultUiState.setFocusedBlock(note.$modelId, focusOnBlockId);
+      vaultUiState.setFocusedBlock(
+        FocusedBlockState.create(note.$modelId, focusOnBlockId)
+      );
     }
   }, [focusOnBlockId, note.$modelId, vaultUiState]);
 

libs/harika-ui/src/lib/components/Note/Toolbar.tsx

@@ -0,0 +1,86 @@
+import { observer } from 'mobx-react-lite';
+import React, { useCallback } from 'react';
+import { useCurrentVaultUiState } from '../../contexts/CurrentVaultUiStateContext';
+import { useCurrentVault } from '../../hooks/useCurrentVault';
+import { cn } from '../../utils';
+import { BlocksViewModel, FocusedBlockState } from '@harika/harika-core';
+import { Portal } from '../Portal';
+import { FormatIndentDecrease, FormatIndentIncrease } from '@material-ui/icons';
+
+const toolbarClass = cn('toolbar');
+
+export const Toolbar = observer(({ view }: { view: BlocksViewModel }) => {
+  const vaultUiState = useCurrentVaultUiState();
+  const vault = useCurrentVault();
+
+  const currentBlock = vaultUiState.focusedBlock?.blockId
+    ? vault.blocksMap[vaultUiState.focusedBlock?.blockId]
+    : undefined;
+
+  const handleNewBlockPress = useCallback(async () => {
+    if (!currentBlock) return;
+
+    const newBlock = currentBlock.injectNewRightBlock('', view);
+
+    if (!newBlock) return;
+
+    vaultUiState.setFocusedBlock(
+      FocusedBlockState.create(view.$modelId, newBlock.$modelId, true)
+    );
+  }, [currentBlock, vaultUiState, view]);
+
+  const handleMoveUpPress = useCallback(async () => {
+    if (!currentBlock) return;
+
+    currentBlock.tryMoveUp();
+  }, [currentBlock]);
+
+  const handleMoveDownPress = useCallback(async () => {
+    if (!currentBlock) return;
+
+    currentBlock.tryMoveDown();
+  }, [currentBlock]);
+
+  const handleMoveLeft = useCallback(async () => {
+    if (!currentBlock) return;
+
+    currentBlock.tryMoveLeft();
+  }, [currentBlock]);
+
+  const handleMoveRight = useCallback(async () => {
+    if (!currentBlock) return;
+
+    currentBlock.tryMoveRight();
+  }, [currentBlock]);
+
+  return (
+    <Portal>
+      <div className={toolbarClass()}>
+        <button
+          onClick={handleMoveDownPress}
+          className={toolbarClass('button')}
+        >
+          <FormatIndentDecrease />
+        </button>
+        <button onClick={handleMoveUpPress} className={toolbarClass('button')}>
+          <FormatIndentIncrease />
+        </button>
+        <button
+          onClick={handleMoveDownPress}
+          className={toolbarClass('button')}
+        >
+          D
+        </button>
+        <button onClick={handleMoveUpPress} className={toolbarClass('button')}>
+          U
+        </button>
+        <button
+          onClick={handleNewBlockPress}
+          className={toolbarClass('button')}
+        >
+          +
+        </button>
+      </div>
+    </Portal>
+  );
+});

libs/harika-ui/src/lib/components/Note/styles.css

@@ -104,3 +104,22 @@
     }
   }
 }
+
+.toolbar {
+  @apply bg-gray-900 py-4 bg-opacity-90;
+
+  backdrop-filter: blur(5px);
+
+  position: fixed;
+  bottom: 0;
+
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  width: 100%;
+
+  &__button {
+    width: 15%;
+  }
+}