docs: S2 docs bug fixes from testing

packages/dev/s2-docs/pages/react-aria/quality.mdx

@@ -87,41 +87,41 @@ function App() {
 ### Supported locales
 
 <ul style={{columnWidth: 200, paddingLeft: 16, fontFamily: 'adobe-clean-spectrum-vf'}}>
-  <li>Arabic (United Arab Emirates)</li>
-  <li>Bulgarian (Bulgaria)</li>
-  <li>Chinese (Simplified)</li>
-  <li>Chinese (Traditional)</li>
-  <li>Croatian (Croatia)</li>
-  <li>Czech (Czech Republic)</li>
-  <li>Danish (Denmark)</li>
-  <li>Dutch (Netherlands)</li>
-  <li>English (Great Britain)</li>
-  <li>English (United States)</li>
-  <li>Estonian (Estonia)</li>
-  <li>Finnish (Finland)</li>
-  <li>French (Canada)</li>
-  <li>French (France)</li>
-  <li>German (Germany)</li>
-  <li>Greek (Greece)</li>
-  <li>Hebrew (Israel)</li>
-  <li>Hungarian (Hungary)</li>
-  <li>Italian (Italy)</li>
-  <li>Japanese (Japan)</li>
-  <li>Korean (Korea)</li>
-  <li>Latvian (Latvia)</li>
-  <li>Lithuanian (Lithuania)</li>
-  <li>Norwegian (Norway)</li>
-  <li>Polish (Poland)</li>
-  <li>Portuguese (Brazil)</li>
-  <li>Romanian (Romania)</li>
-  <li>Russian (Russia)</li>
-  <li>Serbian (Serbia)</li>
-  <li>Slovakian (Slovakia)</li>
-  <li>Slovenian (Slovenia)</li>
-  <li>Spanish (Spain)</li>
-  <li>Swedish (Sweden)</li>
-  <li>Turkish (Turkey)</li>
-  <li>Ukrainian (Ukraine)</li>
+  <li>Arabic (United Arab Emirates) (`ar-AE`)</li>
+  <li>Bulgarian (Bulgaria) (`bg-BG`)</li>
+  <li>Chinese (Simplified) (`zh-CN`)</li>
+  <li>Chinese (Traditional) (`zh-TW`)</li>
+  <li>Croatian (Croatia) (`hr-HR`)</li>
+  <li>Czech (Czech Republic) (`cs-CZ`)</li>
+  <li>Danish (Denmark) (`da-DK`)</li>
+  <li>Dutch (Netherlands) (`nl-NL`)</li>
+  <li>English (Great Britain) (`en-GB`)</li>
+  <li>English (United States) (`en-US`)</li>
+  <li>Estonian (Estonia) (`et-EE`)</li>
+  <li>Finnish (Finland) (`fi-FI`)</li>
+  <li>French (Canada) (`fr-CA`)</li>
+  <li>French (France) (`fr-FR`)</li>
+  <li>German (Germany) (`de-DE`)</li>
+  <li>Greek (Greece) (`el-GR`)</li>
+  <li>Hebrew (Israel) (`he-IL`)</li>
+  <li>Hungarian (Hungary) (`hu-HU`)</li>
+  <li>Italian (Italy) (`it-IT`)</li>
+  <li>Japanese (Japan) (`ja-JP`)</li>
+  <li>Korean (Korea) (`ko-KR`)</li>
+  <li>Latvian (Latvia) (`lv-LV`)</li>
+  <li>Lithuanian (Lithuania) (`lt-LT`)</li>
+  <li>Norwegian (Norway) (`nb-NO`)</li>
+  <li>Polish (Poland) (`pl-PL`)</li>
+  <li>Portuguese (Brazil) (`pt-BR`)</li>
+  <li>Romanian (Romania) (`ro-RO`)</li>
+  <li>Russian (Russia) (`ru-RU`)</li>
+  <li>Serbian (Serbia) (`sr-SP`)</li>
+  <li>Slovakian (Slovakia) (`sk-SK`)</li>
+  <li>Slovenian (Slovenia) (`sl-SI`)</li>
+  <li>Spanish (Spain) (`es-ES`)</li>
+  <li>Swedish (Sweden) (`sv-SE`)</li>
+  <li>Turkish (Turkey) (`tr-TR`)</li>
+  <li>Ukrainian (Ukraine) (`uk-UA`)</li>
 </ul>
 
 ## Interactions

packages/dev/s2-docs/src/MobileSearchMenu.tsx

@@ -283,18 +283,31 @@ function MobileNav({pages, currentPage}: {pages: Page[], currentPage: Page}) {
 
     let filteredPages = filterPages(pages, searchValue);
 
-    return filteredPages
-      .sort((a, b) => getPageTitle(a).localeCompare(getPageTitle(b)))
-      .map(page => ({id: page.url.replace(/^\//, ''), name: getPageTitle(page), href: page.url, description: stripMarkdown(page.exports?.description)}));
+    let items = filteredPages.map(page => ({
+      id: page.url.replace(/^\//, ''),
+      name: getPageTitle(page),
+      href: page.url,
+      description: stripMarkdown(page.exports?.description),
+      date: page.exports?.date
+    }));
+
+    return sortItemsForDisplay(items, searchValue);
   };
 
   let getAllContent = (libraryId: string, searchValue: string = ''): ComponentCardItem[] => {
     let librarySections = getSectionsForLibrary(libraryId);
     let allPages = Array.from(librarySections.values()).flat();
     let filteredPages = filterPages(allPages, searchValue);
-    return filteredPages
-      .sort((a, b) => getPageTitle(a).localeCompare(getPageTitle(b)))
-      .map(page => ({id: page.url.replace(/^\//, ''), name: getPageTitle(page), href: page.url, description: stripMarkdown(page.exports?.description)}));
+
+    let items = filteredPages.map(page => ({
+      id: page.url.replace(/^\//, ''),
+      name: getPageTitle(page),
+      href: page.url,
+      description: stripMarkdown(page.exports?.description),
+      date: page.exports?.date
+    }));
+
+    return sortItemsForDisplay(items, searchValue);
   };
 
   let getItemsForSelection = (section: string | undefined, libraryId: string, searchValue: string = ''): ComponentCardItem[] => {
@@ -363,8 +376,7 @@ function MobileNav({pages, currentPage}: {pages: Page[], currentPage: Page}) {
     searchValue,
     sectionsForDisplay.map(s => ({id: s.id, name: s.name})),
     resourceTags,
-    initialSelectedSection,
-    currentPage.exports?.title
+    initialSelectedSection
   );
 
   const sectionTags = useSectionTagsForDisplay(
@@ -428,6 +440,11 @@ function MobileNav({pages, currentPage}: {pages: Page[], currentPage: Page}) {
           </div>
           {libraries.map(library => {
             const isIconsSelected = selectedSection === 'icons' && library.id === 'react-spectrum';
+            const libraryResourceTags = getResourceTags(library.id);
+            const selectedResourceTag = libraryResourceTags.find(tag => tag.id === selectedSection);
+            const placeholderText = selectedResourceTag 
+              ? `Search ${selectedResourceTag.name}` 
+              : `Search ${library.label}`;
             return (
               <MobileTabPanel key={library.id} id={library.id}>
                 <Autocomplete filter={isIconsSelected ? iconFilter : undefined}>
@@ -438,6 +455,7 @@ function MobileNav({pages, currentPage}: {pages: Page[], currentPage: Page}) {
                       onChange={handleSearchChange}
                       onFocus={handleSearchFocus}
                       onBlur={handleSearchBlur}
+                      placeholder={placeholderText}
                       styles={style({marginX: 16})} />
                     <div className={style({overflow: 'auto', paddingX: 8, paddingBottom: 8})}>
                       <SearchTagGroups

packages/dev/s2-docs/src/SearchMenu.tsx

@@ -146,8 +146,7 @@ export function SearchMenu(props: SearchMenuProps) {
     searchValue,
     sectionTags,
     resourceTags,
-    currentPage.exports?.section?.toLowerCase() || 'components',
-    currentPage.exports?.title
+    currentPage.exports?.section?.toLowerCase() || 'components'
   );
 
   const filteredIcons = useFilteredIcons(searchValue);

packages/dev/s2-docs/src/searchUtils.tsx

@@ -207,8 +207,7 @@ export function useSearchTagSelection(
   searchValue: string,
   sectionTags: Tag[],
   resourceTags: Tag[],
-  initialTagId: string,
-  title: string
+  initialTagId: string
 ) {
   const [selectedTagId, setSelectedTagId] = useState<string>(initialTagId);
   const prevSearchWasEmptyRef = useRef<boolean>(true);
@@ -237,10 +236,6 @@ export function useSearchTagSelection(
     prevSearchWasEmptyRef.current = isEmpty;
   }, [searchValue, isResourceSelected]);
 
-  if (selectedTagId === 'overview' && title === 'Home') {
-    setSelectedTagId('components');
-  }
-
   return [selectedTagId, setSelectedTagId] as const;
 }