Track user preferred layout

Fixes #166

Author: UnsignedArduino

src/components/Analytics/specific.ts

@@ -1,3 +1,5 @@
+import { ListLayout } from "@/components/AwesomeArcadeList/listLayout";
+
 export namespace AnalyticEvents {
   export function sendAwesomeClick(type: "extension" | "tool", repo: string) {
     window.gtag("event", "click_awesome", {
@@ -36,7 +38,12 @@ export namespace AnalyticEvents {
     theme: "light" | "dark" | "auto light" | "auto dark",
   ) {
     // https://ithoughthecamewithyou.com/post/user-scoped-custom-dimensions-in-google-analytics-4-using-gtag
-    // console.log(`Setting user preferred theme to ${theme}`);
+    console.log(`Setting user preferred theme to ${theme}`);
     window.gtag("set", "user_properties", { theme: theme });
   }
+
+  export function setUserPreferredLayout(layout: ListLayout) {
+    console.log(`Setting user preferred layout to ${layout}`);
+    window.gtag("set", "user_properties", { layout: layout });
+  }
 }

src/components/AwesomeArcadeList/listLayout.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { AnalyticEvents } from "@/components/Analytics/specific";
 
 const ListLayouts = ["masonry", "grid", "github"] as const;
 export type ListLayout = (typeof ListLayouts)[number];
@@ -28,12 +29,10 @@ export default function NavbarDropdownListLayoutPicker({
   const [layout, setLayout] = React.useState<ListLayout>("masonry");
 
   React.useEffect(() => {
-    const l = window.localStorage.getItem("listLayout");
-    if (l) {
-      setLayout(l as ListLayout);
-    } else {
-      setLayout("masonry");
-    }
+    const l = (window.localStorage.getItem("listLayout") ??
+      "masonry") as ListLayout;
+    setLayout(l);
+    AnalyticEvents.setUserPreferredLayout(l);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);