feat: display diff severity levels and HTTP methods in OASDiff style

- Add colored level labels (breaking/warn/info) to diff list items and dialog
- Show HTTP method and path in "at METHOD /path" format
- Pass level and operation props through component hierarchy

Author: ulrikandersen

src/features/sidebar/view/internal/diffbar/components/DiffDialog.tsx

@@ -13,9 +13,25 @@ import {
 import { softPaperSx } from "@/common/theme/theme"
 import MonoQuotedText from "./MonoQuotedText"
 
+type Level = 1 | 2 | 3
+
+const getLevelConfig = (level: Level) => {
+  switch (level) {
+    case 3:
+      return { label: "breaking", color: "#e88388" }
+    case 2:
+      return { label: "warn", color: "#dbab79" }
+    case 1:
+    default:
+      return { label: "info", color: "#66c2cd" }
+  }
+}
+
 interface ChangeDetails {
   path?: string
   text?: string | React.ReactNode
+  level?: number
+  operation?: string
 }
 
 const DiffDialog = ({
@@ -27,6 +43,8 @@ const DiffDialog = ({
   change: ChangeDetails | null
   onClose: () => void
 }) => {
+  const levelConfig = getLevelConfig((change?.level ?? 1) as Level)
+
   return (
     <Dialog
       open={!!open}
@@ -43,28 +61,58 @@ const DiffDialog = ({
     >
       <DialogTitle>Change Details</DialogTitle>
       <DialogContent>
-        {change?.path && (
-          <Box sx={{ mb: 2 }}>
-            <Typography sx={{ mb: 1, fontWeight: 600 }}>Path:</Typography>
+        <Box sx={{ mb: 2 }}>
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1 }}>
             <Typography
-              variant="body0"
+              component="span"
               sx={{
-                p: 1,
                 fontFamily: "Segoe UI Mono, monospace",
                 fontWeight: 700,
-                wordBreak: "break-word",
-                overflowWrap: "anywhere",
+                fontSize: "0.85rem",
+                color: levelConfig.color,
+                textTransform: "lowercase",
               }}
             >
-              {change.path}
+              {levelConfig.label}
             </Typography>
+            {change?.operation && change?.path && (
+              <Typography
+                component="span"
+                sx={{
+                  fontFamily: "Segoe UI Mono, monospace",
+                  fontSize: "0.85rem",
+                  color: "text.secondary",
+                }}
+              >
+                at{" "}
+                <Box
+                  component="span"
+                  sx={{ fontWeight: 600, color: "text.primary" }}
+                >
+                  {change.operation}
+                </Box>{" "}
+                <Box component="span" sx={{ wordBreak: "break-word" }}>
+                  {change.path}
+                </Box>
+              </Typography>
+            )}
+            {!change?.operation && change?.path && (
+              <Typography
+                component="span"
+                sx={{
+                  fontFamily: "Segoe UI Mono, monospace",
+                  fontSize: "0.85rem",
+                  color: "text.secondary",
+                  wordBreak: "break-word",
+                }}
+              >
+                {change.path}
+              </Typography>
+            )}
           </Box>
-        )}
+        </Box>
         {change?.text && (
           <Box>
-            <Typography sx={{ mb: 1, fontWeight: 600 }}>
-              Description:
-            </Typography>
             <Typography variant="body0" sx={{ wordBreak: "break-word" }}>
               {typeof change.text === "string" ? (
                 <MonoQuotedText text={change.text} />

src/features/sidebar/view/internal/diffbar/components/DiffListItem.tsx

@@ -4,17 +4,37 @@ import { Box, Typography, ListItem, ListItemButton, Stack } from "@mui/material"
 import MenuItemHover from "@/common/ui/MenuItemHover"
 import MonoQuotedText from "./MonoQuotedText"
 
+type Level = 1 | 2 | 3
+
+const getLevelConfig = (level: Level) => {
+  switch (level) {
+    case 3:
+      return { label: "breaking", color: "#e88388" }
+    case 2:
+      return { label: "warn", color: "#dbab79" }
+    case 1:
+    default:
+      return { label: "info", color: "#66c2cd" }
+  }
+}
+
 const DiffListItem = ({
   path,
   text,
+  level,
+  operation,
   selected,
   onClick,
 }: {
   path?: string
   text?: string
+  level?: number
+  operation?: string
   selected: boolean
   onClick: () => void
 }) => {
+  const levelConfig = getLevelConfig((level ?? 1) as Level)
+
   return (
     <ListItem disableGutters disablePadding>
       <ListItemButton
@@ -31,26 +51,61 @@ const DiffListItem = ({
                 flexDirection: "column",
                 minWidth: 0,
                 flex: 1,
-                gap: 1.25,
+                gap: 0.75,
               }}
             >
-              {path && (
+              <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                 <Typography
-                  variant="body0"
+                  component="span"
                   sx={{
                     fontFamily: "Segoe UI Mono, monospace",
                     fontWeight: 700,
-                    letterSpacing: 0.1,
-                    wordBreak: "break-word",
+                    fontSize: "0.75rem",
+                    color: levelConfig.color,
+                    textTransform: "lowercase",
                   }}
                 >
-                  {path}
+                  {levelConfig.label}
                 </Typography>
-              )}
+                {operation && path && (
+                  <Typography
+                    component="span"
+                    sx={{
+                      fontFamily: "Segoe UI Mono, monospace",
+                      fontSize: "0.8rem",
+                      color: "text.secondary",
+                    }}
+                  >
+                    at{" "}
+                    <Box
+                      component="span"
+                      sx={{ fontWeight: 600, color: "text.primary" }}
+                    >
+                      {operation}
+                    </Box>{" "}
+                    <Box component="span" sx={{ wordBreak: "break-word" }}>
+                      {path}
+                    </Box>
+                  </Typography>
+                )}
+                {!operation && path && (
+                  <Typography
+                    component="span"
+                    sx={{
+                      fontFamily: "Segoe UI Mono, monospace",
+                      fontSize: "0.8rem",
+                      color: "text.secondary",
+                      wordBreak: "break-word",
+                    }}
+                  >
+                    {path}
+                  </Typography>
+                )}
+              </Box>
               {text && (
                 <Typography
                   variant="body0"
-                  sx={{ wordBreak: "break-word" }}
+                  sx={{ wordBreak: "break-word", pl: 0.5 }}
                 >
                   <MonoQuotedText text={text} />
                 </Typography>

src/features/sidebar/view/internal/diffbar/components/PopulatedDiffList.tsx

@@ -26,6 +26,8 @@ const PopulatedDiffList = ({
           key={change.id}
           path={change?.path}
           text={change?.text}
+          level={change?.level}
+          operation={change?.operation}
           selected={selectedChange === i}
           onClick={() => onClick(i)}
         />