feat: add config page

src/components/ActionsMenu.vue

@@ -110,6 +110,12 @@ const favorited = computed(() => isFavorited(props.collection.id))
 
 <template>
   <div flex="~ gap3" text-xl items-center>
+    <RouterLink
+      class="non-dragging text-xl mx-3 my-auto"
+      to="/config"
+    >
+      <IconButton icon="carbon:settings" style="padding-bottom: 3px" />
+    </RouterLink>
     <DarkSwitcher />
 
     <button

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) => {

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

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,7 +15,7 @@ export default defineComponent(() => ({
     class="dragging"
     flex="~ gap4 none"
     p4 relative bg-base z-10 border="b base" text-xl
-    :class="$route.path !== '/' ? 'md:hidden' : ''"
+    :class="showNavPages.includes($route.path) ? '' : 'md:hidden'"
   >
     <!-- In Collections -->
     <template v-if="$route.path !== '/'">
@@ -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"
         i-carbon-logo-github icon-button flex-none

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>

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

src/utils/config.ts

@@ -0,0 +1,5 @@
+export const defaultConfig = {
+  'Name copying mode': {
+    prefix: '',
+  },
+}

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)
+}