merge: Always show bubble controls (!1023)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1023

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Marie <github@yuugi.dev>

3 files changed, 25 insertions, 6 deletions

diff --git a/locales/index.d.ts b/locales/index.d.ts
index dc41c96a96..5cbe918183 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -13029,6 +13029,18 @@ export interface Locale extends ILocale {
      * Text does not match any patterns.
      */
     "wordMuteTestNoMatch": string;
+    /**
+     * Bubble timeline
+     */
+    "bubbleTimeline": string;
+    /**
+     * Choose which instances should be displayed in the bubble.
+     */
+    "bubbleTimelineDescription": string;
+    /**
+     * Note: the bubble timeline is hidden by default, and must be enabled via roles.
+     */
+    "bubbleTimelineMustBeEnabled": string;
 }
 declare const locales: {
     [lang: string]: Locale;
diff --git a/packages/frontend/src/pages/admin/moderation.vue b/packages/frontend/src/pages/admin/moderation.vue
index 6845bd7ad0..2213890d14 100644
--- a/packages/frontend/src/pages/admin/moderation.vue
+++ b/packages/frontend/src/pages/admin/moderation.vue
@@ -26,15 +26,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 				<FormLink to="/admin/server-rules">{{ i18n.ts.serverRules }}</FormLink>
 
-				<!-- TODO translate -->
-				<MkFolder v-if="bubbleTimelineEnabled">
+				<MkFolder>
 					<template #icon><i class="ph-drop ph-bold ph-lg"></i></template>
-					<template #label>Bubble timeline</template>
+					<template #label>{{ i18n.ts.bubbleTimeline }}</template>
 
 					<div class="_gaps">
+						<div v-if="!$i.policies.btlAvailable">
+							<i class="ti ti-alert-triangle"></i> {{ i18n.ts.bubbleTimelineMustBeEnabled }}
+						</div>
+
 						<MkTextarea v-model="bubbleTimeline">
-							<template #caption>Choose which instances should be displayed in the bubble.</template>
+							<template #caption>{{ i18n.ts.bubbleTimelineDescription }}</template>
 						</MkTextarea>
+
 						<MkButton primary @click="save_bubbleTimeline">{{ i18n.ts.save }}</MkButton>
 					</div>
 				</MkFolder>
@@ -179,11 +183,11 @@ import MkButton from '@/components/MkButton.vue';
 import FormLink from '@/components/form/link.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import SkPatternTest from '@/components/SkPatternTest.vue';
+import { $i } from '@/i';
 
 const enableRegistration = ref<boolean>(false);
 const emailRequiredForSignup = ref<boolean>(false);
 const approvalRequiredForSignup = ref<boolean>(false);
-const bubbleTimelineEnabled = ref<boolean>(false);
 const sensitiveWords = ref<string>('');
 const prohibitedWords = ref<string>('');
 const prohibitedWordsForNameOfUser = ref<string>('');
@@ -206,7 +210,6 @@ async function init() {
 	hiddenTags.value = meta.hiddenTags.join('\n');
 	preservedUsernames.value = meta.preservedUsernames.join('\n');
 	bubbleTimeline.value = meta.bubbleInstances.join('\n');
-	bubbleTimelineEnabled.value = meta.policies.btlAvailable;
 	trustedLinkUrlPatterns.value = meta.trustedLinkUrlPatterns.join('\n');
 	blockedHosts.value = meta.blockedHosts.join('\n');
 	silencedHosts.value = meta.silencedHosts?.join('\n') ?? '';
diff --git a/sharkey-locales/en-US.yml b/sharkey-locales/en-US.yml
index 9232a7706c..af60fb2a61 100644
--- a/sharkey-locales/en-US.yml
+++ b/sharkey-locales/en-US.yml
@@ -559,3 +559,7 @@ wordMuteTestTest: "Test"
 wordMuteTestMatch: "Matched words: {words}"
 wordMuteTestNoResults: "No results yet, enter some text and click \"Test\" to check it."
 wordMuteTestNoMatch: "Text does not match any patterns."
+
+bubbleTimeline: "Bubble timeline"
+bubbleTimelineDescription: "Choose which instances should be displayed in the bubble."
+bubbleTimelineMustBeEnabled: "Note: the bubble timeline is hidden by default, and must be enabled via roles."