Refactor sidebar components

src/lib/components/layouts/DocumentLayout.svelte

@@ -12,7 +12,7 @@ Assumes it's a child of a ViewerContext
   import { _ } from "svelte-i18n";
 
   import Actions from "../documents/Actions.svelte";
-  import AddOns from "$lib/components/common/AddOns.svelte";
+  import AddOns from "@/lib/components/sidebar/AddOns.svelte";
   import Avatar from "../accounts/Avatar.svelte";
   import Data from "../documents/Data.svelte";
   import DocumentHeader from "../documents/Header.svelte";

src/lib/components/layouts/Project.svelte

@@ -9,7 +9,7 @@
     Project,
     ProjectUser,
   } from "$lib/api/types";
-  import AddOns from "$lib/components/common/AddOns.svelte";
+  import AddOns from "@/lib/components/sidebar/AddOns.svelte";
   import Collaborators from "$lib/components/projects/Collaborators.svelte";
   import ProjectActions from "$lib/components/projects/ProjectActions.svelte";
   import ProjectHeader from "$lib/components/projects/ProjectHeader.svelte";

src/lib/components/layouts/stories/AppLayout.stories.svelte

@@ -6,12 +6,12 @@
 
   import DocumentBrowser from "../DocumentBrowser.svelte";
   import SidebarLayout from "../SidebarLayout.svelte";
-  import Documents from "@/routes/(app)/documents/sidebar/Documents.svelte";
-  import Projects from "@/routes/(app)/documents/sidebar/Projects.svelte";
+  import Documents from "@/lib/components/sidebar/Documents.svelte";
+  import Projects from "@/lib/components/sidebar/Projects.svelte";
   import Button from "../../common/Button.svelte";
   import { PlusCircle16 } from "svelte-octicons";
   import BulkActions from "$lib/components/documents/BulkActions.svelte";
-  import AddOns from "$lib/components/common/AddOns.svelte";
+  import AddOns from "@/lib/components/sidebar/AddOns.svelte";
 
   import { documentsList } from "@/test/fixtures/documents";
   import { addons } from "@/test/handlers/addons";

src/lib/components/layouts/stories/SidebarLayout.stories.svelte

@@ -6,12 +6,11 @@
 
   import SidebarLayout from "../SidebarLayout.svelte";
   import DocumentBrowser from "../DocumentBrowser.svelte";
+  import AddOns from "@/lib/components/sidebar/AddOns.svelte";
   import Button from "$lib/components/common/Button.svelte";
-
   import BulkActions from "$lib/components/documents/BulkActions.svelte";
-  import AddOns from "@/lib/components/common/AddOns.svelte";
-  import Documents from "@/routes/(app)/documents/sidebar/Documents.svelte";
-  import Projects from "@/routes/(app)/documents/sidebar/Projects.svelte";
+  import Documents from "$lib/components/sidebar/Documents.svelte";
+  import Projects from "$lib/components/sidebar/Projects.svelte";
 
   import { documentsList } from "@/test/fixtures/documents";
   import { activeAddons } from "@/test/fixtures/addons";

src/lib/components/projects/ProjectActions.svelte

@@ -48,20 +48,9 @@
   function hide() {
     show = null;
   }
-
-  function onUploadClick() {
-    $uploadToProject = project;
-    goto("/upload/");
-  }
 </script>
 
 <div class="actions wideGap">
