Replace the footer-links overlay with a settings menu

[fatadel]

The footer-links overlay was a small floating box pinned to the bottom-right corner of every page that often obstructed the UI underneath, and the app's settings/links were scattered across the overlay and the top bar. Consolidate the overlay's contents (Legal, Privacy, Cookies, language switcher) together with the Docs link and the theme toggle into a single settings menu opened from a cog icon, so all app-wide controls live in one place. The cog is available on every page — home, compare, uploaded recordings, and while viewing a profile.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.78%. Comparing base (3182970) to head (b2b2481).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6042      +/-   ##
==========================================
- Coverage   83.78%   83.78%   -0.01%     
==========================================
  Files         329      329              
  Lines       34528    34526       -2     
  Branches     9659     9658       -1     
==========================================
- Hits        28930    28927       -3     
- Misses       5169     5170       +1     
  Partials      429      429              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[mstange]

Looks pretty good to me! But I would suggest the following changes:

/* index-MUJPC5U5.css | https://deploy-preview-6042--perf-html.netlify.app/index-MUJPC5U5.css */

.settingsMenuLink {
  /* padding: 6px 14px; */
  /* font-weight: 600; */
  padding: 4px 14px;
}

.settingsMenuPanel {
  /* font-size: 13px; */
  /* font-weight: 400; */
  font-size: 12px;
}

.arrowPanelContent {
  /* --internal-approx-distance-from-top: 60px; */
  /* --internal-approx-distance-to-bottom: 100px; */
  --internal-approx-distance-from-top: 20px;
  --internal-approx-distance-to-bottom: 5px;
}

This reduces the font-size to something that's less aggressive, and makes it so that the panel doesn't get squished as early when you resize the browser.

[mstange]

The word "Docs" now looks a bit out of place. I think we should change it to "Documentation", now that we're no longer as space constrained horizontally.

[mstange]

Oh and how would you feel about putting a <i class="open-in-new"></i> icon in every link in that menu, just like we had for the old Docs button?