Add an indicator for new features.

source/options/features.ts

@@ -12,6 +12,7 @@ import {
 } from './components/exports.js';
 
 type Feature = {
+  availableSince: Date;
   index: number;
   key: keyof RemoveIndexSignature<Settings['features']>;
   title: string;
@@ -20,54 +21,63 @@ type Feature = {
 
 export const features: Feature[] = [
   {
+    availableSince: new Date('2022-02-23'),
     index: 0,
     key: 'anonymizeUsernames',
     title: 'Anonymize Usernames',
     component: () => AnonymizeUsernamesSetting,
   },
   {
+    availableSince: new Date('2020-10-03'),
     index: 0,
     key: 'autocomplete',
     title: 'Autocomplete',
     component: () => AutocompleteSetting,
   },
   {
+    availableSince: new Date('2019-11-10'),
     index: 0,
     key: 'backToTop',
     title: 'Back To Top',
     component: () => BackToTopSetting,
   },
   {
+    availableSince: new Date('2019-11-12'),
     index: 0,
     key: 'hideVotes',
     title: 'Hide Votes',
     component: () => HideVotesSetting,
   },
   {
+    availableSince: new Date('2019-11-10'),
     index: 0,
     key: 'jumpToNewComment',
     title: 'Jump To New Comment',
     component: () => JumpToNewCommentSetting,
   },
   {
+    availableSince: new Date('2019-11-12'),
     index: 0,
     key: 'markdownToolbar',
     title: 'Markdown Toolbar',
     component: () => MarkdownToolbarSetting,
   },
   {
+    availableSince: new Date('2019-11-10'),
     index: 0,
     key: 'userLabels',
     title: 'User Labels',
     component: () => UserLabelsSetting,
   },
   {
+    availableSince: new Date('2022-02-25'),
     index: 0,
     key: 'usernameColors',
     title: 'Username Colors',
     component: () => UsernameColorsSetting,
   },
   {
+    availableSince: new Date('2019-11-10'),
     index: 1,
     key: 'debug',
     title: 'About & Info',

source/options/options.ts

@@ -33,6 +33,10 @@ type State = {
 class App extends Component<Props, State> {
   state: State;
 
+  // Duration for how long the "NEW" indicator should appear next to a feature,
+  // currently 14 days.
+  readonly newFeatureDuration = 14 * 24 * 60 * 60 * 1000;
+
   constructor(props: Props) {
     super(props);
 
@@ -96,21 +100,25 @@ class App extends Component<Props, State> {
     );
     const tildesLink = html`<${Link} text="Tildes" url="${tildesURL}" />`;
 
-    const asideElements = features.map(
+    const asideElements = features.map(({availableSince, key, title}) => {
-      ({key, title}) =>
+      const isNew =
-        html`
+        Date.now() - availableSince.getTime() < this.newFeatureDuration
-          <li
+          ? html`<span class="is-new">NEW</span>`
-            key=${key}
+          : undefined;
-            class="${activeFeature === key ? 'active' : ''}
+
+      return html`
+        <li
+          key=${key}
+          class="${activeFeature === key ? 'active' : ''}
                 ${enabledFeatures.has(key) ? 'enabled' : ''}"
-            onClick="${() => {
+          onClick="${() => {
-              this.setActiveFeature(key);
+            this.setActiveFeature(key);
-            }}"
+          }}"
-          >
+        >
-            ${title}
+          ${title}${isNew}
-          </li>
+        </li>
-        `,
+      `;
-    );
+    });
 
     const mainElements = features.map(
       ({key, title, component}) =>

source/scss/index.scss

@@ -115,6 +115,10 @@ details {
       background-color: var(--light-blue);
       border-color: var(--light-blue);
       cursor: pointer;
+
+      .is-new {
+        color: var(--dark-blue);
+      }
     }
 
     &:not(:last-child) {
@@ -134,6 +138,13 @@ details {
         margin-left: auto;
       }
     }
+
+    .is-new {
+      color: var(--light-blue);
+      font-weight: bold;
+      font-size: 60%;
+      vertical-align: top;
+    }
   }
 }