From 23da55fb323ddf978b5c2bbd133d3cd1947fc77c Mon Sep 17 00:00:00 2001 From: bkellam Date: Thu, 16 Jan 2025 19:38:29 -0800 Subject: [PATCH 1/2] wip --- packages/web/src/app/components/meControl.tsx | 30 ++++++++++++++++ .../web/src/app/components/navigationMenu.tsx | 4 +-- .../web/src/app/components/profilePicture.tsx | 20 ----------- packages/web/src/app/layout.tsx | 36 +++++++++---------- packages/web/src/app/search/page.tsx | 13 ++++++- 5 files changed, 60 insertions(+), 43 deletions(-) create mode 100644 packages/web/src/app/components/meControl.tsx delete mode 100644 packages/web/src/app/components/profilePicture.tsx diff --git a/packages/web/src/app/components/meControl.tsx b/packages/web/src/app/components/meControl.tsx new file mode 100644 index 000000000..c9d543af2 --- /dev/null +++ b/packages/web/src/app/components/meControl.tsx @@ -0,0 +1,30 @@ +'use client'; +import { Avatar, AvatarImage } from "@/components/ui/avatar"; +import { DropdownMenu, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" +import { useSession } from "next-auth/react" +import { Settings } from "lucide-react"; +import { Button } from "@/components/ui/button"; + + +export const MeControl = () => { + const { data: session } = useSession(); + + return ( + + + {session?.user?.image ? ( + + + + ) : ( + + )} + + + ) + +} \ No newline at end of file diff --git a/packages/web/src/app/components/navigationMenu.tsx b/packages/web/src/app/components/navigationMenu.tsx index 53c8d9668..6871992cb 100644 --- a/packages/web/src/app/components/navigationMenu.tsx +++ b/packages/web/src/app/components/navigationMenu.tsx @@ -5,11 +5,11 @@ import { Separator } from "@/components/ui/separator"; import Image from "next/image"; import logoDark from "../../../public/sb_logo_dark_small.png"; import logoLight from "../../../public/sb_logo_light_small.png"; -import { ProfilePicture } from "./profilePicture"; import { signOut } from "@/auth"; import { SettingsDropdown } from "./settingsDropdown"; import { GitHubLogoIcon, DiscordLogoIcon } from "@radix-ui/react-icons"; import { redirect } from "next/navigation"; +import { MeControl } from "./meControl"; const SOURCEBOT_DISCORD_URL = "https://discord.gg/6Fhp27x7Pb"; const SOURCEBOT_GITHUB_URL = "https://github.com/sourcebot-dev/sourcebot"; @@ -102,7 +102,7 @@ export const NavigationMenu = async () => { Logout - + diff --git a/packages/web/src/app/components/profilePicture.tsx b/packages/web/src/app/components/profilePicture.tsx deleted file mode 100644 index 91b54d254..000000000 --- a/packages/web/src/app/components/profilePicture.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { auth } from "@/auth" -import { - Avatar, - AvatarFallback, - AvatarImage, - } from "@/components/ui/avatar" - -export const ProfilePicture = async () => { - const session = await auth() - - return ( - - - U - - ) - } \ No newline at end of file diff --git a/packages/web/src/app/layout.tsx b/packages/web/src/app/layout.tsx index 9a0f347a9..44beffe95 100644 --- a/packages/web/src/app/layout.tsx +++ b/packages/web/src/app/layout.tsx @@ -1,11 +1,11 @@ import type { Metadata } from "next"; import "./globals.css"; import { ThemeProvider } from "next-themes"; -import { Suspense } from "react"; import { QueryClientProvider } from "./queryClientProvider"; import { PHProvider } from "./posthogProvider"; import { Toaster } from "@/components/ui/toaster"; import { TooltipProvider } from "@/components/ui/tooltip"; +import { SessionProvider } from "next-auth/react"; export const metadata: Metadata = { title: "Sourcebot", @@ -25,26 +25,22 @@ export default function RootLayout({ > - - - - - {/* - @todo : ideally we don't wrap everything in a suspense boundary. - @see : https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout - */} - + + + + + {children} - - - - - + + + + + ); diff --git a/packages/web/src/app/search/page.tsx b/packages/web/src/app/search/page.tsx index 8e9350e57..f8095ebef 100644 --- a/packages/web/src/app/search/page.tsx +++ b/packages/web/src/app/search/page.tsx @@ -14,7 +14,7 @@ import { createPathWithQueryParams } from "@/lib/utils"; import { SymbolIcon } from "@radix-ui/react-icons"; import { useQuery } from "@tanstack/react-query"; import { useRouter } from "next/navigation"; -import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { ImperativePanelHandle } from "react-resizable-panels"; import { getRepos, search } from "../api/(client)/client"; import { TopBar } from "../components/topBar"; @@ -25,6 +25,17 @@ import { SearchResultsPanel } from "./components/searchResultsPanel"; const DEFAULT_MAX_MATCH_DISPLAY_COUNT = 10000; export default function SearchPage() { + // We need a suspense boundary here since we are accessing query params + // in the top level page. + // @see : https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout + return ( + + + + ) +} + +const SearchPageInternal = () => { const router = useRouter(); const searchQuery = useNonEmptyQueryParam(SearchQueryParams.query) ?? ""; const _maxMatchDisplayCount = parseInt(useNonEmptyQueryParam(SearchQueryParams.maxMatchDisplayCount) ?? `${DEFAULT_MAX_MATCH_DISPLAY_COUNT}`); From 4749af92833c88ebf93b2db5d20054ff90881f5c Mon Sep 17 00:00:00 2001 From: bkellam Date: Sun, 19 Jan 2025 12:50:07 -0800 Subject: [PATCH 2/2] Add profile picture to settings page --- packages/web/src/app/components/meControl.tsx | 30 ------------ .../web/src/app/components/navigationMenu.tsx | 17 ------- .../src/app/components/settingsDropdown.tsx | 46 +++++++++++++++---- 3 files changed, 37 insertions(+), 56 deletions(-) delete mode 100644 packages/web/src/app/components/meControl.tsx diff --git a/packages/web/src/app/components/meControl.tsx b/packages/web/src/app/components/meControl.tsx deleted file mode 100644 index c9d543af2..000000000 --- a/packages/web/src/app/components/meControl.tsx +++ /dev/null @@ -1,30 +0,0 @@ -'use client'; -import { Avatar, AvatarImage } from "@/components/ui/avatar"; -import { DropdownMenu, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" -import { useSession } from "next-auth/react" -import { Settings } from "lucide-react"; -import { Button } from "@/components/ui/button"; - - -export const MeControl = () => { - const { data: session } = useSession(); - - return ( - - - {session?.user?.image ? ( - - - - ) : ( - - )} - - - ) - -} \ No newline at end of file diff --git a/packages/web/src/app/components/navigationMenu.tsx b/packages/web/src/app/components/navigationMenu.tsx index 6871992cb..9aebba2ef 100644 --- a/packages/web/src/app/components/navigationMenu.tsx +++ b/packages/web/src/app/components/navigationMenu.tsx @@ -5,11 +5,9 @@ import { Separator } from "@/components/ui/separator"; import Image from "next/image"; import logoDark from "../../../public/sb_logo_dark_small.png"; import logoLight from "../../../public/sb_logo_light_small.png"; -import { signOut } from "@/auth"; import { SettingsDropdown } from "./settingsDropdown"; import { GitHubLogoIcon, DiscordLogoIcon } from "@radix-ui/react-icons"; import { redirect } from "next/navigation"; -import { MeControl } from "./meControl"; const SOURCEBOT_DISCORD_URL = "https://discord.gg/6Fhp27x7Pb"; const SOURCEBOT_GITHUB_URL = "https://github.com/sourcebot-dev/sourcebot"; @@ -88,21 +86,6 @@ export const NavigationMenu = async () => { -
{ - "use server"; - await signOut(); - }} - > - -
- diff --git a/packages/web/src/app/components/settingsDropdown.tsx b/packages/web/src/app/components/settingsDropdown.tsx index 86b20497e..dcc85580e 100644 --- a/packages/web/src/app/components/settingsDropdown.tsx +++ b/packages/web/src/app/components/settingsDropdown.tsx @@ -3,6 +3,7 @@ import { CodeIcon, Laptop, + LogOut, Moon, Settings, Sun @@ -12,7 +13,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, - DropdownMenuLabel, + DropdownMenuItem, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, @@ -28,6 +29,10 @@ import { KeymapType } from "@/lib/types" import { cn } from "@/lib/utils" import { useKeymapType } from "@/hooks/useKeymapType" import { NEXT_PUBLIC_SOURCEBOT_VERSION } from "@/lib/environment.client"; +import { useSession } from "next-auth/react"; +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { signOut } from "next-auth/react" + interface SettingsDropdownProps { menuButtonClassName?: string; @@ -38,7 +43,8 @@ export const SettingsDropdown = ({ }: SettingsDropdownProps) => { const { theme: _theme, setTheme } = useTheme(); - const [ keymapType, setKeymapType ] = useKeymapType(); + const [keymapType, setKeymapType] = useKeymapType(); + const { data: session } = useSession(); const theme = useMemo(() => { return _theme ?? "light"; @@ -64,9 +70,31 @@ export const SettingsDropdown = ({ - - Settings - + + {session?.user && ( + +
+ + + + {session.user.name && session.user.name.length > 0 ? session.user.name[0] : 'U'} + + +

{session.user.email ?? "User"}

+
+ { + signOut(); + }} + > + + Log out + + + + )} @@ -107,11 +135,11 @@ export const SettingsDropdown = ({ - -
- version: {NEXT_PUBLIC_SOURCEBOT_VERSION} -
+ +
+ version: {NEXT_PUBLIC_SOURCEBOT_VERSION} +
)