From 5a455adbd586ffec17791b52ef133d5be1d8103c Mon Sep 17 00:00:00 2001
From: allen <272970666@qq.com>
Date: Thu, 12 May 2022 01:13:29 +0800
Subject: [PATCH 1/3] feat: add copying mode

---
 src/components/ActionsMenu.vue | 10 +++++++--
 src/components/IconDetail.vue  | 28 +++++++++++-------------
 src/components/IconSet.vue     | 40 ++++++++++++++++++++++++++--------
 src/store/localstorage.ts      |  4 +++-
 4 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/src/components/ActionsMenu.vue b/src/components/ActionsMenu.vue
index 2df20ccb..74530aa2 100644
--- a/src/components/ActionsMenu.vue
+++ b/src/components/ActionsMenu.vue
@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 import type { PropType } from 'vue'
-import { iconSize, inProgress, listType, progressMessage, selectingMode } from '../store'
+import { activeMode, iconSize, inProgress, listType, progressMessage } from '../store'
 import { cacheCollection, downloadAndInstall, isInstalled } from '../data'
 import type { CollectionMeta } from '../data'
 import { PackIconFont, PackSvgZip } from '../utils/pack'
@@ -79,7 +79,10 @@ watch(
         listType.value = 'list'
         return
       case 'select':
-        selectingMode.value = !selectingMode.value
+        activeMode.value = 'selecting'
+        break
+      case 'copy':
+        activeMode.value = 'copying'
         break
       case 'download_iconfont':
         packIconFont()
@@ -138,6 +141,9 @@ const installed = computed(() => {
           <option value="select">
             Select multiple
           </option>
+          <option value="copy">
+            Copy to clipboard
+          </option>
         </optgroup>
 
         <!--
diff --git a/src/components/IconDetail.vue b/src/components/IconDetail.vue
index 17c912ab..c34b20f2 100644
--- a/src/components/IconDetail.vue
+++ b/src/components/IconDetail.vue
@@ -2,7 +2,7 @@
 import copyText from 'copy-text-to-clipboard'
 import { getIconSnippet, toComponentName } from '../utils/icons'
 import { collections } from '../data'
-import { copyPreviewColor, getTransformedId, inBag, preferredCase, previewColor, selectingMode, showCaseSelect, showHelp, toggleBag } from '../store'
+import { activeMode, copyPreviewColor, getTransformedId, inBag, preferredCase, previewColor, showCaseSelect, showHelp, toggleBag } from '../store'
 import { Download } from '../utils/pack'
 import { idCases } from '../utils/case'
 
@@ -17,8 +17,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['close'])
-const copied = ref(false)
+const emit = defineEmits(['close', 'copy'])
 
 const caseSelector = ref<HTMLDivElement>()
 const transformedId = computed(() => getTransformedId(props.icon))
@@ -33,10 +32,7 @@ const copy = async (type: string) => {
   if (!text)
     return
 
-  copied.value = copyText(text)
-  setTimeout(() => {
-    copied.value = false
-  }, 2000)
+  emit('copy', copyText(text))
 }
 
 const download = async (type: string) => {
@@ -51,9 +47,15 @@ const download = async (type: string) => {
 }
 
 const toggleSelectingMode = () => {
-  selectingMode.value = !selectingMode.value
-  if (selectingMode.value)
-    emit('close')
+  switch (activeMode.value) {
+    case 'selecting':
+      activeMode.value = 'normal'
+      break
+    default:
+      activeMode.value = 'selecting'
+      emit('close')
+      break
+  }
 }
 
 const collection = computed(() => {
@@ -141,7 +143,7 @@ const collection = computed(() => {
             inline-block leading-1em border border-gray-200 my-2 mr-2 font-sans pl-2 pr-3 py-1 rounded-full text-sm cursor-pointer hover:bg-gray-50
             dark:border-dark-200 dark:hover:bg-dark-200
           "
-          :class="selectingMode ? 'text-primary' : 'text-gray-500'"
+          :class="activeMode === 'selecting' ? 'text-primary' : 'text-gray-500'"
           @click="toggleSelectingMode"
         >
           <Icon class="inline-block text-lg align-middle" icon="carbon:list-checked" />
@@ -233,9 +235,5 @@ const collection = computed(() => {
         </div>
       </div>
     </div>
-    <Notification :value="copied">
-      <Icon icon="mdi:check" class="inline-block mr-2 font-xl align-middle" />
-      <span class="align-middle">Copied</span>
-    </Notification>
   </div>
 </template>
diff --git a/src/components/IconSet.vue b/src/components/IconSet.vue
index 2bdbef28..cdc92c74 100755
--- a/src/components/IconSet.vue
+++ b/src/components/IconSet.vue
@@ -1,16 +1,25 @@
 <script setup lang='ts'>
+import copyText from 'copy-text-to-clipboard'
 import { useRoute, useRouter } from 'vue-router'
-import { bags, getSearchResults, iconSize, isCurrentCollectionLoading, listType, selectingMode, showHelp, toggleBag } from '../store'
+import { activeMode, bags, getSearchResults, iconSize, isCurrentCollectionLoading, listType, showHelp, toggleBag } from '../store'
 import { isLocalMode } from '../env'
 import { cacheCollection } from '../data'
 
 const { search, icons, category, collection } = getSearchResults()
 const showBag = ref(false)
+const copied = ref(false)
 
 const maxMap = new Map<string, number>()
 const current = ref('')
 const max = ref(isLocalMode ? 500 : 200)
 
+const onCopy = (status: boolean) => {
+  copied.value = status
+  setTimeout(() => {
+    copied.value = false
+  }, 2000)
+}
+
 const toggleCategory = (cat: string) => {
   if (category.value === cat)
     category.value = ''
@@ -24,9 +33,17 @@ const namespace = computed(() => {
 })
 
 const onSelect = (icon: string) => {
-  if (selectingMode.value)
-    toggleBag(icon)
-  else current.value = icon
+  switch (activeMode.value) {
+    case 'selecting':
+      toggleBag(icon)
+      break
+    case 'copying':
+      onCopy(copyText(icon))
+      break
+    default:
+      current.value = icon
+      break
+  }
 }
 
 watch(
@@ -190,13 +207,13 @@ onMounted(() => {
         <Modal :value="showBag" direction="right" @close="showBag = false">
           <Bag
             @close="showBag = false"
-            @select="e => current = e"
+            @select="onSelect"
           />
         </Modal>
 
         <!-- Details -->
         <Modal :value="!!current" @close="current = ''">
-          <IconDetail :icon="current" :show-collection="collection.id === 'all'" @close="current = ''" />
+          <IconDetail :icon="current" :show-collection="collection.id === 'all'" @close="current = ''" @copy="onCopy" />
         </Modal>
 
         <!-- Help -->
@@ -207,14 +224,19 @@ onMounted(() => {
         <!-- Selecting Note -->
         <div
           class="fixed top-0 right-0 pl-4 pr-2 py-1 rounded-l-full bg-primary text-white shadow mt-16 cursor-pointer transition-transform duration-300 ease-in-out"
-          :style="selectingMode ? {} : { transform: 'translateX(120%)' }"
-          @click="selectingMode = false"
+          :style="activeMode !== 'normal' ? {} : { transform: 'translateX(120%)' }"
+          @click="activeMode = 'normal'"
         >
-          Selecting Mode
+          {{ activeMode.replace(/^[a-z](?=[a-z]*)/, (i) => i.toUpperCase()) }} Mode
           <Icon icon="carbon:close" class="inline-block text-xl align-text-bottom" />
         </div>
 
         <SearchElectron />
+
+        <Notification :value="copied">
+          <Icon icon="mdi:check" class="inline-block mr-2 font-xl align-middle" />
+          <span class="align-middle">Copied</span>
+        </Notification>
       </div>
     </div>
   </WithNavbar>
diff --git a/src/store/localstorage.ts b/src/store/localstorage.ts
index 8a8e7653..c57d5d40 100644
--- a/src/store/localstorage.ts
+++ b/src/store/localstorage.ts
@@ -1,6 +1,8 @@
 import type { IdCase } from '../utils/case'
 import { idCases } from '../utils/case'
 
+export type ActiveMode = 'normal' | 'selecting' | 'copying'
+
 export const themeColor = useStorage('icones-theme-color', '#329672')
 export const iconSize = useStorage('icones-icon-size', '2xl')
 export const previewColor = useStorage('icones-preview-color', '#888888')
@@ -8,7 +10,7 @@ export const copyPreviewColor = useStorage('icones-copy-preview-color', false)
 export const listType = useStorage('icones-list-type', 'grid')
 export const favoritedCollections = useStorage<string[]>('icones-fav-collections', [])
 export const bags = useStorage<string[]>('icones-bags', [])
-export const selectingMode = ref(false)
+export const activeMode = useStorage<ActiveMode>('active-mode', 'normal')
 export const preferredCase = useStorage<IdCase>('icones-preferfed-case', 'iconify')
 
 export function getTransformedId(icon: string) {

From 97b8b7d3f3e469a9a5b4207e8170333e75f8a779 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 13 May 2022 09:15:57 +0800
Subject: [PATCH 2/3] chore: update

---
 src/components/ActionsMenu.vue | 10 +++++-----
 src/components/IconDetail.vue  |  9 ++++-----
 src/components/IconSet.vue     | 13 +++++++------
 src/store/localstorage.ts      |  2 +-
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/ActionsMenu.vue b/src/components/ActionsMenu.vue
index 74530aa2..29286691 100644
--- a/src/components/ActionsMenu.vue
+++ b/src/components/ActionsMenu.vue
@@ -79,10 +79,10 @@ watch(
         listType.value = 'list'
         return
       case 'select':
-        activeMode.value = 'selecting'
+        activeMode.value = 'select'
         break
       case 'copy':
-        activeMode.value = 'copying'
+        activeMode.value = 'copy'
         break
       case 'download_iconfont':
         packIconFont()
@@ -137,12 +137,12 @@ const installed = computed(() => {
             List
           </option>
         </optgroup>
-        <optgroup label="Actions">
+        <optgroup label="Modes">
           <option value="select">
-            Select multiple
+            Multiple select
           </option>
           <option value="copy">
-            Copy to clipboard
+            Name copying mode
           </option>
         </optgroup>
 
diff --git a/src/components/IconDetail.vue b/src/components/IconDetail.vue
index c34b20f2..a435015d 100644
--- a/src/components/IconDetail.vue
+++ b/src/components/IconDetail.vue
@@ -48,11 +48,11 @@ const download = async (type: string) => {
 
 const toggleSelectingMode = () => {
   switch (activeMode.value) {
-    case 'selecting':
+    case 'select':
       activeMode.value = 'normal'
       break
     default:
-      activeMode.value = 'selecting'
+      activeMode.value = 'select'
       emit('close')
       break
   }
@@ -81,14 +81,13 @@ const collection = computed(() => {
       </button>
       <div class="flex text-gray-700 relative font-mono dark:text-dark-900">
         {{ transformedId }}
-
         <IconButton icon="carbon:copy" class="ml-2" @click="copy('id')" />
         <IconButton icon="carbon:chevron-up" class="ml-2" @click="showCaseSelect = !showCaseSelect" />
         <div class="flex-auto" />
         <div
           v-if="showCaseSelect"
           ref="caseSelector"
-          class="absolute left-0 bottom-1.8em text-sm rounded shadow p-2 bg-white dark:bg-dark-100"
+          class="absolute left-0 bottom-1.8em text-sm rounded shadow p-2 bg-white dark:bg-dark-100 dark:border dark:border-dark-200"
         >
           <div
             v-for="[k, v] of Object.entries(idCases)"
@@ -143,7 +142,7 @@ const collection = computed(() => {
             inline-block leading-1em border border-gray-200 my-2 mr-2 font-sans pl-2 pr-3 py-1 rounded-full text-sm cursor-pointer hover:bg-gray-50
             dark:border-dark-200 dark:hover:bg-dark-200
           "
-          :class="activeMode === 'selecting' ? 'text-primary' : 'text-gray-500'"
+          :class="activeMode === 'select' ? 'text-primary' : 'text-gray-500'"
           @click="toggleSelectingMode"
         >
           <Icon class="inline-block text-lg align-middle" icon="carbon:list-checked" />
diff --git a/src/components/IconSet.vue b/src/components/IconSet.vue
index cdc92c74..00bc8f99 100755
--- a/src/components/IconSet.vue
+++ b/src/components/IconSet.vue
@@ -4,6 +4,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 { getIconSnippet } from '../utils/icons'
 
 const { search, icons, category, collection } = getSearchResults()
 const showBag = ref(false)
@@ -32,13 +33,13 @@ const namespace = computed(() => {
     : `${collection.value.id}:`
 })
 
-const onSelect = (icon: string) => {
+const onSelect = async (icon: string) => {
   switch (activeMode.value) {
-    case 'selecting':
+    case 'select':
       toggleBag(icon)
       break
-    case 'copying':
-      onCopy(copyText(icon))
+    case 'copy':
+      onCopy(copyText(await getIconSnippet(icon, 'id', true) || icon))
       break
     default:
       current.value = icon
@@ -221,13 +222,13 @@ onMounted(() => {
           <HelpPage />
         </ModalDialog>
 
-        <!-- Selecting Note -->
+        <!-- Mode -->
         <div
           class="fixed top-0 right-0 pl-4 pr-2 py-1 rounded-l-full bg-primary text-white shadow mt-16 cursor-pointer transition-transform duration-300 ease-in-out"
           :style="activeMode !== 'normal' ? {} : { transform: 'translateX(120%)' }"
           @click="activeMode = 'normal'"
         >
-          {{ activeMode.replace(/^[a-z](?=[a-z]*)/, (i) => i.toUpperCase()) }} Mode
+          {{ activeMode === 'select' ? 'Multiple select' : 'Name copying mode' }}
           <Icon icon="carbon:close" class="inline-block text-xl align-text-bottom" />
         </div>
 
diff --git a/src/store/localstorage.ts b/src/store/localstorage.ts
index c57d5d40..99209fa3 100644
--- a/src/store/localstorage.ts
+++ b/src/store/localstorage.ts
@@ -1,7 +1,7 @@
 import type { IdCase } from '../utils/case'
 import { idCases } from '../utils/case'
 
-export type ActiveMode = 'normal' | 'selecting' | 'copying'
+export type ActiveMode = 'normal' | 'select' | 'copy'
 
 export const themeColor = useStorage('icones-theme-color', '#329672')
 export const iconSize = useStorage('icones-icon-size', '2xl')

From aa28ae82d23bc1a8f1e95a37de8c17235a5cf5ea Mon Sep 17 00:00:00 2001
From: allen <272970666@qq.com>
Date: Thu, 9 Jun 2022 15:31:04 +0800
Subject: [PATCH 3/3] feat: add config page

---
 src/components/ActionsMenu.vue |  6 ++++++
 src/components/IconDetail.vue  |  4 ++--
 src/components/IconSet.vue     |  4 ++--
 src/components/Navbar.vue      | 13 +++++++++++--
 src/pages/config.vue           | 31 +++++++++++++++++++++++++++++++
 src/store/localstorage.ts      |  2 ++
 src/utils/config.ts            |  5 +++++
 src/utils/copy.ts              |  6 ++++++
 8 files changed, 65 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/config.vue
 create mode 100644 src/utils/config.ts
 create mode 100644 src/utils/copy.ts

diff --git a/src/components/ActionsMenu.vue b/src/components/ActionsMenu.vue
index 29286691..fd067d51 100644
--- a/src/components/ActionsMenu.vue
+++ b/src/components/ActionsMenu.vue
@@ -108,6 +108,12 @@ const installed = computed(() => {
 
 <template>
   <div class="text-xl flex">
+    <RouterLink
+      class="non-dragging text-xl mx-3 my-auto"
+      to="/config"
+    >
+      <IconButton icon="carbon:settings" style="padding-bottom: 3px" />
+    </RouterLink>
     <DarkSwitcher class="mx-2 opacity-25 align-middle" />
 
     <!-- Download State -->
diff --git a/src/components/IconDetail.vue b/src/components/IconDetail.vue
index fa65d20e..2d69b43a 100644
--- a/src/components/IconDetail.vue
+++ b/src/components/IconDetail.vue
@@ -1,10 +1,10 @@
 <script setup lang='ts'>
-import copyText from 'copy-text-to-clipboard'
 import { getIconSnippet, toComponentName } from '../utils/icons'
 import { collections } from '../data'
 import { activeMode, copyPreviewColor, getTransformedId, inBag, preferredCase, previewColor, showCaseSelect, showHelp, toggleBag } from '../store'
 import { Download } from '../utils/pack'
 import { idCases } from '../utils/case'
+import { copyName } from '../utils/copy'
 
 const props = defineProps({
   icon: {
@@ -32,7 +32,7 @@ const copy = async (type: string) => {
   if (!text)
     return
 
-  emit('copy', copyText(text))
+  emit('copy', copyName(text))
 }
 
 const download = async (type: string) => {
diff --git a/src/components/IconSet.vue b/src/components/IconSet.vue
index 54bf8490..a36bb536 100755
--- a/src/components/IconSet.vue
+++ b/src/components/IconSet.vue
@@ -1,10 +1,10 @@
 <script setup lang='ts'>
-import copyText from 'copy-text-to-clipboard'
 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 { getIconSnippet } from '../utils/icons'
+import { copyName } from '../utils/copy'
 
 const { search, icons, category, collection } = getSearchResults()
 const showBag = ref(false)
@@ -41,7 +41,7 @@ const onSelect = async (icon: string) => {
       toggleBag(icon)
       break
     case 'copy':
-      onCopy(copyText(await getIconSnippet(icon, 'id', true) || icon))
+      onCopy(copyName(await getIconSnippet(icon, 'id', true) || icon))
       break
     default:
       current.value = icon
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 3647af3c..7e99898f 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,9 +1,12 @@
 <script lang="ts">
 import { getSearchResults, isDark } from '../store'
 
+const showNavPages = ['/', '/config']
+
 export default defineComponent(() => ({
   ...getSearchResults(),
   isDark,
+  showNavPages,
 }))
 </script>
 
@@ -12,14 +15,14 @@ export default defineComponent(() => ({
     class="
       dragging p-2 relative bg-base z-10 flex border-b border-base flex-none
     "
-    :class="$route.path !== '/' ? 'md:hidden' : ''"
+    :class="showNavPages.includes($route.path) ? '' : 'md:hidden'"
   >
     <!-- In Collections -->
     <template v-if="$route.path !== '/'">
       <IconButton
         class="non-dragging text-xl mx-3 my-auto flex-none"
         icon="carbon:arrow-left"
-        @click="$router.replace('/')"
+        @click="$router.back()"
       />
     </template>
 
@@ -38,6 +41,12 @@ export default defineComponent(() => ({
       >
         Icônes
       </h1>
+      <RouterLink
+        class="non-dragging text-xl mx-3 my-auto"
+        to="/config"
+      >
+        <IconButton icon="carbon:settings" style="padding-bottom: 3px" />
+      </RouterLink>
       <a
         class="non-dragging text-xl mx-3 my-auto flex-none"
         href="https://github.com/antfu/icones"
diff --git a/src/pages/config.vue b/src/pages/config.vue
new file mode 100644
index 00000000..1339025b
--- /dev/null
+++ b/src/pages/config.vue
@@ -0,0 +1,31 @@
+<script setup lang='ts'>
+import { userConfig } from '../store'
+</script>
+
+<template>
+  <WithNavbar>
+    <div py-8 px-8 text-gray-700 dark:text-dark-700>
+      <div text-gray-900 text-2xl mb-2 dark:text-gray-200>
+        Config page
+      </div>
+      <div op50 text-sm mb-6>
+        Edit your custom config below. Config will be auto saved in localStorage.
+      </div>
+      <div v-for="(_, configKey) in userConfig" :key="configKey" mb-6>
+        <div op70 text-xl mb-4 dark:text-gray-200>
+          {{ configKey }}
+        </div>
+        <div v-for="(__, subConfigKey) in userConfig[configKey]" :key="subConfigKey" flex items-center>
+          <div mr-2 op70>
+            {{ subConfigKey }}:
+          </div>
+          <input
+            v-model="userConfig[configKey][subConfigKey]"
+            text-base outline-none py-1 px-4 bg-transparent border rounded border-base
+          >
+          <Icon v-show="userConfig[configKey][subConfigKey]" icon="carbon:close" class="text-lg -ml-6 opacity-60" @click="userConfig[configKey][subConfigKey] = ''" />
+        </div>
+      </div>
+    </div>
+  </WithNavbar>
+</template>
diff --git a/src/store/localstorage.ts b/src/store/localstorage.ts
index 9154b1c9..47e54765 100644
--- a/src/store/localstorage.ts
+++ b/src/store/localstorage.ts
@@ -1,5 +1,6 @@
 import type { IdCase } from '../utils/case'
 import { idCases } from '../utils/case'
+import { defaultConfig } from '../utils/config'
 
 const RECENT_CAPACITY = 10
 
@@ -15,6 +16,7 @@ export const recentIds = useStorage<string[]>('icones-recent-collections', [])
 export const bags = useStorage<string[]>('icones-bags', [])
 export const activeMode = useStorage<ActiveMode>('active-mode', 'normal')
 export const preferredCase = useStorage<IdCase>('icones-preferfed-case', 'iconify')
+export const userConfig = useStorage('icones-config', defaultConfig)
 
 export function getTransformedId(icon: string) {
   return idCases[preferredCase.value]?.(icon) || icon
diff --git a/src/utils/config.ts b/src/utils/config.ts
new file mode 100644
index 00000000..3f94cd61
--- /dev/null
+++ b/src/utils/config.ts
@@ -0,0 +1,5 @@
+export const defaultConfig = {
+  'Name copying mode': {
+    prefix: '',
+  },
+}
diff --git a/src/utils/copy.ts b/src/utils/copy.ts
new file mode 100644
index 00000000..3cb2ea4b
--- /dev/null
+++ b/src/utils/copy.ts
@@ -0,0 +1,6 @@
+import copyText from 'copy-text-to-clipboard'
+import { userConfig } from '../store'
+
+export function copyName(icon: string) {
+  return copyText(userConfig.value['Name copying mode'].prefix + icon)
+}