@scm-manager/ui-components 4.0.0-REACT19-20250910-124634 → 4.0.0-REACT19-20250915-121549

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "4.0.0-REACT19-20250910-124634",
+  "version": "4.0.0-REACT19-20250915-121549",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -37,10 +37,10 @@
     "@scm-manager/jest-preset": "^2.15.0-alpha1",
     "@scm-manager/prettier-config": "^2.12.0",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-shortcuts": "4.0.0-REACT19-20250910-124634",
-    "@scm-manager/ui-syntaxhighlighting": "4.0.0-REACT19-20250910-124634",
-    "@scm-manager/ui-text": "4.0.0-REACT19-20250910-124634",
-    "@scm-manager/ui-types": "4.0.0-REACT19-20250910-124634",
+    "@scm-manager/ui-shortcuts": "4.0.0-REACT19-20250915-121549",
+    "@scm-manager/ui-syntaxhighlighting": "4.0.0-REACT19-20250915-121549",
+    "@scm-manager/ui-text": "4.0.0-REACT19-20250915-121549",
+    "@scm-manager/ui-types": "4.0.0-REACT19-20250915-121549",
     "@storybook/addon-actions": "^9.0.8",
     "@storybook/addon-docs": "^9.1.5",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
@@ -67,15 +67,15 @@
     "storybook-addon-themes": "^6.1.0"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "4.0.0-REACT19-20250910-124634",
-    "@scm-manager/ui-buttons": "4.0.0-REACT19-20250910-124634",
-    "@scm-manager/ui-core": "4.0.0-REACT19-20250910-124634",
-    "@scm-manager/ui-extensions": "4.0.0-REACT19-20250910-124634",
-    "@scm-manager/ui-layout": "4.0.0-REACT19-20250910-124634",
-    "@scm-manager/ui-overlays": "4.0.0-REACT19-20250910-124634",
+    "@scm-manager/ui-api": "4.0.0-REACT19-20250915-121549",
+    "@scm-manager/ui-buttons": "4.0.0-REACT19-20250915-121549",
+    "@scm-manager/ui-core": "4.0.0-REACT19-20250915-121549",
+    "@scm-manager/ui-extensions": "4.0.0-REACT19-20250915-121549",
+    "@scm-manager/ui-layout": "4.0.0-REACT19-20250915-121549",
+    "@scm-manager/ui-overlays": "4.0.0-REACT19-20250915-121549",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
-    "react-diff-view": "^2.4.10",
+    "react-diff-view": "2.6.0",
     "react-error-boundary": "^6.0.0",
     "react-hook-form": "^7.33.1",
     "react-select": "^2.1.2",

package/src/Image.tsx

