feat(ui): add callouts for new and updated icons

src/components/App/App.css

@@ -114,3 +114,16 @@ a.main-link:after {
 a.main-link:hover:after {
   width: 0%;
 }
+
+.badge.new {
+  color: #ff6e60;
+}
+
+.badge.updated {
+  color: #397fff;
+}
+
+.badge {
+  font-size: 24px;
+  line-height: 0.5em;
+}

src/components/IconGrid/IconGrid.tsx

@@ -14,7 +14,15 @@ import TagCloud from "./TagCloud";
 import Notice from "../Notice/Notice";
 import "./IconGrid.css";
 
-const defaultSearchTags = ["*new*", "communication", "editor", "emoji", "maps", "weather"];
+const defaultSearchTags = [
+  "*new*",
+  "*updated*",
+  "communication",
+  "editor",
+  "emoji",
+  "maps",
+  "weather",
+];
 
 type IconGridProps = {};
 

src/components/IconGrid/IconGridItem.tsx

@@ -36,6 +36,8 @@ const IconGridItem: React.FC<IconGridItemProps> = (props) => {
   const { name, Icon } = entry;
   const [open, setOpen] = useRecoilState(iconPreviewOpenAtom);
   const isOpen = open === name;
+  const isNew = entry.tags.includes("*new*");
+  const isUpdated = entry.tags.includes("*updated*");
   const delayRef = useRef<number>(0);
   const offset = useRef({ top: 0, left: 0 });
   const ref = useRef<any>();
@@ -84,11 +86,15 @@ const IconGridItem: React.FC<IconGridItemProps> = (props) => {
         onClick={handleOpen}
       >
         <Icon />
-        <p>{name}</p>
+        <p>
+          {name}
+          {isNew && <span className="badge new">•</span>}
+          {isUpdated && <span className="badge updated">•</span>}
+        </p>
       </motion.div>
-        <AnimatePresence initial={false}>
+      <AnimatePresence initial={false}>
-          {isOpen && <DetailsPanel {...props} />}
+        {isOpen && <DetailsPanel {...props} />}
-        </AnimatePresence>
+      </AnimatePresence>
     </>
   );
 };

src/components/IconGrid/TagCloud.css

@@ -29,4 +29,4 @@ button.tag-button:focus {
 
 .dark {
   color: white;
-}
+}

src/components/IconGrid/TagCloud.tsx

@@ -29,6 +29,8 @@ const TagCloud: React.FC<TagCloudProps> = ({ name, tags, isDark }) => {
           onClick={() => void handleTagClick(tag)}
         >
           <code className={`${isDark ? "dark" : ""}`}>{tag}</code>
+          {tag === "*new*" && <span className="badge new">•</span>}
+          {tag === "*updated*" && <span className="badge updated">•</span>}
         </button>
       ))}
     </div>

src/lib/icons.ts

@@ -1682,6 +1682,7 @@ export const icons: ReadonlyArray<IconEntry> = [
       IconCategory.OBJECTS,
     ],
     tags: [
+      "*updated*",
       "addition",
       "sum",
       "subtraction",
@@ -9189,6 +9190,7 @@ export const icons: ReadonlyArray<IconEntry> = [
       "machinery",
       "mechanical",
       "repairs",
+      "*updated*",
     ],
     Icon: Icons.Wrench,
   },