Add notices system to Servers (#3502)

* Servers notices

* Refresh on unassign

apps/frontend/src/components/ui/servers/PanelServerActionButton.vue

@@ -89,6 +89,10 @@
               <InfoIcon class="h-5 w-5" />
               <span>Details</span>
             </template>
+            <template #copy-id>
+              <ClipboardCopyIcon class="h-5 w-5" aria-hidden="true" />
+              <span>Copy ID</span>
+            </template>
           </UiServersTeleportOverflowMenu>
         </ButtonStyled>
       </template>
@@ -108,6 +112,7 @@ import {
   ServerIcon,
   InfoIcon,
   MoreVerticalIcon,
+  ClipboardCopyIcon,
 } from "@modrinth/assets";
 import { ButtonStyled, NewModal } from "@modrinth/ui";
 import { useRouter } from "vue-router";
@@ -116,6 +121,8 @@ import { useStorage } from "@vueuse/core";
 type ServerAction = "start" | "stop" | "restart" | "kill";
 type ServerState = "stopped" | "starting" | "running" | "stopping" | "restarting";
 
+const flags = useFeatureFlags();
+
 interface PowerAction {
   action: ServerAction;
   nextState: ServerState;
@@ -198,8 +205,19 @@ const menuOptions = computed(() => [
     icon: InfoIcon,
     action: () => detailsModal.value?.show(),
   },
+  {
+    id: "copy-id",
+    label: "Copy ID",
+    icon: ClipboardCopyIcon,
+    action: () => copyId(),
+    shown: flags.value.developerMode,
+  },
 ]);
 
+async function copyId() {
+  await navigator.clipboard.writeText(serverId as string);
+}
+
 function initiateAction(action: ServerAction) {
   if (!canTakeAction.value) return;