feat(FeedView): track more events, update styles

Author: VChet

src/store/events.ts

@@ -8,13 +8,22 @@ import type { RepoEventsResponse } from "@/types/repo";
 
 type RawEvent = RepoEventsResponse["data"][number];
 
-const TARGET_EVENTS = ["WatchEvent", "ForkEvent"] as const;
+const TARGET_EVENTS = [
+  "ForkEvent",
+  "IssuesEvent",
+  "MemberEvent",
+  "PublicEvent",
+  "WatchEvent"
+] as const;
 
-function getActionString(action: RawEvent["type"]): string {
-  switch (action) {
-    case "WatchEvent": return "starred";
+function getActionString({ type, payload }: RawEvent): string {
+  switch (type) {
     case "ForkEvent": return "forked";
-    default: return action ?? "[unknown action]";
+    case "IssuesEvent": return `${payload.action} issue #${payload.issue!.number} "${payload.issue!.title}" in`;
+    case "MemberEvent": return "joined";
+    case "PublicEvent": return "made public";
+    case "WatchEvent": return "starred";
+    default: return type ?? "[unknown action]";
   }
 }
 
@@ -50,16 +59,15 @@ export const useEventsStore = createSharedComposable(() => {
   const { settings } = useSettingsStore();
   const isFeedAvailable = computed(() => !!settings.value.authToken && !!settings.value.username);
 
-  function formatEvents(acc: FeedEvent[], { id, type, repo, actor, created_at }: RawEvent): FeedEvent[] {
-    const isTargetEvent = TARGET_EVENTS.some((targetType) => targetType === type);
-    const isUserRelated = repo.name.startsWith(settings.value.username);
-    if (isTargetEvent && isUserRelated) {
+  function formatEvents(acc: FeedEvent[], event: RawEvent): FeedEvent[] {
+    const isTargetEvent = TARGET_EVENTS.some((targetType) => targetType === event.type);
+    if (isTargetEvent) {
       acc.push({
-        id,
-        date: dayjs(created_at).format("DD.MM.YY HH:mm"),
-        username: actor.display_login ?? actor.login,
-        action: getActionString(type),
-        repo: repo.name
+        id: event.id,
+        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
       });
     }
     return acc;

src/views/FeedView.vue

@@ -5,7 +5,7 @@
     </span>
     <ul v-else>
       <li v-for="{ date, username, action, repo, id } in events" :key="id">
-        {{ date }}:
+        <time>{{ date }}</time>:
         <a :href="`https://github.com/${username}`">{{ username }}</a>
         {{ action }}
         <a :href="`https://github.com/${repo}`">{{ repo }}</a>
@@ -24,9 +24,15 @@ const { events, amount } = useEventsStore();
     display: grid;
     gap: 0.5rem;
     padding-left: 1.25rem;
-    list-style: disc;
-    li a {
-      font-weight: bold;
+    list-style-type: circle;
+    li {
+      a {
+        font-weight: bold;
+      }
+      time {
+        font-size: 0.875rem;
+        color: var(--accent);
+      }
     }
   }
 }