🧹 chore(appfilter.vue): add dropdown toggle icon

package.json

@@ -23,7 +23,7 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/",
-    "commit": "npm run type-check && npm run lint && npm run format && cz"
+    "commit": "npm run type-check && npm run lint && npm run format && git add . && cz"
   },
   "dependencies": {
     "@vueuse/core": "^10.5.0",

postcss.config.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 module.exports = {
   plugins: {
     tailwindcss: {},

src/assets/styles/color-scheme.scss

@@ -1,5 +1,5 @@
-body[color-scheme="dark"] {
-  @import "@/views/HomeView.dark";
+body[color-scheme='dark'] {
+  @import '@/views/HomeView.dark';
   @import '@/components/AppCategory/_AppCategory.dark';
   @import '@/components/AppStatementCard/_AppStatementCard.dark';
 }

src/assets/styles/main.scss

@@ -17,4 +17,3 @@ body {
     color: var(--color-ghostwhite);
   }
 }
-

src/assets/styles/variables.scss

@@ -1,6 +1,7 @@
 :root {
-  --color-dark: #2E2E41;
-  --color-dark-light: #272C3A;
+  --color-dark: #2e2e41;
+  --color-dark-light: #272c3a;
   --color-dark-text: #242424;
+  --color-dark-icon: #4b5563;
   --color-ghostwhite: ghostwhite;
 }

src/components/AppCategory/AppCategory.vue

@@ -1,27 +1,21 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
-import type { Category } from "@/stores/db";
+import type { PropType } from 'vue'
+import type { Category } from '@/stores/db'
 
 defineProps({
   category: { type: Object as PropType<Category>, required: true }
 })
 
-const categoryColorGroups = [
-  ['bg-amber-50', 'text-amber-500', 'border-amber-500']
-]
+const categoryColorGroups = [['bg-amber-50', 'text-amber-500', 'border-amber-500']]
 </script>
 
 <template>
-  <span :class="[
-    'AppCategory',
-    ...categoryColorGroups[0]
-  ]">
+  <span :class="['AppCategory', ...categoryColorGroups[0]]">
     <span class="mr-1">{{ category.emoji }}</span>
     {{ category.name }}
   </span>
 </template>
 
-
 <style lang="scss">
 .AppCategory {
   @apply text-center font-semibold rounded-full border font-sans;

src/components/AppFilter/AppFilter.vue

@@ -1,38 +1,69 @@
 <script lang="ts" setup>
-import { type Category, useDBStore } from "@/stores/db";
-import { type Ref, ref} from "vue";
+import { type Category, useDBStore } from '@/stores/db'
+import { type Ref, ref } from 'vue'
+import MdiFilterMenu from '@/components/Icons/MdiFilterMenu.vue'
+import MdiFilterRemoveOutline from '@/components/Icons/MdiFilterRemoveOutline.vue'
 
 const { categories } = useDBStore()
 
-const dropdown = ref(false);
+const dropdown = ref(false)
 const categorySearch = ref(null)
-const selectedValue: Ref<Category|null> = ref(null);
+const selectedValue: Ref<Category | null> = ref(null)
 
 const toggleDropdown = () => {
-  dropdown.value = !dropdown.value;
-  dropdown.value && categorySearch.value ? (categorySearch.value as HTMLInputElement).focus() : false;
-}
-const closeDropdown = () => dropdown.value = false
+  dropdown.value = !dropdown.value
 
+  dropdown.value && categorySearch.value
+    ? (categorySearch.value as HTMLInputElement).focus()
+    : false
+}
+const closeDropdown = () => (dropdown.value = false)
+const openDropdown = () => (dropdown.value = true)
 const selectCategory = (category: Category) => {
   selectedValue.value = category
-  console.log(category)
+  closeDropdown()
 }
 </script>
 
 <template>
-  <div @click="toggleDropdown" v-click-outside="closeDropdown"  class="AppFilter" tabindex="0">
-    <input
+  <div v-click-outside="closeDropdown" class="AppFilter">
+    <label for="category-dropdown">
+      <input
         ref="categorySearch"
-       tabindex="0"
-       data-toggle="dropdown"
-       type="search"
-       name="category-dropdown"
-       placeholder="Filter by Categories..."
-       aria-haspopup="true"
-    />
-    <ul v-show="dropdown" class="AppFilter__dropdown" role="listbox" :aria-expanded="dropdown" aria-labelledby="category-dropdown">
-      <li v-for="(category, index) in categories" :key="index" @click="selectCategory(category)" role="option" tabindex="0">
+        tabindex="0"
+        data-toggle="dropdown"
+        type="search"
+        name="category-dropdown"
+        placeholder="Filter by Categories"
+        aria-haspopup="true"
+        @focusin="openDropdown"
+      />
+      <button
+        @click="toggleDropdown"
+        id="category-dropdown-btn"
+        class="AppFilter__icon"
+        :aria-expanded="dropdown"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+      >
+        <MdiFilterRemoveOutline v-if="dropdown" />
+        <MdiFilterMenu v-else />
+      </button>
+    </label>
+    <ul
+      v-show="dropdown"
+      class="AppFilter__dropdown"
+      role="listbox"
+      :aria-expanded="dropdown"
+      aria-labelledby="category-dropdown-btn"
+    >
+      <li
+        v-for="(category, index) in categories"
+        :key="index"
+        @click="selectCategory(category)"
+        role="option"
+        tabindex="0"
+      >
         <span class="mr-2">{{ category.emoji }}</span>
         <div>{{ category.name }}</div>
       </li>
@@ -41,29 +72,5 @@ const selectCategory = (category: Category) => {
 </template>
 
 <style lang="scss">
-.AppFilter {
-  font-family: "Fira Mono", sans-serif;
-  @apply rounded-lg w-2/5 cursor-pointer relative bg-transparent border text-sm;
-
-  input {
-    @apply w-full h-full p-3 rounded-lg;
-    &:focus {
-      @apply outline-amber-500;
-    }
-  }
-  &:focus {
-    @apply outline-amber-500;
-  }
-
-  &__dropdown {
-    @apply absolute top-10 z-10 bg-white border p-3 left-0 max-h-80 shadow-2xl rounded-lg overflow-y-scroll;
-    @apply text-gray-600;
-    li {
-      @apply p-2 transition-all flex;
-      &:hover {
-        @apply bg-amber-100 rounded-lg;
-      }
-    }
-  }
-}
+@import 'AppFilter';
 </style>

src/components/AppFilter/_AppFilter.scss

@@ -0,0 +1,25 @@
+.AppFilter {
+  font-family: 'Fira Mono', sans-serif;
+  @apply rounded-lg w-2/5 cursor-pointer relative bg-transparent border text-sm;
+
+  input {
+    @apply w-full h-full p-3 rounded-lg relative;
+    &:focus {
+      @apply outline-amber-500;
+    }
+  }
+
+  &__icon {
+    @apply absolute top-0 bottom-0 right-0 m-auto text-[var(--color-dark-icon)] w-10 flex justify-center items-center rounded-r-lg;
+  }
+
+  &__dropdown {
+    @apply absolute top-10 z-10 bg-white border p-3 left-0 max-h-80 shadow-2xl rounded-lg overflow-y-scroll;
+    li {
+      @apply p-2 transition-all flex;
+      &:hover {
+        @apply bg-amber-100 rounded-lg;
+      }
+    }
+  }
+}

src/components/AppHeader/HeaderActions.vue

@@ -1,14 +1,20 @@
 <script lang="ts" setup>
-import MdiGithub from "@/components/Icons/MdiGithub.vue";
-import ToggleDarkMode from "@/components/AppHeader/ToggleDarkMode.vue";
+import MdiGithub from '@/components/Icons/MdiGithub.vue'
+import ToggleDarkMode from '@/components/AppHeader/ToggleDarkMode.vue'
 
 const GITHUB_URL = 'https://github.com/MartinsOnuoha/what-should-i-design'
 </script>
 
 <template>
   <div class="HeaderActions">
     <ToggleDarkMode />
-    <a :href="GITHUB_URL" target="_blank" aria-label="github" title="Contribute on Github" class="HeaderActions__github">
+    <a
+      :href="GITHUB_URL"
+      target="_blank"
+      aria-label="github"
+      title="Contribute on Github"
+      class="HeaderActions__github"
+    >
       <MdiGithub />
     </a>
   </div>

src/components/AppHeader/ToggleDarkMode.vue

@@ -1,20 +1,25 @@
 <script setup lang="ts">
 import { useDark, useToggle } from '@vueuse/core'
-import MdiWhiteBalanceSunny from "@/components/Icons/MdiWhiteBalanceSunny.vue";
-import MdiMoonWaningCrescent from "@/components/Icons/MdiMoonWaningCrescent.vue";
+import MdiWhiteBalanceSunny from '@/components/Icons/MdiWhiteBalanceSunny.vue'
+import MdiMoonWaningCrescent from '@/components/Icons/MdiMoonWaningCrescent.vue'
 
 const isDark = useDark({
   selector: 'body',
   attribute: 'color-scheme',
   valueDark: 'dark',
-  valueLight: 'light',
+  valueLight: 'light'
 })
 
 const toggleDark = useToggle(isDark)
 </script>
 
 <template>
-  <button @click="toggleDark()" aria-label="toggle dark-mode" title="toggle dark-mode"  class="ToggleDarkMode">
+  <button
+    @click="toggleDark()"
+    aria-label="toggle dark-mode"
+    title="toggle dark-mode"
+    class="ToggleDarkMode"
+  >
     <MdiWhiteBalanceSunny v-show="isDark" />
     <MdiMoonWaningCrescent v-show="!isDark" />
   </button>

src/components/AppSideBanner/AppSideBanner.vue

@@ -5,18 +5,18 @@
 </template>
 
 <script setup lang="ts">
- defineProps({
+defineProps({
   alt: {
     type: String,
     default: 'Banner image'
   }
- })
+})
 </script>
 
 <style lang="scss" scoped>
 .AppSideBanner {
   @apply h-screen bg-contain relative;
-  background-image: url("@/assets/banner.webp");
+  background-image: url('@/assets/banner.webp');
 
   &__overlay {
     @apply h-screen absolute w-full opacity-60;

src/components/AppStatementCard/AppStatementCard.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import type {PropType} from "vue";
-import type { Statement } from "@/stores/db";
-import {useDBStore} from "@/stores/db";
-import AppCategory from "@/components/AppCategory/AppCategory.vue";
+import type { PropType } from 'vue'
+import type { Statement } from '@/stores/db'
+import { useDBStore } from '@/stores/db'
+import AppCategory from '@/components/AppCategory/AppCategory.vue'
 
 const props = defineProps({
-  statement: {type: Object as PropType<Statement>, required: true},
-});
+  statement: { type: Object as PropType<Statement>, required: true }
+})
 
-const getCategories = useDBStore().categories.filter(category => props.statement?.categories.includes(category.id))
+const getCategories = useDBStore().categories.filter(
+  (category) => props.statement?.categories.includes(category.id)
+)
 </script>
 
 <template>
@@ -18,14 +20,14 @@ const getCategories = useDBStore().categories.filter(category => props.statement
         {{ statement.description }}
       </div>
       <div class="AppStatementCard__categories">
-        <AppCategory v-for="(category, index) in getCategories" :key="index" :category="category"/>
+        <AppCategory v-for="(category, index) in getCategories" :key="index" :category="category" />
       </div>
     </div>
   </div>
 </template>
 
 <style lang="scss">
-@import "AppStatementCard";
+@import 'AppStatementCard';
 @media (prefers-color-scheme: dark) {
   @import 'AppStatementCard.dark';
 }

src/components/AppStatementCard/_AppStatementCard.dark.scss

@@ -2,7 +2,5 @@
   @apply rounded-lg bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 p-1;
 }
 .AppStatementCard {
-  @apply shadow-2xl border-none;
-  background-color: var(--color-dark);
-  color: var(--color-ghostwhite);
+  @apply shadow-2xl border-none bg-[var(--color-dark)] text-[var(--color-ghostwhite)] hover:bg-gradient-to-tr from-pink-900 via-[var(--color-dark)] to-[var(--color-dark)];
 }

src/components/AppStatementCard/_AppStatementCard.scss

@@ -4,8 +4,7 @@
     @apply outline-amber-500;
   }
   .AppStatementCard {
-    @apply bg-white h-52 w-full cursor-pointer p-5 rounded-lg border relative hover:bg-amber-50 transition-all;
-
+    @apply bg-white h-52 w-full cursor-pointer p-5 rounded-lg border relative hover:bg-gradient-to-tr from-amber-100 via-transparent to-transparent;
     &__content {
       @apply text-lg;
     }

src/components/Icons/MdiFilterMenu.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="m11 11l5.76-7.38a1 1 0 0 0-.17-1.4A1 1 0 0 0 16 2H2a1 1 0 0 0-.62.22a1 1 0 0 0-.17 1.4L7 11v5.87a1 1 0 0 0 .29.83l2 2a1 1 0 0 0 1.41 0a1 1 0 0 0 .3-.83V11m2 5l5 5l5-5Z"
+    ></path>
+  </svg>
+</template>

src/components/Icons/MdiFilterRemoveOutline.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M14.73 20.83L17.58 18l-2.85-2.83l1.42-1.41L19 16.57l2.8-2.81l1.42 1.41L20.41 18l2.81 2.83l-1.42 1.41L19 19.4l-2.85 2.84l-1.42-1.41M13 19.88c.04.3-.06.62-.29.83a.996.996 0 0 1-1.41 0L7.29 16.7a.989.989 0 0 1-.29-.83v-5.12L2.21 4.62a1 1 0 0 1 .17-1.4c.19-.14.4-.22.62-.22h14c.22 0 .43.08.62.22a1 1 0 0 1 .17 1.4L13 10.75v9.13M5.04 5L9 10.06v5.52l2 2v-7.53L14.96 5H5.04Z"
+    ></path>
+  </svg>
+</template>

src/components/Icons/MdiGithub.vue

@@ -1,5 +1,8 @@
-
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"></path></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"
+    ></path>
+  </svg>
 </template>
-

src/components/Icons/MdiMoonWaningCrescent.vue

@@ -1,4 +1,14 @@
-
 <template>
-  <svg class="-rotate-12" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M2 12a10 10 0 0 0 13 9.54a10 10 0 0 1 0-19.08A10 10 0 0 0 2 12Z"></path></svg>
+  <svg
+    class="-rotate-12"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="currentColor"
+      d="M2 12a10 10 0 0 0 13 9.54a10 10 0 0 1 0-19.08A10 10 0 0 0 2 12Z"
+    ></path>
+  </svg>
 </template>