From 18e3f48329a9d14eaa2e44f4064d4d1ba376afb1 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sun, 1 Mar 2026 15:30:12 +0900
Subject: [PATCH] add DeprecationAlert component

---
 src/components/DeprecationAlert.vue           | 29 +++++++++++++++++++
 .../dialogs/UserDialog/UserDialog.vue         | 15 ++++++----
 src/components/ui/alert/index.js              |  4 ++-
 src/localization/en.json                      |  4 +++
 4 files changed, 46 insertions(+), 6 deletions(-)
 create mode 100644 src/components/DeprecationAlert.vue

diff --git a/src/components/DeprecationAlert.vue b/src/components/DeprecationAlert.vue
new file mode 100644
index 00000000..e45dbaa1
--- /dev/null
+++ b/src/components/DeprecationAlert.vue
@@ -0,0 +1,29 @@
+<template>
+    <Alert variant="warning" class="mb-4">
+        <MessageSquareWarning class="text-lg" />
+        <AlertTitle>{{ t('common.feature_relocated.title') }}</AlertTitle>
+        <AlertDescription>
+            <i18n-t keypath="common.feature_relocated.description" tag="span">
+                <template #feature>
+                    <strong>{{ featureName }}</strong>
+                </template>
+            </i18n-t>
+        </AlertDescription>
+    </Alert>
+</template>
+
+<script setup>
+    import { MessageSquareWarning } from 'lucide-vue-next';
+    import { useI18n } from 'vue-i18n';
+
+    import { Alert, AlertDescription, AlertTitle } from './ui/alert';
+
+    const { t } = useI18n();
+
+    defineProps({
+        featureName: {
+            type: String,
+            required: true
+        }
+    });
+</script>
diff --git a/src/components/dialogs/UserDialog/UserDialog.vue b/src/components/dialogs/UserDialog/UserDialog.vue
index 788ad6b7..6a8aba9b 100644
--- a/src/components/dialogs/UserDialog/UserDialog.vue
+++ b/src/components/dialogs/UserDialog/UserDialog.vue
@@ -1019,6 +1019,9 @@
                         @click="getUserFavoriteWorlds(userDialog.id)">
                     </Button> -->
                 <template v-if="userDialog.userFavoriteWorlds && userDialog.userFavoriteWorlds.length > 0">
+                    <DeprecationAlert
+                        v-if="userDialog.ref.id === currentUser.id"
+                        :feature-name="t('nav_tooltip.favorite_worlds')" />
                     <TabsUnderline
                         v-model="favoriteWorldsTab"
                         :items="favoriteWorldTabs"
@@ -1073,6 +1076,9 @@
             </template>
 
             <template #Avatars>
+                <DeprecationAlert
+                    v-if="userDialog.ref.id === currentUser.id"
+                    :feature-name="t('nav_tooltip.my_avatars')" />
                 <div style="display: flex; align-items: center; justify-content: space-between">
                     <div style="display: flex; align-items: center">
                         <Button
@@ -1259,6 +1265,7 @@
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
+    import DeprecationAlert from '@/components/DeprecationAlert.vue';
     import VueJsonPretty from 'vue-json-pretty';
 
     import {
@@ -1334,14 +1341,12 @@
             { value: 'Info', label: t('dialog.user.info.header') },
             { value: 'Groups', label: t('dialog.user.groups.header') },
             { value: 'Worlds', label: t('dialog.user.worlds.header') },
+            { value: 'favorite-worlds', label: t('dialog.user.favorite_worlds.header') },
             { value: 'Avatars', label: t('dialog.user.avatars.header') },
             { value: 'JSON', label: t('dialog.user.json.header') }
         ];
-        if (userDialog.value.id !== currentUser.value.id) {
-            if (!currentUser.value.hasSharedConnectionsOptOut) {
-                tabs.splice(1, 0, { value: 'mutual', label: t('dialog.user.mutual_friends.header') });
-            }
-            tabs.splice(3, 0, { value: 'favorite-worlds', label: t('dialog.user.favorite_worlds.header') });
+        if (userDialog.value.id !== currentUser.value.id && !currentUser.value.hasSharedConnectionsOptOut) {
+            tabs.splice(1, 0, { value: 'mutual', label: t('dialog.user.mutual_friends.header') });
         }
         return tabs;
     });
diff --git a/src/components/ui/alert/index.js b/src/components/ui/alert/index.js
index 41323904..09260697 100644
--- a/src/components/ui/alert/index.js
+++ b/src/components/ui/alert/index.js
@@ -11,7 +11,9 @@ export const alertVariants = cva(
             variant: {
                 default: 'bg-card text-card-foreground',
                 destructive:
-                    'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90'
+                    'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+                warning:
+                    'border-amber-500/50 text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/30 [&>svg]:text-current *:data-[slot=alert-description]:text-amber-600/90 dark:*:data-[slot=alert-description]:text-amber-400/90'
             }
         },
         defaultVariants: {
diff --git a/src/localization/en.json b/src/localization/en.json
index bb9d5625..338131ee 100644
--- a/src/localization/en.json
+++ b/src/localization/en.json
@@ -4,6 +4,10 @@
     "common": {
         "no_data": "No data",
         "no_matching_records": "No matching records",
+        "feature_relocated": {
+            "title": "Deprecation Notice",
+            "description": "This feature will be removed in a future update. Please use {feature} instead."
+        },
         "actions": {
             "open": "Open",
             "confirm": "Confirm",