URL bar improvements

[p-malecki]

This PR introduces several enhancements to the URL bar:

• The home button in expo router projects opens the root URL (/{}) with empty params but triggers a metro reload in projects without expo router.
  Initial params may be may be introduced in future PRs.
• The go back button navigates back through the URL history up to a
  limit of 20 URLs.
• A list of the 5 most recently visited URLs is added to the top of
  Select.Content in the URL bar, followed by an alphabetically sorted
  list of all visited URLs.
• Improved responsiveness of Select.Content and Select.Trigger
  components.
• Added a scroll buttons for long URL lists in the Select.Content.
• Long URL names now break at dashes and display in full upon hover in
  Select.Content.
• Added Expo Router as an optional dependency to the diagnostics view.

Screenshots:

Test Plan:

• Navigate to a non-root path and confirm that clicking the home button redirects to the root URL in project using Expo Router and the other without.
• Visit multiple links using both the app interface and the URL bar, then click the go back button to validate correct navigation through the URL history (additionally, test with dynamic links and component previews).
• Visit various links and verify that the top 5 most recent URLs are displayed in the correct order.
• Visit a lot of multiple links or component previews to test scroll functionality when the list exceeds the available space.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-native-ide	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 11, 2024 1:01pm

[jakub-gonet]

Are we sure that it always doesn't take any initial args?

[jakub-gonet]

We're filtering out URLs if they have no name, do we want to store them then?

[p-malecki]

When changing from a preview to another URL, two route changes happen: {displayName: '', id: '{}'} and {displayName: '/', id: '/{}'}. We skip storing the first route with an empty displayName to prevent saving home URL entries twice.

[jakub-gonet]

What if it's not installed?

[p-malecki]

It that case we reload metro. I've changed it.

[filip131311]

requireNoCache

[filip131311]

left some inline comments please address them before marging

[filip131311]

I believe it would be better to write it like this:

const result = urls.filter((record) => record.id !== newUrl.id);
result.unshift(newUrl);
return result

I made a simple benchmark to check the approaches:

let testCases = new Array(1000).fill(0).map(()=>{
    const list = new Array(1000).fill(0);

    return list.map((e,i)=>{
        return i;
    });
});

const movedURL = 560; 
let start = performance.now();
for ( let testCase of testCases){
    const newTestCase = [ movedURL, ...testCase.filter((element)=>element !==movedURL)];
}
let end = performance.now();


testCases = new Array(1000).fill(0).map(()=>{
    const list = new Array(1000).fill(0);

    return list.map((e,i)=>{
        return i;
    });
});
console.log("old approach",start - end);
 start = performance.now();

for ( let testCase of testCases){
    const filtered = testCase.filter((element)=>element !==movedURL);
    filtered.unshift(movedURL);
    const newTestCase = filtered;
}

end = performance.now();

console.log("new approach",start - end);

and got following results:

[jakub-gonet]

I don't agree, trading 2ms of performance for worse readability isn't worth it. Especially when you tested it on 1k long list, we won't get anywhere that list length ever.

[filip131311]

I aprove but left some coments

[filip131311]

can expo router ever be a dev dependency?

[filip131311]

values are versions you wat to use keys. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys