diff --git a/src/localization/en.json b/src/localization/en.json
index 9cbdb763..dfce9e9a 100644
--- a/src/localization/en.json
+++ b/src/localization/en.json
@@ -565,6 +565,10 @@
"exclude_friends": "Exclude friends",
"exclude_friends_placeholder": "Select friends to exclude",
"exclude_friends_help": "Selected friends will be hidden from the graph."
+ },
+ "context_menu": {
+ "view_details": "View Details",
+ "hide_friend": "Hide from Graph"
}
},
"hot_worlds": {
diff --git a/src/views/Charts/components/MutualFriends.vue b/src/views/Charts/components/MutualFriends.vue
index 17543c1c..16cf4ed3 100644
--- a/src/views/Charts/components/MutualFriends.vue
+++ b/src/views/Charts/components/MutualFriends.vue
@@ -46,9 +46,9 @@
{{
- item.user.displayName
- }}
+ :style="{ color: item.user.$userColour }"
+ >{{ item.user.displayName }}
@@ -236,11 +236,26 @@
-
+
+
+
+
+
+
+
+ {{ t('view.charts.mutual_friend.context_menu.view_details') }}
+
+
+
+
+ {{ t('view.charts.mutual_friend.context_menu.hide_friend') }}
+
+
+
@@ -262,7 +277,14 @@
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
import { Empty, EmptyDescription, EmptyHeader } from '@/components/ui/empty';
- import { Check as CheckIcon, Settings } from 'lucide-vue-next';
+ import {
+ ContextMenu,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuSeparator,
+ ContextMenuTrigger
+ } from '@/components/ui/context-menu';
+ import { Check as CheckIcon, EyeOff as EyeOffIcon, Settings, User as UserIcon } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { Slider } from '@/components/ui/slider';
@@ -529,6 +551,8 @@
const selectedFriendId = ref(null);
+ const contextMenuNodeId = ref(null);
+
const EXCLUDED_FRIENDS_KEY = 'VRCX_MutualGraphExcludedFriends';
const excludedFriendIds = useLocalStorage(EXCLUDED_FRIENDS_KEY, []);
@@ -565,7 +589,6 @@
return [{ key: 'friends', label: t('side_panel.friends'), items }];
});
-
function navigateToFriend(friendId) {
selectedFriendId.value = friendId;
if (!friendId || !currentGraph || !sigmaInstance) return;
@@ -1045,6 +1068,14 @@
if (node) showUserDialog(node);
});
+ sigmaInstance.on('rightClickNode', ({ node }) => {
+ contextMenuNodeId.value = node || null;
+ });
+
+ sigmaInstance.on('rightClickStage', () => {
+ contextMenuNodeId.value = null;
+ });
+
sigmaInstance.refresh();
}
@@ -1157,4 +1188,26 @@
function cancelFetch() {
chartsStore.requestMutualGraphCancel();
}
+
+ function onNodeMenuOpenChange(open) {
+ if (!open) {
+ contextMenuNodeId.value = null;
+ }
+ }
+
+ function handleNodeMenuViewDetails() {
+ if (contextMenuNodeId.value) {
+ showUserDialog(contextMenuNodeId.value);
+ }
+ contextMenuNodeId.value = null;
+ }
+
+ function handleNodeMenuHide() {
+ if (contextMenuNodeId.value) {
+ if (!excludedFriendIds.value.includes(contextMenuNodeId.value)) {
+ excludedFriendIds.value = [...excludedFriendIds.value, contextMenuNodeId.value];
+ }
+ }
+ contextMenuNodeId.value = null;
+ }