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,216 +33,214 @@ 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,
-        topic,
+      link,
-        link,
+      isActive,
-        isActive,
+      index,
-        index,
+      setActiveIndex,
-        setActiveIndex,
+      className,
-        className,
+      personalLinks,
-        personalLinks,
+      ...props
-        ...props
+    },
+    ref,
+  ) => {
+    const clerk = useClerk()
+    const { pathname } = useLocation()
+    const navigate = useNavigate()
+    const [, setOpenPopoverForId] = useAtom(openPopoverForIdAtom)
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false)
+    const { me } = useAccountOrGuest()
+
+    const personalLink = React.useMemo(() => {
+      return personalLinks?.find((pl) => pl?.link?.id === link.id)
+    }, [personalLinks, link.id])
+
+    const selectedLearningState = React.useMemo(() => {
+      return LEARNING_STATES.find(
+        (ls) => ls.value === personalLink?.learningState,
+      )
+    }, [personalLink?.learningState])
+
+    const handleClick = React.useCallback(
+      (e: React.MouseEvent) => {
+        e.preventDefault()
+        setActiveIndex(index)
       },
-      ref,
+      [index, setActiveIndex],
-    ) => {
+    )
-      const clerk = useClerk()
-      const { pathname } = useLocation()
-      const navigate = useNavigate()
-      const [, setOpenPopoverForId] = useAtom(openPopoverForIdAtom)
-      const [isPopoverOpen, setIsPopoverOpen] = React.useState(false)
-      const { me } = useAccountOrGuest()
 
