adapated to new alias notes

public/locales/de-DE/translation.json

@@ -164,6 +164,18 @@
                             "label": "Erstellungsdatum",
                             "empty": "Nicht verfügbar"
                         },
+                        "creationContext": {
+                            "label": "Kontext",
+                            "web": {
+                                "label": "Auf dieser Instanz erstellt"
+                            },
+                            "extension": {
+                                "label": "In der Erweiterung erstellt"
+                            }
+                        },
+                        "createdOn": {
+                            "label": "Erstellt auf"
+                        },
                         "personalNotes": {
                             "label": "Persönliche Notizen",
                             "empty": "-",

public/locales/en-US/translation.json

@@ -172,6 +172,18 @@
                             "label": "Created at",
                             "empty": "Unavailable"
                         },
+                        "creationContext": {
+                            "label": "Creation Context",
+                            "web": {
+                                "label": "Created on this instance"
+                            },
+                            "extension": {
+                                "label": "Created in the extension"
+                            }
+                        },
+                        "createdOn": {
+                            "label": "Created on"
+                        },
                         "personalNotes": {
                             "label": "Personal Notes",
                             "empty": "-",

src/components/SimpleOverlayInformation.tsx

@@ -1,7 +1,7 @@
 import {ReactElement} from "react"
 import {useTranslation} from "react-i18next"
 
-import {Grid, Typography} from "@mui/material"
+import {Box, Grid, Typography} from "@mui/material"
 
 export interface SimpleOverlayInformationProps {
 	label: string
@@ -25,12 +25,10 @@ export default function SimpleOverlayInformation({
 				<Typography variant="overline">{label}</Typography>
 			</Grid>
 			<Grid item>
-				<Grid container spacing={1} flexDirection="row" alignItems="center">
-					{icon && <Grid item>{icon}</Grid>}
-					<Grid item>
-						{children || <Typography variant="body2">{emptyTextValue}</Typography>}
-					</Grid>
-				</Grid>
+				<Box display="flex" flexDirection="row" gap={1} alignItems="center">
+					{icon}
+					{children || <Typography variant="body2">{emptyTextValue}</Typography>}
+				</Box>
 			</Grid>
 		</Grid>
 	)

src/route-widgets/AliasDetailRoute/AliasNotesForm.tsx

@@ -2,8 +2,8 @@ import * as yup from "yup"
 import {TiDelete} from "react-icons/ti"
 import {AxiosError} from "axios"
 import {ReactElement, useContext, useMemo, useState} from "react"
-import {MdCheckCircle, MdEditCalendar} from "react-icons/md"
-import {RiStickyNoteFill} from "react-icons/ri"
+import {MdCheckCircle, MdEditCalendar, MdExtension} from "react-icons/md"
+import {RiGlobalLine, RiLinkM, RiStickyNoteFill} from "react-icons/ri"
 import {FieldArray, FormikProvider, useFormik} from "formik"
 import {FaPen} from "react-icons/fa"
 import {useTranslation} from "react-i18next"
@@ -16,6 +16,7 @@ import {
 	Grid,
 	IconButton,
 	InputAdornment,
+	Link,
 	List,
 	ListItem,
 	ListItemIcon,
@@ -51,6 +52,11 @@ interface Form {
 	detail?: string
 }
 
+const CREATION_CONTEXT_ICON_MAP: Record<AliasNote["data"]["creationContext"], ReactElement> = {
+	web: <RiGlobalLine />,
+	extension: <MdExtension />,
+}
+
 export default function AliasNotesForm({id, notes, queryKey}: AliasNotesFormProps): ReactElement {
 	const {t} = useTranslation()
 	const {showError, showSuccess} = useErrorSuccessSnacks()
@@ -215,6 +221,43 @@ export default function AliasNotesForm({id, notes, queryKey}: AliasNotesFormProp
 									</SimpleOverlayInformation>
 								</Grid>
 							)}
+							{notes.data.creationContext && (
+								<Grid item>
+									<SimpleOverlayInformation
+										icon={CREATION_CONTEXT_ICON_MAP[notes.data.creationContext]}
+										label={t(
+											"routes.AliasDetailRoute.sections.notes.form.creationContext.label",
+										)}
+									>
+										<Typography variant="body1">
+											{t(
+												`routes.AliasDetailRoute.sections.notes.form.creationContext.${notes.data.creationContext}.label`,
+											)}
+										</Typography>
+									</SimpleOverlayInformation>
+								</Grid>
+							)}
+							{notes.data.createdOn && (
+								<Grid item>
+									<SimpleOverlayInformation
+										icon={<RiLinkM />}
+										label={t(
+											"routes.AliasDetailRoute.sections.notes.form.createdOn.label",
+										)}
+									>
+										<Link
+											href={notes.data.createdOn}
+											component="a"
+											target="_blank"
+											rel="noopener noreferrer nofollow"
+										>
+											<Typography variant="body1">
+												{notes.data.createdOn}
+											</Typography>
+										</Link>
+									</SimpleOverlayInformation>
+								</Grid>
+							)}
 							<Grid item>
 								<SimpleOverlayInformation
 									label={t(

src/server-types.ts

@@ -101,6 +101,7 @@ export interface AliasNote {
 	version: "1.0"
 	data: {
 		createdAt: Date | null
+		createdOn: string | null
 		creationContext: "extension" | "web"
 		personalNotes: string
 		websites: Array<{