git-viewer 8.0.0 → 9.0.0

package/dist/entry.bundled.js

@@ -1597,7 +1597,8 @@ var state = {
   diff: null,
   filter: "all",
   search: "",
-  loading: true
+  loading: true,
+  fullscreenDiff: false
 };
 var updateApp;
 async function fetchRefs() {
@@ -1645,6 +1646,17 @@ async function selectCommit(commit) {
   state.diff = await fetchDiff(commit.sha);
   updateApp();
 }
+function toggleFullscreenDiff(open) {
+  if (!document.startViewTransition) {
+    state.fullscreenDiff = open;
+    updateApp();
+    return;
+  }
+  document.startViewTransition(() => {
+    state.fullscreenDiff = open;
+    updateApp();
+  });
+}
 var colors = {
   bg: "#ffffff",
   bgLight: "#f6f8fa",
@@ -1711,9 +1723,6 @@ function Sidebar() {
     "div",
     {
       css: {
-        minWidth: "180px",
-        maxWidth: "300px",
-        width: "fit-content",
         borderRight: `1px solid ${colors.border}`,
         display: "flex",
         flexDirection: "column",
@@ -1725,7 +1734,6 @@ function Sidebar() {
           {
             css: {
               padding: "12px",
-              borderBottom: `1px solid ${colors.border}`,
               fontWeight: 600,
               fontSize: "11px",
               textTransform: "uppercase",
@@ -1837,7 +1845,7 @@ function RefNodeItem(handle) {
         },
         on: { click: () => setFilter(node.fullName) },
         children: [
-          node.current && "\u25CF ",
+          node.current && /* @__PURE__ */ jsx("span", { css: { fontSize: "8px", marginRight: "4px" }, children: "\u25CF" }),
           node.name
         ]
       }
@@ -2125,7 +2133,20 @@ function CommitRow() {
   };
 }
 function DiffPanel() {
+  let diffContentRef;
+  function scrollToFile(path) {
+    if (!diffContentRef || !path) return;
+    let fileHeaders = diffContentRef.querySelectorAll(".d2h-file-header");
+    for (let header of fileHeaders) {
+      let nameEl = header.querySelector(".d2h-file-name");
+      if (nameEl?.textContent?.includes(path)) {
+        header.scrollIntoView({ block: "start" });
+        break;
+      }
+    }
+  }
   return () => {
+    let isFullscreen = state.fullscreenDiff;
     if (!state.selectedCommit) {
       return /* @__PURE__ */ jsx(
         "div",
@@ -2149,76 +2170,333 @@ function DiffPanel() {
           flex: 1,
           display: "flex",
           flexDirection: "column",
-          background: colors.bgLight
+          background: colors.bgLight,
+          viewTransitionName: "diff-panel",
+          ...isFullscreen ? {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 100
+          } : {}
         },
         children: [
           /* @__PURE__ */ jsx(
             "div",
             {
-              css: { padding: "12px", borderBottom: `1px solid ${colors.border}` },
+              css: {
+                padding: "12px",
+                borderBottom: `1px solid ${colors.border}`,
+                display: "flex",
+                alignItems: "flex-start",
+                justifyContent: "space-between",
+                gap: "12px",
+                background: colors.bgLight
+              },
               children: [
-                /* @__PURE__ */ jsx("div", { css: { fontWeight: 600, marginBottom: "4px" }, children: state.selectedCommit.subject }),
-                /* @__PURE__ */ jsx("div", { css: { fontSize: "12px", color: colors.textMuted }, children: [
-                  /* @__PURE__ */ jsx("span", { children: state.selectedCommit.author }),
-                  /* @__PURE__ */ jsx("span", { css: { margin: "0 8px" }, children: "\u2022" }),
-                  /* @__PURE__ */ jsx("span", { children: state.selectedCommit.date }),
-                  /* @__PURE__ */ jsx("span", { css: { margin: "0 8px" }, children: "\u2022" }),
-                  /* @__PURE__ */ jsx("code", { css: { color: colors.accent }, children: state.selectedCommit.shortSha })
+                /* @__PURE__ */ jsx("div", { css: { flex: 1, minWidth: 0 }, children: [
+                  /* @__PURE__ */ jsx("div", { css: { fontWeight: 600, marginBottom: "4px" }, children: state.selectedCommit.subject }),
+                  /* @__PURE__ */ jsx("div", { css: { fontSize: "12px", color: colors.textMuted }, children: [
+                    /* @__PURE__ */ jsx("span", { children: state.selectedCommit.author }),
+                    /* @__PURE__ */ jsx("span", { css: { margin: "0 8px" }, children: "\u2022" }),
+                    /* @__PURE__ */ jsx("span", { children: state.selectedCommit.date }),
+                    /* @__PURE__ */ jsx("span", { css: { margin: "0 8px" }, children: "\u2022" }),
+                    /* @__PURE__ */ jsx("code", { css: { color: colors.accent }, children: state.selectedCommit.shortSha }),
+                    state.diff && /* @__PURE__ */ jsx(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { css: { margin: "0 8px" }, children: "\u2022" }),
+                      /* @__PURE__ */ jsx("span", { children: [
+                        state.diff.files.length,
+                        " file",
+                        state.diff.files.length !== 1 ? "s" : ""
+                      ] })
+                    ] })
+                  ] }),
+                  state.selectedCommit.body && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      css: {
+                        marginTop: "8px",
+                        whiteSpace: "pre-wrap",
+                        fontSize: "12px",
+                        lineHeight: "1.4"
+                      },
+                      children: state.selectedCommit.body
+                    }
+                  )
                 ] }),
-                state.selectedCommit.body ? /* @__PURE__ */ jsx(
-                  "div",
+                state.diff && /* @__PURE__ */ jsx(
+                  "button",
                   {
                     css: {
-                      marginTop: "8px",
-                      whiteSpace: "pre-wrap",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "6px",
+                      padding: "6px 12px",
+                      border: `1px solid ${colors.border}`,
+                      borderRadius: "4px",
+                      background: colors.bg,
+                      color: colors.text,
                       fontSize: "12px",
-                      lineHeight: "1.4"
+                      cursor: "pointer",
+                      whiteSpace: "nowrap",
+                      "&:hover": {
+                        background: colors.bgLighter,
+                        borderColor: colors.accent
+                      }
                     },
-                    children: state.selectedCommit.body
+                    on: { click: () => toggleFullscreenDiff(!isFullscreen) },
+                    children: isFullscreen ? /* @__PURE__ */ jsx(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          "stroke-width": "2",
+                          children: /* @__PURE__ */ jsx("path", { d: "M4 14h6v6m10-10h-6V4m0 6 7-7M3 21l7-7" })
+                        }
+                      ),
+                      "Collapse"
+                    ] }) : /* @__PURE__ */ jsx(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          "stroke-width": "2",
+                          children: /* @__PURE__ */ jsx("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" })
+                        }
+                      ),
+                      "Expand"
+                    ] })
                   }
-                ) : null
+                )
               ]
             }
           ),
