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,26 +102,36 @@ class App extends Component<Props, State> {
     );
     const tildesLink = <Link text="Tildes" url={tildesUrl} />;
 
-    const asideElements = features.map(({availableSince, key, title}) => {
+    const asideElements = features.map(
-      const isNew =
+      ({availableSince, lastUpdated, key, title}) => {
-        Date.now() - availableSince.getTime() < this.newFeatureDuration ? (
+        const lastUpdatedTime =
+          lastUpdated?.getTime() ?? this.newFeatureDuration * 2;
+        const isNew =
+          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 (
+        return (
-        <li
+          <li
-          key={key}
+            key={key}
-          class={`${activeFeature.value === key ? "active" : ""}
+            class={`${activeFeature.value === key ? "active" : ""}
                 ${enabledFeatures.value.has(key) ? "enabled" : ""}`}
-          onClick={() => {
+            onClick={() => {
-            this.setActiveFeature(key);
+              this.setActiveFeature(key);
-          }}
+            }}
-        >
+          >
-          {title}
+            {title}
-          {isNew}
+            {isNewOrUpdated}
-        </li>
+          </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);
+    }
   }
 }