v5.12 (#181)

* Update package.json

* sort by last edited

* nits

* fix side panel width

* update seed to animated gif

* initial gif setupupdate strings

* add emoji picker

* menu transition

* fake navigating back

* filename

* update

* give icons names

* nit

* file name prefix functionality

_locales/en/messages.json

@@ -36,10 +36,10 @@
     "message": "Try changing your filter, search, or view settings to display SVGs"
   },
   "review_title": {
-    "message": "Finding SVG Gobbler useful?"
+    "message": "Please leave a review"
   },
   "review_desc": {
-    "message": "Please consider leaving a review to help others discover it."
+    "message": "SVG Gobbler is free and open-source. Help others discover it."
   },
   "review_primary_action": {
     "message": "Review"
@@ -96,7 +96,7 @@
     "message": "File type"
   },
   "export_export_filename": {
-    "message": "Export file name"
+    "message": "Zip file name"
   },
   "export_filename_prefix": {
     "message": "File prefix"
@@ -402,7 +402,7 @@
     "message": "Sort"
   },
   "topbar_sort_last_asc": {
-    "message": "Last edited: most recent"
+    "message": "Last edited: recent"
   },
   "topbar_sort_last_desc": {
     "message": "Last edited: oldest"
@@ -766,5 +766,14 @@
   },
   "zoom_out": {
     "message": "Zoom out"
+  },
+  "name": {
+    "message": "Name"
+  },
+  "export_prefix_names": {
+    "message": "Prefix file names"
+  },
+  "export_prefix_names_tooltip": {
+    "message": "Override associated icon names with an enumerated prefix"
   }
 }

_locales/es/messages.json

@@ -766,5 +766,8 @@
   },
   "zoom_out": {
     "message": "Alejar"
+  },
+  "name": {
+    "message": "Nombre"
   }
 }

_locales/fr/messages.json

@@ -766,5 +766,8 @@
   },
   "zoom_out": {
     "message": "Zoom arrière"
+  },
+  "name": {
+    "message": "Nom"
   }
 }

_locales/hi/messages.json

@@ -766,5 +766,8 @@
   },
   "zoom_out": {
     "message": "ज़ूम आउट"
+  },
+  "name": {
+    "message": "नाम"
   }
 }

_locales/ru/messages.json

@@ -766,5 +766,8 @@
   },
   "zoom_out": {
     "message": "Уменьшить"
+  },
+  "name": {
+    "message": "Имя"
   }
 }

_locales/zh_CN/messages.json

@@ -766,5 +766,8 @@
   },
   "zoom_out": {
     "message": "缩小"
+  },
+  "name": {
+    "message": "名称"
   }
 }

background.ts

@@ -106,20 +106,6 @@ class Background {
           '64': 'assets/dev/64.png',
         },
       })
-    } else {
-      // The extension is running as a packed (installed) extension
-      chrome.action.setIcon({
-        path: {
-          '16': 'assets/prod/16.png',
-          '24': 'assets/prod/24.png',
-          '32': 'assets/prod/32.png',
-          '48': 'assets/prod/48.png',
-          '64': 'assets/prod/64.png',
-          '128': 'assets/prod/128.png',
-          '256': 'assets/prod/256.png',
-          '300': 'assets/prod/300.png',
-        },
-      })
     }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-gobbler",
-  "version": "5.11.0",
+  "version": "5.12.0",
   "description": "Find, optimize, organize, edit, and export your SVGs",
   "license": "apache-2.0",
   "author": "Ross Moody<[email protected]>",
@@ -15,13 +15,16 @@
     "@codemirror/lang-html": "^6.4.6",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/view": "^6.27.0",
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "@headlessui/react": "^1.7.17",
     "@headlessui/tailwindcss": "^0.2.0",
     "@heroicons/react": "^2.0.18",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@uiw/react-codemirror": "^4.21.20",
     "clsx": "^2.0.0",
+    "emoji-mart": "^5.6.0",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "lz-string": "^1.5.0",
@@ -33,7 +36,7 @@
     "react-draggable": "^4.4.6",
     "react-dropzone": "^14.2.3",
     "react-router-dom": "^6.18.0",
