feat: new grouping options

src/components/ModTitlecard.vue

@@ -2,9 +2,13 @@
 import { ref } from 'vue';
 import Chip from 'primevue/chip';
 import { convertFileSrc } from '@tauri-apps/api/core';
+import { listen } from '@tauri-apps/api/event';
 import { invoke } from '../invoke';
 import { Feature, Package } from '../types';
 import { hasFeature, needsUpdate } from '../util';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
 
 const props = defineProps({
     pkg: Object as () => Package,
@@ -17,7 +21,7 @@ const props = defineProps({
 
 const icon = ref('/no-icon.png');
 
-(async () => {
+const reloadIcons = async () => {
     const src = props.pkg?.loc?.icon ?? props.pkg?.rmt?.icon;
 
     if (src === undefined) {
@@ -32,7 +36,11 @@ const icon = ref('/no-icon.png');
             icon.value = '/no-icon.png';
         }
     }
-})();
+};
+
+reloadIcons();
+
+listen('reload-icons', reloadIcons);
 </script>
 
 <template>
@@ -97,7 +105,12 @@ const icon = ref('/no-icon.png');
                 v-if="showNamespace && pkg?.namespace"
                 class="text-sm opacity-75"
             >
-                by&nbsp;{{ pkg.namespace }}
+                &nbsp;{{
+                    t('by', { namespace: pkg.namespace }).replaceAll(
+                        ' ',
+                        '&nbsp;'
+                    )
+                }}
             </span>
             <span class="m-2">
                 <span