+
+
+ )
+}
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/media-browser-sidebar-menu/media-browser-sidebar-menu.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/media-browser-sidebar-menu/media-browser-sidebar-menu.tsx
new file mode 100644
index 000000000..ebc892838
--- /dev/null
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/media-browser-sidebar-menu/media-browser-sidebar-menu.tsx
@@ -0,0 +1,79 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { SidebarButton } from '../../sidebar-button/sidebar-button'
+import { SidebarMenu } from '../../sidebar-menu/sidebar-menu'
+import type { SpecificSidebarMenuProps } from '../../types'
+import { DocumentSidebarMenuSelection } from '../../types'
+import React, { Fragment, useCallback, useMemo, useState } from 'react'
+import { ArrowLeft as IconArrowLeft, Images as IconImages } from 'react-bootstrap-icons'
+import { Trans, useTranslation } from 'react-i18next'
+import { useAsync } from 'react-use'
+import { useApplicationState } from '../../../../../hooks/common/use-application-state'
+import { getMediaForNote } from '../../../../../api/notes'
+import { AsyncLoadingBoundary } from '../../../../common/async-loading-boundary/async-loading-boundary'
+import { MediaEntry } from './media-entry'
+import type { MediaUpload } from '../../../../../api/media/types'
+import { MediaEntryDeletionModal } from './media-entry-deletion-modal'
+import { MediaBrowserEmpty } from './media-browser-empty'
+
+/**
+ * Renders the media browser "menu" for the sidebar.
+ *
+ * @param className Additional class names given to the menu button
+ * @param menuId The id of the menu
+ * @param onClick The callback, that should be called when the menu button is pressed
+ * @param selectedMenuId The currently selected menu id
+ */
+export const MediaBrowserSidebarMenu: React.FC = ({
+ className,
+ menuId,
+ onClick,
+ selectedMenuId
+}) => {
+ useTranslation()
+ const noteId = useApplicationState((state) => state.noteDetails?.id ?? '')
+ const [mediaEntryForDeletion, setMediaEntryForDeletion] = useState(null)
+
+ const hide = selectedMenuId !== DocumentSidebarMenuSelection.NONE && selectedMenuId !== menuId
+ const expand = selectedMenuId === menuId
+ const onClickHandler = useCallback(() => {
+ onClick(menuId)
+ }, [menuId, onClick])
+
+ const { value, loading, error } = useAsync(() => getMediaForNote(noteId), [expand, noteId])
+
+ const mediaEntries = useMemo(() => {
+ if (loading || error || !value) {
+ return []
+ }
+ return value.map((entry) =>
+
+
+
+
+ {mediaEntries}
+ {mediaEntries.length === 0 &&
+
+ {mediaEntryForDeletion && (
+
+ )
+}
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/media-browser-sidebar-menu/media-entry-deletion-modal.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/media-browser-sidebar-menu/media-entry-deletion-modal.tsx
new file mode 100644
index 000000000..5e13fcd81
--- /dev/null
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/media-browser-sidebar-menu/media-entry-deletion-modal.tsx
@@ -0,0 +1,46 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React, { useCallback } from 'react'
+import type { MediaEntryProps } from './media-entry'
+import type { ModalVisibilityProps } from '../../../../common/modals/common-modal'
+import { DeletionModal } from '../../../../common/modals/deletion-modal'
+import { deleteUploadedMedia } from '../../../../../api/media'
+import { useUiNotifications } from '../../../../notifications/ui-notification-boundary'
+import { Trans, useTranslation } from 'react-i18next'
+
+type MediaEntryDeletionModalProps = Pick & ModalVisibilityProps
+
+/**
+ * Renders a modal for confirming the deletion of a media entry.
+ *
+ * @param entry The media entry to delete
+ * @param show Whether the modal should be shown
+ * @param onHide The callback when the modal should be hidden
+ */
+export const MediaEntryDeletionModal: React.FC = ({ entry, show, onHide }) => {
+ useTranslation()
+ const { showErrorNotification, dispatchUiNotification } = useUiNotifications()
+
+ const handleDelete = useCallback(() => {
+ deleteUploadedMedia(entry.id)
+ .then(() => {
+ dispatchUiNotification('common.success', 'editor.mediaBrowser.mediaDeleted', {})
+ })
+ .catch(showErrorNotification('editor.mediaBrowser.errorDeleting'))
+ .finally(onHide)
+ }, [showErrorNotification, dispatchUiNotification, entry, onHide])
+
+ return (
+
+
+ )
+}
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/media-browser-sidebar-menu/media-entry.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/media-browser-sidebar-menu/media-entry.tsx
new file mode 100644
index 000000000..8add73701
--- /dev/null
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/media-browser-sidebar-menu/media-entry.tsx
@@ -0,0 +1,93 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import React, { useCallback, useMemo } from 'react'
+import type { MediaUpload } from '../../../../../api/media/types'
+import { useBaseUrl } from '../../../../../hooks/common/use-base-url'
+import { Button, ButtonGroup } from 'react-bootstrap'
+import {
+ Trash as IconTrash,
+ FileRichtextFill as IconFileRichtextFill,
+ Person as IconPerson,
+ Clock as IconClock
+} from 'react-bootstrap-icons'
+import { useIsOwner } from '../../../../../hooks/common/use-is-owner'
+import { useApplicationState } from '../../../../../hooks/common/use-application-state'
+import { UserAvatarForUsername } from '../../../../common/user-avatar/user-avatar-for-username'
+import { useChangeEditorContentCallback } from '../../../change-content-context/use-change-editor-content-callback'
+import { replaceSelection } from '../../../editor-pane/tool-bar/formatters/replace-selection'
+
+export interface MediaEntryProps {
+ entry: MediaUpload
+ onDelete: (entry: MediaUpload) => void
+}
+
+/**
+ * Renders a single media entry in the media browser.
+ *
+ * @param entry The media entry to render
+ * @param onDelete The callback to call when the entry should be deleted
+ */
+export const MediaEntry: React.FC = ({ entry, onDelete }) => {
+ const changeEditorContent = useChangeEditorContentCallback()
+ const user = useApplicationState((state) => state.user?.username)
+ const baseUrl = useBaseUrl()
+ const isOwner = useIsOwner()
+
+ const imageUrl = useMemo(() => {
+ return `${baseUrl}api/private/media/${entry.id}`
+ }, [entry, baseUrl])
+ const textCreatedTime = useMemo(() => {
+ return new Date(entry.createdAt).toLocaleString()
+ }, [entry])
+
+ const handleInsertIntoNote = useCallback(() => {
+ changeEditorContent?.(({ currentSelection }) => {
+ return replaceSelection(
+ { from: currentSelection.to ?? currentSelection.from },
+ ``,
+ true
+ )
+ })
+ }, [changeEditorContent, entry, imageUrl])
+
+ const deleteEntry = useCallback(() => {
+ onDelete(entry)
+ }, [entry, onDelete])
+
+ return (
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/frontend/src/components/editor-page/sidebar/types.ts b/frontend/src/components/editor-page/sidebar/types.ts
index 7d01f3620..b406ad640 100644
--- a/frontend/src/components/editor-page/sidebar/types.ts
+++ b/frontend/src/components/editor-page/sidebar/types.ts
@@ -30,6 +30,7 @@ export enum DocumentSidebarMenuSelection {
NONE,
USERS_ONLINE,
NOTE_INFO,
+ MEDIA_BROWSER,
IMPORT,
EXPORT
}
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+ )
+}
diff --git a/frontend/src/components/editor-page/sidebar/types.ts b/frontend/src/components/editor-page/sidebar/types.ts
index 7d01f3620..b406ad640 100644
--- a/frontend/src/components/editor-page/sidebar/types.ts
+++ b/frontend/src/components/editor-page/sidebar/types.ts
@@ -30,6 +30,7 @@ export enum DocumentSidebarMenuSelection {
NONE,
USERS_ONLINE,
NOTE_INFO,
+ MEDIA_BROWSER,
IMPORT,
EXPORT
}
+
+
+
+
+
+
+
+
+ +
+ + +