Versioning and UI

package.json

@@ -7,7 +7,7 @@
     },
     "devDependencies": {
         "@iconify/vue": "^4.3.0",
-        "@inertiajs/vue3": "^2.0.8",
+        "@inertiajs/vue3": "^2.3.4",
         "@tailwindcss/forms": "^0.5.10",
         "@tailwindcss/typography": "^0.5.16",
         "@vitejs/plugin-vue": "^5.0.0",

resources/js/Components/DropdownLink.vue

@@ -8,17 +8,7 @@ defineProps({
 </script>
 
 <template>
-    <div>
-        <button v-if="as == 'button'" type="submit" class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out">
-            <slot />
-        </button>
-
-        <a v-else-if="as =='a'" :href="href" class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out">
-            <slot />
-        </a>
-
-        <Link v-else :href="href" class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out">
-            <slot />
-        </Link>
-    </div>
+    <Link :href="href" class="block px-4 py-2 text-sm leading-5 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 transition duration-150 ease-in-out">
+        <slot />
+    </Link>
 </template>

resources/js/Components/Form/TagSelector.vue

@@ -142,6 +142,12 @@ function selectTag(tag) {
     // showDropdown.value = false;
 }
 
+function addMultipleTags(input) {
+    const tags = input.split(',').map(t => t.trim()).filter(t => t);
+    tags.forEach(tag => addTag(tag));
+    searchQuery.value = "";
+}
+
 function onInput() {
     showDropdown.value = true;
     highlightedIndex.value = -1;
@@ -171,7 +177,12 @@ function onKeydown(event) {
         ) {
             selectTag(searchQuery.value.trim());
         } else if (searchQuery.value.trim()) {
-            selectTag(searchQuery.value.trim());
+            // Handle comma-separated tags
+            if (searchQuery.value.includes(',')) {
+                addMultipleTags(searchQuery.value);
+            } else {
+                selectTag(searchQuery.value.trim());
+            }
         }
         return;
     }
@@ -265,21 +276,28 @@ onMounted(async () => {
 
         <!-- search input container -->
         <div class="relative">
-            <input
-                ref="searchInput"
-                v-model="searchQuery"
-                @input="onInput"
-                @keydown="onKeydown"
-                @focus="showDropdown = true"
-                @blur="onBlur"
-                placeholder="Add tags..."
-                class="w-full px-3 py-2 text-md border border-gray-400 dark:border-gray-600 rounded-lg focus:outline-none placeholder-gray-400 focus:ring-2 focus:ring-primary focus:border-primary dark:bg-black transition-all"
-                :class="{
-                    'rounded-b-none border-b-0':
-                        showDropdown &&
-                        (availableTags.length > 0 || canCreateNew || isLoading),
-                }"
-            />
+            <div class="relative flex items-center">
+                <input
+                    ref="searchInput"
+                    v-model="searchQuery"
+                    @input="onInput"
+                    @keydown="onKeydown"
+                    @focus="showDropdown = true"
+                    @blur="onBlur"
+                    placeholder="Add tags..."
+                    class="w-full px-3 py-2 pr-10 text-md border border-gray-400 dark:border-gray-600 rounded-lg focus:outline-none placeholder-gray-400 focus:ring-2 focus:ring-primary focus:border-primary dark:bg-black transition-all"
+                    :class="{
+                        'rounded-b-none border-b-0':
+                            showDropdown &&
+                            (availableTags.length > 0 || canCreateNew || isLoading),
+                    }"
+                />
+                <Icon
+                    icon="mdi:information-outline"
+                    class="absolute right-3 size-5 text-gray-400 dark:text-gray-500 cursor-help"
+                    v-tooltip.top="'You can add multiple tags at once by separating them with commas (e.g., tag1, tag2, tag3)'"
+                />
+            </div>
 
             <!-- dropdown rendered in body using teleport -->
             <teleport to="body">

resources/js/Components/NavLink.vue

@@ -9,13 +9,15 @@ const props = defineProps({
 
 const classes = computed(() => {
     return props.active
-        ? 'inline-flex items-center px-1 pt-1 border-b-2 border-primary dark:border-primaryDark text-sm font-medium leading-5 text-primaryDark dark:text-secondary focus:outline-none focus:border-primaryDark transition duration-150 ease-in-out'
-        : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-primary dark:text-secondary hover:text-primaryDark dark:hover:text-secondaryDark hover:border-secondaryDark focus:outline-none focus:text-primaryDark dark:focus:text-secondaryDark focus:border-secondaryDark transition duration-150 ease-in-out';
+        ? 'inline-flex items-center h-min px-1 py-1 border-b-2 border-primary dark:border-primaryDark text-sm font-medium leading-5 text-primaryDark dark:text-secondary focus:outline-none focus:border-primaryDark transition duration-150 ease-in-out'
+        : 'inline-flex items-center h-min px-1 py-1 border-b-2 border-transparent text-sm font-medium leading-5 text-primary dark:text-secondary hover:text-primaryDark dark:hover:text-secondaryDark hover:border-secondaryDark focus:outline-none focus:text-primaryDark dark:focus:text-secondaryDark focus:border-secondaryDark transition duration-150 ease-in-out';
 });
 </script>
 
 <template>
-    <Link :href="href" :class="classes">
-        <slot />
-    </Link>
+    <div class="flex items-center -my-px">
+        <Link :href="href" :class="classes">
+            <slot />
+        </Link>
+    </div>
 </template>

resources/js/Components/NavLinkDropdown.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { computed } from 'vue';
+import { Icon } from '@iconify/vue';
+import Dropdown from '@/Components/Dropdown.vue';
+
+const props = defineProps({
+    label: {
+        type: String,
+        required: true,
+    },
+    active: {
+        type: Boolean,
+        default: false,
+    },
+    align: {
+        type: String,
+        default: 'left',
+    },
+    width: {
+        type: String,
+        default: '48',
+    },
+});
+
+const classes = computed(() => {
+    return props.active
+        ? 'inline-flex items-center px-1 py-1 border-b-2 border-primary dark:border-primaryDark text-sm font-medium leading-5 text-primaryDark dark:text-secondary focus:outline-none focus:border-primaryDark transition duration-150 ease-in-out'
+        : 'inline-flex items-center px-1 py-1 border-b-2 border-transparent text-sm font-medium leading-5 text-primary dark:text-secondary hover:text-primaryDark dark:hover:text-secondaryDark hover:border-secondaryDark focus:outline-none focus:text-primaryDark dark:focus:text-secondaryDark focus:border-secondaryDark transition duration-150 ease-in-out';
+});
+</script>
+
+<template>
+    <div class="flex items-center -my-px">
+        <Dropdown :align="align" :width="width">
+            <template #trigger>
+                <button
+                    type="button"
+                    :class="classes"
+                >
+                    {{ label }}
+                    <Icon
+                        icon="mdi:chevron-down"
+                        class="ms-2 -me-0.5 size-4"
+                    />
+                </button>
+            </template>
+
+            <template #content>
+                <slot />
+            </template>
+        </Dropdown>
+    </div>
+</template>

resources/js/Components/Navigation/Navbar.vue

@@ -4,6 +4,8 @@ import { Link, router } from "@inertiajs/vue3";
 import { Icon } from "@iconify/vue";
 import UserDropdown from "@/Components/Navbar/UserDropdown.vue";
 import NavLink from "@/Components/NavLink.vue";
+import NavLinkDropdown from "@/Components/NavLinkDropdown.vue";
+import DropdownLink from "@/Components/DropdownLink.vue";
 import ResponsiveNavLink from "@/Components/ResponsiveNavLink.vue";
 import SecondaryButton from "@/Components/SecondaryButton.vue";
 import ApplicationHeaderLogo from "@/Components/ApplicationHeaderLogo.vue";
@@ -35,21 +37,20 @@ const { isDark, toggleDark } = useDarkMode();
 
                     <!-- Navigation Links -->
                     <div class="hidden space-x-8 lg:-my-px lg:ms-10 lg:flex">
-                        <NavLink
-                            :href="route('about')"
-                            :active="route().current('about')"
-                            class="text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight"
+                        <NavLinkDropdown
+                            label="About"
+                            :active="route().current('about') || route().current('rules')"
                         >
-                            About Us
-                        </NavLink>
+                            <DropdownLink :href="route('about')">
+                                About Us
+                            </DropdownLink>
 
-                        <NavLink
-                            :href="route('rules')"
-                            :active="route().current('rules')"
-                            class="text-primaryDark dark:text-primary hover:text-primary dark:hover:text-primaryLight"
-                        >
-                            Rules
-                        </NavLink>
+                            <div class="border-t border-gray-200 dark:border-gray-600" />
+
+                            <DropdownLink :href="route('rules')">
+                                Rules
+                            </DropdownLink>
+                        </NavLinkDropdown>
 
                         <NavLink
                             :href="route('resources.index')"

resources/js/Components/Resources/ResourceTabs.vue

@@ -62,6 +62,7 @@ const tabs = [
                     v-for="tabItem in tabs"
                     :key="tabItem.value"
                     :except="['resource']"
+                    view-transition
                     preserve-scroll
                     preserve-state
                     prefetch
@@ -135,9 +136,7 @@ const tabs = [
 
             <!-- Edits Tab -->
             <div v-else-if="props.tab === 'edits'" class="space-y-6">
-                <div class="rounded-lg border border-gray-200 dark:border-gray-700 p-4 bg-gray-50/30 dark:bg-gray-800/20">
-                    <ProposeEditsButton :resource-slug="props.resource.slug" />
-                </div>
+                <ProposeEditsButton :resource-slug="props.resource.slug" />
                 <div class="rounded-lg border border-gray-200 dark:border-gray-700 p-4">
                     <ResourceEditsFAQ />
                 </div>

resources/js/Pages/Resources/Show.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { Deferred, Link, Head } from "@inertiajs/vue3";
+import { Head } from "@inertiajs/vue3";
 import AppLayout from "@/Layouts/AppLayout.vue";
 import ResourceOverview from "@/Components/Resources/ResourceOverview.vue";
 import ResourceDetailedRatings from "@/Components/Resources/ResourceDetailedRatings.vue";

resources/js/app.js

@@ -9,6 +9,7 @@ import PrimeVue from "primevue/config";
 import customTheme from "./../../theming.config";
 import ToastService from 'primevue/toastservice';
 import Toast from 'primevue/toast';
+import Tooltip from 'primevue/tooltip';
 import './axios';
 
 const appName = import.meta.env.VITE_APP_NAME || "Laravel";
@@ -34,6 +35,7 @@ createInertiaApp({
             })
             .use(ToastService)
             .component('Toast', Toast)
+            .directive('tooltip', Tooltip)
             .mount(el);
     },
     progress: {