From d691d7a3b34f7f4249138baa4c3f27b79a9f8e6c Mon Sep 17 00:00:00 2001
From: Mo <mo@standardnotes.com>
Date: Tue, 6 Dec 2022 21:13:04 -0600
Subject: [PATCH] fix: Fixed issue where Dark theme could be called 'Focus' in
 Appearance preferences

---
 .../Preferences/Panes/Appearance.tsx          | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx
index 831999410..f37ff1f54 100644
--- a/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx
@@ -4,11 +4,19 @@ import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import Switch from '@/Components/Switch/Switch'
 import { WebApplication } from '@/Application/Application'
-import { ContentType, FeatureIdentifier, PrefKey, GetFeatures, SNTheme } from '@standardnotes/snjs'
+import {
+  ContentType,
+  FeatureIdentifier,
+  PrefKey,
+  GetFeatures,
+  SNTheme,
+  FindNativeFeature,
+  FeatureStatus,
+  naturalSort,
+} from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, useEffect, useState } from 'react'
 import { Subtitle, Title, Text } from '@/Components/Preferences/PreferencesComponents/Content'
-import { sortThemes } from '@/Utils/SortThemes'
 import PreferencesPane from '../PreferencesComponents/PreferencesPane'
 import PreferencesGroup from '../PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '../PreferencesComponents/PreferencesSegment'
@@ -37,9 +45,8 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
   useEffect(() => {
     const themesAsItems: DropdownItem[] = application.items
       .getDisplayableComponents()
-      .filter((component) => component.isTheme())
-      .filter((component) => !(component as SNTheme).isLayerable())
-      .sort(sortThemes)
+      .filter((component) => component.isTheme() && !(component as SNTheme).isLayerable())
+      .filter((theme) => !FindNativeFeature(theme.identifier))
       .map((theme) => {
         return {
           label: theme.name,
@@ -50,13 +57,14 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
     GetFeatures()
       .filter((feature) => feature.content_type === ContentType.Theme && !feature.layerable)
       .forEach((theme) => {
-        if (themesAsItems.findIndex((item) => item.value === theme.identifier) === -1) {
-          themesAsItems.push({
-            label: theme.name as string,
-            value: theme.identifier,
-            icon: PremiumFeatureIconName,
-          })
-        }
+        themesAsItems.push({
+          label: theme.name as string,
+          value: theme.identifier,
+          icon:
+            application.features.getFeatureStatus(theme.identifier) !== FeatureStatus.Entitled
+              ? PremiumFeatureIconName
+              : undefined,
+        })
       })
 
     themesAsItems.unshift({
@@ -64,7 +72,7 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
       value: 'Default',
     })
 
-    setThemeItems(themesAsItems)
+    setThemeItems(naturalSort(themesAsItems, 'label'))
   }, [application])
 
   const toggleUseDeviceSettings = () => {