(null);
const translating = ref(false);
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.value.user.instance);
+const showInstanceIcon = ref(defaultStore.state.instanceIcon);
const canRenote = computed(() => ['public', 'home'].includes(appearNote.value.visibility) || (appearNote.value.visibility === 'followers' && appearNote.value.userId === $i?.id));
const renoteCollapsed = ref(
defaultStore.state.collapseRenotes && isRenote && (
diff --git a/packages/frontend/src/components/global/MkAvatar.vue b/packages/frontend/src/components/global/MkAvatar.vue
index 35c07bc80c..13c39a5f29 100644
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@@ -35,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
}"
alt=""
>
+
@@ -49,6 +50,7 @@ import { getStaticImageUrl } from '@/scripts/media-proxy.js';
import { acct, userPage } from '@/filters/user.js';
import MkUserOnlineIndicator from '@/components/MkUserOnlineIndicator.vue';
import { defaultStore } from '@/store.js';
+import MkInstanceIcon from '@/components/MkInstanceIcon.vue';
const animation = ref(defaultStore.state.animation);
const squareAvatars = ref(defaultStore.state.squareAvatars);
@@ -62,6 +64,7 @@ const props = withDefaults(defineProps<{
indicator?: boolean;
decorations?: (Omit & { blink?: boolean; })[];
forceShowDecoration?: boolean;
+ showInstance?: boolean;
}>(), {
target: null,
link: false,
@@ -69,6 +72,7 @@ const props = withDefaults(defineProps<{
indicator: false,
decorations: undefined,
forceShowDecoration: false,
+ showInstance: false,
});
const emit = defineEmits<{
@@ -343,4 +347,30 @@ watch(() => props.user.avatarBlurhash, () => {
filter: brightness(1);
}
}
+
+.instanceicon {
+ height: 25px;
+ z-index: 2;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+}
+
+@container (max-width: 580px) {
+ .instanceicon {
+ height: 21px;
+ }
+}
+
+@container (max-width: 450px) {
+ .instanceicon {
+ height: 19px;
+ }
+}
+
+@container (max-width: 300px) {
+ .instanceicon {
+ height: 17px;
+ }
+}
diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue
index 1bfdfd0e76..84d5784d45 100644
--- a/packages/frontend/src/pages/settings/general.vue
+++ b/packages/frontend/src/pages/settings/general.vue
@@ -70,7 +70,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+ {{ i18n.ts.instanceIcon }}
{{ i18n.ts.displayOfSensitiveMedia }}
@@ -304,6 +304,7 @@ const showFixedPostForm = computed(defaultStore.makeGetterSetter('showFixedPostF
const showFixedPostFormInChannel = computed(defaultStore.makeGetterSetter('showFixedPostFormInChannel'));
const numberOfPageCache = computed(defaultStore.makeGetterSetter('numberOfPageCache'));
const instanceTicker = computed(defaultStore.makeGetterSetter('instanceTicker'));
+const instanceIcon = computed(defaultStore.makeGetterSetter('instanceIcon'));
const enableInfiniteScroll = computed(defaultStore.makeGetterSetter('enableInfiniteScroll'));
const useReactionPickerForContextMenu = computed(defaultStore.makeGetterSetter('useReactionPickerForContextMenu'));
const squareAvatars = computed(defaultStore.makeGetterSetter('squareAvatars'));
@@ -353,6 +354,7 @@ watch([
showNoteActionsOnlyHover,
showGapBetweenNotesInTimeline,
instanceTicker,
+ instanceIcon,
overridedDeviceKind,
mediaListWithOneImageAppearance,
reactionsDisplaySize,
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index aab67e0b5c..d35a3ae54d 100644
--- a/packages/frontend/src/store.ts
+++ b/packages/frontend/src/store.ts
@@ -296,6 +296,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device',
default: 'remote' as 'none' | 'remote' | 'always',
},
+ instanceIcon: {
+ where: 'device',
+ default: false,
+ },
emojiPickerScale: {
where: 'device',
default: 1,