feat: Explorer panel (WIP)

apps/web/src/layout/side-panel.tsx

@@ -9,6 +9,7 @@ import { SettingsView } from "#views/settings";
 import { ExtensionsView } from "#views/extensions";
 import { GettingStartedView } from "#views/getting-started";
 import { GitView } from "#views/git";
+import { ExplorerView } from "#views/explorer";
 
 const sidePanelViews: Record<string, Component<Record<string, any>>> = {
   contentPiece: ContentPieceView,
@@ -31,7 +32,8 @@ const sidePanelViews: Record<string, Component<Record<string, any>>> = {
       </Show>
     );
   },
-  default: GettingStartedView
+  default: GettingStartedView,
+  explorer: ExplorerView
 };
 const SidePanel: Component = () => {
   const { storage, setStorage } = useLocalStorage();

apps/web/src/layout/sidebar-menu.tsx

@@ -9,7 +9,8 @@ import {
   mdiHelpCircle,
   mdiPuzzle,
   mdiMicrosoftXboxControllerMenu,
-  mdiGit
+  mdiGit,
+  mdiFileMultiple
 } from "@mdi/js";
 import { Accessor, Component, For, Show, createEffect, createSignal, on } from "solid-js";
 import { Link, useLocation, useNavigate } from "@solidjs/router";
@@ -91,6 +92,15 @@ const useMenuItems = (): Accessor<Array<MenuItem | null>> => {
         }
       },
       null,