-          /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto" }, children: state.diff ? /* @__PURE__ */ jsx(
-            "section",
-            {
-              css: {
-                "& .d2h-wrapper": { background: "transparent" },
-                "& .d2h-file-header": {
-                  background: colors.bgLighter,
-                  borderBottom: `1px solid ${colors.border}`,
-                  padding: "8px 12px"
+          /* @__PURE__ */ jsx("div", { css: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+            state.diff && state.diff.files.length > 0 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                css: {
+                  borderRight: `1px solid ${colors.border}`,
+                  display: "flex",
+                  flexDirection: "column",
+                  background: colors.bg,
+                  overflow: "hidden"
                 },
-                "& .d2h-file-name": { color: colors.text },
-                "& .d2h-code-line": { padding: "0 8px" },
-                "& .d2h-code-line-ctn": { color: colors.text },
-                "& .d2h-ins": { background: "#dafbe1" },
-                "& .d2h-del": { background: "#ffebe9" },
-                "& .d2h-ins .d2h-code-line-ctn": { color: colors.green },
-                "& .d2h-del .d2h-code-line-ctn": { color: colors.red },
-                "& .d2h-code-linenumber": {
-                  color: colors.textMuted,
-                  borderRight: `1px solid ${colors.border}`
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      css: {
+                        padding: "8px 12px",
+                        fontSize: "11px",
+                        fontWeight: 600,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.5px",
+                        color: colors.textMuted,
+                        borderBottom: `1px solid ${colors.border}`
+                      },
+                      children: "Changed Files"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto", padding: "4px 0" }, children: state.diff.files.map((file) => /* @__PURE__ */ jsx(
+                    FileListItem,
+                    {
+                      file,
+                      onSelect: () => scrollToFile(file.path)
+                    },
+                    file.path
+                  )) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { css: { flex: 1, overflow: "auto" }, children: state.diff ? /* @__PURE__ */ jsx(
+              "section",
+              {
+                connect: (node) => diffContentRef = node,
+                css: {
+                  "& .d2h-wrapper": { background: "transparent" },
+                  "& .d2h-file-header": {
+                    background: colors.bgLighter,
+                    borderBottom: `1px solid ${colors.border}`,
+                    padding: "8px 12px",
+                    position: "sticky",
+                    top: 0,
+                    zIndex: 1
+                  },
+                  "& .d2h-file-name": { color: colors.text },
+                  "& .d2h-code-line": { padding: "0 8px" },
+                  "& .d2h-code-line-ctn": { color: colors.text },
+                  "& .d2h-ins": { background: "#dafbe1" },
+                  "& .d2h-del": { background: "#ffebe9" },
+                  "& .d2h-ins .d2h-code-line-ctn": { color: colors.green },
+                  "& .d2h-del .d2h-code-line-ctn": { color: colors.red },
+                  "& .d2h-code-linenumber": {
+                    color: colors.textMuted,
+                    borderRight: `1px solid ${colors.border}`
+                  },
+                  "& .d2h-file-diff": {
+                    borderBottom: `1px solid ${colors.border}`
+                  },
+                  "& .d2h-diff-tbody": { position: "relative" }
                 },
-                "& .d2h-file-diff": {
-                  borderBottom: `1px solid ${colors.border}`
+                innerHTML: state.diff.diffHtml
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                css: {
+                  padding: "20px",
+                  textAlign: "center",
+                  color: colors.textMuted
                 },
-                "& .d2h-diff-tbody": { position: "relative" }
+                children: "Loading diff..."
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
+  };
+}
+function FileListItem() {
+  return ({ file, onSelect }) => {
+    let displayName = file.path.split("/").pop() ?? file.path;
+    let fullPath = file.path;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        css: {
+          padding: "6px 12px",
+          cursor: "pointer",
+          "&:hover": {
+            background: colors.bgLighter
+          }
+        },
+        on: { click: onSelect },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              css: {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px"
               },
-              innerHTML: state.diff.diffHtml
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    css: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "2px",
+                      fontSize: "10px",
+                      fontWeight: 500,
+                      minWidth: "50px"
+                    },
+                    children: [
+                      file.additions > 0 && /* @__PURE__ */ jsx("span", { css: { color: colors.green }, children: [
+                        "+",
+                        file.additions
+                      ] }),
+                      file.deletions > 0 && /* @__PURE__ */ jsx("span", { css: { color: colors.red }, children: [
+                        "-",
+                        file.deletions
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    css: {
+                      flex: 1,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                      fontSize: "12px"
+                    },
+                    title: fullPath,
+                    children: [
+                      file.isNew && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          css: {
+                            display: "inline-block",
+                            padding: "1px 4px",
+                            marginRight: "6px",
+                            borderRadius: "3px",
+                            background: colors.green,
+                            color: "#fff",
+                            fontSize: "9px",
+                            fontWeight: 600
+                          },
+                          children: "NEW"
+                        }
+                      ),
+                      file.isDeleted && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          css: {
+                            display: "inline-block",
+                            padding: "1px 4px",
+                            marginRight: "6px",
+                            borderRadius: "3px",
+                            background: colors.red,
+                            color: "#fff",
+                            fontSize: "9px",
+                            fontWeight: 600
+                          },
+                          children: "DEL"
+                        }
+                      ),
+                      file.isRenamed && /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          css: {
+                            display: "inline-block",
+                            padding: "1px 4px",
+                            marginRight: "6px",
+                            borderRadius: "3px",
+                            background: colors.accent,
+                            color: "#fff",
+                            fontSize: "9px",
+                            fontWeight: 600
+                          },
+                          children: "REN"
+                        }
+                      ),
+                      displayName
+                    ]
+                  }
+                )
+              ]
             }
-          ) : /* @__PURE__ */ jsx(
+          ),
+          fullPath !== displayName && /* @__PURE__ */ jsx(
             "div",
             {
               css: {
-                padding: "20px",
-                textAlign: "center",
-                color: colors.textMuted
+                fontSize: "10px",
+                color: colors.textMuted,
+                marginTop: "2px",
+                marginLeft: "58px",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
               },
-              children: "Loading diff..."
+              children: fullPath
             }
-          ) })
+          )
         ]
       }
     );

