Limit tags or accounts shown in infobar.

Also, do not sort tags or accounts, so users can decide which one are more important and shown first.

src/components/InfoBar.vue

@@ -1,31 +1,53 @@
 <script setup lang="ts">
 import { type Config } from '@/types';
+import { computed } from 'vue';
 
-defineProps<{
+const props = defineProps<{
     config: Config
 }>()
 
+const tagLimit = 5;
+const accountLimit = 2;
+
+const tagsHidden = computed(()=> Math.max(0, props.config.tags.length - tagLimit))
+const accountsHidden = computed(()=> Math.max(0, props.config.accounts.length - accountLimit))
+
+const tags = computed(()=>{
+    const limited = props.config.tags.slice(0, tagLimit)
+    return limited
+})
+
+const accounts = computed(()=>{
+    const limited = props.config.accounts.slice(0,accountLimit)
+    return limited
+})
+
+function sep(index: number, length: number, sep: string, lastsep: string) {
+    if(index < length - 2)
+        return sep
+    else if(index == length - 2)
+        return lastsep
+}
+
 </script>
 
 <template>
     <div>
-        This Fediwall shows
+        This Fediwall shows posts
-        <template v-if="config.tags.length">
+        <template v-if="tags.length">
-            posts tagged with
+            tagged with
-            <template v-for="(t, index) in config.tags" :key="t">
+            <template v-for="(t, index) in tags" :key="index">
-                <code>#{{ t }}</code>
+                <code>#{{ t }}</code>{{ sep(index, tags.length, ", ", tagsHidden ? ", " : " or ") }}
-                <template v-if="index < config.tags.length - 2">, </template>
-                <template v-else-if="index == config.tags.length - 2"> or </template>
             </template>
+            <span v-if="tagsHidden"> and more</span>
         </template>
-        <template v-if="config.accounts.length && config?.tags.length"> and </template>
+        <template v-if="accounts.length">
-        <template v-if="config.accounts.length">
+            <template v-if="tags.length"> as well as posts </template>
-            posts or boosts by
+            by
-            <template v-for="(acc, index) in config.accounts" :key="acc">
+            <template v-for="(acc, index) in accounts" :key="index">
-                <code>@{{ acc }}</code>
+                <code>@{{ acc }}</code>{{ sep(index, accounts.length, ", ", accountsHidden ? ", " : " or ") }}
-                <template v-if="index < config.accounts.length - 2">, </template>
-                <template v-else-if="index == config.accounts.length - 2"> or </template>
             </template>
+            <span v-if="accountsHidden"> and more</span>
         </template>
     </div>
 </template>

src/config.ts

@@ -247,8 +247,8 @@ export function sanatizeConfig(config: any): Config {
     const result: Partial<Config> = {}
 
     result.servers = arrayUnique((Array.isArray(config.servers) ? [...config.servers] : [...fallback.servers]).filter(isServer));
-    result.tags = arrayUnique((Array.isArray(config.tags) ? [...config.tags] : [...fallback.tags]).map(stripTag).filter(isTag).sort() as string[]);
+    result.tags = arrayUnique((Array.isArray(config.tags) ? [...config.tags] : [...fallback.tags]).map(stripTag).filter(isTag) as string[]);
-    result.accounts = arrayUnique((Array.isArray(config.accounts) ? [...config.accounts] : [...fallback.accounts]).filter(isAccount).sort());
+    result.accounts = arrayUnique((Array.isArray(config.accounts) ? [...config.accounts] : [...fallback.accounts]).filter(isAccount));
 
     result.loadFederated = boolOr(config.loadFederated, fallback.loadFederated)
     result.loadPublic = boolOr(config.loadPublic, fallback.loadPublic)