Labels on blip descriptions

- Level aka depth
- And if its new or not

capra-fagradar/src/radar/index.tsx

@@ -239,10 +239,27 @@ const RightAnchoredShelf: React.FC<React.PropsWithChildren> = ({ children }) =>
   );
 }
 
-const BlipInfo: React.FC<{ blip: Blip, onClose: React.MouseEventHandler<HTMLButtonElement> }> = ({ blip, onClose }) => {
+type LabelProps = React.PropsWithChildren;
+
+const Label: React.FC<LabelProps> = ({ children }) => {
+  return (
+    <div className={styles.label}>{children}</div>
+  );
+}
+
+type BlipInfoProps = {
+ blip: Blip;
+ onClose: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+const BlipInfo: React.FC<BlipInfoProps> = ({ blip, onClose }) => {
   return (
     <RightAnchoredShelf>
       <h2>{blip.name}</h2>
+      <div className={styles.labelGroup}>
+        <Label>Level {blip.depth}</Label>
+        {blip.is_new && (<Label>new</Label>)}
+      </div>
       <div>{blip.element}</div>
       <button onClick={onClose}>Close</button>
     </RightAnchoredShelf>

capra-fagradar/src/radar/radar.module.css

@@ -125,3 +125,21 @@
     }
   }
 }
+
+.label {
+  display: inline-block;
+  color: black;
+  padding: 0.4rem 0.5rem;
+  border-radius: 0.4rem;
+  border: 1px solid black;
+  font-size: 0.8rem;
+  font-weight: bold;
+  font-variant: small-caps;
+}
+
+.labelGroup {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: -1rem;
+  margin-bottom: 1.5rem;
+}