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>

1 files changed, 4 insertions, 0 deletions

diff --git a/frontend/src/components/TitleView.tsx b/frontend/src/components/TitleView.tsx
index 7e529d21..6ae6b2ae 100644
--- a/frontend/src/components/TitleView.tsx
+++ b/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>