Add an Updated marker for features that got updated recently.

source/options/features.ts

@@ -16,6 +16,7 @@ import {
 
 type FeatureData = {
   availableSince: Date;
+  lastUpdated?: Date;
   index: number;
   key: Feature;
   title: string;
@@ -74,6 +75,7 @@ export const features: FeatureData[] = [
   },
   {
     availableSince: new Date("2023-07-16"),
+    lastUpdated: new Date("2023-07-16"),
     index: 0,
     key: Feature.Miscellaneous,
     title: "Miscellaneous",
@@ -95,6 +97,7 @@ export const features: FeatureData[] = [
   },
   {
     availableSince: new Date("2022-02-25"),
+    lastUpdated: new Date("2023-07-16"),
     index: 0,
     key: Feature.UsernameColors,
     title: "Username Colors",

source/options/setup.tsx

@@ -102,10 +102,19 @@ class App extends Component<Props, State> {
     );
     const tildesLink = <Link text="Tildes" url={tildesUrl} />;
 
-    const asideElements = features.map(({availableSince, key, title}) => {
+    const asideElements = features.map(
+      ({availableSince, lastUpdated, key, title}) => {
+        const lastUpdatedTime =
+          lastUpdated?.getTime() ?? this.newFeatureDuration * 2;
         const isNew =
-        Date.now() - availableSince.getTime() < this.newFeatureDuration ? (
+          Date.now() - availableSince.getTime() < this.newFeatureDuration;
+        const isUpdated =
+          Date.now() - lastUpdatedTime < this.newFeatureDuration;
+
+        const isNewOrUpdated = isNew ? (
           <span class="is-new">NEW</span>
+        ) : isUpdated ? (
+          <span class="is-updated">UPDATED</span>
         ) : undefined;
 
         return (
@@ -118,10 +127,11 @@ class App extends Component<Props, State> {
             }}
           >
             {title}
-          {isNew}
+            {isNewOrUpdated}
           </li>
         );
-    });
+      },
+    );
 
     const mainElements = features.map(({key, title, component: Setting}) => {
       return (

source/scss/index.scss

@@ -146,12 +146,20 @@ details {
       }
     }
 
-    .is-new {
+    .is-new,
-      color: var(--light-blue);
+    .is-updated {
       font-weight: bold;
       font-size: 60%;
       vertical-align: top;
     }
+
+    .is-new {
+      color: var(--light-blue);
+    }
+
+    .is-updated {
+      color: var(--light-green);
+    }
   }
 }