Fix: #580 Create ModalCommandPalette

frontend/app.vue

@@ -2,6 +2,7 @@
   <Loading />
   <div>
     <NuxtLayout>
+      <ModalCommandPalette />
       <NuxtPage />
     </NuxtLayout>
   </div>

frontend/components/SearchBar.vue

@@ -33,7 +33,7 @@
           />
           <p class="-mt-[0.075rem]">/</p>
         </div>
-        <!-- <div
+        <div
           v-if="$device.isMacOS"
           class="flex px-2 py-[0.125rem] text-sm text-center rounded-md has-tooltip bg-light-highlight dark:bg-dark-highlight text-light-special-text dark:text-dark-special-text"
         >
@@ -52,7 +52,7 @@
             :text="$t('components.search-bar.control-tooltip-label')"
           />
           <p>⌃k</p>
-        </div> -->
+        </div>
       </div>
     </Transition>
   </div>

frontend/components/modal/ModalCommandPalette.vue

@@ -0,0 +1,201 @@
+<template>
+  <ModalBase>
+    <template #normalDisplay>
+      <!-- Dummy target to receive click event. A click event triggers ModalBase. -->
+      <div id="clickTarget" style="display: none" />
+    </template>
+    <template #modalDisplay>
+      <div
+        class="flex w-[90%] justify-between grow items-center my-2.5 text-left transition duration-200 rounded-md select-none text-light-special-text dark:text-dark-special-text focus-inside bg-light-header dark:bg-dark-header elem-shadow-sm py-1 px-2"
+      >
+        <div class="flex items-center pl-1 space-x-2">
+          <Icon name="bi:search" size="1em" />
+          <input
+            ref="input"
+            class="bg-transparent outline-none"
+            type="text"
+            size="100"
+            :placeholder="$t('_global.search')"
+          />
+        </div>
+      </div>
+      <DialogTitle class="flex justify-between mt-5 font-display">
+        <p class="pb-3 text-3xl font-bold md:responsive-h3">
+          {{ $t("components.modal-command-palette.pages-header") }}
+        </p>
+      </DialogTitle>
+      <NuxtLink class="flex rounded-md focus-brand" :to="localePath('/home')">
+        <div
+          class="relative flex items-center w-full px-2 py-1 space-x-2 rounded-md group hover:bg-light-highlight hover:dark:bg-dark-highlight"
+        >
+          <Icon name="bi:house" size="1em" :alt="$t('_global.home')" />
+          <div>
+            {{ $t("_global.home") }}
+            <span
+              class="absolute invisible w-16 link-text right-3 group-hover:visible"
+            >
+              {{ $t("components.modal-command-palette.jump-to") }}
+            </span>
+          </div>
+        </div>
+      </NuxtLink>
+      <NuxtLink class="flex rounded-md focus-brand" :to="localePath('/events')">
+        <div
+          class="relative flex items-center w-full px-2 py-1 space-x-2 rounded-md group hover:bg-light-highlight hover:dark:bg-dark-highlight"
+        >
+          <Icon
+            name="bi:calendar-check"
+            size="1em"
+            :alt="$t('components.modal-command-palette.upcoming-events')"
+          />
+          <div>
+            {{ $t("components.modal-command-palette.upcoming-events") }}
+            <span
+              class="absolute invisible w-16 link-text right-3 group-hover:visible"
+              >{{ $t("components.modal-command-palette.jump-to") }}</span
+            >
+          </div>
+        </div>
+      </NuxtLink>
+      <NuxtLink
+        class="flex rounded-md focus-brand"
+        :to="localePath('/notifications')"
+      >
+        <div
+          class="relative flex items-center w-full px-2 py-1 space-x-2 rounded-md group hover:bg-light-highlight hover:dark:bg-dark-highlight"
+        >
+          <Icon name="bi:bell" size="1em" :alt="$t('_global.notifications')" />
+          <div>
+            {{ $t("_global.notifications") }}
+            <span
+              class="absolute invisible w-16 link-text right-3 group-hover:visible"
+              >{{ $t("components.modal-command-palette.jump-to") }}</span
+            >
+          </div>
+        </div>
+      </NuxtLink>
+      <NuxtLink
+        class="flex rounded-md focus-brand"
+        :to="localePath('/discussions')"
+      >
+        <div
+          class="relative flex items-center w-full px-2 py-1 space-x-2 rounded-md group hover:bg-light-highlight hover:dark:bg-dark-highlight"
+        >
+          <Icon
+            name="octicon:comment-discussion-24"
+            size="1em"
+            :alt="$t('_global.discussions')"
+          />
+          <div>
+            {{ $t("_global.discussions") }}
+            <span
+              class="absolute invisible w-16 link-text right-3 group-hover:visible"
+              >{{ $t("components.modal-command-palette.jump-to") }}</span
+            >
+          </div>
+        </div>
+      </NuxtLink>
+      <DialogTitle class="flex justify-between mt-3 font-display">
+        <p class="pb-3 text-3xl font-bold md:responsive-h3">
+          {{ $t("components._global.organizations") }}
+        </p>
+      </DialogTitle>
+      <NuxtLink
+        class="flex rounded-md focus-brand"
+        :to="localePath('/organizations')"
+      >
+        <div
+          class="relative flex items-center w-full px-2 py-1 space-x-2 rounded-md group hover:bg-light-highlight hover:dark:bg-dark-highlight"
+        >
+          <Icon
+            class="fill-light-text dark:fill-dark-text"
+            name="IconOrganization"
+            size="1em"
+            :alt="$t('_global.organization-name')"
+          />
+          <div>
+            {{ $t("_global.organization-name") }}
+            <span
+              class="absolute invisible w-16 link-text right-3 group-hover:visible"
+              >{{ $t("components.modal-command-palette.jump-to") }}</span
+            >
+          </div>
+        </div>
+      </NuxtLink>
+      <NuxtLink
+        class="flex rounded-md focus-brand"
+        :to="localePath('/organizations')"
+      >
+        <div
+          class="relative flex items-center w-full px-2 py-1 space-x-2 rounded-md group hover:bg-light-highlight hover:dark:bg-dark-highlight"
+        >
+          <Icon
+            class="fill-light-text dark:fill-dark-text"
+            name="IconOrganization"
+            size="1em"
+            :alt="$t('_global.organization-name')"
+          />
+          <div>
+            {{ $t("_global.organization-name") }}
+            <span
+              class="absolute invisible w-16 link-text right-3 group-hover:visible"
+              >{{ $t("components.modal-command-palette.jump-to") }}</span
+            >
+          </div>
+        </div>
+      </NuxtLink>
+      <NuxtLink
+        class="flex rounded-md focus-brand"
+        :to="localePath('/organizations')"
+      >
+        <div
+          class="relative flex items-center w-full px-2 py-1 space-x-2 rounded-md group hover:bg-light-highlight hover:dark:bg-dark-highlight"
+        >
+          <Icon
+            class="fill-light-text dark:fill-dark-text"
+            name="IconOrganization"
+            size="1em"
+            :alt="$t('_global.organization-name')"
+          />
+          <div>
+            {{ $t("_global.organization-name") }}
+            <span
+              class="absolute invisible w-16 link-text right-3 group-hover:visible"
+              >{{ $t("components.modal-command-palette.jump-to") }}</span
+            >
+          </div>
+        </div>
+      </NuxtLink>
+    </template>
+  </ModalBase>
+</template>
+
+<script setup>
+import { useMagicKeys, whenever } from "@vueuse/core";
+
+const { isMacOS } = useDevice();
+
+const { meta_k, ctrl_k } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (["meta_k", "ctrl_k"].includes(e.key) && e.type === "keydown")
+      e.preventDefault();
+  },
+});
+
+whenever(meta_k, () => {
+  if (isMacOS) {
+    doWhenever();
+  }
+});
+whenever(ctrl_k, () => {
+  if (!isMacOS) {
+    doWhenever();
+  }
+});
+
+const doWhenever = () => {
+  // Trigger ModalBase @click="openModal".
+  document.getElementById("clickTarget").click();
+};
+</script>