-      const personalLink = React.useMemo(() => {
+    const handleSelectLearningState = React.useCallback(
-        return personalLinks?.find((pl) => pl?.link?.id === link.id)
+      (learningState: LearningStateValue) => {
-      }, [personalLinks, link.id])
+        if (!personalLinks || !me || me?._type === "Anonymous") {
+          return clerk.redirectToSignIn({
+            signInFallbackRedirectUrl: pathname,
+          })
+        }
 
-      const selectedLearningState = React.useMemo(() => {
+        const defaultToast = {
-        return LEARNING_STATES.find(
+          duration: 5000,
-          (ls) => ls.value === personalLink?.learningState,
+          position: "bottom-right" as const,
-        )
+          closeButton: true,
-      }, [personalLink?.learningState])
+          action: {
+            label: "Go to list",
+            onClick: () =>
+              navigate({
+                to: "/links",
+              }),
+          },
+        }
 
-      const handleClick = React.useCallback(
+        if (personalLink) {
-        (e: React.MouseEvent) => {
+          if (personalLink.learningState === learningState) {
-          e.preventDefault()
+            personalLink.learningState = undefined
-          setActiveIndex(index)
+            toast.error("Link learning state removed", defaultToast)
-        },
-        [index, setActiveIndex],
-      )
-
-      const handleSelectLearningState = React.useCallback(
-        (learningState: LearningStateValue) => {
-          if (!personalLinks || !me || me?._type === "Anonymous") {
-            return clerk.redirectToSignIn({
-              signInFallbackRedirectUrl: pathname,
-            })
-          }
-
-          const defaultToast = {
-            duration: 5000,
-            position: "bottom-right" as const,
-            closeButton: true,
-            action: {
-              label: "Go to list",
-              onClick: () =>
-                navigate({
-                  to: "/links",
-                }),
-            },
-          }
-
-          if (personalLink) {
-            if (personalLink.learningState === learningState) {
-              personalLink.learningState = undefined
-              toast.error("Link learning state removed", defaultToast)
-            } else {
-              personalLink.learningState = learningState
-              toast.success("Link learning state updated", defaultToast)
-            }
           } else {
-            const slug = generateUniqueSlug(link.title)
+            personalLink.learningState = learningState
-            const newPersonalLink = PersonalLink.create(
+            toast.success("Link learning state updated", defaultToast)
-              {
-                url: link.url,
-                title: link.title,
-                slug,
-                link,
-                learningState,
-                sequence: personalLinks.length + 1,
-                completed: false,
-                topic,
-                createdAt: new Date(),
-                updatedAt: new Date(),
-              },
-              { owner: me },
-            )
-
-            personalLinks.push(newPersonalLink)
-
-            toast.success("Link added.", {
-              ...defaultToast,
-              description: `${link.title} has been added to your personal link.`,
-            })
           }
-
+        } else {
-          setOpenPopoverForId(null)
+          const slug = generateUniqueSlug(link.title)
-          setIsPopoverOpen(false)
+          const newPersonalLink = PersonalLink.create(
-        },
-        [
-          personalLink,
-          personalLinks,
-          me,
-          link,
-          navigate,
-          topic,
-          setOpenPopoverForId,
-          clerk,
-          pathname,
-        ],
-      )
-
-      const handlePopoverOpenChange = React.useCallback(
-        (open: boolean) => {
-          setIsPopoverOpen(open)
-          setOpenPopoverForId(open ? link.id : null)
-        },
-        [link.id, setOpenPopoverForId],
-      )
-
-      return (
-        <div
-          ref={ref}
-          tabIndex={0}
-          onClick={handleClick}
-          className={cn(
-            "relative flex h-14 cursor-pointer items-center outline-none xl:h-11",
             {
-              "bg-muted-foreground/10": isActive,
+              url: link.url,
-              "hover:bg-muted/50": !isActive,
+              title: link.title,
+              slug,
+              link,
+              learningState,
+              sequence: personalLinks.length + 1,
+              completed: false,
+              topic,
+              createdAt: new Date(),
+              updatedAt: new Date(),
             },
-            className,
+            { owner: me },
-          )}
+          )
-          {...props}
+
-        >
+          personalLinks.push(newPersonalLink)
-          <div className="flex grow justify-between gap-x-6 px-6 max-lg:px-4">
+
-            <div className="flex min-w-0 items-center gap-x-4">
+          toast.success("Link added.", {
-              <Popover
+            ...defaultToast,
-                open={isPopoverOpen}
+            description: `${link.title} has been added to your personal link.`,
-                onOpenChange={handlePopoverOpenChange}
+          })
-              >
+        }
-                <PopoverTrigger asChild>
+
-                  <Button
+        setOpenPopoverForId(null)
-                    size="sm"
+        setIsPopoverOpen(false)
-                    type="button"
+      },
-                    role="combobox"
+      [
-                    variant="ghost"
+        personalLink,
-                    className="h-auto shrink-0 cursor-default p-0 text-muted-foreground/75 hover:bg-inherit hover:text-foreground"
+        personalLinks,
-                    onClick={(e) => e.stopPropagation()}
+        me,
-                  >
+        link,
-                    {selectedLearningState?.icon ? (
+        navigate,
-                      <LaIcon
+        topic,
-                        name={selectedLearningState.icon}
+        setOpenPopoverForId,
-                        className={selectedLearningState.className}
+        clerk,
-                      />
+        pathname,
-                    ) : (
+      ],
-                      <LaIcon name="Circle" />
+    )
-                    )}
+
-                  </Button>
+    const handlePopoverOpenChange = React.useCallback(
-                </PopoverTrigger>
+      (open: boolean) => {
-                <PopoverContent
+        setIsPopoverOpen(open)
-                  className="w-52 rounded-lg p-0"
+        setOpenPopoverForId(open ? link.id : null)
-                  side="bottom"
+      },
-                  align="start"
+      [link.id, setOpenPopoverForId],
+    )
+
+    return (
+      <div
+        ref={ref}
+        tabIndex={0}
+        onClick={handleClick}
+        className={cn(
+          "relative flex h-14 cursor-pointer items-center outline-none xl:h-11",
+          {
+            "bg-muted-foreground/10": isActive,
+            "hover:bg-muted/50": !isActive,
+          },
+          className,
+        )}
+        {...props}
+      >
+        <div className="flex grow justify-between gap-x-6 px-6 max-lg:px-4">
+          <div className="flex min-w-0 items-center gap-x-4">
+            <Popover
+              open={isPopoverOpen}
+              onOpenChange={handlePopoverOpenChange}
+            >
+              <PopoverTrigger asChild>
+                <Button
+                  size="sm"
+                  type="button"
+                  role="combobox"
+                  variant="ghost"
+                  className="h-auto shrink-0 cursor-default p-0 text-muted-foreground/75 hover:bg-inherit hover:text-foreground"
+                  onClick={(e) => e.stopPropagation()}
                 >
-                  <LearningStateSelectorContent
+                  {selectedLearningState?.icon ? (
-                    showSearch={false}
-                    searchPlaceholder="Search state..."
-                    value={personalLink?.learningState}
-                    onSelect={(value: string) =>
-                      handleSelectLearningState(value as LearningStateValue)
-                    }
-                  />
-                </PopoverContent>
-              </Popover>
-
-              <div className="w-full min-w-0 flex-auto">
-                <div className="gap-x-2 space-y-0.5 xl:flex xl:flex-row">
-                  <p
-                    className={cn(
-                      "line-clamp-1 text-sm font-medium text-primary hover:text-primary",
-                      isActive && "font-bold",
-                    )}
-                  >
-                    {link.title}
-                  </p>
-
-                  <div className="group flex items-center gap-x-1">
                     <LaIcon
-                      name="Link"
+                      name={selectedLearningState.icon}
-                      aria-hidden="true"
+                      className={selectedLearningState.className}
-                      className="flex-none text-muted-foreground group-hover:text-primary"
                     />
+                  ) : (
+                    <LaIcon name="Circle" />
+                  )}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent
+                className="w-52 rounded-lg p-0"
+                side="bottom"
+                align="start"
+              >
+                <LearningStateSelectorContent
+                  showSearch={false}
+                  searchPlaceholder="Search state..."
+                  value={personalLink?.learningState}
+                  onSelect={(value: string) =>
+                    handleSelectLearningState(value as LearningStateValue)
+                  }
+                />
+              </PopoverContent>
+            </Popover>
 
-                    <Link
+            <div className="w-full min-w-0 flex-auto">
-                      to={ensureUrlProtocol(link.url)}
+              <div className="gap-x-2 space-y-0.5 xl:flex xl:flex-row">
-                      target="_blank"
+                <p
-                      onClick={(e) => e.stopPropagation()}
+                  className={cn(
-                      className="text-xs text-muted-foreground hover:text-primary"
+                    "line-clamp-1 text-sm font-medium text-primary hover:text-primary",
-                    >
+                    isActive && "font-bold",
-                      <span className="line-clamp-1">{link.url}</span>
+                  )}
-                    </Link>
+                >
-                  </div>
+                  {link.title}
+                </p>
+
+                <div className="group flex items-center gap-x-1">
+                  <LaIcon
+                    name="Link"
+                    aria-hidden="true"
+                    className="flex-none text-muted-foreground group-hover:text-primary"
+                  />
+
+                  <Link
+                    to={ensureUrlProtocol(link.url)}
+                    target="_blank"
+                    onClick={(e) => e.stopPropagation()}
+                    className="text-xs text-muted-foreground hover:text-primary"
+                  >
+                    <span className="line-clamp-1">{link.url}</span>
+                  </Link>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      )
+      </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,49 +87,47 @@ function PageDetailComponent() {
   )
 }
 
-const SidebarActions = React.memo(
+const SidebarActions = ({
-  ({
+  page,
-    page,
+  handleDelete,
-    handleDelete,
+}: {
-  }: {
+  page: PersonalPage
-    page: PersonalPage
+  handleDelete: () => void
-    handleDelete: () => void
+}) => (
-  }) => (
+  <div className="relative min-w-56 max-w-72 border-l bg-[var(--body-background)]">
-    <div className="relative min-w-56 max-w-72 border-l bg-[var(--body-background)]">
+    <div className="flex">
-      <div className="flex">
+      <div className="flex h-10 flex-auto flex-row items-center justify-between px-5">
-        <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">
-          <span className="text-left text-[13px] font-medium text-muted-foreground">
+          Page actions
-            Page actions
+        </span>
-          </span>
+      </div>
-        </div>
+      <div className="absolute bottom-0 left-0 right-0 top-10 space-y-3 overflow-y-auto px-4 py-1.5">
-        <div className="absolute bottom-0 left-0 right-0 top-10 space-y-3 overflow-y-auto px-4 py-1.5">
+        <TopicSelector
-          <TopicSelector
+          value={page.topic?.name}
-            value={page.topic?.name}
+          onTopicChange={(topic) => {
-            onTopicChange={(topic) => {
+            page.topic = topic
-              page.topic = topic
+            page.updatedAt = new Date()
-              page.updatedAt = new Date()
+          }}
-            }}
+          variant="ghost"
-            variant="ghost"
+          className="-ml-1.5"
-            className="-ml-1.5"
+          renderSelectedText={() => (
-            renderSelectedText={() => (
+            <span className="truncate">
-              <span className="truncate">
+              {page.topic?.prettyName || "Select a topic"}
-                {page.topic?.prettyName || "Select a topic"}
+            </span>
-              </span>
+          )}
-            )}
+        />
-          />
+        <Button
-          <Button
+          size="sm"
-            size="sm"
+          variant="ghost"
-            variant="ghost"
+          onClick={handleDelete}
-            onClick={handleDelete}
+          className="-ml-1.5"
-            className="-ml-1.5"
+        >
-          >
+          <LaIcon name="Trash" className="mr-2" />
-            <LaIcon name="Trash" className="mr-2" />
+          <span className="text-sm">Delete</span>
-            <span className="text-sm">Delete</span>
+        </Button>
-          </Button>
-        </div>
       </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(
+        {me?.root.personalPages.map((page, index) => (
-          (page, index) =>
+          <PageItem
-            page?.id && (
+            key={page.id}
-              <PageItem
+            ref={(el) => setElementRef(el, index)}
-                key={page.id}
+            page={page}
-                ref={(el) => setElementRef(el, index)}
+            isActive={index === activeItemIndex}
-                page={page}
+            onPointerMove={() => {
-                isActive={index === activeItemIndex}
+              setKeyboardActiveIndex(null)
-                onPointerMove={() => {
+              setActiveItemIndex(index)
-                  setKeyboardActiveIndex(null)
+            }}
-                  setActiveItemIndex(index)
+            data-keyboard-active={keyboardActiveIndex === 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(() => {
+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 &&