cleanup

ldeveber · May 26, 2024 · 004ca69 · 004ca69
1 parent add1814
commit 004ca69
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 32 deletions.
diff --git a/src/components/list/ListItem.tsx b/src/components/list/ListItem.tsx
@@ -20,21 +20,19 @@ export function Loading({ children }: { children: ReactNode }) {
   return <StyledListItem sx={{ px: 0, gap: 2 }}>{children}</StyledListItem>;
 }
 
-export default forwardRef(function ListItem({
-  children,
-  primaryActionTitle,
-  onPrimaryAction,
-  secondaryAction,
-  selected,
+export default forwardRef<
+  HTMLLIElement,
+  {
+    children: ListItemButtonProps["children"];
+    primaryActionTitle?: ListItemButtonProps["title"];
+    onPrimaryAction?: ListItemButtonProps["onClick"];
+    secondaryAction?: ListItemProps["secondaryAction"];
+    selected?: ListItemButtonProps["selected"];
+  }
+>(function ListItem(
+  { children, primaryActionTitle, onPrimaryAction, secondaryAction, selected },
   ref,
-}: {
-  children: ListItemButtonProps["children"];
-  primaryActionTitle?: ListItemButtonProps["title"];
-  onPrimaryAction?: ListItemButtonProps["onClick"];
-  secondaryAction?: ListItemProps["secondaryAction"];
-  selected?: ListItemButtonProps["selected"];
-  ref: React.Ref<HTMLLIElement>;
-}) {
+) {
   return (
     <StyledListItem ref={ref} secondaryAction={secondaryAction} sx={{ px: 0 }}>
       <ListItemButton selected={selected} onClick={onPrimaryAction} title={primaryActionTitle}>

diff --git a/src/tabViews/window/TabGroupView.tsx b/src/tabViews/window/TabGroupView.tsx
@@ -5,9 +5,11 @@ import TabView from "./TabView";
 export default function TabGroupView({
   group,
   tabs,
+  windowFocused = false,
 }: {
   readonly group: chrome.tabGroups.TabGroup;
   readonly tabs: chrome.tabs.Tab[];
+  readonly windowFocused?: boolean;
 }) {
   if (tabs.length === 0) {
     return null;
@@ -17,15 +19,9 @@ export default function TabGroupView({
   const backgroundColor = colors[group.color][500];
 
   return (
-    <ListItemGroup
-      title={title}
-      backgroundColor={backgroundColor}
-      count={tabs.length}
-      indented
-      initOpen
-    >
+    <ListItemGroup title={title} backgroundColor={backgroundColor} indented initOpen>
       {tabs.map((tab) => (
-        <TabView key={tab.id} tab={tab} />
+        <TabView key={tab.id} tab={tab} windowFocused={windowFocused} />
       ))}
     </ListItemGroup>
   );

diff --git a/src/tabViews/window/TabView.tsx b/src/tabViews/window/TabView.tsx
@@ -81,12 +81,18 @@ export function Loading() {
   );
 }
 
-export default function TabView({ tab }: { readonly tab: chrome.tabs.Tab }) {
+export default function TabView({
+  tab,
+  windowFocused = false,
+}: {
+  readonly tab: chrome.tabs.Tab;
+  readonly windowFocused?: boolean;
+}) {
   const search = useSearch();
   const filters = useFilters();
   const selected = useSelectedTabs();
   const dispatchSelectState = useSelectedTabsDispatch();
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLLIElement>(null);
 
   const goToTab = async (tab: chrome.tabs.Tab) => {
     if (!tab.id) {
@@ -106,10 +112,8 @@ export default function TabView({ tab }: { readonly tab: chrome.tabs.Tab }) {
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      const actWin = ref.current?.querySelector('[data-w-act="true"]');
-      const actTab = actWin?.querySelector('[data-t-act="true"]');
-      if (actTab) {
-        actTab.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
+      if (windowFocused && tab.active && ref.current) {
+        ref.current.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
       }
     }, 800);
 
@@ -135,7 +139,6 @@ export default function TabView({ tab }: { readonly tab: chrome.tabs.Tab }) {
           <Checkbox edge="end" onChange={onSelection} checked={selected.includes(tab.id)} />
         ) : null
       }
-      data-t-act={tab.active}
     >
       <ListItemFavicon url={tab.url} faded={tab.discarded || tab.status === "unloaded"} />
       <ListItemText

diff --git a/src/tabViews/window/WindowView.tsx b/src/tabViews/window/WindowView.tsx
@@ -86,14 +86,20 @@ export default function WindowView({
       initOpen
       cardTitle={`${tabs.length} Tabs`}
       titleTypographyProps={{ variant: "subtitle1" }}
-      data-w-act={win.focused}
     >
       {tabList.map(({ id, tab, group }) => {
         if (group) {
-          return <TabGroupView key={id} group={group.tabGroup} tabs={group.tabs} />;
+          return (
+            <TabGroupView
+              key={id}
+              group={group.tabGroup}
+              tabs={group.tabs}
+              windowFocused={win.focused}
+            />
+          );
         }
         if (tab) {
-          return <TabView key={id} tab={tab} />;
+          return <TabView key={id} tab={tab} windowFocused={win.focused} />;
         }
         return null;
       })}