package/dist/index.html

@@ -13,6 +13,38 @@
         height: 100%;
         overflow: hidden;
       }
+      
+      /* View Transition Styles */
+      @view-transition {
+        navigation: auto;
+      }
+      
+      /* Diff panel morphs between positions */
+      ::view-transition-old(diff-panel),
+      ::view-transition-new(diff-panel) {
+        animation-duration: 0.35s;
+        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      
+      /* Make the old and new states crossfade while morphing */
+      ::view-transition-old(diff-panel) {
+        animation: none;
+      }
+      
+      ::view-transition-new(diff-panel) {
+        animation: none;
+      }
+      
+      /* The group handles the position/size morphing automatically */
+      ::view-transition-group(diff-panel) {
+        animation-duration: 0.35s;
+        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      
+      /* Image pair handles crossfade */
+      ::view-transition-image-pair(diff-panel) {
+        isolation: auto;
+      }
     </style>
   </head>
   <body>

package/dist/server.js

@@ -8854,11 +8854,11 @@ async function getRefs() {
   }
   let remotes = {};
   for (let [remote, branches] of Object.entries(remotesByOrigin)) {
-    remotes[remote] = buildTree(branches);
+    remotes[remote] = buildTree(branches, void 0, `${remote}/`);
   }
   return { local, remotes, currentBranch };
 }
-function buildTree(branches, currentBranch) {
+function buildTree(branches, currentBranch, prefix = "") {
   let root = [];
   let sorted = [...branches].sort((a, b) => {
     let aHasSlash = a.includes("/");
@@ -8868,7 +8868,7 @@ function buildTree(branches, currentBranch) {
   });
   for (let branch of sorted) {
     let parts = branch.split("/");
-    insertIntoTree(root, parts, branch, currentBranch);
+    insertIntoTree(root, parts, prefix + branch, currentBranch);
   }
   return root;
 }
@@ -9039,7 +9039,17 @@ async function getDiff(sha) {
   let [record] = metaOutput.split("\0");
   let [fullSha, shortSha, subject, body, author, date, parents] = record.split("");
   let diffOutput = await git(`show --format="" ${sha}`);
-  let diffHtml = (0, import_diff2html.html)((0, import_diff2html.parse)(diffOutput), {
+  let parsedDiff = (0, import_diff2html.parse)(diffOutput);
+  let files = parsedDiff.map((file) => ({
+    path: file.newName || file.oldName || "",
+    oldPath: file.isRename ? file.oldName : void 0,
+    additions: file.addedLines,
+    deletions: file.deletedLines,
+    isNew: file.isNew || false,
+    isDeleted: file.isDeleted || false,
+    isRenamed: file.isRename || false
+  }));
+  let diffHtml = (0, import_diff2html.html)(parsedDiff, {
     drawFileList: false,
     outputFormat: "line-by-line",
     matching: "lines"
@@ -9052,7 +9062,8 @@ async function getDiff(sha) {
     author,
     date: formatDate(date),
     parents: parents ? parents.split(" ").filter(Boolean) : [],
-    diffHtml
+    diffHtml,
+    files
   };
 }
 var packageDir = import.meta.dirname;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-viewer",
-  "version": "8.0.0",
+  "version": "9.0.0",
   "description": "Visual git log viewer with branch graph and diff display",
   "repository": {
     "type": "git",