Highlight version changes in Changes sidebar

web/stores/change.ts

@@ -81,6 +81,14 @@ export function formatVersion(version: DependencyVersion): string {
   }
 }
 
+export function formatVersionParts(
+  version: DependencyVersion
+): null | RegExpMatchArray {
+  return formatVersion(version).match(
+    /^([vV]?)(\d+)(?:\.(\d+))?(?:\.(\d+))?((?:-[\dA-Za-z.-]+)?(?:\+[\dA-Za-z.-]+)?)$/
+  )
+}
+
 export function hasChangelog(changelog: LoadingValue<ChangeLogHtml>): boolean {
   if (changelog.isLoading) {
     return true

web/stories/states.stories.svelte

@@ -1,7 +1,7 @@
 <script context="module" lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf'
 
-  import type { Change } from '../../common/stores.ts'
+  import { type Change, UpdateType } from '../../common/stores.ts'
   import type { Debrand } from '../../common/types.ts'
   import Main from '../main/main.svelte'
   import Scene from './scene.svelte'
@@ -12,32 +12,41 @@
   })
 
   const CHANGES = [
-    { after: '5.1.5', before: '5.1.4', name: 'nanoid' },
+    {
+      after: '5.1.5',
+      before: '5.1.4',
+      name: 'nanoid',
+      update: UpdateType.PATCH
+    },
     {
       after: '9.0.0',
       before: '8.0.0',
       direct: true,
       name: 'nanoevents',
       size: 10,
-      status: 'reviewed'
+      status: 'reviewed',
+      update: UpdateType.MAJOR
     },
     {
       after: '8.41.0',
       before: '8.40.0',
       name: '@typescript-eslint/project-service',
-      size: 100
+      size: 100,
+      update: UpdateType.MINOR
     },
     {
       after: '8.41.0',
       before: '8.40.0',
       name: 'typescript-eslint',
-      size: 10
+      size: 10,
+      update: UpdateType.MINOR
     },
     {
       after: '8.0.1',
       before: '8.0.0',
       name: 'postcss',
-      size: 50
+      size: 50,
+      update: UpdateType.PATCH
     }
   ] satisfies Partial<Debrand<Change>>[]
 

web/ui/sidebars/changes.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import { $sortedChanges as sortedChangesStore } from '../../../common/stores.ts'
   import type { ChangeId } from '../../../common/types.ts'
-  import { formatVersion } from '../../stores/change.ts'
   import { getChangeUrl } from '../../stores/router.ts'
   import Sidebar from '../sidebar.svelte'
+  import Version from '../version.svelte'
 
   let { current }: { current: ChangeId } = $props()
   let firstIndirect = $derived($sortedChangesStore.findIndex(i => !i.direct))
@@ -28,9 +28,21 @@
           >
             <div class="name">{change.name}</div>
             <div class="versions">
-              {change.before ? formatVersion(change.before) : 'none'}
+              {#if change.before}
+                <Version
+                  highlight
+                  update={change.update}
+                  version={change.before}
+                />
+              {:else}
+                none
+              {/if}
               →
-              {formatVersion(change.after)}
+              <Version
+                highlight={Boolean(change.before)}
+                update={change.update}
+                version={change.after}
+              />
             </div>
           </a>
         </li>

web/ui/version.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { UpdateType, type UpdateTypeValue } from '../../common/stores.ts'
+  import type { DependencyVersion } from '../../common/types.ts'
+  import { formatVersion, formatVersionParts } from '../stores/change.ts'
+
+  let {
+    highlight,
+    update,
+    version
+  }: {
+    highlight: boolean
+    update: UpdateTypeValue
+    version: DependencyVersion
+  } = $props()
+
+  let value = $derived(formatVersion(version))
+  let parts = $derived(formatVersionParts(version))
+</script>
+
+{#if parts}
+  {parts[1]}<span class:is-changed={highlight && update === UpdateType.MAJOR}
+    >{parts[2]}</span
+  >{#if parts[3] !== undefined}.<span
+      class:is-changed={highlight && update === UpdateType.MINOR}
+      >{parts[3]}</span
+    >{/if}{#if parts[4] !== undefined}.<span
+      class:is-changed={highlight && update === UpdateType.PATCH}
+      >{parts[4]}{parts[5]}</span
+    >{:else}{parts[5]}{/if}
+{:else}
+  {value}
+{/if}
+
+<style>
+  .is-changed {
+    font-weight: bold;
+    color: var(--text-color);
+  }
+</style>