Add descriptions to Decky titleview DialogButtons (#502)

* chore: add onOKActionDescriptions to decky titleview

This is in preparation for beebles' custom titleview. Since plugins may reuse the same icons in their custom titleviews, it will be a good practice to disambiguate their meanings. In the Steam UI, any icon button has a matching description.

* chore: implement it using the translation framework

---------

Co-authored-by: Marco Rodolfi <marco.rodolfi@tuta.io>

backend/locales/en-US.json

@@ -234,6 +234,10 @@
       "testing": "Testing"
     }
   },
+  "TitleView":{
+    "decky_store_desc": "Open Decky Store",
+    "settings_desc": "Open Decky Settings"
+  },
   "Updater": {
     "decky_updates": "Decky Updates",
     "no_patch_notes_desc": "no patch notes for this version",

frontend/src/components/TitleView.tsx

@@ -1,5 +1,6 @@
 import { DialogButton, Focusable, Router, staticClasses } from 'decky-frontend-lib';
 import { CSSProperties, VFC } from 'react';
+import { useTranslation } from 'react-i18next';
 import { BsGearFill } from 'react-icons/bs';
 import { FaArrowLeft, FaStore } from 'react-icons/fa';
 
@@ -13,6 +14,7 @@ const titleStyles: CSSProperties = {
 
 const TitleView: VFC = () => {
   const { activePlugin, closeActivePlugin } = useDeckyState();
+  const { t } = useTranslation();
 
   const onSettingsClick = () => {
     Router.CloseSideMenus();
@@ -31,12 +33,14 @@ const TitleView: VFC = () => {
         <DialogButton
           style={{ height: '28px', width: '40px', minWidth: 0, padding: '10px 12px' }}
           onClick={onStoreClick}
+          onOKActionDescription={t('TitleView.decky_store_desc')}
         >
           <FaStore style={{ marginTop: '-4px', display: 'block' }} />
         </DialogButton>
         <DialogButton
           style={{ height: '28px', width: '40px', minWidth: 0, padding: '10px 12px' }}
           onClick={onSettingsClick}
+          onOKActionDescription={t('TitleView.settings_desc')}
         >
           <BsGearFill style={{ marginTop: '-4px', display: 'block' }} />
         </DialogButton>