fix: move toggleRuleView to page rules (#75)

eslint · Jul 17, 2024 · 0fd797c · 0fd797c
1 parent 7b93bea
commit 0fd797c
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 34 deletions.
diff --git a/app/components/NavBar.vue b/app/components/NavBar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useTimeAgo } from '@vueuse/core'
-import { filtersRules as filters, stateStorage } from '~/composables/state'
+import { filtersRules as filters } from '~/composables/state'
 import { useRouter } from '#app/composables/router'
 import { isFetching, payload } from '~/composables/payload'
 import { toggleDark } from '~/composables/dark'
@@ -22,10 +22,6 @@ function showDeprecated() {
   if (router.currentRoute.value.path !== '/rules')
     router.push('/rules')
 }
-
-function toggleRuleView() {
-  stateStorage.value.viewType = stateStorage.value.viewType === 'list' ? 'grid' : 'list'
-}
 </script>
 
 <template>
@@ -78,13 +74,6 @@ function toggleRuleView() {
       i-ph-sun-dim-duotone dark:i-ph-moon-stars-duotone ml1 text-xl op50 hover:op75
       @click="toggleDark()"
     />
-    <button
-      title="Toggle Rule View"
-
-      :class="stateStorage.viewType === 'list' ? 'i-ph-list-duotone' : 'i-ph-grid-four-duotone'"
-      text-xl op50 lt-md:hidden hover:op75
-      @click="toggleRuleView()"
-    />
     <NuxtLink
       href="https://github.com/eslint/config-inspector" target="_blank"
       i-carbon-logo-github text-lg op50 hover:op75

diff --git a/app/composables/state.ts b/app/composables/state.ts
@@ -27,7 +27,7 @@ export const stateStorage = useLocalStorage(
 )
 
 const bp = useBreakpoints(breakpointsTailwind)
-const bpSm = bp.smallerOrEqual('md')
+export const bpSm = bp.smallerOrEqual('md')
 
 export const isGridView = computed(() => bpSm.value || stateStorage.value.viewType === 'grid')
 

diff --git a/app/pages/rules.vue b/app/pages/rules.vue
@@ -2,7 +2,7 @@
 import { debouncedWatch } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import Fuse from 'fuse.js'
-import { filtersRules as filters } from '~/composables/state'
+import { bpSm, filtersRules as filters, stateStorage } from '~/composables/state'
 import { payload } from '~/composables/payload'
 
 const rules = computed(() => Object.values(payload.value.rules))
@@ -164,28 +164,49 @@ function resetFilters() {
       </div>
     </div>
 
-    <div flex="~ gap-2">
-      <div
-        flex="~ inline gap-2 items-center"
-        border="~ gray/20 rounded-full" bg-gray:10 px3 py1
-      >
-        <div i-ph-list-checks-duotone />
-        <span>{{ filtered.length }}</span>
-        <span op75>rules {{ isDefaultFilters ? 'enabled' : 'filtered' }}</span>
-        <span text-sm op50>out of {{ rules.length }} rules</span>
+    <div items-center justify-between md:flex>
+      <div flex="~ gap-2" lt-sm:flex-col>
+        <div
+          flex="~ inline gap-2 items-center"
+          border="~ gray/20 rounded-full" bg-gray:10 px3 py1
+        >
+          <div i-ph-list-checks-duotone />
+          <span>{{ filtered.length }}</span>
+          <span op75>rules {{ isDefaultFilters ? 'enabled' : 'filtered' }}</span>
+          <span text-sm op50>out of {{ rules.length }} rules</span>
+        </div>
+        <button
+          v-if="!isDefaultFilters"
+          flex="~ inline gap-2 items-center self-start"
+          border="~ purple/20 rounded-full" bg-purple:10 px3 py1
+          @click="resetFilters()"
+        >
+          <div i-ph-funnel-duotone text-purple />
+          <span op50>Clear Filter</span>
+          <button
+            i-ph-x ml--1 text-sm op25 hover:op100
+          />
+        </button>
       </div>
-      <button
-        v-if="!isDefaultFilters"
-        flex="~ inline gap-2 items-center"
-        border="~ purple/20 rounded-full" bg-purple:10 px3 py1
-        @click="resetFilters()"
-      >
-        <div i-ph-funnel-duotone text-purple />
-        <span op50>Clear Filter</span>
+
+      <div v-if="!bpSm" flex="~ gap-1">
         <button
-          i-ph-x ml--1 text-sm op25 hover:op100
-        />
-      </button>
+          btn-action
+          :class="{ 'btn-action-active': stateStorage.viewType === 'list' }"
+          @click="stateStorage.viewType = 'list'"
+        >
+          <div i-ph-list-duotone />
+          List
+        </button>
+        <button
+          btn-action
+          :class="{ 'btn-action-active': stateStorage.viewType === 'grid' }"
+          @click="stateStorage.viewType = 'grid'"
+        >
+          <div i-ph-grid-four-duotone />
+          Grid
+        </button>
+      </div>
     </div>
     <RuleList
       my4