Added missing embellishment to components

src/components/AppLayout.tsx

@@ -230,7 +230,10 @@ export const AppLayout = ({
   );
 };
 
-// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+/*
+ *                                    ╭──────────────────────╮
+ * ───────────────────────────────────╯  PRIVATE COMPONENTS  ╰──────────────────────────────────────
+ */
 
 interface ContentPlaceholderProps {
   message: string;

src/components/Chronicles/ChroniclePreview.tsx

@@ -20,6 +20,8 @@ interface Props {
   onClick?: MouseEventHandler<HTMLAnchorElement>;
 }
 
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
 export const ChroniclePreview = ({
   date,
   url,

src/components/Chronicles/ChroniclesList.tsx

@@ -26,6 +26,8 @@ interface Props {
   title: string;
 }
 
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
 const ChroniclesList = ({ chronicles, currentSlug, title }: Props): JSX.Element => {
   const setSubPanelOpened = useAtomSetter(atoms.layout.subPanelOpened);
   const { value: isOpen, toggle: toggleOpen } = useBoolean(

src/components/ColoredSvg.tsx

@@ -1,10 +1,17 @@
 import { cJoin } from "helpers/className";
 
+/*
+ *                                         ╭─────────────╮
+ * ────────────────────────────────────────╯  CONSTANTS  ╰──────────────────────────────────────────
+ */
+
 interface Props {
   src: string;
   className?: string;
 }
 
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
 export const ColoredSvg = ({ src, className }: Props): JSX.Element => (
   <div
     className={cJoin(

src/components/Containers/Paginator.tsx

@@ -8,6 +8,11 @@ import { useFormat } from "hooks/useFormat";
 import { useScrollTopOnChange } from "hooks/useScrollTopOnChange";
 import { Ids } from "types/ids";
 
+/*
+ *                                        ╭─────────────╮
+ * ───────────────────────────────────────╯  COMPONENT  ╰───────────────────────────────────────────
+ */
+
 interface Props {
   page: number;
   onPageChange: (newPage: number) => void;
@@ -15,6 +20,8 @@ interface Props {
   children: React.ReactNode;
 }
 
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
 export const Paginator = ({
   page,
   onPageChange,

src/components/Containers/UpPressable.tsx

@@ -2,6 +2,11 @@ import { MouseEventHandler, useState } from "react";
 import { Link } from "components/Inputs/Link";
 import { cIf, cJoin } from "helpers/className";
 
+/*
+ *                                        ╭─────────────╮
+ * ───────────────────────────────────────╯  COMPONENT  ╰───────────────────────────────────────────
+ */
+
 interface Props {
   children: React.ReactNode;
   href: string;
@@ -11,6 +16,8 @@ interface Props {
   onClick?: MouseEventHandler<HTMLAnchorElement>;
 }
 
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
 export const UpPressable = ({
   children,
   href,

src/components/Contents/PreviewFolder.tsx

@@ -4,12 +4,19 @@ import { TranslatedProps } from "types/TranslatedProps";
 import { UpPressable } from "components/Containers/UpPressable";
 import { cIf, cJoin } from "helpers/className";
 
+/*
+ *                                        ╭─────────────╮
+ * ───────────────────────────────────────╯  COMPONENT  ╰───────────────────────────────────────────
+ */
+
 interface PreviewFolderProps {
   href: string;
   title?: string | null;
   disabled?: boolean;
 }
 
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
 export const PreviewFolder = ({ href, title, disabled }: PreviewFolderProps): JSX.Element => (
   <UpPressable href={href} disabled={disabled}>
     <div
@@ -23,7 +30,10 @@ export const PreviewFolder = ({ href, title, disabled }: PreviewFolderProps): JS
   </UpPressable>
 );
 
-// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+/*
+ *                                    ╭──────────────────────╮
+ * ───────────────────────────────────╯  TRANSLATED VARIANT  ╰──────────────────────────────────────
+ */
 
 export const TranslatedPreviewFolder = ({
   translations,

src/components/Inputs/Link.tsx

@@ -4,6 +4,11 @@ import { ConditionalWrapper, Wrapper } from "helpers/component";
 import { isDefinedAndNotEmpty } from "helpers/asserts";
 import { cIf, cJoin } from "helpers/className";
 
+/*
+ *                                        ╭─────────────╮
+ * ───────────────────────────────────────╯  COMPONENT  ╰───────────────────────────────────────────
+ */
+
 interface Props {
   href: string | null | undefined;
   className?: string;
@@ -15,6 +20,8 @@ interface Props {
   linkStyled?: boolean;
 }
 
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
 export const Link = ({
   href,
   children,
@@ -48,6 +55,11 @@ export const Link = ({
   </ConditionalWrapper>
 );
 
+/*
+ *                                    ╭──────────────────────╮
+ * ───────────────────────────────────╯  PRIVATE COMPONENTS  ╰──────────────────────────────────────
+ */
+
 interface LinkWrapperProps {
   href: string;
   className?: string;
@@ -77,6 +89,8 @@ const LinkWrapper = ({
   </NextLink>
 );
 
+// ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
+
 interface DisabledWrapperProps {
   className?: string;
 }

src/components/LightBox.tsx

@@ -12,6 +12,11 @@ import { isDefined } from "helpers/asserts";
 import { useAtomGetter } from "helpers/atoms";
 import { atoms } from "contexts/atoms";
 
+/*
+ *                                        ╭─────────────╮
+ * ───────────────────────────────────────╯  COMPONENT  ╰───────────────────────────────────────────
+ */
+
 interface Props {
   onCloseRequest: () => void;
   isVisible: boolean;
@@ -119,6 +124,11 @@ export const LightBox = ({
   );
 };
 
+/*
+ *                                    ╭──────────────────────╮
+ * ───────────────────────────────────╯  PRIVATE COMPONENTS  ╰──────────────────────────────────────
+ */
+
 interface ControlButtonsProps {
   isPreviousImageAvailable: boolean;
   isNextImageAvailable: boolean;

src/components/Panels/SearchPopup.tsx

@@ -481,6 +481,11 @@ export const SearchPopup = (): JSX.Element => {
   );
 };
 
+/*
+ *                                    ╭──────────────────────╮
+ * ───────────────────────────────────╯  PRIVATE COMPONENTS  ╰──────────────────────────────────────
+ */
+
 interface SearchResultSectionProps {
   title?: string | null;
   icon: MaterialSymbol;