@@ -22,6 +22,7 @@ type Props = {
   alt: string;
   title?: string;
   className?: string;
+  crossOrigin?: "anonymous" | "";
 };
 
 /**
@@ -37,8 +38,8 @@ class Image extends React.Component<Props> {
   };
 
   render() {
-    const { alt, title, className } = this.props;
-    return <img className={className} src={this.createImageSrc()} alt={alt} title={title} />;
+    const { alt, title, className, crossOrigin } = this.props;
+    return <img className={className} src={this.createImageSrc()} alt={alt} title={title} crossOrigin={crossOrigin} />;
   }
 }
 

package/src/__snapshots__/storyshots.test.ts.snap

@@ -1825,18 +1825,20 @@ exports[`Storyshots Footer Full 1`] = `
           className="has-text-weight-bold mb-2"
         >
           <div
+            className="is-flex"
             data-testid="trillian-mcmillian"
           >
-            <span
-              className="Footer__AvatarContainer-sc-k70cxq-1 kckyuz image is-rounded"
-            >
+            <div>
               <img
                 alt="trillian"
-                className="is-rounded Footer__VCenteredAvatar-sc-k70cxq-0 bGojWR"
+                className="is-rounded Footer__VCenteredAvatar-sc-k70cxq-0 gNPbnb"
+                crossOrigin="anonymous"
                 src="test-file-stub"
               />
-            </span>
-            Trillian McMillian
+            </div>
+            <div>
+              Trillian McMillian
+            </div>
           </div>
         </h2>
         <ul
@@ -2031,18 +2033,20 @@ exports[`Storyshots Footer With Avatar 1`] = `
           className="has-text-weight-bold mb-2"
         >
           <div
+            className="is-flex"
             data-testid="trillian-mcmillian"
           >
-            <span
-              className="Footer__AvatarContainer-sc-k70cxq-1 kckyuz image is-rounded"
-            >
+            <div>
               <img
                 alt="trillian"
-                className="is-rounded Footer__VCenteredAvatar-sc-k70cxq-0 bGojWR"
+                className="is-rounded Footer__VCenteredAvatar-sc-k70cxq-0 gNPbnb"
+                crossOrigin="anonymous"
                 src="test-file-stub"
               />
-            </span>
-            Trillian McMillian
+            </div>
+            <div>
+              Trillian McMillian
+            </div>
           </div>
         </h2>
         <ul
@@ -20073,6 +20077,7 @@ exports[`Storyshots Repositories/Annotate With Avatars 1`] = `
                 <img
                   alt="Arthur Dent"
                   className="has-rounded-border AuthorImage-sc-ygvjd8-0 dTapGF"
+                  crossOrigin="anonymous"
                   src="https://robohash.org/arthur.dent@hitchhiker.com.png"
                 />
                 Arthur Dent
@@ -20135,6 +20140,7 @@ exports[`Storyshots Repositories/Annotate With Avatars 1`] = `
                 <img
                   alt="Tricia Marie McMillan"
                   className="has-rounded-border AuthorImage-sc-ygvjd8-0 dTapGF"
+                  crossOrigin="anonymous"
                   src="https://robohash.org/trillian@hitchhiker.com.png"
                 />
                 Tricia Marie McMillan
@@ -20197,6 +20203,7 @@ exports[`Storyshots Repositories/Annotate With Avatars 1`] = `
                 <img
                   alt="Arthur Dent"
                   className="has-rounded-border AuthorImage-sc-ygvjd8-0 dTapGF"
+                  crossOrigin="anonymous"
                   src="https://robohash.org/arthur.dent@hitchhiker.com.png"
                 />
                 Arthur Dent
@@ -20241,6 +20248,7 @@ exports[`Storyshots Repositories/Annotate With Avatars 1`] = `
                 <img
                   alt="Ford Prefect"
                   className="has-rounded-border AuthorImage-sc-ygvjd8-0 dTapGF"
+                  crossOrigin="anonymous"
                   src="https://robohash.org/ford.prefect@hitchhiker.com.png"
                 />
                 Ford Prefect
@@ -20285,6 +20293,7 @@ exports[`Storyshots Repositories/Annotate With Avatars 1`] = `
                 <img
                   alt="Arthur Dent"
                   className="has-rounded-border AuthorImage-sc-ygvjd8-0 dTapGF"
+                  crossOrigin="anonymous"
                   src="https://robohash.org/arthur.dent@hitchhiker.com.png"
                 />
                 Arthur Dent
@@ -20367,11 +20376,12 @@ exports[`Storyshots Repositories/Changesets Co-Authors with avatar 1`] = `
                 className="media-left mt-2 mr-2"
               >
                 <div
-                  className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 cDjLjl image"
+                  className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 gwbxYG image"
                 >
                   <img
                     alt="SCM Administrator"
                     className="has-rounded-border"
+                    crossOrigin="anonymous"
                     src="https://robohash.org/scm-admin@scm-manager.org"
                   />
                 </div>
@@ -20425,6 +20435,7 @@ exports[`Storyshots Repositories/Changesets Co-Authors with avatar 1`] = `
                         <img
                           alt="Ford Prefect"
                           className="ContributorAvatar-sc-1yz8zn-0 lhgGHS"
+                          crossOrigin="anonymous"
                           src="https://robohash.org/ford.prefect@hitchhiker.com"
                         />
                       </a>
@@ -20435,6 +20446,7 @@ exports[`Storyshots Repositories/Changesets Co-Authors with avatar 1`] = `
                         <img
                           alt="Zaphod Beeblebrox"
                           className="ContributorAvatar-sc-1yz8zn-0 lhgGHS"
+                          crossOrigin="anonymous"
                           src="https://robohash.org/zaphod.beeblebrox@hitchhiker.cm"
                         />
                       </a>
@@ -20445,6 +20457,7 @@ exports[`Storyshots Repositories/Changesets Co-Authors with avatar 1`] = `
                         <img
                           alt="Tricia Marie McMillan"
                           className="ContributorAvatar-sc-1yz8zn-0 lhgGHS"
+                          crossOrigin="anonymous"
                           src="https://robohash.org/trillian@hitchhiker.cm"
                         />
                       </a>
@@ -20541,11 +20554,12 @@ exports[`Storyshots Repositories/Changesets Commiter and Co-Authors with avatar
                 className="media-left mt-2 mr-2"
               >
                 <div
-                  className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 cDjLjl image"
+                  className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 gwbxYG image"
                 >
                   <img
                     alt="SCM Administrator"
                     className="has-rounded-border"
+                    crossOrigin="anonymous"
                     src="https://robohash.org/scm-admin@scm-manager.org"
                   />
                 </div>
@@ -20594,6 +20608,7 @@ exports[`Storyshots Repositories/Changesets Commiter and Co-Authors with avatar
                       <img
                         alt="Zaphod Beeblebrox"
                         className="ContributorAvatar-sc-1yz8zn-0 lhgGHS"
+                        crossOrigin="anonymous"
                         src="https://robohash.org/zaphod.beeblebrox@hitchhiker.cm"
                       />
                     </a>
@@ -20609,6 +20624,7 @@ exports[`Storyshots Repositories/Changesets Commiter and Co-Authors with avatar
                       <img
                         alt="Ford Prefect"
                         className="ContributorAvatar-sc-1yz8zn-0 lhgGHS"
+                        crossOrigin="anonymous"
                         src="https://robohash.org/ford.prefect@hitchhiker.com"
                       />
                     </a>
@@ -21613,11 +21629,12 @@ exports[`Storyshots Repositories/Changesets With avatar 1`] = `
                 className="media-left mt-2 mr-2"
               >
                 <div
-                  className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 cDjLjl image"
+                  className="SingleChangeset__FixedSizedAvatar-sc-ytpqp9-0 gwbxYG image"
                 >
                   <img
                     alt="SCM Administrator"
                     className="has-rounded-border"
+                    crossOrigin="anonymous"
                     src="test-file-stub"
                   />
                 </div>

package/src/avatar/AvatarImage.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { FC } from "react";
-import Image from "../Image";
+import { Image } from "@scm-manager/ui-core";
 import { EXTENSION_POINT, Person } from "./Avatar";
 import { useBinder } from "@scm-manager/ui-extensions";
 
@@ -36,7 +36,7 @@ const AvatarImage: FC<Props> = ({ person, representation = "rounded-border", cla
       classes += " " + className;
     }
 
-    return <Image className={classes} src={avatar} alt={person.name} />;
+    return <Image className={classes} src={avatar} alt={person.name} crossOrigin="anonymous" />;
   }
 
   return null;

package/src/config/ConfigurationBinder.tsx

@@ -19,13 +19,13 @@ import { binder, extensionPoints } from "@scm-manager/ui-extensions";
 import { NavLink } from "../navigation";
 import { Route } from "react-router-dom";
 import { useTranslation, WithTranslation, withTranslation } from "react-i18next";
-import { Link, Links, Namespace, Repository } from "@scm-manager/ui-types";
+import { Link, Links, Repository } from "@scm-manager/ui-types";
 import {
   TitledGlobalSettingComponent,
   TitledNamespaceSettingComponent,
   TitledRepositorySettingComponent,
 } from "./TitledSettings";
-import { NAMESPACE_SUB_ROUTES, useNamespaceFromParams } from "@scm-manager/ui-core";
+import { NAMESPACE_SUB_ROUTES, REPOSITORY_SUB_ROUTES } from "@scm-manager/ui-core";
 
 type GlobalRouteProps = {
   url: string;
@@ -37,7 +37,7 @@ type RepositoryRouteProps = {
   repository: Repository;
 };
 
-type RepositoryNavProps = WithTranslation & { url: string };
+type RepositoryNavProps = WithTranslation & { absoluteRepoUrl: string };
 
 type NamespaceNavProps = WithTranslation & { url: string };
 
@@ -119,8 +119,8 @@ class ConfigurationBinder {
     };
 
     // create NavigationLink with translated label
-    const RepoNavLink = withTranslation(this.i18nNamespace)(({ t, url }: RepositoryNavProps) => {
-      return this.navLink(url + to, labelI18nKey, t);
+    const RepoNavLink = withTranslation(this.i18nNamespace)(({ t, absoluteRepoUrl }: RepositoryNavProps) => {
+      return this.navLink(absoluteRepoUrl + to, labelI18nKey, t);
     });
 
     // bind navigation link to extension point
@@ -144,7 +144,7 @@ class ConfigurationBinder {
     to: string,
     labelI18nKey: string,
     linkName: string,
-    RepositoryComponent: any,
+    RepositoryComponent: ComponentType<object>,
     sortKey?: string,
   ) {
     // create predicate based on the link name of the current repository route
@@ -153,41 +153,37 @@ class ConfigurationBinder {
       return props.repository && props.repository._links && props.repository._links[linkName];
     };
 
+    const sanitizedTo = to.startsWith("/") ? to.substring(1) : to;
+
     // create NavigationLink with translated label
-    const RepoNavLink = withTranslation(this.i18nNamespace)(({ t, url }: RepositoryNavProps) => {
-      return this.navLink(url + "/settings" + to, labelI18nKey, t, { activeOnlyWhenExact: false });
+    const RepoNavLink = withTranslation(this.i18nNamespace)(({ t, absoluteRepoUrl }: RepositoryNavProps) => {
+      return this.navLink(`${absoluteRepoUrl}/${REPOSITORY_SUB_ROUTES.SETTINGS}/${sanitizedTo}`, labelI18nKey, t, {
+        activeOnlyWhenExact: false,
+      });
     });
 
     // bind navigation link to extension point
     binder.bind("repository.setting", RepoNavLink, repoPredicate, sortKey ?? linkName);
 
     // route for global configuration, passes the current repository to component
-    const RepoRoute = ({ repository, ...additionalProps }: RepositoryRouteProps) => {
-      const link = repository._links[linkName];
-
-      if (link) {
-        return this.route(
-          "settings" + to,
-          <TitledRepositorySettingComponent
-            i18nNamespace={this.i18nNamespace}
-            label={labelI18nKey}
-            repository={repository}
-          >
-            <RepositoryComponent repository={repository} link={(link as Link).href} {...additionalProps} />
-          </TitledRepositorySettingComponent>,
-        );
-      }
+    const RepoRoute = ({ ...additionalProps }: RepositoryRouteProps) => {
+      return this.route(
+        "settings" + to,
+        <TitledRepositorySettingComponent i18nNamespace={this.i18nNamespace} label={labelI18nKey}>
+          <RepositoryComponent {...additionalProps} />
+        </TitledRepositorySettingComponent>,
+      );
     };
 
     // bind config route to extension point
-    binder.bind("repository.route", RepoRoute, repoPredicate);
+    binder.bind("repository.route", RepoRoute);
   }
 
   bindNamespaceSetting(
     to: string,
     labelI18nKey: string,
     linkName: string,
-    ConfigurationComponent: ComponentType<{ link: string; namespace: Namespace }>,
+    ConfigurationComponent: ComponentType<object>,
   ) {
     const namespacePredicate = (props: extensionPoints.NamespaceSetting["props"]) =>
       props.namespace && props.namespace._links && props.namespace._links[linkName];
@@ -200,20 +196,12 @@ class ConfigurationBinder {
     binder.bind<extensionPoints.NamespaceSetting>("namespace.setting", NamespaceNavLink, namespacePredicate);
 
     const NamespaceRoute = ({ ...additionalProps }: NamespaceNavProps) => {
-      const namespace = useNamespaceFromParams();
-      if (namespace) {
-        const link = namespace._links[linkName];
-
-        if (link) {
-          return this.route(
-            NAMESPACE_SUB_ROUTES.SETTINGS + to,
-            <TitledNamespaceSettingComponent i18nNamespace={this.i18nNamespace} label={labelI18nKey}>
-              <ConfigurationComponent namespace={namespace} link={(link as Link).href} {...additionalProps} />
-            </TitledNamespaceSettingComponent>,
-          );
-        }
-      }
-      return null;
+      return this.route(
+        NAMESPACE_SUB_ROUTES.SETTINGS + to,
+        <TitledNamespaceSettingComponent i18nNamespace={this.i18nNamespace} label={labelI18nKey}>
+          <ConfigurationComponent {...additionalProps} />
+        </TitledNamespaceSettingComponent>,
+      );
     };
 
     binder.bind("namespace.route", NamespaceRoute);

package/src/config/TitledSettings.tsx

@@ -16,8 +16,12 @@
 
 import React, { FC, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import { useDocumentTitle, useDocumentTitleForRepository, useNamespaceFromParams } from "@scm-manager/ui-core";
-import { Repository } from "@scm-manager/ui-types";
+import {
+  useDocumentTitle,
+  useDocumentTitleForRepository,
+  useNamespaceFromParams,
+  useRepositoryFromParams,
+} from "@scm-manager/ui-core";
 
 type GlobalProps = {
   i18nNamespace: string;
@@ -35,16 +39,11 @@ export const TitledGlobalSettingComponent: FC<GlobalProps> = ({ children, i18nNa
 type RepositoryProps = {
   i18nNamespace: string;
   label: string;
-  repository: Repository;
   children?: ReactNode;
 };
 
-export const TitledRepositorySettingComponent: FC<RepositoryProps> = ({
-  children,
-  i18nNamespace,
-  label,
-  repository,
-}) => {
+export const TitledRepositorySettingComponent: FC<RepositoryProps> = ({ children, i18nNamespace, label }) => {
+  const repository = useRepositoryFromParams();
   const [t] = useTranslation(i18nNamespace);
   const [commonTranslation] = useTranslation("commons");
   useDocumentTitleForRepository(repository, t(label), commonTranslation("documentTitle.repositoryConfiguration"));

package/src/layout/Footer.tsx

@@ -51,23 +51,19 @@ type TitleWithAvatarProps = {
 };
 
 const VCenteredAvatar = styled(AvatarImage)`
-  vertical-align: middle;
-`;
-
-const AvatarContainer = styled.span`
-  float: left;
+  width: 1rem !important;
+  height: 1rem !important;
   margin-right: 0.3em;
   padding-top: 0.2em;
-  width: 1em;
-  height: 1em;
+  border-radius: 100%;
 `;
 
 const TitleWithAvatar: FC<TitleWithAvatarProps> = ({ me }) => (
-  <div {...createAttributesForTesting(me.displayName)}>
-    <AvatarContainer className="image is-rounded">
+  <div {...createAttributesForTesting(me.displayName)} className="is-flex">
+    <div>
       <VCenteredAvatar person={me} representation="rounded" />
-    </AvatarContainer>
-    {me.displayName}
+    </div>
+    <div>{me.displayName}</div>
   </div>
 );
 

package/src/repos/DiffTypes.ts

@@ -14,9 +14,9 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { ReactNode } from "react";
+import { FC, PropsWithChildren, ReactNode } from "react";
 import { DefaultCollapsed } from "./defaultCollapsed";
-import { Change, Hunk, FileDiff as File } from "@scm-manager/ui-types";
+import { Change, Hunk, FileDiff as File, FileChangeType } from "@scm-manager/ui-types";
 
 export type ChangeEvent = {
   change: Change;
@@ -31,6 +31,20 @@ export type AnnotationFactoryContext = BaseContext;
 
 export type FileAnnotationFactory = (file: File) => ReactNode[];
 
+export type FileTreeNodeWrapper = FC<
+  PropsWithChildren & {
+    name: string;
+    path: string;
+    changeType?: FileChangeType;
+    iconName: string;
+    iconColor: string;
+    isFile: boolean;
+    originalIcon: ReactNode;
+    originalLabel: ReactNode;
+    isCurrentFile: boolean;
+  }
+>;
+
 // key = change id, value = react component
 export type AnnotationFactory = (context: AnnotationFactoryContext) => {
   [key: string]: any;

package/src/repos/changesets/ChangesetAuthor.tsx

@@ -57,11 +57,11 @@ const ContributorWithAvatar: FC<PersonAvatarProps> = ({ person, avatar }) => {
   if (person.mail) {
     return (
       <a href={"mailto:" + person.mail} title={t("changeset.contributors.mailto") + " " + person.mail}>
-        <ContributorAvatar src={avatar} alt={person.name} />
+        <ContributorAvatar src={avatar} alt={person.name} crossOrigin="anonymous" />
       </a>
     );
   }
-  return <ContributorAvatar src={avatar} alt={person.name} title={person.name} />;
+  return <ContributorAvatar src={avatar} alt={person.name} title={person.name} crossOrigin="anonymous" />;
 };
 
 export const SingleContributor: FC<PersonProps> = ({ person, className, displayTextOnly }) => {

package/src/repos/changesets/Contributor.tsx

@@ -30,7 +30,7 @@ const Contributor: FC<{ person: Person }> = ({ person }) => {
     if (avatar) {
       prefix = (
         <>
-          <ContributorAvatar src={avatar} alt={person.name} />{" "}
+          <ContributorAvatar src={avatar} alt={person.name} crossOrigin="anonymous" />{" "}
         </>
       );
     }

package/src/repos/changesets/SingleChangeset.tsx

@@ -37,6 +37,7 @@ type Props = {
 const FixedSizedAvatar = styled.div`
   width: 35px;
   height: 35px;
+  overflow: hidden;
 `;
 
 const FullWidthDiv = styled.div`

package/src/repos/diff/DiffFileHunk.tsx

@@ -21,7 +21,7 @@ import { StyledHunk } from "./styledElements";
 import LastHunkFooter from "./LastHunkFooter";
 import { DiffExpandedCallback, DiffFileProps, ErrorHandler } from "./types";
 import HunkFooter from "./HunkFooter";
-// @ts-ignore react-diff-view does not provide types
+// @ts-expect-error react-diff-view does not provide types with v2
 import { Decoration, getChangeKey } from "react-diff-view";
 import { collectHunkAnnotations, markConflicts } from "./helpers";
 import HunkHeader from "./HunkHeader";
@@ -70,7 +70,7 @@ const DiffFileHunk: FC<Props> = ({
         onClick(context);
       }
     },
-    [file, onClick]
+    [file, onClick],
   );
 
   const gutterEvents = useMemo(
@@ -78,7 +78,7 @@ const DiffFileHunk: FC<Props> = ({
       onClick && {
         onClick: (event: ChangeEvent) => handleClickEvent(event.change, hunk),
       },
-    [handleClickEvent, hunk, onClick]
+    [handleClickEvent, hunk, onClick],
   );
 
   if (shouldMarkConflicts && hunk.changes) {
@@ -92,13 +92,13 @@ const DiffFileHunk: FC<Props> = ({
         expandableHunk={expandableHunk}
         diffExpanded={diffExpanded}
         diffExpansionFailed={diffExpansionFailed}
-      />
+      />,
     );
   } else if (i > 0) {
     items.push(
       <Decoration key={"decoration-" + hunk.content}>
         <hr className="my-2" />
-      </Decoration>
+      </Decoration>,
     );
   }
 
@@ -112,7 +112,11 @@ const DiffFileHunk: FC<Props> = ({
       icon={hunkGutterHoverIcon}
       actionable={!!gutterEvents}
       highlightLineOnHover={highlightLineOnHover}
-    />
+      selectedChanges={[]}
+      generateAnchorID={() => undefined}
+      // @ts-expect-error react-diff-view does not provide types with v2
+      renderGutter={({ renderDefault, wrapInAnchor }) => wrapInAnchor(renderDefault())}
+    />,
   );
   if (file._links?.lines) {
     if (i === (file.hunks ?? []).length - 1) {
@@ -122,7 +126,7 @@ const DiffFileHunk: FC<Props> = ({
           expandableHunk={expandableHunk}
           diffExpanded={diffExpanded}
           diffExpansionFailed={diffExpansionFailed}
-        />
+        />,
       );
     } else {
       items.push(
@@ -131,7 +135,7 @@ const DiffFileHunk: FC<Props> = ({
           expandableHunk={expandableHunk}
           diffExpanded={diffExpanded}
           diffExpansionFailed={diffExpansionFailed}
-        />
+        />,
       );
     }
   }

package/src/repos/diff/DiffFileTree.tsx

@@ -18,12 +18,19 @@ import React, { FC } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
-import { FileTree } from "@scm-manager/ui-types";
+import { FileChangeType, FileTree } from "@scm-manager/ui-types";
 import { FileDiffContent, StackedSpan, StyledIcon } from "./styledElements";
+import { FileTreeNodeWrapper } from "../DiffTypes";
 
-type Props = { tree: FileTree; currentFile: string; setCurrentFile: (path: string) => void; gap?: number };
+type Props = {
+  tree: FileTree;
+  currentFile: string;
+  setCurrentFile: (path: string) => void;
+  gap?: number;
+  FileTreeNodeWrapper?: FileTreeNodeWrapper;
+};
 
-const DiffFileTree: FC<Props> = ({ tree, currentFile, setCurrentFile, gap = 15 }) => {
+const DiffFileTree: FC<Props> = ({ tree, currentFile, setCurrentFile, gap = 15, FileTreeNodeWrapper }) => {
   return (
     <FileDiffContent gap={gap}>
       {Object.keys(tree.children).map((key) => (
@@ -33,6 +40,7 @@ const DiffFileTree: FC<Props> = ({ tree, currentFile, setCurrentFile, gap = 15 }
           parentPath=""
           currentFile={currentFile}
           setCurrentFile={setCurrentFile}
+          FileTreeNodeWrapper={FileTreeNodeWrapper}
         />
       ))}
     </FileDiffContent>
@@ -41,9 +49,13 @@ const DiffFileTree: FC<Props> = ({ tree, currentFile, setCurrentFile, gap = 15 }
 
 export default DiffFileTree;
 
-type ChangeType = "add" | "modify" | "delete" | "rename" | "copy";
-
-type NodeProps = { node: FileTree; parentPath: string; currentFile: string; setCurrentFile: (path: string) => void };
+type NodeProps = {
+  node: FileTree;
+  parentPath: string;
+  currentFile: string;
+  setCurrentFile: (path: string) => void;
+  FileTreeNodeWrapper?: FileTreeNodeWrapper;
+};
 
 const addPath = (parentPath: string, path: string) => {
   if ("" === parentPath) {
@@ -52,16 +64,31 @@ const addPath = (parentPath: string, path: string) => {
   return parentPath + "/" + path;
 };
 
-const TreeNode: FC<NodeProps> = ({ node, parentPath, currentFile, setCurrentFile }) => {
+const TreeNode: FC<NodeProps> = ({ node, parentPath, currentFile, setCurrentFile, FileTreeNodeWrapper }) => {
   const [t] = useTranslation("repos");
 
+  FileTreeNodeWrapper = FileTreeNodeWrapper || (({ children }) => <>{children}</>);
+
+  const label = <div className="ml-1">{node.nodeName}</div>;
+  const icon = <StyledIcon alt={t("diff.showContent")}>folder</StyledIcon>;
   return (
     <li>
       {Object.keys(node.children).length > 0 ? (
         <ul className="py-1 pl-3">
           <li className="is-flex has-text-grey">
-            <StyledIcon alt={t("diff.showContent")}>folder</StyledIcon>
-            <div className="ml-1">{node.nodeName}</div>
+            <FileTreeNodeWrapper
+              path={addPath(parentPath, node.nodeName)}
+              isFile={false}
+              isCurrentFile={false}
+              name={node.nodeName}
+              iconName={"folder"}
+              iconColor={"grey"}
+              originalIcon={icon}
+              originalLabel={label}
+            >
+              {icon}
+              {label}
+            </FileTreeNodeWrapper>
           </li>
           {Object.keys(node.children).map((key) => (
             <TreeNode
@@ -70,23 +97,25 @@ const TreeNode: FC<NodeProps> = ({ node, parentPath, currentFile, setCurrentFile
               parentPath={addPath(parentPath, node.nodeName)}
               currentFile={currentFile}
               setCurrentFile={setCurrentFile}
+              FileTreeNodeWrapper={FileTreeNodeWrapper}
             />
           ))}
         </ul>
       ) : (
         <TreeFile
-          changeType={node.changeType.toLowerCase() as ChangeType}
+          changeType={node.changeType.toLowerCase() as FileChangeType}
           path={node.nodeName}
           parentPath={parentPath}
           currentFile={currentFile}
           setCurrentFile={setCurrentFile}
+          FileTreeNodeWrapper={FileTreeNodeWrapper}
         />
       )}
     </li>
   );
 };
 
-const getColor = (changeType: ChangeType) => {
+const getColor = (changeType: FileChangeType) => {
   switch (changeType) {
     case "add":
       return "success";
@@ -99,7 +128,7 @@ const getColor = (changeType: ChangeType) => {
   }
 };
 
-const getIcon = (changeType: ChangeType) => {
+const getIcon = (changeType: FileChangeType) => {
   switch (changeType) {
     case "add":
     case "copy":
@@ -113,14 +142,22 @@ const getIcon = (changeType: ChangeType) => {
 };
 
 type FileProps = {
-  changeType: ChangeType;
+  changeType: FileChangeType;
   path: string;
   parentPath: string;
   currentFile: string;
   setCurrentFile: (path: string) => void;
+  FileTreeNodeWrapper: FileTreeNodeWrapper;
 };
 
-const TreeFile: FC<FileProps> = ({ changeType, path, parentPath, currentFile, setCurrentFile }) => {
+const TreeFile: FC<FileProps> = ({
+  changeType,
+  path,
+  parentPath,
+  currentFile,
+  setCurrentFile,
+  FileTreeNodeWrapper,
+}) => {
   const [t] = useTranslation("repos");
   const completePath = addPath(parentPath, path);
 
@@ -128,35 +165,50 @@ const TreeFile: FC<FileProps> = ({ changeType, path, parentPath, currentFile, se
     return currentFile === completePath;
   };
 
+  const iconName = getIcon(changeType);
+
+  const icon = (
+    <StackedSpan className="fa-stack">
+      <StyledIcon
+        className={classNames("fa-stack-2x", `has-text-${getColor(changeType)}`)}
+        key={completePath + "file"}
+        type="fas"
+        alt={t("diff.showContent")}
+      >
+        file
+      </StyledIcon>
+      <StyledIcon
+        className={classNames("fa-stack-1x", "is-relative", "has-text-secondary-least")}
+        issmaller={iconName === "circle" ? "true" : "false"}
+        key={changeType}
+        alt={t(`diff.changes.${changeType}`)}
+      >
+        {iconName}
+      </StyledIcon>
+    </StackedSpan>
+  );
+  const label = <div className={classNames("ml-1", isCurrentFile() ? "has-text-weight-bold" : "")}>{path}</div>;
+
   return (
     <Link
       className="is-flex py-1 pl-3 has-cursor-pointer"
       onClick={() => setCurrentFile(completePath)}
       to={`#diff-${encodeURIComponent(completePath)}`}
     >
-      <StackedSpan className="fa-stack">
-        <StyledIcon
-          className={classNames("fa-stack-2x", `has-text-${getColor(changeType)}`)}
-          key={completePath + "file"}
-          type={isCurrentFile() ? "fas" : "far"}
-          alt={t("diff.showContent")}
-        >
-          file
-        </StyledIcon>
-        <StyledIcon
-          className={classNames(
-            "fa-stack-1x",
-            "is-relative",
-            isCurrentFile() ? "has-text-secondary-least" : `has-text-${getColor(changeType)}`
-          )}
-          issmaller={getIcon(changeType) === "circle" ? "true" : "false"}
-          key={changeType}
-          alt={t(`diff.changes.${changeType}`)}
-        >
-          {getIcon(changeType)}
-        </StyledIcon>
-      </StackedSpan>
-      <div className="ml-1">{path}</div>
+      <FileTreeNodeWrapper
+        name={path}
+        path={completePath}
+        changeType={changeType}
+        isFile={true}
+        iconName={iconName}
+        iconColor={getColor(changeType)}
+        originalIcon={icon}
+        originalLabel={label}
+        isCurrentFile={isCurrentFile()}
+      >
+        {icon}
+        {label}
+      </FileTreeNodeWrapper>
     </Link>
   );
 };

package/src/repos/diff/LazyDiffFile.tsx

@@ -77,7 +77,7 @@ const DiffFile: FC<Props> = ({
     () =>
       hasContent ||
       (["add", "modify", "delete"].includes(file.type) && canDisplayBinaryFile(oldContentType, newContentType)),
-    [file, hasContent, newContentType, oldContentType]
+    [file, hasContent, newContentType, oldContentType],
   );
   const canRenderSideBySide = useMemo(() => hasContent && file.type === "modify", [file, hasContent]);
 
@@ -126,7 +126,7 @@ const DiffFile: FC<Props> = ({
         }
       }
     },
-    [collapsed, file, canRenderContent, isCollapsedProp, onCollapseStateChange, stickyHeader]
+    [collapsed, file, canRenderContent, isCollapsedProp, onCollapseStateChange, stickyHeader],
   );
 
   const toggleSideBySide = useCallback((callback: () => void) => {
@@ -139,7 +139,7 @@ const DiffFile: FC<Props> = ({
       setWhitespace(!whitespace);
       callback();
     },
-    [whitespace]
+    [whitespace],
   );
 
   const sideBySideToggle = useMemo(
@@ -161,7 +161,7 @@ const DiffFile: FC<Props> = ({
           )}
         </MenuContext.Consumer>
       ),
-    [canRenderSideBySide, sideBySide, t, toggleSideBySide]
+    [canRenderSideBySide, sideBySide, t, toggleSideBySide],
   );
 
   const whitespaceToggle = useMemo(
@@ -183,7 +183,7 @@ const DiffFile: FC<Props> = ({
           )}
         </MenuContext.Consumer>
       ),
-    [hasContent, t, toggleWhiteSpace, whitespace]
+    [hasContent, t, toggleWhiteSpace, whitespace],
   );
 
   const errorModal = useMemo(
@@ -196,7 +196,7 @@ const DiffFile: FC<Props> = ({
           active={true}
         />
       ) : null,
-    [expansionError, t]
+    [expansionError, t],
   );
 
   const innerContent = useMemo(
@@ -253,7 +253,7 @@ const DiffFile: FC<Props> = ({
       sideBySide,
       whitespace,
       viewType,
-    ]
+    ],
   );
 
   const body = useMemo(() => (!isCollapsed ? innerContent : null), [innerContent, isCollapsed]);
@@ -266,7 +266,7 @@ const DiffFile: FC<Props> = ({
           modalBody={<MarginlessModalContent>{innerContent}</MarginlessModalContent>}
         />
       ) : null,
-    [canRenderContent, file, innerContent]
+    [canRenderContent, file, innerContent],
   );
 
   const collapseIcon = useMemo(
@@ -276,7 +276,7 @@ const DiffFile: FC<Props> = ({
       ) : (
         <Icon alt={t("diff.hideContent")}>angle-down</Icon>
       ),
-    [isCollapsed, t]
+    [isCollapsed, t],
   );
 
   return (