-  {#if isSignedIn($me) && canUploadFiles($me) && project.edit_access}
-    <Button full mode="primary" on:click={onUploadClick}>
-      <PlusCircle16 />{$_("sidebar.uploadToProject")}
-    </Button>
-  {/if}
-
   {#if project.edit_access || project.add_remove_access}
     <!-- Admin & Editor Actions -->
     <div class="actions">
@@ -86,10 +75,6 @@
     <Button ghost on:click={() => (show = "share")}>
       <Share16 />{$_("sidebar.shareEmbed")}
     </Button>
-
-    <Button ghost href={projectSearchUrl(project)}>
-      <Search16 />{$_("projects.viewInSearch")}
-    </Button>
   </div>
 </div>
 

src/lib/components/common/AddOns.svelte → src/lib/components/sidebar/AddOns.svelte

@@ -19,7 +19,7 @@
   import SidebarGroup from "$lib/components/sidebar/SidebarGroup.svelte";
   import Pin from "$lib/components/common/Pin.svelte";
   import Tooltip from "$lib/components/common/Tooltip.svelte";
-  import Error from "./Error.svelte";
+  import Error from "../common/Error.svelte";
 
   export let pinnedAddOns: Promise<APIResponse<Page<AddOnListItem>>>;
   export let query: string = "";

src/routes/(app)/documents/sidebar/Documents.svelte → src/lib/components/sidebar/Documents.svelte

@@ -5,6 +5,7 @@
   import { getContext } from "svelte";
   import { _ } from "svelte-i18n";
   import {
+    Search16,
     File16,
     Globe16,
     Infinity16,
@@ -21,6 +22,9 @@
   import { slugify } from "$lib/utils/slugify";
   import { userDocs } from "$lib/utils/search";
   import { getCurrentUser } from "@/lib/utils/permissions";
+  import SidebarGroup from "@/lib/components/sidebar/SidebarGroup.svelte";
+  import { size } from "lodash-es";
+  import Button from "@/lib/components/common/Button.svelte";
 
   const me = getCurrentUser();
   const org: Writable<Org> = getContext("org");
@@ -43,7 +47,14 @@
   }
 </script>
 
-<Flex direction="column">
+<SidebarGroup name="documents">
+  <SidebarItem slot="title">
+    <File16 slot="start">Documents</File16>
+    <Button ghost mode="primary" size="small" href="/documents">
+      <Search16 height="12" width="12" />
+      Explore
+    </Button>
+  </SidebarItem>
   <SidebarItem hover href={searchUrl("")} active={query === ""}>
     <Infinity16 slot="start" />
     {$_("documents.allDocuments", {
@@ -86,4 +97,4 @@
       </SidebarItem>
     {/if}
   </SignedIn>
-</Flex>
+</SidebarGroup>

src/routes/(app)/documents/+page.svelte

@@ -3,14 +3,14 @@
   import { _ } from "svelte-i18n";
   import { PlusCircle16 } from "svelte-octicons";
 
-  import AddOns from "$lib/components/common/AddOns.svelte";
+  import AddOns from "@/lib/components/sidebar/AddOns.svelte";
   import Button from "$lib/components/common/Button.svelte";
   import SignedIn from "$lib/components/common/SignedIn.svelte";
   import SidebarLayout from "$lib/components/layouts/SidebarLayout.svelte";
 
   import BulkActions from "@/lib/components/documents/BulkActions.svelte";
-  import Documents from "../documents/sidebar/Documents.svelte";
-  import Projects from "../documents/sidebar/Projects.svelte";
+  import Documents from "$lib/components/sidebar/Documents.svelte";
+  import Projects from "$lib/components/sidebar/Projects.svelte";
 
   import DocumentBrowser from "$lib/components/layouts/DocumentBrowser.svelte";
   import GuidedTour from "$lib/components/onboarding/GuidedTour.svelte";

src/routes/(app)/upload/+page.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
-  import { page } from "$app/stores";
   import { _ } from "svelte-i18n";
 
-  import SidebarLayout from "@/lib/components/layouts/SidebarLayout.svelte";
-  import SignedIn from "@/lib/components/common/SignedIn.svelte";
-
-  import Documents from "../documents/sidebar/Documents.svelte";
-  import Projects from "../documents/sidebar/Projects.svelte";
-
+  import SignedIn from "$lib/components/common/SignedIn.svelte";
   import DocumentUpload from "$lib/components/forms/DocumentUpload.svelte";
+  import SidebarLayout from "$lib/components/layouts/SidebarLayout.svelte";
+  import Documents from "$lib/components/sidebar/Documents.svelte";
+  import Projects from "$lib/components/sidebar/Projects.svelte";
 
   export let data;