Merge pull request #172 from Southclaws/right-bar

Add context pane to right-side navigation area
Southclaws · Oct 11, 2024 · 3e26860 · 3e26860
2 parents 216eea1 + 7e872c4
commit 3e26860
Show file tree

Hide file tree

Showing 34 changed files with 527 additions and 117 deletions.
diff --git a/web/panda.config.ts b/web/panda.config.ts
@@ -13,6 +13,7 @@ import { headingInput } from "@/recipes/heading-input";
 import { input } from "@/recipes/input";
 import { popover } from "@/recipes/popover";
 import { richCard } from "@/recipes/rich-card";
+import { table } from "@/recipes/table";
 import { treeView } from "@/recipes/tree-view";
 import { typographyHeading } from "@/recipes/typography-heading";
 
@@ -239,6 +240,7 @@ export default defineConfig({
       },
       slotRecipes: {
         popover: popover,
+        table: table,
         treeView: treeView,
       },
       semanticTokens,

diff --git a/web/src/app/(dashboard)/@contextpane/[...catchAll]/page.tsx b/web/src/app/(dashboard)/@contextpane/[...catchAll]/page.tsx
@@ -0,0 +1,5 @@
+import { RootContextPane } from "@/screens/site/RootContextPane";
+
+export default async function Page() {
+  return <RootContextPane />;
+}
diff --git a/web/src/app/(dashboard)/@contextpane/default.tsx b/web/src/app/(dashboard)/@contextpane/default.tsx
@@ -0,0 +1,5 @@
+import { RootContextPane } from "@/screens/site/RootContextPane";
+
+export default async function Default() {
+  return <RootContextPane />;
+}
diff --git a/web/src/app/(dashboard)/@contextpane/t/[slug]/default.tsx b/web/src/app/(dashboard)/@contextpane/t/[slug]/default.tsx
@@ -0,0 +1,5 @@
+import { RootContextPane } from "@/screens/site/RootContextPane";
+
+export default async function Default() {
+  return <RootContextPane />;
+}
diff --git a/web/src/app/(dashboard)/@contextpane/t/[slug]/page.tsx b/web/src/app/(dashboard)/@contextpane/t/[slug]/page.tsx
@@ -0,0 +1,15 @@
+import { threadGet } from "@/api/openapi-server/threads";
+import { ThreadScreenContextPane } from "@/screens/thread/ThreadScreen/ThreadScreenContextPane";
+
+export default async function Page(props: { params: { slug: string } }) {
+  const { slug } = props.params;
+
+  try {
+    const { data } = await threadGet(slug);
+
+    return <ThreadScreenContextPane slug={slug} thread={data} />;
+  } catch (e) {
+    console.error(e);
+    return null;
+  }
+}
diff --git a/web/src/app/(dashboard)/@contextpane/t/default.tsx b/web/src/app/(dashboard)/@contextpane/t/default.tsx
@@ -0,0 +1,5 @@
+import { RootContextPane } from "@/screens/site/RootContextPane";
+
+export default async function Default() {
+  return <RootContextPane />;
+}
diff --git a/web/src/app/(dashboard)/layout.tsx b/web/src/app/(dashboard)/layout.tsx
@@ -2,6 +2,9 @@ import { PropsWithChildren } from "react";
 
 import { Default } from "src/layouts/Default";
 
-export default async function Layout({ children }: PropsWithChildren) {
-  return <Default>{children}</Default>;
+export default async function Layout({
+  children,
+  contextpane,
+}: PropsWithChildren<{ contextpane: React.ReactNode }>) {
+  return <Default contextpane={contextpane}>{children}</Default>;
 }
diff --git a/web/src/app/default.tsx b/web/src/app/default.tsx
@@ -0,0 +1,3 @@
+export default async function Page() {
+  return null;
+}
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
@@ -13,7 +13,7 @@ import { Providers } from "./providers";
 
 export const dynamic = "force-dynamic";
 
-export default function RootLayout({ children }: PropsWithChildren) {
+export default async function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang="en">
       <head>

diff --git a/web/src/components/member/MemberBadge/MemberIdent.tsx b/web/src/components/member/MemberBadge/MemberIdent.tsx
@@ -21,12 +21,7 @@ export function MemberIdent({
   roles = "hidden",
 }: Props) {
   return (
-    <HStack
-      minW="0"
-      w="full"
-      overflowY="hidden"
-      gap={size === "lg" ? "2" : "1"}
-    >
+    <HStack minW="0" w="full" overflow="hidden" gap={size === "lg" ? "2" : "1"}>
       {avatar === "visible" && <MemberAvatar profile={profile} size={size} />}
       <MemberName profile={profile} size={size} name={name} roles={roles} />
     </HStack>
@@ -47,7 +42,7 @@ export function MemberName({
             minW="0"
             fontSize={size === "lg" ? "md" : "sm"}
             fontWeight={size === "lg" ? "bold" : "medium"}
-            overflowX="hidden"
+            overflow="hidden"
             textWrap="nowrap"
             textOverflow="ellipsis"
             color="fg.default"

diff --git a/web/src/components/site/Navigation/ContextPane.tsx b/web/src/components/site/Navigation/ContextPane.tsx
@@ -0,0 +1,24 @@
+import React, { PropsWithChildren } from "react";
+
+import { Box, styled } from "@/styled-system/jsx";
+import { Floating } from "@/styled-system/patterns";
+
+export function ContextPane({ children }: PropsWithChildren) {
+  return (
+    <styled.nav
+      className={Floating()}
+      display="flex"
+      borderRadius="md"
+      flexDir="column"
+      gap="4"
+      width="full"
+      alignItems="start"
+      justifyContent="space-between"
+      overflowY="scroll"
+    >
+      <Box id="desktop-nav-right" w="full" height="full" p="2" pr="0">
+        <styled.aside w="full">{children}</styled.aside>
+      </Box>
+    </styled.nav>
+  );
+}
diff --git a/...rc/components/site/Navigation/Top/Top.tsx → ...nts/site/Navigation/DesktopCommandBar.tsx b/...rc/components/site/Navigation/Top/Top.tsx → ...nts/site/Navigation/DesktopCommandBar.tsx
@@ -4,14 +4,15 @@ import { HStack } from "@/styled-system/jsx";
 import { Floating } from "@/styled-system/patterns";
 import { getInfo } from "@/utils/info";
 
-import { Search } from "../Search/Search";
-import { SidebarToggle } from "../Sidebar/SidebarToggle";
-import { getServerSidebarState } from "../Sidebar/server";
-import { Title } from "../components/Title";
-import { Toolbar } from "../components/Toolbar";
-import styles from "../navigation.module.css";
+import styles from "./navigation.module.css";
 
-export async function Top() {
+import { MemberActions } from "./MemberActions";
+import { SidebarToggle } from "./NavigationPane/SidebarToggle";
+import { getServerSidebarState } from "./NavigationPane/server";
+import { Search } from "./Search/Search";
+import { Title } from "./Title";
+
+export async function DesktopCommandBar() {
   const { title } = await getInfo();
   const initialSidebarState = await getServerSidebarState();
 
@@ -35,7 +36,7 @@ export async function Top() {
       </HStack>
 
       <HStack className={styles["topbar-right"]}>
-        <Toolbar session={session} />
+        <MemberActions session={session} />
       </HStack>
     </HStack>
   );

diff --git a/...ts/site/Navigation/components/Toolbar.tsx → ...ponents/site/Navigation/MemberActions.tsx b/...ts/site/Navigation/components/Toolbar.tsx → ...ponents/site/Navigation/MemberActions.tsx
@@ -10,14 +10,14 @@ import { Account } from "@/api/openapi-schema";
 import { NotificationsMenu } from "@/components/notifications/NotificationsMenu";
 import { HStack } from "@/styled-system/jsx";
 
-import { AccountMenu } from "../AccountMenu/AccountMenu";
-import { ComposeAnchor } from "../Anchors/Compose";
+import { AccountMenu } from "./AccountMenu/AccountMenu";
+import { ComposeAnchor } from "./Anchors/Compose";
 
 type Props = {
   session: Account | undefined;
 };
 
-export function Toolbar({ session }: Props) {
+export function MemberActions({ session }: Props) {
   const account = useSession(session);
   return (
     <HStack w="full" gap="2" alignItems="center" justify="end" pr="1">

diff --git a/...nents/site/Navigation/Navpill/Navpill.tsx → ...ion/MobileCommandBar/MobileCommandBar.tsx b/...nents/site/Navigation/Navpill/Navpill.tsx → ...ion/MobileCommandBar/MobileCommandBar.tsx
@@ -21,10 +21,10 @@ import { SettingsAnchor } from "../Anchors/Settings";
 import { ContentNavigationList } from "../ContentNavigationList/ContentNavigationList";
 import { Search } from "../Search/Search";
 
-import { useNavpill } from "./useNavpill";
+import { useMobileCommandBar } from "./useMobileCommandBar";
 
-export function Navpill() {
-  const { isExpanded, onExpand, onClose, account } = useNavpill();
+export function MobileCommandBar() {
+  const { isExpanded, onExpand, onClose, account } = useMobileCommandBar();
   return (
     <Toolpill onClickOutside={onClose}>
       <Presence

diff --git a/...nts/site/Navigation/Navpill/useNavpill.ts → ...n/MobileCommandBar/useMobileCommandBar.ts b/...nts/site/Navigation/Navpill/useNavpill.ts → ...n/MobileCommandBar/useMobileCommandBar.ts
@@ -3,9 +3,9 @@
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 
-import { useSession } from "src/auth";
+import { useSession } from "@/auth";
 
-export function useNavpill() {
+export function useMobileCommandBar() {
   const pathname = usePathname();
   const [isExpanded, setExpanded] = useState(false);
   const account = useSession();

diff --git a/web/src/components/site/Navigation/Navigation.tsx b/web/src/components/site/Navigation/Navigation.tsx
@@ -1,17 +1,25 @@
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 
 import { Box } from "@/styled-system/jsx";
 
 import { Onboarding } from "../Onboarding/Onboarding";
 
 import styles from "./navigation.module.css";
 
-import { Left } from "./Left/Left";
-import { Navpill } from "./Navpill/Navpill";
-import { getServerSidebarState } from "./Sidebar/server";
-import { Top } from "./Top/Top";
+import { ContextPane } from "./ContextPane";
+import { DesktopCommandBar } from "./DesktopCommandBar";
+import { MobileCommandBar } from "./MobileCommandBar/MobileCommandBar";
+import { NavigationPane } from "./NavigationPane/NavigationPane";
+import { getServerSidebarState } from "./NavigationPane/server";
 
-export async function Navigation({ children }: PropsWithChildren) {
+type Props = {
+  contextpane: React.ReactNode;
+};
+
+export async function Navigation({
+  contextpane,
+  children,
+}: PropsWithChildren<Props>) {
   const showLeftBar = await getServerSidebarState();
 
   return (
@@ -40,19 +48,18 @@ export async function Navigation({ children }: PropsWithChildren) {
         className={styles["navgrid"]}
         pointerEvents="none"
       >
-        <Top />
+        <DesktopCommandBar />
 
         <Box className={styles["leftbar"]}>
-          <Left />
+          <NavigationPane />
         </Box>
 
         <Box className={styles["rightbar"]}>
-          {/* RIGHT BAR NOT DONE YET */}
-          {/* <Right /> */}
+          <ContextPane>{contextpane}</ContextPane>
         </Box>
 
         <Box className={styles["navpill"]}>
-          <Navpill />
+          <MobileCommandBar />
         </Box>
       </Box>
     </Box>

diff --git a/.../components/site/Navigation/Left/Left.tsx → ...igation/NavigationPane/NavigationPane.tsx b/.../components/site/Navigation/Left/Left.tsx → ...igation/NavigationPane/NavigationPane.tsx
@@ -5,7 +5,7 @@ import { Floating } from "@/styled-system/patterns";
 
 import { ContentNavigationList } from "../ContentNavigationList/ContentNavigationList";
 
-export function Left() {
+export function NavigationPane() {
   return (
     <styled.header
       display="flex"

diff --git a/...site/Navigation/Sidebar/SidebarToggle.tsx → ...vigation/NavigationPane/SidebarToggle.tsx b/...site/Navigation/Sidebar/SidebarToggle.tsx → ...vigation/NavigationPane/SidebarToggle.tsx
diff --git a/...ponents/site/Navigation/Sidebar/server.ts → .../site/Navigation/NavigationPane/server.ts b/...ponents/site/Navigation/Sidebar/server.ts → .../site/Navigation/NavigationPane/server.ts
diff --git a/...ponents/site/Navigation/Sidebar/shared.ts → .../site/Navigation/NavigationPane/shared.ts b/...ponents/site/Navigation/Sidebar/shared.ts → .../site/Navigation/NavigationPane/shared.ts
diff --git a/...nts/site/Navigation/Sidebar/useSidebar.ts → ...e/Navigation/NavigationPane/useSidebar.ts b/...nts/site/Navigation/Sidebar/useSidebar.ts → ...e/Navigation/NavigationPane/useSidebar.ts
diff --git a/web/src/components/site/Navigation/Right/Right.tsx b/web/src/components/site/Navigation/Right/Right.tsx
diff --git a/...ents/site/Navigation/components/Title.tsx → web/src/components/site/Navigation/Title.tsx b/...ents/site/Navigation/components/Title.tsx → web/src/components/site/Navigation/Title.tsx