chore: fix pages and links

web/app/routes/_layout/_pages/(topic)/-header.tsx

@@ -19,7 +19,7 @@ interface TopicDetailHeaderProps {
   setSearchQuery: (query: string) => void
 }
 
-export const TopicDetailHeader = React.memo(function TopicDetailHeader({
+export const TopicDetailHeader = function TopicDetailHeader({
   topic,
   searchQuery,
   setSearchQuery,
@@ -163,6 +163,6 @@ export const TopicDetailHeader = React.memo(function TopicDetailHeader({
       </div>
     </>
   )
-})
+}
 
 TopicDetailHeader.displayName = "TopicDetailHeader"

web/app/routes/_layout/_pages/(topic)/-item.tsx

@@ -33,8 +33,7 @@ interface LinkItemProps extends React.ComponentPropsWithoutRef<"div"> {
   personalLinks?: PersonalLinkLists
 }
 
-export const LinkItem = React.memo(
+export const LinkItem = React.forwardRef<HTMLDivElement, LinkItemProps>(
-  React.forwardRef<HTMLDivElement, LinkItemProps>(
   (
     {
       topic,
@@ -242,7 +241,6 @@ export const LinkItem = React.memo(
       </div>
     )
   },
-  ),
 )
 
 LinkItem.displayName = "LinkItem"

web/app/routes/_layout/_pages/_protected/links/-header.tsx

@@ -26,7 +26,7 @@ const ALL_STATES = [
   ...LEARNING_STATES,
 ]
 
-const LearningTab: React.FC = React.memo(() => {
+const LearningTab: React.FC = () => {
   const navigate = useNavigate()
   const { state } = useSearch({ from: "/_layout/_pages/_protected/links/" })
 
@@ -55,9 +55,9 @@ const LearningTab: React.FC = React.memo(() => {
       highlighterIncludeMargin={true}
     />
   )
-})
+}
 
-const FilterAndSort: React.FC = React.memo(() => {
+const FilterAndSort: React.FC = () => {
   const [sort, setSort] = useAtom(linkSortAtom)
   const [sortOpen, setSortOpen] = React.useState(false)
 
@@ -113,9 +113,9 @@ const FilterAndSort: React.FC = React.memo(() => {
       </div>
     </div>
   )
-})
+}
 
-export const LinkHeader: React.FC = React.memo(() => {
+export const LinkHeader: React.FC = () => {
   const isTablet = useMedia("(max-width: 1024px)")
 
   return (
@@ -144,7 +144,7 @@ export const LinkHeader: React.FC = React.memo(() => {
       )}
     </>
   )
-})
+}
 
 LinkHeader.displayName = "LinkHeader"
 LearningTab.displayName = "LearningTab"

web/app/routes/_layout/_pages/_protected/pages/$pageId/index.tsx

@@ -30,7 +30,13 @@ const TITLE_PLACEHOLDER = "Untitled"
 function PageDetailComponent() {
   const { pageId } = Route.useParams()
   const { me } = useAccount({
-    root: { personalPages: [{}] },
+    root: {
+      personalPages: [
+        {
+          topic: {},
+        },
+      ],
+    },
   })
   const isMobile = useMedia("(max-width: 770px)")
   const page = useCoState(PersonalPage, pageId as ID<PersonalPage>)
@@ -81,14 +87,13 @@ function PageDetailComponent() {
   )
 }
 
-const SidebarActions = React.memo(
+const SidebarActions = ({
-  ({
   page,
   handleDelete,
-  }: {
+}: {
   page: PersonalPage
   handleDelete: () => void
-  }) => (
+}) => (
   <div className="relative min-w-56 max-w-72 border-l bg-[var(--body-background)]">
     <div className="flex">
       <div className="flex h-10 flex-auto flex-row items-center justify-between px-5">
@@ -123,7 +128,6 @@ const SidebarActions = React.memo(
       </div>
     </div>
   </div>
-  ),
 )
 
 SidebarActions.displayName = "SidebarActions"

web/app/routes/_layout/_pages/_protected/pages/-header.tsx

@@ -7,30 +7,37 @@ import {
 import { LaIcon } from "@/components/custom/la-icon"
 import { useAccount } from "@/lib/providers/jazz-provider"
 import { usePageActions } from "~/hooks/actions/use-page-actions"
-import { useNavigate } from "@tanstack/react-router"
 
 interface PageHeaderProps {}
 
-export const PageHeader: React.FC<PageHeaderProps> = React.memo(() => {
+export const PageHeader: React.FC<PageHeaderProps> = () => {
   const { me } = useAccount()
-  const navigate = useNavigate()
   const { newPage } = usePageActions()
 
   if (!me) return null
 
-  const handleNewPageClick = () => {
-    const page = newPage(me)
-    navigate({ to: `/pages/${page.id}` })
-  }
-
   return (
     <ContentHeader>
       <HeaderTitle />
       <div className="flex flex-auto" />
-      <NewPageButton onClick={handleNewPageClick} />
+
+      <div className="flex w-auto items-center justify-end">
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            type="button"
+            variant="secondary"
+            className="gap-x-2"
+            onClick={newPage}
+          >
+            <LaIcon name="Plus" />
+            <span className="hidden md:block">New page</span>
+          </Button>
+        </div>
+      </div>
     </ContentHeader>
   )
-})
+}
 
 PageHeader.displayName = "PageHeader"
 
@@ -42,24 +49,3 @@ const HeaderTitle: React.FC = () => (
     </div>
   </div>
 )
-
-interface NewPageButtonProps {
-  onClick: () => void
-}
-
-const NewPageButton: React.FC<NewPageButtonProps> = ({ onClick }) => (
-  <div className="flex w-auto items-center justify-end">
-    <div className="flex items-center gap-2">
-      <Button
-        size="sm"
-        type="button"
-        variant="secondary"
-        className="gap-x-2"
-        onClick={onClick}
-      >
-        <LaIcon name="Plus" />
-        <span className="hidden md:block">New page</span>
-      </Button>
-    </div>
-  </div>
-)

web/app/routes/_layout/_pages/_protected/pages/-list.tsx

@@ -11,20 +11,19 @@ interface PageListProps {}
 
 export const PageList: React.FC<PageListProps> = () => {
   const isTablet = useMedia("(max-width: 640px)")
-  const { me } = useAccount({ root: { personalPages: [] } })
+  const { me } = useAccount({ root: { personalPages: [{ topic: {} }] } })
   const [activeItemIndex, setActiveItemIndex] = React.useState<number | null>(
     null,
   )
   const [keyboardActiveIndex, setKeyboardActiveIndex] = React.useState<
     number | null
   >(null)
-  const personalPages = React.useMemo(
-    () => me?.root?.personalPages,
-    [me?.root?.personalPages],
-  )
 
   const next = () =>
-    Math.min((activeItemIndex ?? 0) + 1, (personalPages?.length ?? 0) - 1)
+    Math.min(
+      (activeItemIndex ?? 0) + 1,
+      (me?.root.personalPages.length ?? 0) - 1,
+    )
 
   const prev = () => Math.max((activeItemIndex ?? 0) - 1, 0)
 
@@ -58,9 +57,7 @@ export const PageList: React.FC<PageListProps> = () => {
         tabIndex={-1}
         role="list"
       >
-        {personalPages?.map(
+        {me?.root.personalPages.map((page, index) => (
-          (page, index) =>
-            page?.id && (
           <PageItem
             key={page.id}
             ref={(el) => setElementRef(el, index)}
@@ -72,8 +69,7 @@ export const PageList: React.FC<PageListProps> = () => {
             }}
             data-keyboard-active={keyboardActiveIndex === index}
           />
-            ),
+        ))}
-        )}
       </Primitive.div>
     </div>
   )

web/app/routes/_layout/_pages/_protected/topics/-header.tsx

@@ -3,22 +3,17 @@ import {
   ContentHeader,
   SidebarToggleButton,
 } from "@/components/custom/content-header"
-import { useAccount } from "@/lib/providers/jazz-provider"
 
 interface TopicHeaderProps {}
 
-export const TopicHeader: React.FC<TopicHeaderProps> = React.memo(() => {
+export const TopicHeader: React.FC<TopicHeaderProps> = () => {
-  const { me } = useAccount()
-
-  if (!me) return null
-
   return (
     <ContentHeader>
       <HeaderTitle />
       <div className="flex flex-auto" />
     </ContentHeader>
   )
-})
+}
 
 TopicHeader.displayName = "TopicHeader"
 

web/app/routes/_layout/_pages/search/index.tsx

@@ -86,7 +86,7 @@ const SearchComponent = () => {
   }>({ topics: [], links: [], pages: [] })
 
   const { me } = useAccountOrGuest({
-    root: { personalLinks: [], personalPages: [] },
+    root: { personalLinks: [{}], personalPages: [{}] },
   })
 
   const globalGroup = useCoState(PublicGlobalGroup, JAZZ_GLOBAL_GROUP_ID, {
@@ -105,7 +105,7 @@ const SearchComponent = () => {
     }
     setSearchResults({
       topics:
-        globalGroup?.root.topics?.filter(
+        globalGroup?.root.topics.filter(
           (topic: Topic | null): topic is Topic =>
             topic !== null && topic.prettyName.toLowerCase().startsWith(value),
         ) || [],
@@ -119,7 +119,7 @@ const SearchComponent = () => {
       pages:
         me?._type === "Anonymous"
           ? []
-          : me?.root.personalPages?.filter(
+          : me?.root.personalPages.filter(
               (page): page is PersonalPage =>
                 page !== null &&
                 page.title !== undefined &&