feat(feed): add action icons

Author: VChet

src/assets/global.scss

@@ -118,7 +118,6 @@ svg {
 .tabler-icon {
   width: 1.2em;
   height: 1.2em;
-  stroke-width: 2;
 }
 a {
   color: inherit;

src/pages/feed.vue

@@ -4,8 +4,9 @@
       No recent events
     </span>
     <ul v-else>
-      <li v-for="{ date, username, action, repo, id, eventUrl } in events" :key="id">
-        <time>{{ date }}</time>:
+      <li v-for="{ date, type, username, action, repo, id, eventUrl } in events" :key="id">
+        <time>{{ date }}:</time>
+        <component :is="getIconComponent(type)" :style="composeIconStyle(action)" class="user-feed__icon" />
         <a
           :href="`https://github.com/${username}`"
           target="_blank"
@@ -29,9 +30,59 @@
   </section>
 </template>
 <script setup lang="ts">
-import { useEventsStore } from "@/store/events";
+import type { CSSProperties } from "vue";
+import {
+  IconCalendarEvent,
+  IconCircleDot,
+  IconEye,
+  IconGitFork,
+  IconGitPullRequest,
+  IconStar,
+  IconTag,
+  IconUser,
+  type Icon
+} from "@tabler/icons-vue";
+import { useEventsStore, type FeedEvent } from "@/store/events";
 
 const { events, amount } = useEventsStore();
+
+function getIconComponent(type: FeedEvent["type"]): Icon {
+  switch (type) {
+    case "ForkEvent": return IconGitFork;
+    case "IssuesEvent": return IconCircleDot;
+    case "MemberEvent": return IconUser;
+    case "PublicEvent": return IconEye;
+    case "PullRequestEvent": return IconGitPullRequest;
+    case "ReleaseEvent": return IconTag;
+    case "WatchEvent": return IconStar;
+    default: return IconCalendarEvent;
+  }
+}
+function getIconColor(action: FeedEvent["action"]): string | null {
+  switch (action) {
+    case "opened issue":
+    case "opened pull request":
+    case "published release":
+      return "#3fb950"; // green
+    case "merged pull request":
+      return "#ab7df8"; // purple
+    case "closed issue":
+    case "closed pull request":
+      return "#f85149"; // red
+    case "made public":
+    case "starred":
+      return "#e3b341"; // yellow
+    case "forked":
+    case "joined":
+      return "#9198a1"; // gray
+    default:
+      return null;
+  }
+}
+function composeIconStyle(action: FeedEvent["action"]): CSSProperties | null {
+  const color = getIconColor(action);
+  return color ? { stroke: color } : null;
+}
 </script>
 <style lang="scss">
 .user-feed {
@@ -50,5 +101,11 @@ const { events, amount } = useEventsStore();
       }
     }
   }
+  &__icon {
+    width: 1rem;
+    height: 1rem;
+    margin-inline: .25rem;
+    vertical-align: bottom;
+  }
 }
 </style>

src/store/events.ts

@@ -26,10 +26,10 @@ function getActionString({ type, payload }: RawEvent): string {
   switch (type) {
     case "ForkEvent": return "forked";
     case "IssuesEvent": return `${payload.action} issue`;
-    case "ReleaseEvent": return `${payload.action} release`;
     case "MemberEvent": return "joined";
     case "PublicEvent": return "made public";
     case "PullRequestEvent": return `${payload.action} pull request`;
+    case "ReleaseEvent": return `${payload.action} release`;
     case "WatchEvent": return "starred";
     default: return type ?? "[unknown action]";
   }
@@ -56,12 +56,13 @@ function composeEventUrl(event: RawEvent): string | null {
   return null;
 }
 
-interface FeedEvent {
-  id: string
+export interface FeedEvent {
+  id: RawEvent["id"]
+  type: RawEvent["type"]
+  repo: RawEvent["repo"]["name"]
   date: string
   username: string
   action: string
-  repo: string
   eventUrl?: string | null
 }
 
@@ -98,10 +99,11 @@ export const useEventsStore = createGlobalState(() => {
       ) { return acc; }
       const feedEvent: FeedEvent = {
         id: event.id,
+        type: event.type,
+        repo: event.repo.name,
         date: dayjs(event.created_at).format("DD MMMM HH:mm"),
         username: event.actor.display_login ?? event.actor.login,
         action: getActionString(event),
-        repo: event.repo.name,
         eventUrl: composeEventUrl(event)
       };
       acc.push(feedEvent);