Quality of Life (#38)

* Quality of Life

* Storage

* Dark mode

* Dark mode in progress

* Dark Moding

* Dark mode done!

* Clickable Header

* Small fix

* More little fixes

* Update resources/js/Components/Resources/Reviews/CreateResourceReview.vue

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* more text

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: AllanKoder

.gitignore

@@ -23,4 +23,5 @@ yarn-error.log
 /.nova
 /.vscode
 /.zed
-sail
+sail
+/prod_backups

app/Http/Controllers/TagFrequencyController.php

@@ -21,7 +21,7 @@ public function search(string $type, string $query = '')
         $prefixed_tags = TagFrequency::where('tag', 'like', $escaped.'%')
             ->where('type', $type)
             ->orderByDesc('count')
-            ->limit(30)
+            ->limit(50)
             ->get();
 
         return response()->json([

public/images/LogoTitleDark.svg

@@ -8,3 +8,11 @@
 [x-cloak] {
     display: none;
 }
+
+html.dark {
+  --surface-ground: #374151 !important;
+  --surface-card: #374151 !important;
+  --surface-overlay: #374151 !important;
+  --surface-border: #4b5563 !important; /* gray-600 for borders */
+}
+

resources/css/app.css

@@ -1,3 +1,4 @@
 <template>
-    <img src="/images/LogoTitle.svg" alt="Computer Science Resources" class="w-min sm:w-64 md:w-72 lg:w-80 xl:w-96" />
+    <img src="/images/LogoTitle.svg" alt="Computer Science Resources" class="h-10 sm:h-12 w-auto block dark:hidden" />
+    <img src="/images/LogoTitleDark.svg" alt="Computer Science Resources" class="h-10 sm:h-12 w-auto hidden dark:block" />
 </template>

resources/js/Components/ApplicationHeaderLogo.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { Link } from "@inertiajs/vue3";
+
+const props = defineProps({
+  href: { type: String, required: true }
+});
+</script>
+
+<template>
+  <Link :href="href" class="group flex items-center gap-1">
+    <slot />
+    <Icon icon="mdi:chevron-right" class="text-primary group-hover:translate-x-1 transition-transform duration-200" width="22" height="22" />
+  </Link>
+</template>

resources/js/Components/ClickableHeading.vue

@@ -35,6 +35,7 @@ const toggleCollapse = () => {
             class="absolute left-0 top-0 bottom-0 flex items-center"
         >
 
+
         <div
             v-if="!isCollapsed"
             class="relative h-full cursor-pointer"
@@ -49,17 +50,17 @@ const toggleCollapse = () => {
 
             <!-- Visible line -->
             <div
-                class="w-[1.2px] h-full bg-gray-300 transition-colors duration-200"
-                :class="{'bg-primary': isNearCollapsing}"
+                class="w-[1.2px] h-full bg-gray-300 dark:bg-gray-800 transition-colors duration-200"
+                :class="{'bg-primary': isNearCollapsing, 'dark:bg-primary': isNearCollapsing}"
             ></div>
         </div>
 
             <button
                 v-else
-                class="p-1 rounded-full border border-gray-300 bg-white hover:border-gray-500 hover:bg-gray-100 transition-colors duration-200"
+                class="p-1 rounded-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 hover:border-gray-500 dark:hover:border-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200"
                 @click="toggleCollapse"
             >
-                <Icon icon="mdi:chevron-right" width="20" height="20" class="text-gray-500 hover:text-blue-500" />
+                <Icon icon="mdi:chevron-right" width="20" height="20" class="text-gray-500 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400" />
             </button>
         </div>
 

resources/js/Components/Comments/CommentList.vue

@@ -202,14 +202,14 @@ onMounted(() => {
 </script>
 
 <template>
-    <div class="comments-section bg-white rounded-lg p-1">
+    <div class="comments-section bg-white dark:bg-gray-900 rounded-lg p-1">
         <SortByDropdown
             v-if="props.hasSortByDropdown && hasOpenedComments"
             @change="handleSortChange"
         ></SortByDropdown>
 
         <!-- Error State -->
-        <div v-if="error" class="text-red-500 mb-4">{{ error }}</div>
+    <div v-if="error" class="text-red-500 dark:text-red-400 mb-4">{{ error }}</div>
 
         <!-- Comments List -->
         <CommentList :id-to-children="idToChildren" />
@@ -231,7 +231,7 @@ onMounted(() => {
             <button
                 v-if="canLoadMoreComments && !isLoading"
                 @click="loadComments"
-                class="w-full py-2 text-center text-primary hover:bg-background/50 transition-colors"
+                class="w-full py-2 text-center text-primary dark:text-primaryLight hover:bg-background/50 dark:hover:bg-gray-800/50 transition-colors"
             >
                 View {{ commentsLeft }} Comments
             </button>

resources/js/Components/Comments/Commentable.vue

@@ -22,7 +22,7 @@ const users = inject("users");
 
 <template>
     <div
-        class="py-4 border-b border-gray-300 flex flex-row gap-4 w-full"
+        class="py-4 border-b border-gray-300 dark:border-gray-800 flex flex-row gap-4 w-full"
         :key="comment.id"
         :id="'comment_' + comment.id"
     >
@@ -43,7 +43,7 @@ const users = inject("users");
             </div>
 
             <!-- Comment Content -->
-            <p class="mt-2 text-gray-700 break-words">{{ comment.content }}</p>
+            <p class="mt-2 text-gray-700 dark:text-gray-100 break-words">{{ comment.content }}</p>
 
             <!-- Actions Form -->
             <CommentActionsForm

resources/js/Components/Comments/SingleComment.vue

@@ -27,7 +27,7 @@ const emit = defineEmits(['change'])
 
 <template>
     <div class="flex items-center gap-2 py-4">
-        <label class="font-semibold text-gray-700">Sort by:</label>
+        <label class="font-semibold text-gray-700 dark:text-gray-100">Sort by:</label>
         <Select
             v-model="selectedSort"
             :options="sortOptions"