Add HoverCard and LockButton components

src/dispatch/static/dispatch/src/components/HoverCard.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="hover-container">
+    <div class="hover-card rounded-lg">
+      <v-card>
+        <v-card-title class="text-subtitle-2 font-weight-regular">
+          {{ item.raw.id }}
+        </v-card-title>
+        <v-card-text v-if="item.signal.external_url">
+          <v-btn
+            class="text-subtitle-2 font-weight-regular"
+            prepend-icon="mdi-file-document"
+            variant="text"
+          >
+            Document
+          </v-btn>
+          <v-btn
+            class="text-subtitle-2 font-weight-regular"
+            prepend-icon="mdi-pencil"
+            variant="text"
+          >
+            Edit
+          </v-btn>
+        </v-card-text>
+      </v-card>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+// Props
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<style scoped>
+.hover-container {
+  position: relative;
+}
+
+.v-card {
+  backdrop-filter: blur(12px) saturate(190%) contrast(50%) brightness(130%) !important;
+  border: 0.5px solid rgb(216, 216, 216) !important;
+  border-radius: 4px !important;
+  box-shadow: rgba(0, 0, 0, 0.09) 0px 1px 4px !important;
+  color: rgb(60, 65, 73) !important;
+  opacity: 2 !important;
+  background-color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.hover-card {
+  visibility: hidden;
+  position: absolute;
+  bottom: 100%;
+  width: 300px;
+  opacity: 0;
+  transition: opacity 0.1s linear, visibility 0.5s linear;
+  transform: translateY(4px);
+}
+
+.hover-container:hover .hover-card {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s !important;
+}
+</style>

src/dispatch/static/dispatch/src/components/LockButton.vue

@@ -0,0 +1,87 @@
+<!-- LockButton.vue -->
+<template>
+  <div>
+    <FancyTooltip text="Change case visibility" :hotkeys="['L']">
+      <template v-slot:activator="{ tooltip }">
+        <v-btn variant="plain" :ripple="false" v-bind="tooltip" @click="dialog = true">
+          <v-icon>{{ lockIcon }}</v-icon>
+        </v-btn>
+      </template>
+    </FancyTooltip>
+
+    <v-dialog v-model="dialog" max-width="600px">
+      <v-card>
+        <v-card-title>Change Case Visibility</v-card-title>
+        <v-card-text>
+          You are about to change the case visibility from <b>{{ visibility }}</b> to
+          <b>{{ toggleVisibility }}</b
+          >.
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn text @click="updateVisibility">Confirm</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from "vue"
+import { useStore } from "vuex"
+import FancyTooltip from "@/components/FancyTooltip.vue"
+import CaseApi from "@/case/api"
+
+const props = defineProps({
+  caseVisibility: {
+    type: String,
+    required: true,
+  },
+})
+
+const store = useStore()
+const dialog = ref(false)
+const visibility = ref(props.caseVisibility)
+
+console.log("Case visibility is", visibility)
+
+watch(
+  () => props.caseVisibility,
+  (newVal) => {
+    visibility.value = newVal
+  },
+  { immediate: true }
+)
+
+async function updateVisibility() {
+  const caseDetails = store.state.case_management.selected
+  const previousVisibility = visibility.value // Store the previous visibility value
+
+  // Optimistically update the UI
+  visibility.value = toggleVisibility.value
+  caseDetails.visibility = visibility.value
+  dialog.value = false
+
+  try {
+    await CaseApi.update(caseDetails.id, caseDetails)
+    console.log("Case visibility updated successfully to", visibility.value)
+  } catch (e) {
+    console.error("Failed to update case visibility", e)
+
+    // If the API call fails, revert the visibility change and show a toast
+    visibility.value = previousVisibility
+    store.commit(
+      "notification_backend/addBeNotification",
+      {
+        text: "Failed to update case visibility",
+        type: "error",
+      },
+      { root: true }
+    )
+  }
+}
+
+const lockIcon = computed(() => (visibility.value === "Open" ? "mdi-lock-open" : "mdi-lock"))
+
+const toggleVisibility = computed(() => (visibility.value === "Open" ? "Restricted" : "Open"))
+</script>