Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add context pane to right-side navigation area #172

Merged
merged 5 commits into from
Oct 11, 2024
Merged

Add context pane to right-side navigation area #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dac4f1e
implement context pane and rework naming for navigation components
Southclaws Oct 11, 2024
3a85bec
fix member ident collapsing avatar
Southclaws Oct 11, 2024
b4ea6e8
fix accidental style rename
Southclaws Oct 11, 2024
84ecf72
fix member ident overflow causing scroll gutter to appear
Southclaws Oct 11, 2024
7e872c4
ensure context pane is hidden on all sizes except large
Southclaws Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions web/panda.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -239,6 +240,7 @@ export default defineConfig({
},
slotRecipes: {
popover: popover,
table: table,
treeView: treeView,
},
semanticTokens,
Expand Down
5 changes: 5 additions & 0 deletions web/src/app/(dashboard)/@contextpane/[...catchAll]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { RootContextPane } from "@/screens/site/RootContextPane";

export default async function Page() {
return <RootContextPane />;
}
5 changes: 5 additions & 0 deletions web/src/app/(dashboard)/@contextpane/default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { RootContextPane } from "@/screens/site/RootContextPane";

export default async function Default() {
return <RootContextPane />;
}
5 changes: 5 additions & 0 deletions web/src/app/(dashboard)/@contextpane/t/[slug]/default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { RootContextPane } from "@/screens/site/RootContextPane";

export default async function Default() {
return <RootContextPane />;
}
15 changes: 15 additions & 0 deletions web/src/app/(dashboard)/@contextpane/t/[slug]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
5 changes: 5 additions & 0 deletions web/src/app/(dashboard)/@contextpane/t/default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { RootContextPane } from "@/screens/site/RootContextPane";

export default async function Default() {
return <RootContextPane />;
}
7 changes: 5 additions & 2 deletions web/src/app/(dashboard)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }>) {
Comment on lines +5 to +8
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Function signature updated correctly

The Layout function signature has been updated to include the new contextpane prop. The use of PropsWithChildren generic type with the additional prop type is correct and follows TypeScript best practices.

However, there's a minor issue:

The React import is missing, which is needed for the React.ReactNode type. Add the following import at the top of the file:

+import React from "react";
import { PropsWithChildren } from "react";
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
export default async function Layout({
children,
contextpane,
}: PropsWithChildren<{ contextpane: React.ReactNode }>) {
import React from "react";
import { PropsWithChildren } from "react";
export default async function Layout({
children,
contextpane,
}: PropsWithChildren<{ contextpane: React.ReactNode }>) {

return <Default contextpane={contextpane}>{children}</Default>;
}
3 changes: 3 additions & 0 deletions web/src/app/default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default async function Page() {
return null;
}
2 changes: 1 addition & 1 deletion web/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
9 changes: 2 additions & 7 deletions web/src/components/member/MemberBadge/MemberIdent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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"
Expand Down
24 changes: 24 additions & 0 deletions web/src/components/site/Navigation/ContextPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
17 changes: 9 additions & 8 deletions ...rc/components/site/Navigation/Top/Top.tsx → ...nts/site/Navigation/DesktopCommandBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -35,7 +36,7 @@ export async function Top() {
</HStack>

<HStack className={styles["topbar-right"]}>
<Toolbar session={session} />
<MemberActions session={session} />
</HStack>
</HStack>
);
Expand Down
6 changes: 3 additions & 3 deletions ...ts/site/Navigation/components/Toolbar.tsx → ...ponents/site/Navigation/MemberActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
6 changes: 3 additions & 3 deletions ...nents/site/Navigation/Navpill/Navpill.tsx → ...ion/MobileCommandBar/MobileCommandBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions ...nts/site/Navigation/Navpill/useNavpill.ts → ...n/MobileCommandBar/useMobileCommandBar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
29 changes: 18 additions & 11 deletions web/src/components/site/Navigation/Navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion .../components/site/Navigation/Left/Left.tsx → ...igation/NavigationPane/NavigationPane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
0 ...site/Navigation/Sidebar/SidebarToggle.tsx → ...vigation/NavigationPane/SidebarToggle.tsx
View file
Open in desktop
File renamed without changes.
0 ...ponents/site/Navigation/Sidebar/server.ts → .../site/Navigation/NavigationPane/server.ts
View file
Open in desktop
File renamed without changes.
0 ...ponents/site/Navigation/Sidebar/shared.ts → .../site/Navigation/NavigationPane/shared.ts
View file
Open in desktop
File renamed without changes.
0 ...nts/site/Navigation/Sidebar/useSidebar.ts → ...e/Navigation/NavigationPane/useSidebar.ts
View file
Open in desktop
File renamed without changes.
24 changes: 0 additions & 24 deletions web/src/components/site/Navigation/Right/Right.tsx
View file
Open in desktop

This file was deleted.

0 ...ents/site/Navigation/components/Title.tsx → web/src/components/site/Navigation/Title.tsx
View file
Open in desktop
File renamed without changes.
Loading
Loading