feat: recent icons

src/components/Drawer.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
-import { categorySearch, sortedCollectionsInfo } from '../data'
-import { isFavoritedCollection, sortAlphabetically, toggleFavoriteCollection } from '../store'
+import { categorySearch, sortedCollectionsInfo, specialTabs } from '../data'
+import { isFavoritedCollection, recentIconIds, sortAlphabetically, toggleFavoriteCollection } from '../store'
 import { isElectron } from '../env'
 
 const route = useRoute()
@@ -9,6 +9,7 @@ const current = computed(() => route.path.split('/').slice(-1)[0])
 const collections = computed(() => {
   return [
     { id: 'all', name: 'All' },
+    { id: 'recent', name: 'Recent' },
     ...sortedCollectionsInfo.value,
   ]
 })
@@ -76,11 +77,17 @@ const collections = computed(() => {
           {{ collection.name }}
         </div>
         <div class="text-xs block opacity-50 mt-1">
-          {{ collection.id !== 'all' ? `${collection.total} icons` : `${collections.length} iconsets` }}
+          {{
+            collection.id === 'recent'
+              ? `${recentIconIds.length} icons`
+              : collection.id !== 'all'
+                ? `${collection.total} icons`
+                : `${collections.length} iconsets`
+          }}
         </div>
       </div>
       <button
-        v-if="collection.id !== 'all'"
+        v-if="!specialTabs.includes(collection.id)"
         icon-button
         :class="isFavoritedCollection(collection.id) ? 'op50 hover:op100' : 'op0 hover:op50' "
         class="flex-none text-lg p0.5 -mr-1 hover:text-primary flex"

src/components/IconSet.vue

@@ -2,7 +2,7 @@
 import { useRoute, useRouter } from 'vue-router'
 import { activeMode, bags, getSearchResults, iconSize, isCurrentCollectionLoading, listType, showHelp, toggleBag } from '../store'
 import { isLocalMode } from '../env'
-import { cacheCollection } from '../data'
+import { cacheCollection, specialTabs } from '../data'
 import { getIconSnippet } from '../utils/icons'
 
 const showBag = $ref(false)
@@ -20,8 +20,8 @@ const loading = isCurrentCollectionLoading()
 const maxMap = new Map<string, number>()
 const id = $computed(() => collection.value?.id)
 const url = $computed(() => collection.value?.url || collection.value?.author?.url)
-const npm = $computed(() => (id != null && id !== 'all') ? `https://www.npmjs.com/package/@iconify-json/${id}` : '')
-const namespace = $computed(() => (id != null && id !== 'all') ? `${id}:` : '')
+const npm = $computed(() => (id != null && !specialTabs.includes(id)) ? `https://www.npmjs.com/package/@iconify-json/${id}` : '')
+const namespace = $computed(() => (id != null && !specialTabs.includes(id)) ? `${id}:` : '')
 
 function onCopy(status: boolean) {
   copied = status
@@ -272,7 +272,7 @@ onKeyStroke('Escape', () => {
         <!-- Details -->
         <Modal :value="!!current" @close="current = ''">
           <IconDetail
-            :icon="current" :show-collection="collection.id === 'all'"
+            :icon="current" :show-collection="specialTabs.includes(collection.id)"
             @close="current = ''"
             @copy="onCopy"
             @next="next(1)"

src/data/index.ts

@@ -7,6 +7,8 @@ import { isLocalMode, staticPath } from '../env'
 import { loadCollection, saveCollection } from '../store/indexedDB'
 import infoJSON from './collections-info.json'
 
+export const specialTabs = ['all', 'recent']
+
 export type PresentType = 'favorite' | 'recent' | 'normal'
 
 export interface CollectionInfo {
@@ -90,7 +92,7 @@ export function preInstall() {
 }
 
 export async function tryInstallFromLocal(id: string) {
-  if (id === 'all')
+  if (specialTabs.includes(id))
     return false
 
   if (isLocalMode)
@@ -112,7 +114,7 @@ export async function tryInstallFromLocal(id: string) {
 
 // load full iconset
 export async function downloadAndInstall(id: string) {
-  if (id === 'all')
+  if (specialTabs.includes(id))
     return false
 
   if (installed.value.includes(id))

src/hooks/search.ts

@@ -2,13 +2,15 @@ import { AsyncFzf, asyncExtendedMatch } from 'fzf'
 import type { Ref } from 'vue'
 import { computed, markRaw, ref, watch } from 'vue'
 import type { CollectionMeta } from '../data'
+import { specialTabs } from '../data'
 import { searchAlias } from '../data/search-alias'
 
 export function useSearch(collection: Ref<CollectionMeta | null>, defaultCategory = '', defaultSearch = '') {
   const category = ref(defaultCategory)
   const search = ref(defaultSearch)
-  const isAll = computed(() => collection.value && collection.value.id === 'all')
+  const isAll = computed(() => collection.value && specialTabs.includes(collection.value.id))
   const searchParts = computed(() => search.value.trim().toLowerCase().split(' ').filter(Boolean))
+
   const aliasedSearchCandidates = computed(() => {
     const options = new Set([
       searchParts.value.join(' '),

src/store/collection.ts

@@ -1,5 +1,6 @@
 import type { CollectionMeta } from '../data'
 import {
+  collections,
   downloadAndInstall,
   getFullMeta,
   getMeta,
@@ -9,6 +10,7 @@ import {
 } from '../data'
 import { useSearch } from '../hooks'
 import { isLocalMode } from '../env'
+import { recentIconIds } from './localstorage'
 
 const currentCollectionId = ref('')
 const loaded = ref(false)
@@ -28,6 +30,17 @@ export function isCurrentCollectionLoading() {
   return computed(() => !loaded.value)
 }
 
+const recentIconsCollection = computed((): CollectionMeta => ({
+  id: 'recent',
+  name: 'Recent',
+  icons: recentIconIds.value,
+  categories: Object.fromEntries(
+    Array.from(new Set(
+      recentIconIds.value.map(i => i.split(':')[0])))
+      .map(id => [collections.find(i => i.id === id)?.name || id, recentIconIds.value.filter(i => i.startsWith(`${id}:`))]),
+  ),
+}))
+
 export async function setCurrentCollection(id: string) {
   currentCollectionId.value = id
 
@@ -57,6 +70,10 @@ export async function setCurrentCollection(id: string) {
     }
     loaded.value = true
   }
+  else if (id === 'recent') {
+    collection.value = recentIconsCollection.value
+    loaded.value = true
+  }
   else {
     collection.value = await getMeta(id)
     loaded.value = true