wip: Navigation improvements

vriteio · Feb 2, 2024 · f81ff27 · f81ff27
1 parent 2108ce2
commit f81ff27
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 225 deletions.
diff --git a/apps/web/src/context/command-palette/index.tsx b/apps/web/src/context/command-palette/index.tsx
@@ -143,6 +143,7 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
 
         content += partOfContent;
         setAnswer(marked.parse(content, { gfm: true, headerIds: false, mangle: false }));
+        scrollableContainerRef()?.scrollTo(0, scrollableContainerRef()?.scrollHeight || 0);
       },
       onclose() {
         setLoading(false);
@@ -540,10 +541,7 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
                     )}
                     color="base"
                   >
-                    <div
-                      class="flex flex-col w-full prose whitespace-pre-wrap"
-                      innerHTML={answer()}
-                    />
+                    <div class="flex flex-col w-full prose prose-editor" innerHTML={answer()} />
                     <Show when={!loading()}>
                       <IconButton
                         color="contrast"

diff --git a/apps/web/src/context/content/index.tsx b/apps/web/src/context/content/index.tsx
@@ -3,8 +3,8 @@ import { ContentLoader, createContentLoader } from "./loader";
 import { createContext, createResource, ParentComponent, useContext } from "solid-js";
 import { createEffect, on, onCleanup } from "solid-js";
 import { createStore, reconcile } from "solid-js/store";
