feat: add version changelog support

src/lib/meta/meta-storage.ts

@@ -17,7 +17,7 @@ export async function getMeta(
   try {
     if (!browser) return fetchMeta(device, version, fetch);
 
-    const dbRequest = indexedDB.open("version-meta", 3);
+    const dbRequest = indexedDB.open("version-meta", 4);
     const db = await new Promise<IDBDatabase>((resolve, reject) => {
       dbRequest.onsuccess = () => resolve(dbRequest.result);
       dbRequest.onerror = () => reject(dbRequest.error);
@@ -120,6 +120,9 @@ async function fetchMeta(
             }
             return settings;
           })),
+    changelog: await (meta?.changelog
+      ? fetch(`${path}/${meta.changelog}`).then((it) => it.json())
+      : {}),
     actions: await (meta?.actions
       ? fetch(`${path}/${meta.actions}`).then((it) => it.json())
       : Promise.all<KeymapCategory[]>(

src/lib/meta/types/meta.ts

@@ -22,6 +22,16 @@ export interface SettingsItemMeta {
   scale?: number;
 }
 
+export interface ChangelogEntry {
+  summary: string;
+  description: string;
+}
+
+export interface Changelog {
+  features: ChangelogEntry[];
+  fixes: ChangelogEntry[];
+}
+
 export interface RawVersionMeta {
   version: string;
   target: string;
@@ -32,6 +42,7 @@ export interface RawVersionMeta {
   development_mode: number;
   actions: string;
   settings: string;
+  changelog: string;
   factory_defaults: {
     layout: string;
     settings: string;
@@ -57,6 +68,7 @@ export interface VersionMeta {
   developmentBuild: boolean;
   actions: KeymapCategory[];
   settings: SettingsMeta[];
+  changelog: Changelog;
   factoryDefaults?: {
     layout: CharaLayoutFile;
     settings: CharaSettingsFile;

src/routes/(app)/ccos/[device]/[version]/+page.svelte

@@ -319,11 +319,56 @@
       </section>
     {/if}
   </div>
+
+  <section class="changelog">
+    <h2>Changelog</h2>
+    {#if data.meta.changelog.features}
+      <h3>Features</h3>
+      <ul>
+        {#each data.meta.changelog.features as feature}
+          <li>
+            <b>{@html feature.summary}</b>
+            {@html feature.description}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    {#if data.meta.changelog.fixes}
+      <h3>Fixes</h3>
+      <ul>
+        {#each data.meta.changelog.fixes as fix}
+          <li>
+            <b>{@html fix.summary}</b>
+            {@html fix.description}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </section>
 </div>
 
 <style lang="scss">
-  h3 {
+  .changelog:empty {
-    margin-block-start: 4em;
+    display: none;
+  }
+
+  .changelog ul {
+    list-style: none;
+    padding-inline-start: 0em;
+  }
+
+  .changelog li {
+    margin-block: 0.2em;
+    padding: 0.5em 1em;
+  }
+
+  .changelog b {
+    display: inline-block;
+    color: var(--md-sys-color-on-tertiary-container);
+    background: var(--md-sys-color-tertiary-container);
+    padding: 0.2em 0.5em;
+    border-radius: 8px;
+    translate: -0.5em -0.2em;
   }
 
   pre {