[PATCH Website 1/2] feat: Add local storage caching for org members and user info

[PATCH Website 1/2] feat: Add local storage caching for org members and user info

[Memet Zx]

This commit implements local storage caching for organization members
and user information. This will improve performance by reducing the
number of API calls required to fetch this data, providing a smoother
user experience.

Signed-off-by: Memet Zx <zxce3@gnuweeb.org>
---
 index.html | 86 ++++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 64 insertions(+), 22 deletions(-)

diff --git a/index.html b/index.html
index 5c6eef3..7527267 100644
--- a/index.html
+++ b/index.html
@@ -331,33 +331,75 @@
           return 0;
         });
 
+        localStorage.setItem('orgMembers', JSON.stringify(data));
         return data;
       }
 
+      async function getUserInfo(login) {
+        const response = await fetch(`https://api.github.com/users/${login}`);
+        const data = await response.json();
+
+        localStorage.setItem(`userInfo_${login}`, JSON.stringify(data));
+
+        return data;
+      }
+
+      function getCachedOrgMembers() {
+        const cachedData = localStorage.getItem('orgMembers');
+        return cachedData ? JSON.parse(cachedData) : null;
+      }
+
+      function getCachedUserInfo(login) {
+        const cachedData = localStorage.getItem(`userInfo_${login}`);
+        return cachedData ? JSON.parse(cachedData) : null;
+      }
+
       async function renderMemberList() {
-        const membersData = await getOrgMembers();
-        const memberList = document.getElementById("member-list");
-
-        membersData.forEach(e => {
-          const userAnchorEl = document.createElement("a");
-          userAnchorEl.href = e.html_url;
-          userAnchorEl.classList.add(
-            "flex", "items-center", "space-x-3",
-            "p-1", "rounded-lg", "hover:bg-neutral-800"
-          );
+        try {
+          let membersData = getCachedOrgMembers();
+          if (!membersData) {
+            membersData = await getOrgMembers();
+          }
 
-          const userImgEl = document.createElement("img");
-          userImgEl.src = e.avatar_url;
-          userImgEl.alt = `${e.login} | Organization Member`;
-          userImgEl.classList.add("rounded-full", "w-10");
-
-          const usernameDivEl = document.createElement("div");
-          usernameDivEl.classList.add("truncate", "text-sky-500");
-          usernameDivEl.innerText = `@${e.login}`;
-          userAnchorEl.appendChild(userImgEl);
-          userAnchorEl.appendChild(usernameDivEl);
-          memberList.appendChild(userAnchorEl);
-        });
+          const memberList = document.getElementById("member-list");
+
+          for (const member of membersData) {
+            const userInfo = getCachedUserInfo(member.login) || await getUserInfo(member.login);
+
+            const userAnchorEl = document.createElement("a");
+            userAnchorEl.href = userInfo.html_url;
+            userAnchorEl.classList.add(
+              "flex", "items-center", "space-x-3",
+              "p-1", "rounded-lg", "hover:bg-neutral-800"
+            );
+
+            const userImgEl = document.createElement("img");
+            userImgEl.src = userInfo.avatar_url;
+            userImgEl.alt = `${userInfo.login} | Organization Member`;
+            userImgEl.classList.add("rounded-full", "w-10");
+
+            const infoContainer = document.createElement("div");
+            infoContainer.classList.add("flex", "flex-col", "text-left");
+
+            const usernameDivEl = document.createElement("div");
+            usernameDivEl.classList.add("truncate", "text-sky-500");
+            usernameDivEl.innerText = `${userInfo.login}`;
+
+            const nameDivEl = document.createElement("div");
+            nameDivEl.classList.add("text-gray-500");
+            nameDivEl.innerText = userInfo.name || ""; // Display name if available
+
+            infoContainer.appendChild(usernameDivEl);
+            infoContainer.appendChild(nameDivEl);
+
+            userAnchorEl.appendChild(userImgEl);
+            userAnchorEl.appendChild(infoContainer);
+
+            memberList.appendChild(userAnchorEl);
+          }
+        } catch (error) {
+          console.error(error);
+        }
       }
 
       async function getRecentMessages() {

base-commit: 470d43b7b80e5db207616200e069135c20b3d5ee
-- 
Memet Zx

[PATCH Website 2/2] style: Add custom styling for scrollbars in chat interface

[Memet Zx]

This commit introduces custom styling for scrollbars using CSS. The
scrollbars now have a width of 6px, a dark background color for the
thumb (#718096), and a light background color for the track (#CBD5E0).
This enhances the visual appearance of the interface.

Signed-off-by: Memet Zx <zxce3@gnuweeb.org>
---
 style.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/style.css b/style.css
index 19d1659..2bf4cea 100644
--- a/style.css
+++ b/style.css
@@ -3,6 +3,17 @@
 @tailwind utilities;
 
 
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #718096;
+}
+
+::-webkit-scrollbar-track {
+  background-color: #CBD5E0;
+}
 .chat {
   @apply grid gap-x-3 py-1
 }
-- 
Memet Zx