Fix for #916 - Added System priority and Alphabetic Ordering - First Commit Ever :)

src/components/MultiselectMenu/Dropdown/Dropdown.less

@@ -1,44 +1,55 @@
-// Copyright (C) 2017-2024 Smart code 203358507
+    // Copyright (C) 2017-2024 Smart code 203358507
 
-@import (reference) '~stremio/common/screen-sizes.less';
+    @import (reference) '~stremio/common/screen-sizes.less';
 
-@parent-height: 10rem;
+    @parent-height: 10rem;
 
-.dropdown {
-    background: var(--modal-background-color);
-    display: none;
-    position: absolute;
-    width: 100%;
-    top: 100%;
-    left: 0;
-    z-index: 10;
-    box-shadow: var(--outer-glow);
-    border-radius: var(--border-radius);
-    overflow: hidden;
 
-    &.open {
-        display: block;
-        max-height: calc(3.3rem * 7);
-        overflow: auto;
-    }
 
-    .back-button {
-        display: flex;
-        align-items: center;
-        gap: 0 0.5rem;
-        padding: 0.75rem;
-        color: var(--primary-foreground-color);
 
-        .back-button-icon {
-            width: 1.5rem;
-        }
-    }
-}
-
-@media (orientation: landscape) and (max-width: @xsmall) {
     .dropdown {
+        background: var(--modal-background-color);
+        display: none;
+        position: absolute;
+        width: 100%;
+        top: 100%;
+        left: 0;
+        z-index: 10;
+        box-shadow: var(--outer-glow);
+        border-radius: var(--border-radius);
+        overflow: hidden;
+
         &.open {
-            max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
+            display: block;
+            max-height: calc(3.3rem * 7);
+            overflow: auto;
+        }
+
+        .back-button {
+            display: flex;
+            align-items: center;
+            gap: 0 0.5rem;
+            padding: 0.75rem;
+            color: var(--primary-foreground-color);
+
+            .back-button-icon {
+                width: 1.5rem;
+            }
+        }
+
+        .separator-after {
+        border-bottom: thin solid var(--overlay-color);
         }
     }
-}
+
+
+
+    @media (orientation: landscape) and (max-width: @xsmall) {
+        .dropdown {
+            &.open {
+                max-height: calc(100dvh - var(--horizontal-nav-bar-size) - @parent-height);
+            }
+        }
+    }
+
+

src/components/MultiselectMenu/Dropdown/Dropdown.tsx

@@ -61,9 +61,45 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
                 </Button>
                 : null
             }
-            {options
+
-                .filter((option: MultiselectMenuOption) => !option.hidden)
+                {options
+                    .filter((option: MultiselectMenuOption) => !option.hidden)
+                    .sort((a, b) => {
+                        
+                        const userLocale = navigator.language || 'en';
+                        const userLangCode = userLocale.split('-')[0];
+                        
+                        const getPriority = (option: MultiselectMenuOption) => {
+
+                            const value = String(option.value);
+
+                            // Check if the value matches user's language, if yes put at top of list
+                            const matchesUser = value === userLocale || value.startsWith(userLangCode + '-');
+                            if (matchesUser) return 1;
+
+                            
+                            // Check if it's English, put at the second position
+                            const isEnglish = value.startsWith('en-') || value === 'en';
+                            if (isEnglish) return 2;
+                            
+                            return 3; // Everything else
+                        };
+                        
+                        const aPriority = getPriority(a);
+                        const bPriority = getPriority(b);
+                        
+                        //Lowest number is ranked highest
+                        if (aPriority !== bPriority) {
+                            return aPriority - bPriority;
+                        }
+                       
+                        // Same priority = alphabetical by label eg "english", "french"
+                        return a.label.localeCompare(b.label);
+                    })
                 .map((option: MultiselectMenuOption) => (
+                    <div 
+                    key={String(option.value)}
+                    className={String(option.value) === 'en-US' ? styles['separator-after'] : ''}>
                     <Option
                         key={option.value}
                         ref={handleSetOptionRef(option.value)}
@@ -71,6 +107,7 @@ const Dropdown = ({ level, setLevel, options, onSelect, value, menuOpen }: Props
                         onSelect={onSelect}
                         selectedValue={value}
                     />
+                    </div>
                 ))
             }
         </div>