clients/backer: refactor backer layout

clients/apps/setup-github/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "^14.1.0",
+    "next": "^14.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

clients/apps/setup-github/src/app/layout.tsx

@@ -1,5 +1,5 @@
-import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
+import type { Metadata } from 'next/types'
 import './globals.css'
 
 const inter = Inter({ subsets: ['latin'] })

clients/apps/web/package.json

@@ -64,7 +64,7 @@
     "lunr": "^2.3.9",
     "markdown-to-jsx": "^7.4.5",
     "mermaid": "^10.6.1",
-    "next": "^14.1.0",
+    "next": "^14.2.4",
     "next-themes": "^0.2.1",
     "open-graph-scraper-lite": "^2.0.0",
     "openapi-types": "^12.1.3",

clients/apps/web/src/app/(topbar)/(backer)/(sidebar)/feed/page.tsx

@@ -0,0 +1,5 @@
+import { Feed } from '@/components/Feed/Feed'
+
+export default function Page() {
+  return <Feed />
+}

clients/apps/web/src/app/(topbar)/(backer)/(sidebar)/funding/page.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import IssueList from '@/components/Issues/IssueList'
+import { DashboardFilters, DefaultFilters } from '@/components/Issues/filters'
+import { useAuth } from '@/hooks'
+import {
+  useAccount,
+  useListRewardsToUser,
+  usePersonalDashboard,
+} from '@/hooks/queries'
+import { HowToVoteOutlined } from '@mui/icons-material'
+import Link from 'next/link'
+import { ShadowBoxOnMd } from 'polarkit/components/ui/atoms/shadowbox'
+import { Banner } from 'polarkit/components/ui/molecules'
+
+export default function Page() {
+  const { currentUser } = useAuth()
+
+  const filters: DashboardFilters = {
+    ...DefaultFilters,
+
+    onlyPledged: true,
+  }
+
+  const dashboardQuery = usePersonalDashboard({
+    q: filters.q,
+    sort: filters.sort,
+    onlyPledged: filters.onlyPledged,
+    onlyBadged: filters.onlyBadged,
+    showClosed: filters.showClosed,
+  })
+
+  const dashboard = dashboardQuery.data
+  const totalCount = dashboard?.pages[0].pagination.total_count ?? undefined
+
+  const rewards = useListRewardsToUser(currentUser?.id)
+  const { data: account } = useAccount(currentUser?.account_id)
+
+  const showPendingRewardsBanner =
+    rewards.data?.items &&
+    rewards.data?.items.length > 0 &&
+    account === undefined
+
+  return (
+    <>
+      {showPendingRewardsBanner && (
+        <Banner color="blue">
+          <div className="flex w-full items-center justify-between">
+            <span>
+              Great news! You have pending rewards and payouts. Setup a Stripe
+              account to get paid.
+            </span>
+            <Link href="/rewards" className="whitespace-nowrap font-medium">
+              Go to Rewards
+            </Link>
+          </div>
+        </Banner>
+      )}
+
+      {totalCount !== undefined && totalCount > 0 ? (
+        <ShadowBoxOnMd className="flex flex-col gap-y-4">
+          <h1 className="text-lg text-gray-950 dark:text-white">
+            Funded issues
+          </h1>
+          <IssueList
+            totalCount={totalCount}
+            loading={dashboardQuery.isLoading}
+            dashboard={dashboard}
+            filters={filters}
+            onSetFilters={() => {}}
+            isInitialLoading={dashboardQuery.isInitialLoading}
+            isFetchingNextPage={dashboardQuery.isFetchingNextPage}
+            hasNextPage={dashboardQuery.hasNextPage || false}
+            fetchNextPage={dashboardQuery.fetchNextPage}
+          />
+        </ShadowBoxOnMd>
+      ) : (
+        <div className="dark:text-polar-400 flex h-full w-full flex-col items-center gap-y-4 pt-32 text-6xl text-gray-600">
+          <HowToVoteOutlined fontSize="inherit" />
+          <div className="flex flex-col items-center gap-y-2">
+            <h3 className="p-2 text-xl font-medium">No funded issues</h3>
+            <p className="dark:text-polar-500 min-w-0 truncate text-base text-gray-500">
+              You haven&apos;t funded any issues yet
+            </p>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

clients/apps/web/src/app/(topbar)/(backer)/feed/page.tsx → clients/apps/web/src/app/(topbar)/(backer)/(sidebar)/layout.tsx

@@ -5,13 +5,12 @@ import {
   GitHubAuthUpsell,
   MaintainerUpsell,
 } from '@/components/Dashboard/Upsell'
-import { FeaturedCreators } from '@/components/Feed/FeaturedCreators'
-import { Feed } from '@/components/Feed/Feed'
+import PurchaseSidebar from '@/components/Purchases/PurchasesSidebar'
 import { useAuth, useGitHubAccount, usePersonalOrganization } from '@/hooks'
 import { useListAdminOrganizations, useSearchArticles } from '@/hooks/queries'
-import { useEffect } from 'react'
+import { PropsWithChildren, useEffect } from 'react'
 
-export default function Page() {
+export default function Layout({ children }: PropsWithChildren) {
   const { authenticated, reloadUser } = useAuth()
   const { isLoading: adminOrgsAreLoading } = useListAdminOrganizations()
   const personalOrg = usePersonalOrganization()
@@ -39,20 +38,18 @@ export default function Page() {
     authenticated && !listOrganizationQuery.isLoading && !personalOrg
 
   return (
-    <div className="relative flex h-full flex-col md:flex-row md:gap-x-24 md:pt-6">
-      <div className="flex w-full flex-col gap-y-8 pb-12 md:w-full">
-        <Feed />
-      </div>
-      <div className="flex h-full flex-col gap-y-12 self-stretch md:max-w-xs">
+    <div className="flex h-full flex-col gap-12 md:flex-row">
+      <div className="flex h-full w-full flex-col gap-y-6 self-stretch md:sticky md:top-[6.5rem] md:max-w-xs">
+        <PurchaseSidebar />
         {shouldShowGitHubAuthUpsell ? (
           <GitHubAuthUpsell />
         ) : shouldShowMaintainerUpsell ? (
           <MaintainerUpsell />
         ) : shouldShowPostUpsell ? (
           <CreatePostUpsell />
         ) : null}
-        <FeaturedCreators />
       </div>
+      {children}
     </div>
   )
 }

clients/apps/web/src/app/(topbar)/(backer)/purchases/products/ClientPage.tsx

@@ -35,8 +35,10 @@ export default function ClientPage() {
   })
 
   return (
-    <div className="flex h-full flex-grow flex-row items-start gap-x-12">
-      <PurchaseSidebar />
+    <div className="flex h-full flex-col gap-12 md:flex-row">
+      <div className="flex h-full w-full flex-col gap-y-12 self-stretch md:sticky md:top-[6.5rem] md:max-w-xs">
+        <PurchaseSidebar />
+      </div>
       {orders?.pagination.total_count === 0 ? (
         <div className="dark:text-polar-400 flex h-full w-full flex-col items-center gap-y-4 pt-32 text-6xl text-gray-600">
           <DiamondOutlined fontSize="inherit" />

clients/apps/web/src/app/(topbar)/(backer)/purchases/subscriptions/ClientPage.tsx

@@ -38,27 +38,29 @@ export default function ClientPage() {
   })
 
   return (
-    <div className="flex h-full flex-grow flex-row items-start gap-x-12">
-      <PurchaseSidebar>
-        <div className="flex items-center space-x-2">
-          <Checkbox
-            id="inactive"
-            checked={purchaseParameters.inactive}
-            onCheckedChange={(e) => {
-              setPurchaseParameters((prev) => ({
-                ...prev,
-                inactive: e ? true : false,
-              }))
-            }}
-          />
-          <label
-            htmlFor="inactive"
-            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-          >
-            Show cancelled
-          </label>
-        </div>
-      </PurchaseSidebar>
+    <div className="flex h-full flex-col gap-12 md:flex-row">
+      <div className="flex h-full w-full flex-col gap-y-12 self-stretch md:sticky md:top-[6.5rem] md:max-w-xs">
+        <PurchaseSidebar>
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="inactive"
+              checked={purchaseParameters.inactive}
+              onCheckedChange={(e) => {
+                setPurchaseParameters((prev) => ({
+                  ...prev,
+                  inactive: e ? true : false,
+                }))
+              }}
+            />
+            <label
+              htmlFor="inactive"
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              Show cancelled
+            </label>
+          </div>
+        </PurchaseSidebar>
+      </div>
       {subscriptions?.pagination.total_count === 0 ? (
         <div className="dark:text-polar-400 flex h-full w-full flex-col items-center gap-y-4 pt-32 text-6xl text-gray-600">
           <DiamondOutlined fontSize="inherit" />

clients/apps/web/src/app/layout.tsx

@@ -2,8 +2,8 @@ import '../styles/globals.scss'
 
 import { UserContextProvider } from '@/providers/auth'
 import { getServerSideAPI } from '@/utils/api/serverside'
-import { Metadata } from 'next'
 import localFont from 'next/font/local'
+import { Metadata } from 'next/types'
 import { twMerge } from 'tailwind-merge'
 import {
   PolarPostHogProvider,

clients/apps/web/src/components/Feed/Feed.tsx

@@ -32,11 +32,11 @@ export const Feed = () => {
 
   if (infiniteArticles.length === 0) {
     return (
-      <div className="dark:text-polar-400 flex h-full flex-col items-center gap-y-4 pt-32 text-gray-600">
-        <StickyNote2Outlined fontSize="large" />
+      <div className="dark:text-polar-400 flex h-full w-full flex-col items-center gap-y-4 pt-32 text-6xl text-gray-600">
+        <StickyNote2Outlined fontSize="inherit" />
         <div className="flex flex-col items-center gap-y-2">
-          <h3 className="p-2 text-lg font-medium">No posts found</h3>
-          <p className="dark:text-polar-500 min-w-0 truncate text-gray-500">
+          <h3 className="p-2 text-xl font-medium">No posts found</h3>
+          <p className="dark:text-polar-500 min-w-0 truncate text-base text-gray-500">
             Newsletters from creators you subscribe to will appear here
           </p>
         </div>
@@ -45,7 +45,7 @@ export const Feed = () => {
   }
 
   return (
-    <div className="flex flex-col gap-y-4">
+    <div className="flex w-full flex-col gap-y-4">
       {infiniteArticles?.map((entity) => (
         <PostComponent key={entity.id} article={entity} />
       ))}