refactor(explore): load pinned notes with the explore page

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

frontend/locales/en.json

@@ -18,7 +18,8 @@
       "unpin": "Unpin this note",
       "empty": "You don't have any pinned notes yet.",
       "pinError": "Could not pin note {{name}}.",
-      "unpinError": "Could not unpin note {{name}}."
+      "unpinError": "Could not unpin note {{name}}.",
+      "loadingError": "Could not load pinned notes."
     },
     "modes": {
       "my": "My notes",

frontend/src/app/(editor)/explore/layout.tsx

@@ -6,11 +6,13 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import type { PropsWithChildren } from 'react'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Container } from 'react-bootstrap'
 import { Welcome } from '../../../components/explore-page/welcome'
 import { ModeSelection } from '../../../components/explore-page/mode-selection/mode-selection'
 import { PinnedNotes } from '../../../components/explore-page/pinned-notes/pinned-notes'
+import { loadPinnedNotes } from '../../../redux/pinned-notes/methods'
+import { useUiNotifications } from '../../../components/notifications/ui-notification-boundary'
 
 /**
  * Layout for the login page with the intro content on the left and children on the right.
@@ -20,6 +22,11 @@ import { PinnedNotes } from '../../../components/explore-page/pinned-notes/pinne
 export type ExploreLayoutProps = PropsWithChildren
 
 export default function ExploreLayout({ children }: ExploreLayoutProps) {
+  const { showErrorNotification } = useUiNotifications()
+  useEffect(() => {
+    loadPinnedNotes().catch(showErrorNotification('explore.pinnedNotes.loadingError'))
+  }, [showErrorNotification])
+
   return (
     <Container>
       <Welcome />

frontend/src/components/application-loader/initializers/index.ts

@@ -10,7 +10,6 @@ import { setUpI18n } from './setupI18n'
 import { loadFromLocalStorage } from '../../../redux/editor-config/methods'
 import { fetchAndSetUser } from '../../login-page/utils/fetch-and-set-user'
 import { loginOrRegisterGuest } from './login-or-register-guest'
-import { loadPinnedNotesInitializer } from './load-pinned-notes'
 
 const logger = new Logger('Application Loader')
 
@@ -71,10 +70,6 @@ export const createSetUpTaskList = (): InitTask[] => {
       name: 'Register or login guest user',
       task: loginOrRegisterGuest
     },
-    {
-      name: 'Load pinned notes',
-      task: loadPinnedNotesInitializer
-    },
     {
       name: 'Load preferences',
       task: loadFromLocalStorageAsync

frontend/src/components/application-loader/initializers/load-pinned-notes.ts

@@ -1,21 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2025 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-import { loadPinnedNotes } from '../../../redux/pinned-notes/methods'
-import { Logger } from '../../../utils/logger'
-
-const logger = new Logger('PinnedNotesInitializer')
-
-/**
- * Loads the pinned notes from the backend.
- * Fails silently if the user is not logged in or there's an error.
- */
-export const loadPinnedNotesInitializer = async (): Promise<void> => {
-  try {
-    await loadPinnedNotes()
-  } catch (error) {
-    logger.info('Could not load pinned notes.', error)
-  }
-}