Added groups and restricted access.

Frontend/src/Components/PreviewPane.jsx

@@ -7,7 +7,7 @@ import { json } from "@codemirror/lang-json";
 import MarkdownIt from "markdown-it";
 import MarkdownItTaskLists from "markdown-it-task-lists";
 
-import { FetchBlame, FetchFile, GetFileUrl, GetRawFileUrl, SaveFile } from "../Api.js";
+import { FetchBlame, FetchFile, GetAvatarUrl, GetFileUrl, GetRawFileUrl, SaveFile } from "../Api.js";
 
 const MarkdownRenderer = new MarkdownIt({ breaks: true }).use(MarkdownItTaskLists, {
   enabled: true,
@@ -90,26 +90,45 @@ function GetLanguageExtension(FileType) {
 }
 
 class BlameMarker extends GutterMarker {
-  constructor(ShortLabel, Title) {
+  constructor(Mode, Content, Colour, Title) {
     super();
-    this.ShortLabel = ShortLabel;
+    this.Mode = Mode;
+    this.Content = Content;
+    this.Colour = Colour;
     this.Title = Title;
   }
 
   eq(Other) {
-    return this.ShortLabel === Other.ShortLabel && this.Title === Other.Title;
+    return (
+      this.Mode === Other.Mode &&
+      this.Content === Other.Content &&
+      this.Colour === Other.Colour &&
+      this.Title === Other.Title
+    );
   }
 
   toDOM() {
+    if (this.Mode === "avatar") {
+      const Image = document.createElement("img");
+      Image.className = "BlameGutterAvatar";
+      Image.src = this.Content;
+      Image.title = this.Title;
+      Image.alt = "";
+      return Image;
+    }
+
     const Element = document.createElement("span");
-    Element.className = "BlameGutterMarker";
-    Element.textContent = this.ShortLabel;
+    Element.className = `BlameGutterMarker${this.Mode === "hidden" ? " BlameGutterHidden" : ""}`;
+    Element.textContent = this.Content;
     Element.title = this.Title;
+    if (this.Colour) {
+      Element.style.color = `var(--${this.Colour})`;
+    }
     return Element;
   }
 }
 
-function BuildBlameGutter(BlameMap) {
+function BuildBlameGutter(BlameMap, ShowAvatars) {
   return gutter({
     class: "BlameGutter",
     lineMarker(view, line) {
@@ -117,9 +136,18 @@ function BuildBlameGutter(BlameMap) {
       const Entry = BlameMap[String(LineNumber)];
       if (!Entry) return null;
 
-      const ShortLabel = Entry.Username.slice(0, 6);
+      if (Entry.Hidden) {
+        const Title = Entry.Timestamp ? new Date(Entry.Timestamp).toLocaleString() : "";
+        return new BlameMarker("hidden", "•••", null, Title);
+      }
+
       const Title = `${Entry.Username} — ${new Date(Entry.Timestamp).toLocaleString()}`;
-      return new BlameMarker(ShortLabel, Title);
+
+      if (ShowAvatars && Entry.HasAvatar) {
+        return new BlameMarker("avatar", GetAvatarUrl(Entry.Username), null, Title);
+      }
+
+      return new BlameMarker("text", Entry.Username.slice(0, 6), Entry.Colour, Title);
     },
   });
 }
@@ -130,6 +158,7 @@ export default function PreviewPane({
   FileType,
   OnNavigateLink,
   ShowGitBlame,
+  ShowBlameAvatars,
   StickyToolbar,
 }) {
   const [Content, SetContent] = useState("");
@@ -271,7 +300,7 @@ export default function PreviewPane({
           height="100%"
           extensions={[
             ...GetLanguageExtension(FileType),
-            ...(ShowGitBlame ? [BuildBlameGutter(BlameMap)] : []),
+            ...(ShowGitBlame ? [BuildBlameGutter(BlameMap, ShowBlameAvatars)] : []),
           ]}
           onChange={SetContent}
           theme="dark"