From de9edf8e7ea261ae76011b43c57c83ec70cde22a Mon Sep 17 00:00:00 2001
From: "Lucian I. Last" <li@last.nl>
Date: Wed, 1 May 2024 10:15:50 +0200
Subject: [PATCH] Complete isMe addressListItem

---
 .../AddressList/AddressListItem.tsx           | 111 ++++++++++--------
 app/src/pages/AddressList.tsx                 |  23 ++--
 app/src/tailwind.css                          |  11 ++
 3 files changed, 90 insertions(+), 55 deletions(-)

diff --git a/app/src/components/AddressList/AddressListItem.tsx b/app/src/components/AddressList/AddressListItem.tsx
index 6e483b2c2..46f961ee7 100644
--- a/app/src/components/AddressList/AddressListItem.tsx
+++ b/app/src/components/AddressList/AddressListItem.tsx
@@ -1,6 +1,6 @@
 import { IonItem, IonText, IonIcon } from "@ionic/react";
 import { t } from "i18next";
-import { shield, pauseCircleSharp } from "ionicons/icons";
+import { shield, pauseCircleSharp, bag } from "ionicons/icons";
 import { Bag, User } from "../../api/types";
 import BagSVG from "../Bags/Svg";
 
@@ -30,64 +30,81 @@ export default function AddressListItem({
     <IonItem
       lines="full"
       routerLink={routerLink}
-      color={isUserPaused ? "light" : undefined}
+      color={isMe ? "primary" : isUserPaused ? "light" : undefined}
+      id={"ali-" + user.uid}
     >
-      <IonText className="ion-text-ellipsis tw-my-1.5">
-        <h5
-          className={`ion-no-margin ${
-            isMe ? "tw-text-primary" : isUserPaused ? "tw-text-medium" : ""
-          }`}
-        >
-          {user.name}
-
-          {isHost ? (
-            <IonIcon
-              icon={shield}
-              color="medium"
-              className="tw-w-4 tw-h-4 tw-m-0 tw-ml-[5px] tw-align-text-top"
-            />
-          ) : null}
-        </h5>
-        <span className="tw-opacity-60">
-          {isUserPaused ? (
-            isChainAdmin ? (
-              <small>{user.address}</small>
-            ) : null
-          ) : isAddressPrivate ? (
-            <small>&nbsp;</small>
-          ) : (
-            <small>{user.address}</small>
-          )}
-        </span>
-      </IonText>
       <IonText
         slot="start"
-        color="medium"
-        className="!tw-font-bold tw-w-[30px] tw-whitespace-nowrap"
+        color={isMe ? "light" : "medium"}
+        className="!tw-font-bold tw-w-10 tw-mr-2.5 -tw-ml-2 tw-text-right tw-whitespace-nowrap"
       >
+        {isHost ? (
+          <IonIcon
+            icon={shield}
+            color={isMe ? undefined : "medium"}
+            className="tw-absolute tw-top-1 tw-left-1 tw-w-4 tw-h-4 tw-m-0"
+          />
+        ) : null}
         {isUserPaused ? (
           <IonIcon
             icon={pauseCircleSharp}
-            color="medium"
-            className="tw-w-6 tw-h-6 tw-m-0 tw-align-text-top "
+            color={isMe ? "light" : "medium"}
+            className="tw-w-6 tw-h-6 tw-m-0 tw-align-text-top"
           />
         ) : (
-          <span>{"#" + number}</span>
+          <span>
+            <small>#</small>
+            {number}
+          </span>
         )}
       </IonText>
-      <div
-        slot="end"
-        style={{
-          width: bags.length < 4 ? 0 : 20 * Math.floor(bags.length / 2),
-          paddingBottom: bags.length < 4 ? 20 : 0,
-        }}
-        className="tw-flex tw-flex-col tw-h-10 tw-flex-wrap-reverse tw-items-end"
-      >
-        {bags.map((b) => (
-          <div className="tw-w-4 tw-h-4" key={b.id}>
-            <BagSVG bag={{ number: "", color: b.color }} isList />
+      <div className="tw-flex tw-flex-row tw-w-full">
+        <div className="tw-flex-grow tw-flex tw-flex-col tw-justify-center ion-text-ellipsis tw-my-1.5">
+          <h5
+            className={`ion-no-margin ${
+              isMe ? "tw-text-light" : isUserPaused ? "tw-text-medium" : ""
+            }`}
+          >
+            {user.name}
+          </h5>
+          <span
+            className={"tw-inline-block tw-mt-0.5 ion-text-ellipsis tw-max-w-[220px] tw-text-xs ".concat(
+              isMe ? "tw-text-light" : "tw-opacity-60",
+            )}
+          >
+            {isUserPaused ? (
+              isChainAdmin ? (
+                <span>{user.address}</span>
+              ) : null
+            ) : isAddressPrivate ? (
+              <span>&nbsp;</span>
+            ) : (
+              <span>{user.address}</span>
+            )}
+          </span>
+        </div>
+        <div className="tw-flex tw-justify-end tw-items-center">
+          <div
+            dir="rtl"
+            className={"tw-grid tw-grid-rows-2 tw-gap-1 tw-mx-0.5"}
+            style={{
+              gridTemplateColumns: `repeat(${Math.ceil(
+                bags.length / 2,
+              )}, minmax(0, 1fr))`,
+            }}
+          >
+            {bags.map((b) => (
+              <div
+                className={"tw-w-4 tw-h-4 tw-mb-0.5".concat(
+                  isMe ? " tw-shadow-bags" : "",
+                )}
+                key={b.id}
+              >
+                <BagSVG bag={{ number: "", color: b.color }} isList />
+              </div>
+            ))}
           </div>
-        ))}
+        </div>
       </div>
     </IonItem>
   );
diff --git a/app/src/pages/AddressList.tsx b/app/src/pages/AddressList.tsx
index 27dbbbdff..ec99293e0 100644
--- a/app/src/pages/AddressList.tsx
+++ b/app/src/pages/AddressList.tsx
@@ -15,7 +15,7 @@ import {
   IonTitle,
   IonToolbar,
 } from "@ionic/react";
-import { useContext, useMemo, useRef, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { StoreContext } from "../stores/Store";
 import { openOutline, searchOutline } from "ionicons/icons";
@@ -59,6 +59,16 @@ export default function AddressList() {
 
   const [search, setSearch] = useState("");
   const slowSearch = useDebounce(search, 500);
+
+  useEffect(() => {
+    if (authUser) {
+      const el = document.querySelector("ali-" + authUser.uid);
+      el?.scrollIntoView({
+        block: "center",
+      });
+    }
+  }, []);
+
   const routeListItems = useMemo(() => {
     const routeLength = route.length;
     if (!chain || routeLength === 0) return [];
@@ -68,13 +78,10 @@ export default function AddressList() {
     }
     let topRouteIndex = 0;
     if (routeListView === "dynamic") {
-      const routePrivacy = chain.route_privacy || 2;
-      if (routePrivacy * 2 < routeLength) {
-        topRouteIndex = wrapIndex(
-          meRouteIndex - (routePrivacy <= 3 ? routePrivacy : 3),
-          routeLength,
-        );
-      }
+      topRouteIndex =
+        routeLength < 6
+          ? routeLength - 1
+          : wrapIndex(meRouteIndex - 6, routeLength);
       console.log("topRouteIndex", topRouteIndex);
     }
 
diff --git a/app/src/tailwind.css b/app/src/tailwind.css
index 3d58461d0..5954373cf 100644
--- a/app/src/tailwind.css
+++ b/app/src/tailwind.css
@@ -81,6 +81,11 @@
       rgba(255, 213, 52, 1) 40px
     );
   }
+  .tw-shadow-bags {
+    box-shadow: 0px 0px 3px 2px #fff;
+    border-radius: 5px;
+    background-color: #fff;
+  }
 }
 
 ion-radio::part(container) {
@@ -106,3 +111,9 @@ ion-radio.radio-checked::part(mark) {
 
   transform: rotate(45deg);
 }
+
+ion-item.ion-color-primary::part(detail-icon) {
+  --detail-icon-color: var(--ion-color-light) !important;
+  --detail-icon-opacity: 0.8;
+  /* display: none !important; */
+}