From 7947d3fe828d6353ba2d327f0d43c5d2827b2ca7 Mon Sep 17 00:00:00 2001
From: Allan Kong <allankong176@gmail.com>
Date: Sun, 28 Dec 2025 18:05:42 -0700
Subject: [PATCH 1/5] edit diff refactor

---
 .../ResourceEdits/ApprovalActions.vue         |  88 +++++
 .../Components/ResourceEdits/DiffViewTab.vue  |  47 +++
 .../Components/ResourceEdits/FieldDisplay.vue |  54 +++
 .../ResourceEdits/HeaderSection.vue           |  71 ++++
 .../Components/ResourceEdits/SplitViewTab.vue | 101 ++++++
 resources/js/Pages/ResourceEdits/Create.vue   |   3 +-
 resources/js/Pages/ResourceEdits/Show.vue     | 336 ++----------------
 7 files changed, 386 insertions(+), 314 deletions(-)
 create mode 100644 resources/js/Components/ResourceEdits/ApprovalActions.vue
 create mode 100644 resources/js/Components/ResourceEdits/DiffViewTab.vue
 create mode 100644 resources/js/Components/ResourceEdits/FieldDisplay.vue
 create mode 100644 resources/js/Components/ResourceEdits/HeaderSection.vue
 create mode 100644 resources/js/Components/ResourceEdits/SplitViewTab.vue

