chore: fix pages and links

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,49 +87,47 @@ function PageDetailComponent() {
   )
 }
 
-const SidebarActions = React.memo(
-  ({
-    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">
-          <span className="text-left text-[13px] font-medium text-muted-foreground">
-            Page actions
-          </span>
-        </div>
-        <div className="absolute bottom-0 left-0 right-0 top-10 space-y-3 overflow-y-auto px-4 py-1.5">
-          <TopicSelector
-            value={page.topic?.name}
-            onTopicChange={(topic) => {
-              page.topic = topic
-              page.updatedAt = new Date()
-            }}
-            variant="ghost"
-            className="-ml-1.5"
-            renderSelectedText={() => (
-              <span className="truncate">
-                {page.topic?.prettyName || "Select a topic"}
-              </span>
-            )}
-          />
-          <Button
-            size="sm"
-            variant="ghost"
-            onClick={handleDelete}
-            className="-ml-1.5"
-          >
-            <LaIcon name="Trash" className="mr-2" />
-            <span className="text-sm">Delete</span>
-          </Button>
-        </div>
+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">
+        <span className="text-left text-[13px] font-medium text-muted-foreground">
+          Page actions
+        </span>
+      </div>
+      <div className="absolute bottom-0 left-0 right-0 top-10 space-y-3 overflow-y-auto px-4 py-1.5">
+        <TopicSelector
+          value={page.topic?.name}
+          onTopicChange={(topic) => {
+            page.topic = topic
+            page.updatedAt = new Date()
+          }}
+          variant="ghost"
+          className="-ml-1.5"
+          renderSelectedText={() => (
+            <span className="truncate">
+              {page.topic?.prettyName || "Select a topic"}
+            </span>
+          )}
+        />
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={handleDelete}
+          className="-ml-1.5"
+        >
+          <LaIcon name="Trash" className="mr-2" />
+          <span className="text-sm">Delete</span>
+        </Button>
       </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,22 +57,19 @@ export const PageList: React.FC<PageListProps> = () => {
         tabIndex={-1}
         role="list"
       >
-        {personalPages?.map(
-          (page, index) =>
-            page?.id && (
-              <PageItem
-                key={page.id}
-                ref={(el) => setElementRef(el, index)}
-                page={page}
-                isActive={index === activeItemIndex}
-                onPointerMove={() => {
-                  setKeyboardActiveIndex(null)
-                  setActiveItemIndex(index)
-                }}
-                data-keyboard-active={keyboardActiveIndex === index}
-              />
-            ),
-        )}
+        {me?.root.personalPages.map((page, index) => (
+          <PageItem
+            key={page.id}
+            ref={(el) => setElementRef(el, index)}
+            page={page}
+            isActive={index === activeItemIndex}
+            onPointerMove={() => {
+              setKeyboardActiveIndex(null)
+              setActiveItemIndex(index)
+            }}
+            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(() => {
-  const { me } = useAccount()
-
-  if (!me) return null
-
+export const TopicHeader: React.FC<TopicHeaderProps> = () => {
   return (
     <ContentHeader>
       <HeaderTitle />
       <div className="flex flex-auto" />
     </ContentHeader>
   )
-})
+}
 
 TopicHeader.displayName = "TopicHeader"