frontend/components/sidebar/left/SidebarLeftFooter.vue

@@ -278,7 +278,7 @@ const userButtons: MenuSelector[] = [
   },
   {
     id: 4,
-    label: "components.sidebar-left-selector.label.notifications",
+    label: "_global.notifications",
     routeURL: "/",
     iconURL: "bi:bell",
     selected: false,

frontend/i18n/en-US.json

@@ -22,7 +22,9 @@
   "_global.imprint": "Imprint",
   "_global.legal": "Legal",
   "_global.legal-support": "Legal support",
+  "_global.notifications": "Notifications",
   "_global.organization": "Organization",
+  "_global.organization-name": "Organization Name",
   "_global.press": "Press",
   "_global.privacy-policy": "Privacy policy",
   "_global.repeat-password": "Repeat password",
@@ -75,6 +77,7 @@
   "components._global.new-event": "New event",
   "components._global.new-group": "New group",
   "components._global.new-resource": "New resource",
+  "components._global.organizations": "Organizations",
   "components._global.star": "Star",
   "components.btn-action-dropdown.download-qr-code": "Download QR code",
   "components.btn-action-dropdown.download-qr-code-aria-label": "Download a QR code that links to this page",
@@ -227,9 +230,11 @@
   "components.media-map.error-message": "There was a problem with the map service.",
   "components.media-map.img-alt-text": "Map displaying a pin at the location of this event.",
   "components.media-map.sorry-message": "Sorry about that!",
-  "components.menu-mobile-selector.label.organizations": "Organizations",
   "components.meta-tag-stars.label": "stars",
   "components.meta-tag.supporters_lower": "supporters",
+  "components.modal-command-palette.jump-to": "Jump to",
+  "components.modal-command-palette.pages-header": "Pages",
+  "components.modal-command-palette.upcoming-events": "Upcoming events",
   "components.modal-image.close-modal-aria-label": "Close the larger version of this image",
   "components.modal-image.open-modal-aria-label": "Open a larger version of this image",
   "components.modal-qr-code.header": "QR Code",
@@ -271,7 +276,6 @@
   "components.sidebar-left-footer.username-aria-label": "Open to see user specific options",
   "components.sidebar-left-header.sidebar-collapse-aria-label": "Expand or collapse the left sidebar",
   "components.sidebar-left-selector.label.new-organization": "New organization",
-  "components.sidebar-left-selector.label.notifications": "Notifications",
   "components.sidebar-left-selector.label.sign-out": "Sign out",
   "components.sidebar-left-selector.label.your-events": "Your events",
   "components.sidebar-left-selector.label.your-orgs": "Your organizations",
@@ -520,7 +524,6 @@
   "pages.organizations.create.description-placeholder": "Please provide a description of the organization for the community so that we can learn more about its goals and composition",
   "pages.organizations.create.header": "Application information",
   "pages.organizations.create.location-placeholder": "Where the organization is based or active",
-  "pages.organizations.create.organization-name": "Organization name",
   "pages.organizations.create.organization-name-placeholder": "The name of the organization",
   "pages.organizations.create.subtext": "Thanks for bringing your organization to activist! The following information is requested so that our community can better understand what the goals of the organization are. Checking each new organization takes time for all of us, but in this way we can maintain trust within the network. We look forward to working with and supporting you all!",
   "pages.organizations.create.tagline": "Tagline",

frontend/pages/organizations/create.vue

@@ -16,11 +16,11 @@
         class="flex flex-col items-center justify-center w-full pt-4"
       >
         <div
-          class="flex justify-between w-full px-5 py-6 mx-14 card-style gap-6"
+          class="flex justify-between w-full gap-6 px-5 py-6 mx-14 card-style"
         >
           <div class="w-1/2">
             <label for="name" class="block font-medium responsive-h3"
-              >{{ $t("pages.organizations.create.organization-name") }}*</label
+              >{{ $t("_global.organization-name") }}*</label
             >
             <input
               v-model="formData.name"
@@ -124,7 +124,7 @@
 });
 
 const submit = async () => {
   const { data: responseData } = await useFetch(
     "http://127.0.0.1:8000/v1/entities/organizations/",
     {
       method: "POST",

frontend/utils/navMenuItems.ts

@@ -10,7 +10,7 @@ export const menuItems = [
     iconURL: "bi:calendar-check",
   },
   {
-    label: "components.menu-mobile-selector.label.organizations",
+    label: "components._global.organizations",
     routeURL: "/organizations",
     iconURL: "IconOrganization",
   },