fix(translations): add missing strings

src/features/background/options/Custom.jsx

@@ -593,7 +593,7 @@ const CustomSettings = memo(() => {
                 {' '}
                 · {formatBytes(storageUsed)} / {formatBytes(availableStorageLimit)}
                 {storagePercent > 80 && navigator.storage && navigator.storage.persist && (
-                  <Tooltip title="Request persistent storage to prevent browser from automatically clearing your images">
+                  <Tooltip title={variables.getMessage('modals.main.settings.sections.background.source.persistent_storage_tooltip')}>
                     <button
                       className="request-storage-link"
                       onClick={async () => {
@@ -601,11 +601,11 @@ const CustomSettings = memo(() => {
                           const isPersisted = await navigator.storage.persist();
                           if (isPersisted) {
                             toast(
-                              'Persistent storage granted - your images are protected from eviction',
+                              variables.getMessage('modals.main.settings.sections.background.source.persistent_storage_granted'),
                             );
                           } else {
                             toast(
-                              'Persistent storage denied - images may be cleared if storage is low',
+                              variables.getMessage('modals.main.settings.sections.background.source.persistent_storage_denied'),
                             );
                           }
                         } catch (error) {

src/features/background/options/sections/APISettings.jsx

@@ -52,14 +52,14 @@ const APISettings = ({ backgroundAPI, backgroundCategories, onUpdateAPI }) => {
             }}
           />
           <Radio
-            title="API"
+            title={variables.getMessage('modals.main.settings.sections.background.source.api_title')}
             options={[
               {
-                name: 'Mue',
+                name: variables.getMessage('modals.main.settings.sections.background.source.api_mue'),
                 value: 'mue',
               },
               {
-                name: 'Unsplash',
+                name: variables.getMessage('modals.main.settings.sections.background.source.api_unsplash'),
                 value: 'unsplash',
               },
             ]}
@@ -84,7 +84,7 @@ const APISettings = ({ backgroundAPI, backgroundCategories, onUpdateAPI }) => {
               subtitle={variables.getMessage(
                 'modals.main.settings.sections.background.unsplash.id_subtitle',
               )}
-              placeholder="e.g. 123456, 654321"
+              placeholder={variables.getMessage('modals.main.settings.sections.background.source.collection_placeholder')}
               name="unsplashCollections"
               category="background"
               element="#backgroundImage"

src/features/marketplace/components/Modals/ItemSettingsModal.jsx

@@ -222,7 +222,7 @@ const ItemSettingsModal = ({ pack, isOpen, onClose, isEnabled }) => {
             </span>
           </div>
         </div>
-        <button className="itemSettings-close" onClick={onClose} aria-label="Close">
+        <button className="itemSettings-close" onClick={onClose} aria-label={variables.getMessage('common.actions.close')}>
           <MdClose />
         </button>
       </div>

src/features/marketplace/views/Added.jsx

@@ -225,7 +225,7 @@ const Added = memo(() => {
               type="collection"
               onClick={goToDiscover}
               icon={<MdExplore />}
-              label="Get Some"
+              label={variables.getMessage('modals.main.marketplace.addons.get_some')}
             />
           </div>
         </div>
@@ -249,7 +249,7 @@ const Added = memo(() => {
             type="settings"
             onClick={removeAll}
             icon={<MdOutlineExtensionOff />}
-            label="Remove all addons"
+            label={variables.getMessage('modals.main.marketplace.addons.remove_all')}
           />
         </CustomActions>
       </Header>
@@ -269,21 +269,21 @@ const Added = memo(() => {
           items={[
             { value: 'newest', text: variables.getMessage('modals.main.addons.sort.newest') },
             { value: 'a-z', text: variables.getMessage('modals.main.addons.sort.a_z') },
-            { value: 'recently-updated', text: 'Recently Updated' },
+            { value: 'recently-updated', text: variables.getMessage('modals.main.marketplace.addons.recently_updated') },
           ]}
         />
         <div className="view-toggle-buttons">
           <button
             className={`view-toggle-btn ${viewType === 'grid' ? 'active' : ''}`}
             onClick={() => toggleViewType('grid')}
-            aria-label="Grid view"
+            aria-label={variables.getMessage('common.view_mode.grid')}
           >
             <MdViewModule />
           </button>
           <button
             className={`view-toggle-btn ${viewType === 'list' ? 'active' : ''}`}
             onClick={() => toggleViewType('list')}
-            aria-label="List view"
+            aria-label={variables.getMessage('common.view_mode.list')}
           >
             <MdViewList />
           </button>

src/features/misc/sections/About.jsx

@@ -141,7 +141,7 @@ class About extends PureComponent {
               draggable={false}
               className="aboutLogo"
               src={'src/assets/icons/mue_about.png'}
-              alt="Logo"
+              alt={variables.getMessage('common.alt_text.logo')}
             />
             <div className="aboutText">
               <span className="title">{variables.getMessage('branding.name')}</span>
@@ -153,8 +153,10 @@ class About extends PureComponent {
             </div>
             <div>
               <span className="subtitle">
-                Copyright 2018-
-                {new Date().getFullYear()}{' '}
+                {variables.getMessage('modals.main.settings.sections.about.copyright', {
+                  startYear: 2018,
+                  currentYear: new Date().getFullYear()
+                })}{' '}
                 <a
                   className="link"
                   href={
@@ -171,7 +173,7 @@ class About extends PureComponent {
                 </a>
               </span>
             </div>
-            <span className="subtitle">Licensed under the BSD-3-Clause License</span>
+            <span className="subtitle">{variables.getMessage('modals.main.settings.sections.about.license')}</span>
             <span className="subtitle">
               <a
                 href={variables.constants.PRIVACY_URL}
@@ -200,19 +202,19 @@ class About extends PureComponent {
               type="linkIconButton"
               href={'mailto:' + variables.constants.EMAIL}
               icon={<MdEmail />}
-              tooltipTitle="Email"
+              tooltipTitle={variables.getMessage('modals.main.settings.sections.about.social.email')}
             />
             <Button
               type="linkIconButton"
               href={'https://x.com/' + variables.constants.TWITTER_HANDLE}
               icon={<SiX />}
-              tooltipTitle="X (Twitter)"
+              tooltipTitle={variables.getMessage('modals.main.settings.sections.about.social.twitter')}
             />
             <Button
               type="linkIconButton"
               href={'https://discord.gg/' + variables.constants.DISCORD_SERVER}
               icon={<FaDiscord />}
-              tooltipTitle="Discord"
+              tooltipTitle={variables.getMessage('modals.main.settings.sections.about.social.discord')}
             />
           </div>
         </div>
@@ -332,7 +334,7 @@ class About extends PureComponent {
             {this.state.photographers.map(({ name, count }) => (
               <li key={name} className="subtitle-photographers">
                 {name}
-                <span> ({count} images)</span>
+                <span> ({variables.getMessage('modals.main.settings.sections.about.image_count', { count })})</span>
               </li>
             ))}
           </ul>

src/features/misc/sections/Changelog.jsx

@@ -80,7 +80,7 @@ const Changelog = () => {
           opacity: loading ? 0 : 1,
           transition: 'opacity 0.2s ease-in-out',
         }}
-        title="Changelog"
+        title={variables.getMessage('modals.main.settings.sections.changelog.iframe_title')}
       />
     </div>
   );

src/features/misc/sections/Experimental.jsx

@@ -26,9 +26,9 @@ function ExperimentalOptions() {
           title={variables.getMessage('modals.main.settings.sections.experimental.developer')}
         />
         <Action>
-          <Checkbox name="debug" text="Debug hotkey (Ctrl + #)" element=".other" />
+          <Checkbox name="debug" text={variables.getMessage('modals.main.settings.sections.experimental.debug_hotkey')} element=".other" />
           <Slider
-            title="Debug timeout"
+            title={variables.getMessage('modals.main.settings.sections.experimental.debug_timeout')}
             name="debugtimeout"
             min="0"
             max="5000"
@@ -37,9 +37,9 @@ function ExperimentalOptions() {
             marks={values.experimental}
             element=".other"
           />
-          <p style={{ textAlign: 'left', width: '100%' }}>Send Event</p>
+          <p style={{ textAlign: 'left', width: '100%' }}>{variables.getMessage('modals.main.settings.sections.experimental.send_event')}</p>
           <div className="text-field">
-            <label className="text-field-label">Type</label>
+            <label className="text-field-label">{variables.getMessage('modals.main.settings.sections.experimental.event_type')}</label>
             <input
               type="text"
               className="text-field-input"
@@ -49,7 +49,7 @@ function ExperimentalOptions() {
             />
           </div>
           <div className="text-field">
-            <label className="text-field-label">Name</label>
+            <label className="text-field-label">{variables.getMessage('modals.main.settings.sections.experimental.event_name')}</label>
             <input
               type="text"
               className="text-field-input"
@@ -61,24 +61,24 @@ function ExperimentalOptions() {
           <Button
             type="settings"
             onClick={() => EventBus.emit(eventType, eventName)}
-            label="Send"
+            label={variables.getMessage('common.actions.send')}
           />
           <Button
             type="settings"
-            onClick={() => toast('Toasted successfully')}
-            label="Normal Toast"
+            onClick={() => toast(variables.getMessage('modals.main.settings.sections.experimental.toast_success'))}
+            label={variables.getMessage('modals.main.settings.sections.experimental.normal_toast')}
           />
           <Button
             type="settings"
-            onClick={() => toast.success('Toasted successfully')}
-            label="Achievement Unlocked Toast"
+            onClick={() => toast.success(variables.getMessage('modals.main.settings.sections.experimental.toast_success'))}
+            label={variables.getMessage('modals.main.settings.sections.experimental.achievement_toast')}
           />
         </Action>
       </Row>
       <Row final={true}>
-        <Content title="Data" />
+        <Content title={variables.getMessage('modals.main.settings.sections.experimental.data_section')} />
         <Action>
-          <Button type="settings" onClick={() => localStorage.clear()} label="Clear LocalStorage" />
+          <Button type="settings" onClick={() => localStorage.clear()} label={variables.getMessage('modals.main.settings.sections.experimental.clear_localstorage')} />
         </Action>
       </Row>
     </>

src/features/quicklinks/options/QuickLinksOptions.jsx

@@ -228,7 +228,7 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
               name="quickLinksStyle"
               category="quicklinks"
               items={[
-                { value: 'card', text: 'Card' },
+                { value: 'card', text: variables.getMessage(`${QUICKLINKS_SECTION}.layout_card`) },
                 { value: 'icon', text: variables.getMessage(`${QUICKLINKS_SECTION}.options.icon`) },
                 {
                   value: 'text_only',
@@ -244,26 +244,26 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
         </Row>
 
         <Row>
-          <Content title="Layout" subtitle="Configure grid layout and organization" />
+          <Content title={variables.getMessage(`${QUICKLINKS_SECTION}.layout`)} subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.layout_description`)} />
           <Action>
             <Dropdown
-              label="Layout Mode"
+              label={variables.getMessage(`${QUICKLINKS_SECTION}.layout_mode`)}
               name="quicklinks_layoutMode"
               category="quicklinks"
               onChange={(value) => handleLayoutChange('layoutMode', value)}
               items={[
-                { value: 'flex', text: 'Flexible' },
-                { value: 'grid', text: 'Grid' },
-                { value: 'compact', text: 'Compact' },
+                { value: 'flex', text: variables.getMessage(`${QUICKLINKS_SECTION}.layout_flex`) },
+                { value: 'grid', text: variables.getMessage(`${QUICKLINKS_SECTION}.layout_grid`) },
+                { value: 'compact', text: variables.getMessage(`${QUICKLINKS_SECTION}.layout_compact`) },
               ]}
             />
             <Dropdown
-              label="Grid Columns"
+              label={variables.getMessage(`${QUICKLINKS_SECTION}.grid_columns`)}
               name="quicklinks_gridColumns"
               category="quicklinks"
               onChange={(value) => handleLayoutChange('gridColumns', value)}
               items={[
-                { value: 'auto', text: 'Auto' },
+                { value: 'auto', text: variables.getMessage(`${QUICKLINKS_SECTION}.grid_columns_auto`) },
                 { value: '2', text: '2' },
                 { value: '3', text: '3' },
                 { value: '4', text: '4' },
@@ -272,12 +272,12 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
               ]}
             />
             <Dropdown
-              label="Grid Rows"
+              label={variables.getMessage(`${QUICKLINKS_SECTION}.grid_rows`)}
               name="quicklinks_gridRows"
               category="quicklinks"
               onChange={(value) => handleLayoutChange('gridRows', value)}
               items={[
-                { value: 'auto', text: 'Auto' },
+                { value: 'auto', text: variables.getMessage(`${QUICKLINKS_SECTION}.grid_columns_auto`) },
                 { value: '2', text: '2' },
                 { value: '3', text: '3' },
                 { value: '4', text: '4' },
@@ -321,11 +321,11 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
 
     return (
       <Row>
-        <Content title="Groups" subtitle="Organize quick links into groups" />
+        <Content title={variables.getMessage(`${QUICKLINKS_SECTION}.grouping`)} subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.grouping_description`)} />
         <Action>
           <Checkbox
             name="quicklinks_groupingEnabled"
-            text="Enable Grouping"
+            text={variables.getMessage(`${QUICKLINKS_SECTION}.enable_grouping`)}
             category="quicklinks"
             onChange={handleGroupingToggle}
           />
@@ -346,7 +346,7 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
 
     const handleSync = async () => {
       setSyncing(true);
-      setSyncStatus('Syncing...');
+      setSyncStatus(variables.getMessage(`${QUICKLINKS_SECTION}.syncing`));
       try {
         const config = JSON.parse(localStorage.getItem('quicklinks_config') || '{}');
         if (!config.bookmarkSyncEnabled) {
@@ -358,7 +358,7 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
         if (!hasPermission) {
           const granted = await BookmarkService.requestPermissions();
           if (!granted) {
-            setSyncStatus('Permission denied');
+            setSyncStatus(variables.getMessage(`${QUICKLINKS_SECTION}.permission_denied`));
             setSyncing(false);
             return;
           }
@@ -366,11 +366,15 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
 
         const result = await BookmarkService.syncBookmarks();
         setSyncStatus(
-          `Synced: ${result.imported} imported, ${result.updated} updated, ${result.removed} removed`,
+          variables.getMessage(`${QUICKLINKS_SECTION}.sync_success`, {
+            imported: result.imported,
+            updated: result.updated,
+            removed: result.removed
+          }),
         );
         EventBus.emit('refresh', 'quicklinks');
       } catch (e) {
-        setSyncStatus(`Error: ${e.message}`);
+        setSyncStatus(variables.getMessage(`${QUICKLINKS_SECTION}.sync_error`, { message: e.message }));
       }
       setSyncing(false);
     };
@@ -379,13 +383,13 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
       <>
         <Row>
           <Content
-            title="Bookmark Sync"
-            subtitle="Automatically sync browser bookmarks to quick links"
+            title={variables.getMessage(`${QUICKLINKS_SECTION}.bookmark_sync_title`)}
+            subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.bookmark_sync_subtitle`)}
           />
           <Action>
             <Checkbox
               name="quicklinks_bookmarkSyncEnabled"
-              text="Enable Bookmark Sync"
+              text={variables.getMessage(`${QUICKLINKS_SECTION}.enable_bookmark_sync`)}
               category="quicklinks"
               onChange={handleSyncToggle}
             />
@@ -393,15 +397,15 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
         </Row>
         <Row>
           <Content
-            title="Manual Sync"
-            subtitle="Manually sync bookmarks now"
+            title={variables.getMessage(`${QUICKLINKS_SECTION}.manual_sync_title`)}
+            subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.manual_sync_subtitle`)}
           />
           <Action>
             <Button
               type="settings"
               onClick={handleSync}
               icon={<MdSync />}
-              label="Sync Bookmarks"
+              label={variables.getMessage(`${QUICKLINKS_SECTION}.sync_bookmarks_button`)}
               disabled={syncing}
             />
             {syncStatus && <p style={{ marginTop: '8px', fontSize: '14px' }}>{syncStatus}</p>}
@@ -476,29 +480,29 @@ const QuickLinksOptions = ({ currentSubSection, onSubSectionChange, sectionName
             visibilityToggle={true}
           >
             <Section
-              title="Appearance"
-              subtitle="Customize style and layout of quick links"
+              title={variables.getMessage(`${QUICKLINKS_SECTION}.appearance_title`)}
+              subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.appearance_subtitle`)}
               icon={<MdOutlineStyle />}
               onClick={() => onSubSectionChange('appearance', sectionName)}
             />
 
             <Section
-              title="Display"
-              subtitle="Configure tooltips and tab behavior"
+              title={variables.getMessage(`${QUICKLINKS_SECTION}.display_title`)}
+              subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.display_subtitle`)}
               icon={<MdOutlineVisibility />}
               onClick={() => onSubSectionChange('display', sectionName)}
             />
 
             <Section
-              title="Organization"
-              subtitle="Organize links into groups"
+              title={variables.getMessage(`${QUICKLINKS_SECTION}.organization_title`)}
+              subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.organization_subtitle`)}
               icon={<MdOutlineFolderOpen />}
               onClick={() => onSubSectionChange('organization', sectionName)}
             />
 
             <Section
-              title="Bookmark Sync"
-              subtitle="Import and sync browser bookmarks"
+              title={variables.getMessage(`${QUICKLINKS_SECTION}.bookmark_sync_section_title`)}
+              subtitle={variables.getMessage(`${QUICKLINKS_SECTION}.bookmark_sync_section_subtitle`)}
               icon={<MdSync />}
               onClick={() => onSubSectionChange('sync', sectionName)}
             />

src/features/quote/components/AuthorInfo.jsx

@@ -59,7 +59,7 @@ export default function AuthorInfo({
                 className="quoteAuthorLink"
                 target="_blank"
                 rel="noopener noreferrer"
-                aria-label="Learn about the author of the quote."
+                aria-label={t('widgets.quote.author_info_aria')}
               >
                 <MdOpenInNew />
               </a>

src/features/quote/components/AuthorInfoLegacy.jsx

@@ -1,3 +1,4 @@
+import { useT } from 'contexts';
 import QuoteButtons from './QuoteButtons';
 
 /**
@@ -11,6 +12,7 @@ export default function AuthorInfoLegacy({
   onShare,
   isFavourited,
 }) {
+  const t = useT();
   return (
     <>
       <div>
@@ -21,7 +23,7 @@ export default function AuthorInfoLegacy({
               className="quoteAuthorLink"
               target="_blank"
               rel="noopener noreferrer"
-              aria-label="Learn about the author of the quote."
+              aria-label={t('widgets.quote.author_info_aria')}
             >
               {author}
             </a>

src/features/search/Search.jsx

@@ -62,7 +62,7 @@ function Search() {
           className="navbarButton"
           onClick={startSpeechRecognition}
           ref={micIcon}
-          aria-label="Microphone Search"
+          aria-label={t('common.microphone_search')}
         >
           <MdMic className="micIcon" />
         </button>,
@@ -119,7 +119,7 @@ function Search() {
         <form onSubmit={searchButton} className="searchBar">
           <div className={classList}>
             <Tooltip title={t('widgets.search')}>
-              <button className="navbarButton" onClick={searchButton} aria-label="Search">
+              <button className="navbarButton" onClick={searchButton} aria-label={t('common.search_label')}>
                 <MdSearch />
               </button>
             </Tooltip>