diff --git a/resources/js/Components/ResourceEdits/ApprovalActions.vue b/resources/js/Components/ResourceEdits/ApprovalActions.vue
new file mode 100644
index 00000000..aae57d08
--- /dev/null
+++ b/resources/js/Components/ResourceEdits/ApprovalActions.vue
@@ -0,0 +1,88 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import Upvotable from "@/Components/Upvote/Upvotable.vue";
+
+defineProps({
+    editedResource: {
+        type: Object,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <div class="mt-8 border-t border-gray-200 dark:border-gray-800 pt-6">
+        <div class="flex justify-center">
+            <Upvotable
+                :flexRow="true"
+                :upvotable-key="'edit'"
+                :upvotable-id="editedResource.id"
+                :initial-votes="editedResource.vote_score"
+                :user-vote="editedResource.user_vote"
+                :refresh="true"
+                class="flex items-center gap-6"
+            >
+                <!-- Downvote (Reject) Button -->
+                <template #alreadyDownvotedIcon>
+                    <span
+                        class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg font-medium"
+                    >
+                        <Icon
+                            icon="mdi:close-circle"
+                            class="w-4 h-4 mr-2"
+                        />
+                        Rejected
+                    </span>
+                </template>
+                <template #downvoteIcon>
+                    <span
+                        class="inline-flex items-center px-4 py-2 bg-red-50 hover:bg-red-100 text-red-700 border border-red-200 rounded-lg font-medium transition-colors cursor-pointer"
+                    >
+                        <Icon
+                            icon="mdi:close-circle-outline"
+                            class="w-4 h-4 mr-2"
+                        />
+                        Reject Changes
+                    </span>
+                </template>
+
+                <!-- Vote Count -->
+                <template #votes="{ votes }">
+                    <div class="flex flex-col items-center">
+                        <span
+                            class="text-2xl font-bold text-gray-900 dark:text-gray-100"
+                            >{{ votes }}</span
+                        >
+                        <span class="text-sm text-gray-600 dark:text-gray-300">
+                            Approval{{ votes === 1 ? "" : "s" }}
+                        </span>
+                    </div>
+                </template>
+
+                <!-- Upvote (Approve) Button -->
+                <template #alreadyUpvotedIcon>
+                    <span
+                        class="inline-flex items-center px-4 py-2 bg-green-500 text-white rounded-lg font-medium"
+                    >
+                        <Icon
+                            icon="mdi:check-circle"
+                            class="w-4 h-4 mr-2"
+                        />
+                        Approved!
+                    </span>
+                </template>
+                <template #upvoteIcon>
+                    <span
+                        class="inline-flex items-center px-4 py-2 bg-green-200 hover:bg-green-300 text-green-800 border border-green-300 rounded-lg font-medium transition-colors cursor-pointer"
+                    >
+                        <Icon
+                            icon="mdi:check-circle-outline"
+                            class="w-4 h-4 mr-2"
+                        />
+                        Approve Changes
+                    </span>
+                </template>
+            </Upvotable>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Components/ResourceEdits/DiffViewTab.vue b/resources/js/Components/ResourceEdits/DiffViewTab.vue
new file mode 100644
index 00000000..ac894bff
--- /dev/null
+++ b/resources/js/Components/ResourceEdits/DiffViewTab.vue
@@ -0,0 +1,47 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+
+defineProps({
+    changedFields: {
+        type: Array,
+        required: true,
+    },
+    hasChanges: {
+        type: Boolean,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <div v-if="hasChanges" class="space-y-6">
+        <div
+            v-for="field in changedFields"
+            :key="field.key"
+            class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden"
+        >
+            <div
+                class="bg-gray-100 dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-800"
+            >
+                <h3
+                    class="font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2"
+                >
+                    <Icon
+                        icon="mdi:file-edit"
+                        class="w-4 h-4 text-primary"
+                    />
+                    {{ field.label }}
+                </h3>
+            </div>
+            <div class="p-4">
+                <component
+                    :is="field.component"
+                    :field="field"
+                />
+            </div>
+        </div>
+    </div>
+    <p v-else class="text-gray-500 dark:text-gray-400 italic p-4">
+        No changes to display in diff.
+    </p>
+</template>
diff --git a/resources/js/Components/ResourceEdits/FieldDisplay.vue b/resources/js/Components/ResourceEdits/FieldDisplay.vue
new file mode 100644
index 00000000..96c4ccd9
--- /dev/null
+++ b/resources/js/Components/ResourceEdits/FieldDisplay.vue
@@ -0,0 +1,54 @@
+<script setup>
+import Tag from "primevue/tag";
+import ResourceThumbnail from "@/Components/Resources/ResourceThumbnail.vue";
+
+defineProps({
+    field: {
+        type: Object,
+        required: true,
+    },
+    value: {
+        required: true,
+    },
+    altText: {
+        type: String,
+        default: 'Image',
+    },
+});
+</script>
+
+<template>
+    <div>
+        <h3 class="font-semibold text-gray-600 dark:text-gray-300 mb-2">
+            {{ field.label }}:
+        </h3>
+        <div v-if="field.key === 'image_url'">
+            <p v-if="!value" class="italic">Image Removed</p>
+            <ResourceThumbnail
+                v-else
+                :src="value"
+                :alt="altText"
+            />
+        </div>
+        <div
+            v-else-if="Array.isArray(value)"
+            class="flex flex-wrap gap-2"
+        >
+            <Tag
+                v-for="item in value"
+                :key="item"
+                :value="field.formatter ? field.formatter(item) : item"
+            />
+        </div>
+        <div
+            v-else
+            class="text-gray-800 dark:text-gray-100 p-2 rounded"
+        >
+            {{
+                field.formatter
+                    ? field.formatter(value)
+                    : value
+            }}
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Components/ResourceEdits/HeaderSection.vue b/resources/js/Components/ResourceEdits/HeaderSection.vue
new file mode 100644
index 00000000..514d247f
--- /dev/null
+++ b/resources/js/Components/ResourceEdits/HeaderSection.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import BackButton from "@/Components/Navigation/BackButton.vue";
+import UserProfile from "@/Components/Profile/UserProfile.vue";
+import PrimaryButton from "@/Components/PrimaryButton.vue";
+
+defineProps({
+    editedResource: {
+        type: Object,
+        required: true,
+    },
+    originalResource: {
+        type: Object,
+        required: true,
+    },
+});
+
+const emit = defineEmits(['merge']);
+</script>
+
+<template>
+    <div>
+        <div class="my-2">
+            <BackButton
+                :route="
+                    route('resources.show', {
+                        slug: originalResource.slug,
+                        tab: 'edits',
+                    })
+                "
+            />
+        </div>
+        <div class="border-b border-gray-200 dark:border-gray-800 pb-6 mb-6">
+            <div class="flex items-start justify-between">
+                <div class="flex-1">
+                    <div class="flex items-center gap-3 mb-3">
+                        <h1
+                            class="text-3xl font-bold text-gray-900 dark:text-gray-100"
+                        >
+                            {{ editedResource.edit_title }}
+                        </h1>
+                    </div>
+                    <p
+                        class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed mb-4"
+                    >
+                        {{ editedResource.edit_description }}
+                    </p>
+
+                    <UserProfile
+                        :user="editedResource.user"
+                        :date="editedResource.created_at"
+                    />
+                </div>
+                <div
+                    v-if="editedResource.can_merge_edits"
+                    class="ml-6"
+                >
+                    <PrimaryButton
+                        @click="emit('merge', editedResource.id)"
+                    >
+                        <Icon
+                            icon="mdi:source-merge"
+                            class="w-4 h-4 mr-2"
+                        />
+                        Merge Changes
+                    </PrimaryButton>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Components/ResourceEdits/SplitViewTab.vue b/resources/js/Components/ResourceEdits/SplitViewTab.vue
new file mode 100644
index 00000000..a5bae38f
--- /dev/null
+++ b/resources/js/Components/ResourceEdits/SplitViewTab.vue
@@ -0,0 +1,101 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { Link } from "@inertiajs/vue3";
+import FieldDisplay from "./FieldDisplay.vue";
+
+defineProps({
+    changedFields: {
+        type: Array,
+        required: true,
+    },
+    originalResource: {
+        type: Object,
+        required: true,
+    },
+    hasChanges: {
+        type: Boolean,
+        required: true,
+    },
+});
+</script>
+
+<template>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Proposed Changes Column -->
+        <div
+            class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg"
+        >
+            <div
+                class="bg-primary/5 dark:bg-primary/10 border-b border-gray-200 dark:border-gray-800 px-4 py-3"
+            >
+                <h2
+                    class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2"
+                >
+                    <Icon
+                        icon="mdi:plus-circle"
+                        class="w-5 h-5 text-primary"
+                    />
+                    Proposed Changes
+                </h2>
+            </div>
+            <div class="p-4 space-y-4">
+                <FieldDisplay
+                    v-for="field in changedFields"
+                    :key="field.key"
+                    :field="field"
+                    :value="field.proposedValue"
+                    altText="Proposed Image"
+                />
+                <p
+                    v-if="!hasChanges"
+                    class="text-gray-500 dark:text-gray-400 italic"
+                >
+                    No changes were proposed.
+                </p>
+            </div>
+        </div>
+
+        <!-- Current Version Column -->
+        <div
+            class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg"
+        >
+            <div
+                class="bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-800 px-4 py-3"
+            >
+                <Link
+                    :href="
+                        route('resources.show', {
+                            slug: originalResource.slug,
+                        })
+                    "
+                    class="group"
+                >
+                    <h2
+                        class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2 group-hover:text-primary duration-200"
+                    >
+                        <Icon
+                            icon="mdi:file-document"
+                            class="w-5 h-5 text-gray-600 dark:text-gray-300 group-hover:text-primary duration-200"
+                        />
+                        Current Version
+                    </h2>
+                </Link>
+            </div>
+            <div class="p-4 space-y-4">
+                <FieldDisplay
+                    v-for="field in changedFields"
+                    :key="field.key"
+                    :field="field"
+                    :value="field.originalValue"
+                    altText="Current Image"
+                />
+                <p
+                    v-if="!hasChanges"
+                    class="text-gray-500 dark:text-gray-400 italic"
+                >
+                    No changes to compare.
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Pages/ResourceEdits/Create.vue b/resources/js/Pages/ResourceEdits/Create.vue
index 539152b4..3d57d4e9 100644
--- a/resources/js/Pages/ResourceEdits/Create.vue
+++ b/resources/js/Pages/ResourceEdits/Create.vue
@@ -34,7 +34,8 @@ const props = defineProps({
         required: true,
     },
 });
-// TODO: MOVE TO AXIOS BECAUSE REDIRECT FROM SUCCESSES WILL NOT CLEAR STORAGE, CONFIRM WITH TEST
+
+// TODO: MOVE TO AXIOS BECAUSE REDIRECT FROM SUCCESSES WILL NOT CLEAR STORAGE, CONFIRM WITH TEST IN FUTURE
 const formData = useForm({
     edit_title: "",
     edit_description: "",
diff --git a/resources/js/Pages/ResourceEdits/Show.vue b/resources/js/Pages/ResourceEdits/Show.vue
index 2494e4d7..41201aaa 100644
--- a/resources/js/Pages/ResourceEdits/Show.vue
+++ b/resources/js/Pages/ResourceEdits/Show.vue
@@ -1,20 +1,13 @@
 <script setup>
 import { computed } from "vue";
-import { Head, Link, router } from "@inertiajs/vue3";
-import { Icon } from "@iconify/vue";
+import { Head, router } from "@inertiajs/vue3";
 import { diffChars } from "diff";
 import { getDifficultyLabel, getPricingLabel, getPlatformLabel } from "@/Helpers/labels";
 
 import AppLayout from "@/Layouts/AppLayout.vue";
-import Tag from "primevue/tag";
 import TabView from "primevue/tabview";
 import TabPanel from "primevue/tabpanel";
-import ResourceThumbnail from "@/Components/Resources/ResourceThumbnail.vue";
-import Upvotable from "@/Components/Upvote/Upvotable.vue";
 import Commentable from "@/Components/Comments/Commentable.vue";
-import PrimaryButton from "@/Components/PrimaryButton.vue";
-import UserProfile from "@/Components/Profile/UserProfile.vue";
-import BackButton from "@/Components/Navigation/BackButton.vue";
 
 // Component mapping for the Difference (Diff) view
 import TextDiffViewer from "@/Components/Diff/TextDiffViewer.vue";
@@ -22,6 +15,12 @@ import SelectDiffViewer from "@/Components/Diff/SelectDiffViewer.vue";
 import TagDiffViewer from "@/Components/Diff/TagDiffViewer.vue";
 import ImageDiffViewer from "@/Components/Diff/ImageDiffViewer.vue";
 
+// Resource Edit Components
+import HeaderSection from "@/Components/ResourceEdits/HeaderSection.vue";
+import SplitViewTab from "@/Components/ResourceEdits/SplitViewTab.vue";
+import DiffViewTab from "@/Components/ResourceEdits/DiffViewTab.vue";
+import ApprovalActions from "@/Components/ResourceEdits/ApprovalActions.vue";
+
 const props = defineProps({
     editedResource: {
         type: Object,
@@ -106,211 +105,20 @@ const hasChanges = computed(() => changedFields.value.length > 0);
             <div class="bg-white dark:bg-gray-900 overflow-hidden shadow-xl sm:rounded-lg border border-transparent dark:border-gray-800">
                 <div class="p-7 sm:p-8">
                     <!-- Header Section -->
-                    <div class="my-2">
-                        <BackButton
-                            :route="
-                                route('resources.show', {
-                                    slug: originalResource.slug,
-                                    tab: 'edits',
-                                })
-                            "
-                        />
-                    </div>
-                    <div class="border-b border-gray-200 dark:border-gray-800 pb-6 mb-6">
-                        <div class="flex items-start justify-between">
-                            <div class="flex-1">
-                                <div class="flex items-center gap-3 mb-3">
-                                    <h1
-                                        class="text-3xl font-bold text-gray-900 dark:text-gray-100"
-                                    >
-                                        {{ editedResource.edit_title }}
-                                    </h1>
-                                </div>
-                                <p
-                                    class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed mb-4"
-                                >
-                                    {{ editedResource.edit_description }}
-                                </p>
-
-                                <UserProfile
-                                    :user="editedResource.user"
-                                    :date="editedResource.created_at"
-                                />
-                            </div>
-                            <div
-                                v-if="editedResource.can_merge_edits"
-                                class="ml-6"
-                            >
-                                <PrimaryButton
-                                    @click="mergeEdits(editedResource.id)"
-                                >
-                                    <Icon
-                                        icon="mdi:source-merge"
-                                        class="w-4 h-4 mr-2"
-                                    />
-                                    Merge Changes
-                                </PrimaryButton>
-                            </div>
-                        </div>
-                    </div>
+                    <HeaderSection
+                        :edited-resource="editedResource"
+                        :original-resource="originalResource"
+                        @merge="mergeEdits"
+                    />
 
                     <TabView class="custom-tabview">
                         <!-- Side-by-Side Comparison Tab -->
                         <TabPanel header="Split View" class="custom-tab-panel">
-                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                                <!-- Proposed Changes Column -->
-                                <div
-                                    class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg"
-                                >
-                                    <div
-                                        class="bg-primary/5 dark:bg-primary/10 border-b border-gray-200 dark:border-gray-800 px-4 py-3"
-                                    >
-                                        <h2
-                                            class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2"
-                                        >
-                                            <Icon
-                                                icon="mdi:plus-circle"
-                                                class="w-5 h-5 text-primary"
-                                            />
-                                            Proposed Changes
-                                        </h2>
-                                    </div>
-                                    <div class="p-4 space-y-4">
-                                        <div
-                                            v-for="field in changedFields"
-                                            :key="field.key"
-                                        >
-                                            <h3
-                                                class="font-semibold text-gray-600 dark:text-gray-300 mb-2"
-                                            >
-                                                {{ field.label }}:
-                                            </h3>
-                                            <div
-                                                v-if="field.key === 'image_url'"
-                                            >
-                                                <p v-if="!field.proposedValue" class="italic">Image Removed</p>
-                                                <ResourceThumbnail
-                                                    :src="field.proposedValue"
-                                                    :alt="'Proposed Image'"
-                                                />
-                                            </div>
-                                            <div
-                                                v-else-if="
-                                                    Array.isArray(
-                                                        field.proposedValue
-                                                    )
-                                                "
-                                                class="flex flex-wrap gap-2"
-                                            >
-                                                <Tag
-                                                    v-for="item in field.proposedValue"
-                                                    :key="item"
-                                                    :value="field.formatter ? field.formatter(item) : item"
-                                                />
-                                            </div>
-                                            <div
-                                                v-else
-                                                class="text-gray-800 dark:text-gray-100 p-2 rounded"
-                                            >
-                                                {{
-                                                    field.formatter
-                                                        ? field.formatter(
-                                                              field.proposedValue
-                                                          )
-                                                        : field.proposedValue
-                                                }}
-                                            </div>
-                                        </div>
-                                        <p
-                                            v-if="!hasChanges"
-                                            class="text-gray-500 dark:text-gray-400 italic"
-                                        >
-                                            No changes were proposed.
-                                        </p>
-                                    </div>
-                                </div>
-
-                                <!-- Current Version Column -->
-                                <div
-                                    class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg"
-                                >
-                                    <div
-                                        class="bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-800 px-4 py-3"
-                                    >
-                                        <Link
-                                            :href="
-                                                route('resources.show', {
-                                                    slug: originalResource.slug,
-                                                })
-                                            "
-                                            class="group"
-                                        >
-                                            <h2
-                                                class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2 group-hover:text-primary duration-200"
-                                            >
-                                                <Icon
-                                                    icon="mdi:file-document"
-                                                    class="w-5 h-5 text-gray-600 dark:text-gray-300 group-hover:text-primary duration-200"
-                                                />
-                                                Current Version
-                                            </h2>
-                                        </Link>
-                                    </div>
-                                    <div class="p-4 space-y-4">
-                                        <div
-                                            v-for="field in changedFields"
-                                            :key="field.key"
-                                        >
-                                            <h3
-                                                class="font-semibold text-gray-600 dark:text-gray-300 mb-2"
-                                            >
-                                                {{ field.label }}:
-                                            </h3>
-                                            <div
-                                                v-if="field.key === 'image_url'"
-                                            >
-                                                <p v-if="!field.originalValue" class="italic">Image Removed</p>
-                                                <ResourceThumbnail
-                                                    :src="field.originalValue"
-                                                    :alt="'Current Image'"
-                                                />
-                                            </div>
-                                            <div
-                                                v-else-if="
-                                                    Array.isArray(
-                                                        field.originalValue
-                                                    )
-                                                "
-                                                class="flex flex-wrap gap-2"
-                                            >
-                                                <Tag
-                                                    v-for="item in field.originalValue"
-                                                    :key="item"
-                                                    :value="field.formatter ? field.formatter(item) : item"
-                                                />
-                                            </div>
-                                            <div
-                                                v-else
-                                                class="text-gray-800 dark:text-gray-100 p-2 rounded"
-                                            >
-                                                {{
-                                                    field.formatter
-                                                        ? field.formatter(
-                                                              field.originalValue
-                                                          )
-                                                        : field.originalValue
-                                                }}
-                                            </div>
-                                        </div>
-                                        <p
-                                            v-if="!hasChanges"
-                                            class="text-gray-500 dark:text-gray-400 italic"
-                                        >
-                                            No changes to compare.
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
+                            <SplitViewTab
+                                :changed-fields="changedFields"
+                                :original-resource="originalResource"
+                                :has-changes="hasChanges"
+                            />
                         </TabPanel>
 
                         <!-- Diff Tab -->
@@ -318,113 +126,15 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                             header="View Differences"
                             class="custom-tab-panel"
                         >
-                            <div v-if="hasChanges" class="space-y-6">
-                                <div
-                                    v-for="field in changedFields"
-                                    :key="field.key"
-                                    class="bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden"
-                                >
-                                    <div
-                                        class="bg-gray-100 dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-800"
-                                    >
-                                        <h3
-                                            class="font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2"
-                                        >
-                                            <Icon
-                                                icon="mdi:file-edit"
-                                                class="w-4 h-4 text-primary"
-                                            />
-                                            {{ field.label }}
-                                        </h3>
-                                    </div>
-                                    <div class="p-4">
-                                        <component
-                                            :is="field.component"
-                                            :field="field"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-                            <p v-else class="text-gray-500 dark:text-gray-400 italic p-4">
-                                No changes to display in diff.
-                            </p>
+                            <DiffViewTab
+                                :changed-fields="changedFields"
+                                :has-changes="hasChanges"
+                            />
                         </TabPanel>
                     </TabView>
-                    <!-- Approval Actions -->
-                    <div class="mt-8 border-t border-gray-200 dark:border-gray-800 pt-6">
-                        <div class="flex justify-center">
-                            <Upvotable
-                                :flexRow="true"
-                                :upvotable-key="'edit'"
-                                :upvotable-id="editedResource.id"
-                                :initial-votes="editedResource.vote_score"
-                                :user-vote="editedResource.user_vote"
-                                :refresh="true"
-                                class="flex items-center gap-6"
-                            >
-                                <!-- Downvote (Reject) Button -->
-                                <template #alreadyDownvotedIcon>
-                                    <span
-                                        class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg font-medium"
-                                    >
-                                        <Icon
-                                            icon="mdi:close-circle"
-                                            class="w-4 h-4 mr-2"
-                                        />
-                                        Rejected
-                                    </span>
-                                </template>
-                                <template #downvoteIcon>
-                                    <span
-                                        class="inline-flex items-center px-4 py-2 bg-red-50 hover:bg-red-100 text-red-700 border border-red-200 rounded-lg font-medium transition-colors cursor-pointer"
-                                    >
-                                        <Icon
-                                            icon="mdi:close-circle-outline"
-                                            class="w-4 h-4 mr-2"
-                                        />
-                                        Reject Changes
-                                    </span>
-                                </template>
-
-                                <!-- Vote Count -->
-                                <template #votes="{ votes }">
-                                    <div class="flex flex-col items-center">
-                                        <span
-                                            class="text-2xl font-bold text-gray-900 dark:text-gray-100"
-                                            >{{ votes }}</span
-                                        >
-                                        <span class="text-sm text-gray-600 dark:text-gray-300">
-                                            Approval{{ votes === 1 ? "" : "s" }}
-                                        </span>
-                                    </div>
-                                </template>
 
-                                <!-- Upvote (Approve) Button -->
-                                <template #alreadyUpvotedIcon>
-                                    <span
-                                        class="inline-flex items-center px-4 py-2 bg-green-500 text-white rounded-lg font-medium"
-                                    >
-                                        <Icon
-                                            icon="mdi:check-circle"
-                                            class="w-4 h-4 mr-2"
-                                        />
-                                        Approved!
-                                    </span>
-                                </template>
-                                <template #upvoteIcon>
-                                    <span
-                                        class="inline-flex items-center px-4 py-2 bg-green-200 hover:bg-green-300 text-green-800 border border-green-300 rounded-lg font-medium transition-colors cursor-pointer"
-                                    >
-                                        <Icon
-                                            icon="mdi:check-circle-outline"
-                                            class="w-4 h-4 mr-2"
-                                        />
-                                        Approve Changes
-                                    </span>
-                                </template>
-                            </Upvotable>
-                        </div>
-                    </div>
+                    <!-- Approval Actions -->
+                    <ApprovalActions :edited-resource="editedResource" />
 
                     <Commentable
                         :commentable-id="props.editedResource.id"

From 6aa0c569956f06a76c8b64600e96729ffce03e68 Mon Sep 17 00:00:00 2001
From: Allan Kong <allankong176@gmail.com>
Date: Sun, 28 Dec 2025 18:26:52 -0700
Subject: [PATCH 2/5] UI Pushes

---
 resources/js/Components/DropdownLink.vue      | 18 +++++--
 .../js/Components/Navbar/UserDropdown.vue     |  2 +-
 .../js/Components/Navigation/BackButton.vue   | 17 ++++---
 resources/js/Components/Navigation/Navbar.vue |  4 +-
 .../ResourceEdits/HeaderSection.vue           |  6 ++-
 resources/js/Pages/ResourceEdits/Show.vue     | 50 +++++++++++--------
 6 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/resources/js/Components/DropdownLink.vue b/resources/js/Components/DropdownLink.vue
index 6238e52a..cd1c3958 100644
--- a/resources/js/Components/DropdownLink.vue
+++ b/resources/js/Components/DropdownLink.vue
@@ -5,10 +5,22 @@ defineProps({
     href: String,
     as: String,
 });
+
+const classVal = "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";
 </script>
 
 <template>
-    <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>
+    <div>
+        <button v-if="as == 'button'" :class="classVal" class="w-full text-start">
+            <slot />
+        </button>
+
+        <a v-else-if="as == 'a'" :class="classVal" class="w-full text-start" :href="href">
+            <slot />
+        </a>
+
+        <Link v-else :href="href" :class="classVal">
+            <slot />
+        </Link>
+    </div>
 </template>
diff --git a/resources/js/Components/Navbar/UserDropdown.vue b/resources/js/Components/Navbar/UserDropdown.vue
index 94511050..61320c0c 100644
--- a/resources/js/Components/Navbar/UserDropdown.vue
+++ b/resources/js/Components/Navbar/UserDropdown.vue
@@ -82,7 +82,7 @@ const logout = () => {
                     <div class="border-t border-gray-200 dark:border-gray-600" />
 
                     <!-- Authentication -->
-                    <form @submit.prevent="logout">
+                    <form method="POST" @submit.prevent="logout">
                         <DropdownLink as="button">
                             Log Out
                         </DropdownLink>
diff --git a/resources/js/Components/Navigation/BackButton.vue b/resources/js/Components/Navigation/BackButton.vue
index 974dbb17..5955674b 100644
--- a/resources/js/Components/Navigation/BackButton.vue
+++ b/resources/js/Components/Navigation/BackButton.vue
@@ -6,13 +6,18 @@ const props = defineProps({
     route: {
         type: String,
         required: true,
-    }
-})
-
+    },
+});
 </script>
 
 <template>
-    <Link :href="props.route">
-        <Icon icon="mdi:arrow-back" class="text-xl my-auto"></Icon>
-    </Link>
+    <div>
+        <Link :href="props.route">
+            <div class="flex flex-row gap-2">
+                <Icon icon="mdi:arrow-back" class="text-xl my-auto"></Icon>
+                <slot />
+            </div>
+        </Link>
+        <div class="mt-2 border-t border-gray-200 dark:border-gray-700"></div>
+    </div>
 </template>
diff --git a/resources/js/Components/Navigation/Navbar.vue b/resources/js/Components/Navigation/Navbar.vue
index e22461c8..b37530e4 100644
--- a/resources/js/Components/Navigation/Navbar.vue
+++ b/resources/js/Components/Navigation/Navbar.vue
@@ -3,8 +3,8 @@ import { ref } from "vue";
 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 NavLink from "@/Components/NavLink.vue";
 import DropdownLink from "@/Components/DropdownLink.vue";
 import ResponsiveNavLink from "@/Components/ResponsiveNavLink.vue";
 import SecondaryButton from "@/Components/SecondaryButton.vue";
@@ -56,7 +56,7 @@ const { isDark, toggleDark } = useDarkMode();
 
                         <NavLinkDropdown
                             label="Resources"
-                            :active="route().current('resources.*')"
+                            :active="route().current('resources.index') || route().current('resource_edits.index')"
                         >
                             <DropdownLink :href="route('resources.index')">
                                 <Icon icon="mdi:magnify" class="mr-2" />
diff --git a/resources/js/Components/ResourceEdits/HeaderSection.vue b/resources/js/Components/ResourceEdits/HeaderSection.vue
index 514d247f..d9f0e4ea 100644
--- a/resources/js/Components/ResourceEdits/HeaderSection.vue
+++ b/resources/js/Components/ResourceEdits/HeaderSection.vue
@@ -20,7 +20,7 @@ const emit = defineEmits(['merge']);
 
 <template>
     <div>
-        <div class="my-2">
+        <div class="my-2 flex flex-row gap-2">
             <BackButton
                 :route="
                     route('resources.show', {
@@ -28,7 +28,9 @@ const emit = defineEmits(['merge']);
                         tab: 'edits',
                     })
                 "
-            />
+            >
+            <span class="my-auto">Back to {{ originalResource.name }}</span>
+            </BackButton>
         </div>
         <div class="border-b border-gray-200 dark:border-gray-800 pb-6 mb-6">
             <div class="flex items-start justify-between">
diff --git a/resources/js/Pages/ResourceEdits/Show.vue b/resources/js/Pages/ResourceEdits/Show.vue
index 41201aaa..7b028e9f 100644
--- a/resources/js/Pages/ResourceEdits/Show.vue
+++ b/resources/js/Pages/ResourceEdits/Show.vue
@@ -5,7 +5,10 @@ import { diffChars } from "diff";
 import { getDifficultyLabel, getPricingLabel, getPlatformLabel } from "@/Helpers/labels";
 
 import AppLayout from "@/Layouts/AppLayout.vue";
-import TabView from "primevue/tabview";
+import Tabs from 'primevue/tabs';
+import TabList from 'primevue/tablist';
+import Tab from 'primevue/tab';
+import TabPanels from 'primevue/tabpanels';
 import TabPanel from "primevue/tabpanel";
 import Commentable from "@/Components/Comments/Commentable.vue";
 
@@ -111,27 +114,30 @@ const hasChanges = computed(() => changedFields.value.length > 0);
                         @merge="mergeEdits"
                     />
 
-                    <TabView class="custom-tabview">
-                        <!-- Side-by-Side Comparison Tab -->
-                        <TabPanel header="Split View" class="custom-tab-panel">
-                            <SplitViewTab
-                                :changed-fields="changedFields"
-                                :original-resource="originalResource"
-                                :has-changes="hasChanges"
-                            />
-                        </TabPanel>
-
-                        <!-- Diff Tab -->
-                        <TabPanel
-                            header="View Differences"
-                            class="custom-tab-panel"
-                        >
-                            <DiffViewTab
-                                :changed-fields="changedFields"
-                                :has-changes="hasChanges"
-                            />
-                        </TabPanel>
-                    </TabView>
+                    <Tabs value="0">
+                        <TabList>
+                            <Tab value="0">Split View</Tab>
+                            <Tab value="1">View Differences</Tab>
+                        </TabList>
+                        <TabPanels>
+                            <!-- Side-by-Side Comparison Tab -->
+                            <TabPanel value="0">
+                                <SplitViewTab
+                                    :changed-fields="changedFields"
+                                    :original-resource="originalResource"
+                                    :has-changes="hasChanges"
+                                />
+                            </TabPanel>
+
+                            <!-- Diff Tab -->
+                            <TabPanel value="1">
+                                <DiffViewTab
+                                    :changed-fields="changedFields"
+                                    :has-changes="hasChanges"
+                                />
+                            </TabPanel>
+                        </TabPanels>
+                    </Tabs>
 
                     <!-- Approval Actions -->
                     <ApprovalActions :edited-resource="editedResource" />

From c8930f15b055deff1d9a58ae6590ed3e154247af Mon Sep 17 00:00:00 2001
From: Allan Kong <74692833+AllanKoder@users.noreply.github.com>
Date: Sun, 28 Dec 2025 18:44:41 -0700
Subject: [PATCH 3/5] Update resources/js/Components/DropdownLink.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 resources/js/Components/DropdownLink.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/Components/DropdownLink.vue b/resources/js/Components/DropdownLink.vue
index cd1c3958..8b121ac3 100644
--- a/resources/js/Components/DropdownLink.vue
+++ b/resources/js/Components/DropdownLink.vue
@@ -11,11 +11,11 @@ const classVal = "block px-4 py-2 text-sm leading-5 text-gray-700 dark:text-gray
 
 <template>
     <div>
-        <button v-if="as == 'button'" :class="classVal" class="w-full text-start">
+        <button v-if="as === 'button'" :class="classVal" class="w-full text-start">
             <slot />
         </button>
 
-        <a v-else-if="as == 'a'" :class="classVal" class="w-full text-start" :href="href">
+        <a v-else-if="as === 'a'" :class="classVal" class="w-full text-start" :href="href">
             <slot />
         </a>
 

From 03b9c356c7bfa6786d2d0d7686a2951629fd34f0 Mon Sep 17 00:00:00 2001
From: Allan Kong <74692833+AllanKoder@users.noreply.github.com>
Date: Sun, 28 Dec 2025 18:44:55 -0700
Subject: [PATCH 4/5] Update
 resources/js/Components/ResourceEdits/HeaderSection.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 .../ResourceEdits/HeaderSection.vue           | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/resources/js/Components/ResourceEdits/HeaderSection.vue b/resources/js/Components/ResourceEdits/HeaderSection.vue
index d9f0e4ea..c949e2e7 100644
--- a/resources/js/Components/ResourceEdits/HeaderSection.vue
+++ b/resources/js/Components/ResourceEdits/HeaderSection.vue
@@ -19,19 +19,17 @@ const emit = defineEmits(['merge']);
 </script>
 
 <template>
-    <div>
-        <div class="my-2 flex flex-row gap-2">
-            <BackButton
-                :route="
-                    route('resources.show', {
-                        slug: originalResource.slug,
-                        tab: 'edits',
-                    })
-                "
-            >
+    <div class="my-2">
+        <BackButton
+            :route="
+                route('resources.show', {
+                    slug: originalResource.slug,
+                    tab: 'edits',
+                })
+            "
+        >
             <span class="my-auto">Back to {{ originalResource.name }}</span>
-            </BackButton>
-        </div>
+        </BackButton>
         <div class="border-b border-gray-200 dark:border-gray-800 pb-6 mb-6">
             <div class="flex items-start justify-between">
                 <div class="flex-1">

From 7987c67b3fd4676b5f3650390f095dd3c0399614 Mon Sep 17 00:00:00 2001
From: Allan Kong <allankong176@gmail.com>
Date: Sun, 28 Dec 2025 18:46:01 -0700
Subject: [PATCH 5/5] dropdownLinkClasses

---
 resources/js/Components/DropdownLink.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/js/Components/DropdownLink.vue b/resources/js/Components/DropdownLink.vue
index 8b121ac3..0f207045 100644
--- a/resources/js/Components/DropdownLink.vue
+++ b/resources/js/Components/DropdownLink.vue
@@ -6,20 +6,20 @@ defineProps({
     as: String,
 });
 
-const classVal = "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";
+const dropdownLinkClasses = "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";
 </script>
 
 <template>
     <div>
-        <button v-if="as === 'button'" :class="classVal" class="w-full text-start">
+        <button v-if="as === 'button'" :class="dropdownLinkClasses" class="w-full text-start">
             <slot />
         </button>
 
-        <a v-else-if="as === 'a'" :class="classVal" class="w-full text-start" :href="href">
+        <a v-else-if="as === 'a'" :class="dropdownLinkClasses" class="w-full text-start" :href="href">
             <slot />
         </a>
 
-        <Link v-else :href="href" :class="classVal">
+        <Link v-else :href="href" :class="dropdownLinkClasses">
             <slot />
         </Link>
     </div>