From 8a7132c2765ae20e224674dcfd4a45baf65d79b8 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Sat, 15 Jul 2023 11:13:04 +0200
Subject: [PATCH] Add an Updated marker for features that got updated recently.

---
 source/options/features.ts |  3 +++
 source/options/setup.tsx   | 42 +++++++++++++++++++++++---------------
 source/scss/index.scss     | 12 +++++++++--
 3 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/source/options/features.ts b/source/options/features.ts
index d4f5c2a..7bedc29 100644
--- a/source/options/features.ts
+++ b/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",
diff --git a/source/options/setup.tsx b/source/options/setup.tsx
index b6538a0..f084f7b 100644
--- a/source/options/setup.tsx
+++ b/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 isNew =
-        Date.now() - availableSince.getTime() < this.newFeatureDuration ? (
+    const asideElements = features.map(
+      ({availableSince, lastUpdated, key, title}) => {
+        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 (
-        <li
-          key={key}
-          class={`${activeFeature.value === key ? "active" : ""}
+        return (
+          <li
+            key={key}
+            class={`${activeFeature.value === key ? "active" : ""}
                 ${enabledFeatures.value.has(key) ? "enabled" : ""}`}
-          onClick={() => {
-            this.setActiveFeature(key);
-          }}
-        >
-          {title}
-          {isNew}
-        </li>
-      );
-    });
+            onClick={() => {
+              this.setActiveFeature(key);
+            }}
+          >
+            {title}
+            {isNewOrUpdated}
+          </li>
+        );
+      },
+    );
 
     const mainElements = features.map(({key, title, component: Setting}) => {
       return (
diff --git a/source/scss/index.scss b/source/scss/index.scss
index 6fad421..db4d1dd 100644
--- a/source/scss/index.scss
+++ b/source/scss/index.scss
@@ -146,12 +146,20 @@ details {
       }
     }
 
-    .is-new {
-      color: var(--light-blue);
+    .is-new,
+    .is-updated {
       font-weight: bold;
       font-size: 60%;
       vertical-align: top;
     }
+
+    .is-new {
+      color: var(--light-blue);
+    }
+
+    .is-updated {
+      color: var(--light-green);
+    }
   }
 }