-import { useLocation, useNavigate, useParams } from "@solidjs/router";
-import { useClient, useLocalStorage, App, useAuthenticatedUserData } from "#context";
+import { useParams } from "@solidjs/router";
+import { useClient, useLocalStorage, App } from "#context";
 
 interface ContentLevel {
   groups: string[];
@@ -37,8 +37,6 @@ const ContentDataContext = createContext<ContentDataContextData>();
 const ContentDataProvider: ParentComponent = (props) => {
   const client = useClient();
   const params = useParams();
-  const location = useLocation();
-  const navigate = useNavigate();
   const { storage, setStorage } = useLocalStorage();
   const [variants, setVariants] = createStore<Record<string, App.Variant | undefined>>({});
   const [contentLevels, setContentLevels] = createStore<Record<string, ContentLevel | undefined>>(

diff --git a/apps/web/src/context/content/loader.ts b/apps/web/src/context/content/loader.ts
@@ -17,7 +17,13 @@ interface ContentActionsInput {
   setContentLevels: SetStoreFunction<Record<string, ContentLevel | undefined>>;
 }
 interface ContentLoader {
-  loadContentLevel(contentGroupId?: string, preload?: boolean): Promise<void>;
+  loadContentLevel(
+    contentGroupId?: string,
+    options?: {
+      preload?: boolean;
+      loadMore?: boolean;
+    }
+  ): Promise<void>;
 }
 
 const createContentLoader = ({
@@ -29,17 +35,21 @@ const createContentLoader = ({
   setContentLevels
 }: ContentActionsInput): ContentLoader => {
   const client = useClient();
-  const loadContentLevel: ContentLoader["loadContentLevel"] = async (contentGroupId, preload) => {
+  const loadContentLevel: ContentLoader["loadContentLevel"] = async (
+    contentGroupId,
+    { preload, loadMore } = {}
+  ) => {
     const existingLevel = contentLevels[contentGroupId || ""];
 
-    if (existingLevel && existingLevel.moreToLoad) {
+    if (existingLevel && existingLevel.moreToLoad && loadMore !== false) {
       if (contentGroupId) {
         setContentLevels(contentGroupId, "loading", true);
 
         const level = {
           groups: [...existingLevel.groups],
           pieces: [...existingLevel.pieces],
-          moreToLoad: false
+          moreToLoad: false,
+          loading: false
         };
         const lastPieceId = existingLevel.pieces.at(-1);
         const lastPiece = contentPieces[lastPieceId || ""];

diff --git a/apps/web/src/context/content/opened-piece.tsx b/apps/web/src/context/content/opened-piece.tsx
diff --git a/apps/web/src/layout/bottom-menu.tsx b/apps/web/src/layout/bottom-menu.tsx
@@ -90,7 +90,7 @@ const BottomMenu: Component = () => {
   const { variants, setActiveVariantId, activeVariantId } = useContentData();
   const { workspace } = useAuthenticatedUserData();
   const { open, registerCommand } = useCommandPalette();
-  const VariantCommand: Component<{ selected: boolean; variant: App.Variant }> = (props) => {
+  const VariantCommand: Component<{ selected?: boolean; variant: App.Variant }> = (props) => {
     return (
       <Card
         class={clsx(
@@ -113,7 +113,7 @@ const BottomMenu: Component = () => {
       </Card>
     );
   };
-  const selectVariantCommand = {
+  const selectVariantCommand: Command = {
     category: "workspace",
     icon: mdiCards,
     name: "Select Variant",
@@ -130,7 +130,7 @@ const BottomMenu: Component = () => {
               action: () => {
                 setActiveVariantId(variant.id);
               }
-            };
+            } as Command;
           })
           .filter(Boolean),
         {
@@ -151,7 +151,7 @@ const BottomMenu: Component = () => {
   registerCommand(selectVariantCommand);
 
   return (
-    <div class="w-full flex m-0 bg-gray-50 dark:bg-gray-900 h-6 border-t-2 border-gray-200 dark:border-gray-700 box-content z-20">
+    <div class="w-full flex m-0 bg-gray-50 dark:bg-gray-900 h-6 box-content z-20">
       <Show when={workspace()}>
         <IconButton
           path={mdiHexagonSlice6}

diff --git a/apps/web/src/layout/secured-layout.tsx b/apps/web/src/layout/secured-layout.tsx
@@ -34,7 +34,7 @@ const SecuredLayout: ParentComponent = (props) => {
           <CommandPaletteProvider>
             <ContentDataProvider>
               <div class="flex flex-col h-full w-full">
-                <div class="flex-1 flex flex-col-reverse md:flex-row h-[calc(100%-1.5rem)]">
+                <div class="flex-1 flex flex-col-reverse md:flex-row h-[calc(100%-1.5rem)] border-b-2 border-gray-200 dark:border-gray-700 ">
                   <Show
                     when={!storage().zenMode}
                     fallback={

diff --git a/apps/web/src/styles/styles.scss b/apps/web/src/styles/styles.scss
@@ -424,6 +424,9 @@ kbd {
   &::-webkit-scrollbar-thumb {
     @apply rounded-xl bg-gray-200 dark:bg-gray-900 border-6 border-solid border-gray-100 dark:border-gray-800;
   }
+  &::-webkit-scrollbar-corner {
+    @apply bg-gray-100 dark:bg-gray-800;
+  }
 }
 
 .narrow-prose {

diff --git a/apps/web/src/views/dashboard/kanban/content-group-column.tsx b/apps/web/src/views/dashboard/kanban/content-group-column.tsx
@@ -170,7 +170,7 @@ const ContentGroupColumn: Component<ContentGroupColumnProps> = (props) => {
       scrollShadowController.processScrollState();
     })
   );
-  contentLoader.loadContentLevel(props.contentGroup.id);
+  contentLoader.loadContentLevel(props.contentGroup.id, { loadMore: false });
 
   return (
     <div

diff --git a/apps/web/src/views/dashboard/table/content-piece-group.tsx b/apps/web/src/views/dashboard/table/content-piece-group.tsx
@@ -13,7 +13,7 @@ import {
   mdiTrashCan
 } from "@mdi/js";
 import clsx from "clsx";
-import { Component, For, Show, createMemo, createSignal } from "solid-js";
+import { Component, For, Show, createEffect, createMemo, createSignal } from "solid-js";
 import {
   IconButton,
   Dropdown,
@@ -202,7 +202,7 @@ const ContentPieceGroup: Component<ContentPieceGroupProps> = (props) => {
     return activeDraggableContentPieceId() ? "unset" : "0px";
   };
 
-  contentLoader.loadContentLevel(props.contentGroup.id);
+  contentLoader.loadContentLevel(props.contentGroup.id, { loadMore: false });
 
   return (
     <div