-    "svg-gobbler-scripts": "^1.3.1",
+    "svg-gobbler-scripts": "^1.5.6",
     "svgo": "^3.0.3"
   },
   "devDependencies": {

src/constants/transitions.ts

@@ -0,0 +1,18 @@
+export const transitions = {
+  menu: {
+    enter: 'transition ease-out duration-100',
+    enterFrom: 'transform opacity-0 scale-95',
+    enterTo: 'transform opacity-100 scale-100',
+    leave: 'transition ease-in duration-75',
+    leaveFrom: 'transform opacity-100 scale-100',
+    leaveTo: 'transform opacity-0 scale-95',
+  },
+  popover: {
+    enter: 'transition ease-out duration-100',
+    enterFrom: 'transform opacity-0 scale-95',
+    enterTo: 'transform opacity-100 scale-100',
+    leave: 'transition ease-in duration-75',
+    leaveFrom: 'transform opacity-100 scale-100',
+    leaveTo: 'transform opacity-0 scale-95',
+  },
+}

src/css/components.css

@@ -1,5 +1,10 @@
 /* Components */
 
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 .label {
   @apply mb-1 block text-sm font-medium text-gray-900 dark:text-white;
 }

src/hooks/use-navigation.ts

@@ -0,0 +1,23 @@
+/**
+ * SVG Gobbler runs in a webview, so we can't use the browser's history to navigate back.
+ * Instead, we use React Router's `useNavigate` hook to navigate back to the previous page
+ * when CMD and left bracket are pressed.
+ */
+
+import { useNavigate } from 'react-router-dom'
+
+export const useNavigation = () => {
+  const navigate = useNavigate()
+
+  const handleNavigation = (event: KeyboardEvent) => {
+    if (event.metaKey && event.key === '[') {
+      navigate(-1)
+    }
+  }
+
+  window.addEventListener('keydown', handleNavigation)
+
+  return () => {
+    window.removeEventListener('keydown', handleNavigation)
+  }
+}

src/hooks/use-upload.ts

@@ -1,9 +1,8 @@
 import { useRevalidator } from 'react-router-dom'
 import { useCollection } from 'src/providers'
-import { StorageSvg } from 'src/types'
 import { StorageUtils } from 'src/utils/storage-utils'
 import { SvgUtils } from 'src/utils/svg-utils'
-import { Inline } from 'svg-gobbler-scripts'
+import { Inline, StorageSvg } from 'svg-gobbler-scripts'
 
 /**
  * Upload a given array of svg strings to chrome storage, update the
@@ -32,7 +31,7 @@ export const useUpload = () => {
     await StorageUtils.setPageData(collectionId, pageData)
 
     // Update the collection context state
-    const newSvgClasses = newData.map((item) => new Inline(item.svg, item.id))
+    const newSvgClasses = newData.map((item) => new Inline(item.svg, item.id, item.lastEdited))
     dispatch({ payload: [...state.data, ...newSvgClasses], type: 'set-data' })
     dispatch({ type: 'process-data' })
     revalidate()

src/layout/collection/card/card-actions/action-menu.tsx

@@ -9,6 +9,7 @@ import {
 import clsx from 'clsx'
 import { Fragment } from 'react/jsx-runtime'
 import { IconButton } from 'src/components'
+import { transitions } from 'src/constants/transitions'
 import { loc } from 'src/utils/i18n'
 
 import { CardData } from '..'
@@ -26,22 +27,14 @@ export const CardActionMenu = ({ data }: CardData) => {
       )}
     >
       <Menu as="div" className="relative">
-        <Menu.Button>
+        <Menu.Button as="div">
           <label className="flex cursor-pointer items-center justify-center rounded-lg p-2 group-hover/select:bg-gray-100/70 group-hover/select:dark:bg-gray-800">
-            <IconButton size="xs" variant="secondary">
-              <ChevronDownIcon aria-hidden="true" className="h-4 w-4" />
+            <IconButton className="rounded-md" size="xs" variant="secondary">
+              <ChevronDownIcon aria-hidden="true" className="h-3 w-3" />
             </IconButton>
           </label>
         </Menu.Button>
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
+        <Transition as={Fragment} {...transitions.menu}>
           <Menu.Items
             className={clsx(
               'absolute z-10 w-40 origin-top-left rounded-lg p-1',

src/layout/collection/card/card-actions/use-card-actions.ts

@@ -13,7 +13,7 @@ export const useCardActions = (data: Svg) => {
   const { revalidate } = useRevalidator()
 
   async function duplicateItem() {
-    const svgDuplicate = new Inline(data.originalString, nanoid())
+    const svgDuplicate = new Inline(data.originalString, nanoid(), new Date().toISOString())
     const newData = [svgDuplicate, ...state.data]
     const pageData = await StorageUtils.getPageData(state.collectionId)
     StorageUtils.setPageData(state.collectionId, {