+      {
+        icon: mdiFileMultiple,
+        label: "Explorer",
+        inMenu: true,
+        active: () => storage().sidePanelView === "explorer",
+        onClick: () => {
+          setSidePanelView("explorer");
+        }
+      },
       hostConfig.githubApp && {
         icon: mdiGit,
         label: "Source control",

apps/web/src/layout/toolbar/index.tsx

@@ -1,5 +1,4 @@
 import { UserList } from "./user-list";
-import { Breadcrumb } from "./breadcrumb";
 import {
   mdiAppleKeyboardCommand,
   mdiBookOpenBlankVariant,
@@ -313,22 +312,11 @@ const toolbarViews: Record<string, Component<Record<string, any>>> = {
     const { storage, setStorage } = useLocalStorage();
     const { setOpened, registerCommand } = useCommandPalette();
     const [provider] = createSharedSignal("provider");
-    const [activeDraggableGroup] = createSharedSignal("activeDraggableGroup");
-    const [activeDraggablePiece] = createSharedSignal("activeDraggablePiece");
     const [viewSelectorOpened, setViewSelectorOpened] = createSignal(false);
     const view = (): string => storage().dashboardView || "kanban";
     const setView = (view: string): void => {
       setStorage((storage) => ({ ...storage, dashboardView: view }));
     };
-    const ancestor = (): App.ContentGroup | null => {
-      return storage().dashboardViewAncestor || null;
-    };
-    const setAncestor = (ancestor: App.ContentGroup | null): void => {
-      setStorage((storage) => ({
-        ...storage,
-        dashboardViewAncestor: ancestor || undefined
-      }));
-    };
 
     createEffect(() => {
       if (view() === "list") {
@@ -391,12 +379,6 @@ const toolbarViews: Record<string, Component<Record<string, any>>> = {
             />
           </div>
         </Dropdown>
-        <Breadcrumb
-          ancestor={ancestor()}
-          activeDraggableGroup={activeDraggableGroup()}
-          activeDraggablePiece={activeDraggablePiece()}
-          setAncestor={setAncestor}
-        />
         <div class="flex-1" />
         <Show when={provider()}>
           <UserList provider={provider()!} />

apps/web/src/views/content-piece/index.tsx

@@ -264,14 +264,6 @@ const ContentPieceView: Component = () => {
             activeSection={activeSection()}
             setActiveSection={setActiveSection}
           />
-          <ContentPieceDescription
-            descriptionExists={typeof contentPiece()?.description === "string"}
-            initialDescription={descriptionInitialValue()}
-            editable={editable()}
-            setDescription={(description) => {
-              handleChange({ description });
-            }}
-          />
         </div>
       </Card>
     </Show>

apps/web/src/views/content-piece/metadata.tsx

@@ -1,8 +1,10 @@
 import { DetailsSection, CustomDataSection, ExtensionsSection, VariantsSection } from "./sections";
+import { ContentPieceDescription } from "./description";
 import { mdiMenu } from "@mdi/js";
-import { Component, createSignal, For, Switch, Match } from "solid-js";
+import { Component, createSignal, For, Switch, Match, onMount } from "solid-js";
 import { App, useHostConfig } from "#context";
 import { Dropdown, IconButton, Heading } from "#components/primitives";
+import { createRef } from "#lib/utils";
 
 interface ContentPieceMetadataSection {
   label: string;
@@ -26,6 +28,21 @@ interface ContentPieceMetadataProps {
 const ContentPieceMetadata: Component<ContentPieceMetadataProps> = (props) => {
   const hostConfig = useHostConfig();
   const [menuOpened, setMenuOpened] = createSignal(false);
+  const [scrollableSectionRef, setScrollableSectionRef] = createRef<HTMLDivElement | null>(null);
+
+  onMount(() => {
+    const scrollableSection = scrollableSectionRef();
+
+    if (!scrollableSection) return;
+
+    scrollableSection.addEventListener("scroll", (event) => {
+      const sectionIndex = Math.round(
+        (scrollableSection.scrollLeft / scrollableSection.scrollWidth) * 4
+      );
+
+      props.setActiveSection(props.sections[sectionIndex]);
+    });
+  });
 
   return (
     <>
@@ -58,6 +75,11 @@ const ContentPieceMetadata: Component<ContentPieceMetadataProps> = (props) => {
                   path={section.icon}
                   onClick={() => {
                     props.setActiveSection(section);
+                    scrollableSectionRef()?.scrollTo({
+                      behavior: "smooth",
+                      left:
+                        scrollableSectionRef()!.scrollWidth * (props.sections.indexOf(section) / 4)
+                    });
                     setMenuOpened(false);
                   }}
                 ></IconButton>
@@ -66,8 +88,11 @@ const ContentPieceMetadata: Component<ContentPieceMetadataProps> = (props) => {
           </For>
         </div>
       </Dropdown>
-      <Switch>
-        <Match when={props.activeSection.id === "details"}>
+      <div
+        class="flex w-full gap-1 overflow-auto scrollbar-hidden snap-mandatory snap-x"
+        ref={setScrollableSectionRef}
+      >
+        <div class="min-w-full snap-center">
           <DetailsSection
             filename={props.contentPiece.filename || ""}
             slug={props.contentPiece.slug}
@@ -95,17 +120,25 @@ const ContentPieceMetadata: Component<ContentPieceMetadataProps> = (props) => {
               props.setContentPiece({ members });
             }}
           />
-        </Match>
-        <Match when={props.activeSection.id === "custom-data"}>
+          <ContentPieceDescription
+            descriptionExists={typeof props.contentPiece?.description === "string"}
+            initialDescription={props.contentPiece.description || ""}
+            editable={props.editable}
+            setDescription={(description) => {
+              props.setContentPiece({ description });
+            }}
+          />
+        </div>
+        <div class="min-w-full snap-center">
           <CustomDataSection
             editable={props.editable}
             customData={props.contentPiece.customData}
             setCustomData={(customData) => {
               props.setContentPiece({ customData });
             }}
           />
-        </Match>
-        <Match when={props.activeSection.id === "extensions" && hostConfig.extensions}>
+        </div>
+        <div class="min-w-full snap-center">
           <ExtensionsSection
             contentPiece={props.contentPiece}
             setCustomData={(customData) => {
@@ -114,14 +147,14 @@ const ContentPieceMetadata: Component<ContentPieceMetadataProps> = (props) => {
               });
             }}
           />
-        </Match>
-        <Match when={props.activeSection.id === "variants"}>
+        </div>
+        <div class="min-w-full snap-center">
           <VariantsSection
             activeVariant={props.activeVariant}
             setActiveVariant={props.setActiveVariant}
           />
-        </Match>
-      </Switch>
+        </div>
+      </div>
     </>
   );
 };

apps/web/src/views/dashboard/views/kanban/content-group-column.tsx

@@ -6,8 +6,6 @@ import {
   mdiFilePlus,
   mdiFileLock,
   mdiFileLockOpen,
-  mdiFolder,
-  mdiFolderLock,
   mdiFolderOpen,
   mdiFolderPlus,
   mdiIdentifier,
@@ -249,7 +247,7 @@ const ContentGroupColumn: Component<ContentGroupColumnProps> = (props) => {
             }}
           >
             <div
-              class="flex flex-1 justify-center items-center overflow-hidden rounded-lg"
+              class="flex flex-1 justify-center items-center overflow-hidden"
               data-content-group-id={props.contentGroup.id}
               onDragOver={(event) => event.preventDefault()}
               onDragEnter={(event) => {
@@ -297,32 +295,6 @@ const ContentGroupColumn: Component<ContentGroupColumnProps> = (props) => {
                 }
               }}
             >
-              <div class="h-8 w-8 relative group mr-1">
-                <IconButton
-                  path={props.contentGroup.locked ? mdiFolderLock : mdiFolder}
-                  variant="text"
-                  class={clsx(
-                    "m-0 absolute top-0 left-0 @hover:group-hover:opacity-0",
-                    highlight() && "!opacity-0"
-                  )}
-                  hover={false}
-                  onClick={() => {
-                    setAncestor(props.contentGroup);
-                  }}
-                />
-                <IconButton
-                  path={mdiFolderOpen}
-                  variant="text"
-                  class={clsx(
-                    "m-0 absolute top-0 left-0 opacity-0 @hover:group-hover:opacity-100",
-                    highlight() && "!opacity-100"
-                  )}
-                  color={highlight() ? "primary" : "base"}
-                  onClick={() => {
-                    setAncestor(props.contentGroup);
-                  }}
-                />
-              </div>
               <MiniEditor
                 class={clsx(
                   "inline-flex flex-1 overflow-x-auto content-group-name scrollbar-hidden hover:cursor-text whitespace-nowrap-children",