feat: Create new top-level group from explorer

apps/web/src/lib/editor/extensions/block-action-menu/options.tsx

@@ -118,6 +118,12 @@ const options: Record<string, NodeOption[]> = {
         const [startLine, setStartLine] = createSignal<number>(
           props.state.node.attrs.startLine || 1
         );
+        const saveStartLine = (): void => {
+          props.state.editor.commands.updateAttributes("codeBlock", {
+            startLine: startLine()
+          });
+          props.close();
+        };
 
         return (
           <div class="flex flex-col items-start gap-0.5">
@@ -140,6 +146,10 @@ const options: Record<string, NodeOption[]> = {
                 type="number"
                 min={1}
                 max={9999}
+                onEnter={(event) => {
+                  event.preventDefault();
+                  saveStartLine();
+                }}
                 value={`${startLine()}`}
                 setValue={(value) => {
                   let parsedValue = parseInt(`${value || 1}`);
@@ -152,17 +162,7 @@ const options: Record<string, NodeOption[]> = {
                   setStartLine(parsedValue);
                 }}
               />
-              <IconButton
-                path={mdiCheck}
-                class="m-0"
-                color="primary"
-                onClick={() => {
-                  props.state.editor.commands.updateAttributes("codeBlock", {
-                    startLine: startLine()
-                  });
-                  props.close();
-                }}
-              />
+              <IconButton path={mdiCheck} class="m-0" color="primary" onClick={saveStartLine} />
             </div>
           </div>
         );

apps/web/src/views/explorer/index.tsx

@@ -1,5 +1,6 @@
 import { TreeLevel } from "./tree-level";
 import { ExplorerDataProvider, useExplorerData } from "./explorer-context";
+import { NewGroupButton } from "./new-group-button";
 import { Component } from "solid-js";
 import { mdiClose, mdiHexagonSlice6 } from "@mdi/js";
 import { createRef } from "@vrite/components/src/ref";
@@ -159,6 +160,7 @@ const ExplorerTree: Component = () => {
               </button>
             </div>
             <TreeLevel />
+            <NewGroupButton />
           </div>
         </div>
       </div>

apps/web/src/views/explorer/new-group-button.tsx

@@ -0,0 +1,63 @@
+import { useExplorerData } from "./explorer-context";
+import { mdiChevronRight, mdiFolderPlusOutline } from "@mdi/js";
+import clsx from "clsx";
+import { Component, createSignal, Show } from "solid-js";
+import { useNotifications, useClient } from "#context";
+import { IconButton, Icon, Loader } from "#components/primitives";
+
+const NewGroupButton: Component = () => {
+  const { setRenaming } = useExplorerData();
+  const { notify } = useNotifications();
+  const client = useClient();
+  const [loading, setLoading] = createSignal(false);
+
+  return (
+    <button
+      class="flex w-full justify-center items-center cursor-pointer overflow-x-hidden group pl-0.5 rounded-l-md @hover:bg-gray-200 dark:@hover-bg-gray-700 ml-6.5"
+      onClick={async () => {
+        try {
+          setLoading(true);
+
+          const contentGroup = await client.contentGroups.create.mutate({
+            name: ""
+          });
+
+          setRenaming(contentGroup.id);
+          setLoading(false);
+          notify({ text: "New content group created", type: "success" });
+        } catch (error) {
+          setLoading(false);
+          notify({ text: "Couldn't create new content group", type: "error" });
+        }
+      }}
+    >
+      <div class="flex flex-1 justify-start items-center overflow-hidden rounded-lg cursor-pointer h-7 group draggable">
+        <div class="flex flex-1" onClick={() => {}}>
+          <div class="h-6 w-6 mr-1">
+            <Show
+              when={loading()}
+              fallback={
+                <Icon
+                  class={clsx("text-gray-500 dark:text-gray-400")}
+                  path={mdiFolderPlusOutline}
+                />
+              }
+            >
+              <Loader class="h-full fill-current p-0.5" />
+            </Show>
+          </div>
+          <span
+            class={clsx(
+              "!text-base inline-flex text-start flex-1 overflow-x-auto content-group-name scrollbar-hidden select-none clamp-1"
+            )}
+            title="New group"
+          >
+            New group
+          </span>
+        </div>
+      </div>
+    </button>
+  );
+};
+
+export { NewGroupButton };

apps/web/src/views/explorer/tree-level.tsx

@@ -1,6 +1,7 @@
 import { ContentGroupRow } from "./content-group-row";
 import { ContentPieceRow } from "./content-piece-row";
 import { useExplorerData } from "./explorer-context";
+import { NewGroupButton } from "./new-group-button";
 import clsx from "clsx";
 import { Component, createEffect, Show, For, createSignal } from "solid-js";
 import SortableLib from "sortablejs";
@@ -15,64 +16,6 @@ import { useNavigate } from "@solidjs/router";
 import { Icon, IconButton, Loader, Sortable } from "#components/primitives";
 import { App, hasPermission, useClient, useContentData, useNotifications } from "#context";
 
-const NewGroupButton: Component = () => {
-  const { setRenaming } = useExplorerData();
-  const { notify } = useNotifications();
-  const client = useClient();
-  const [loading, setLoading] = createSignal(false);
-
-  return (
-    <button
-      class="flex w-full justify-center items-center cursor-pointer overflow-x-hidden group pl-0.5 rounded-l-md @hover:bg-gray-200 dark:@hover-bg-gray-700"
-      onClick={async () => {
-        try {
-          setLoading(true);
-
-          const contentGroup = await client.contentGroups.create.mutate({
-            name: ""
-          });
-
-          setRenaming(contentGroup.id);
-          setLoading(false);
-          notify({ text: "New content group created", type: "success" });
-        } catch (error) {
-          setLoading(false);
-          notify({ text: "Couldn't create new content group", type: "error" });
-        }
-      }}
-    >
-      <div class="flex flex-1 justify-start items-center overflow-hidden rounded-lg cursor-pointer h-7 group draggable">
-        <IconButton
-          class={clsx("transform transition m-0 p-0 mx-0.25")}
-          path={mdiChevronRight}
-          variant="text"
-          hover={false}
-          badge
-        />
-        <div class="flex flex-1" onClick={() => {}}>
-          <div class="h-6 w-6 mr-1">
-            <Show
-              when={loading()}
-              fallback={
-                <Icon class={clsx("text-gray-500 dark:text-gray-400")} path={mdiFolderPlus} />
-              }
-            >
-              <Loader class="h-full fill-current p-0.5" />
-            </Show>
-          </div>
-          <span
-            class={clsx(
-              "!text-base inline-flex text-start flex-1 overflow-x-auto content-group-name scrollbar-hidden select-none clamp-1"
-            )}
-            title="New group"
-          >
-            New group
-          </span>
-        </div>
-      </div>
-    </button>
-  );
-};
 const TreeLevel: Component<{
   parentId?: string;
 }> = (props) => {