highlight focused window (#16)

* highlight focused window and various cleanup * .
ldeveber · Jun 16, 2024 · b843d97 · b843d97
1 parent cc478aa
commit b843d97
Show file tree

Hide file tree

Showing 24 changed files with 82 additions and 48 deletions.
diff --git a/src/components/ThemeWrap.tsx b/src/components/ThemeWrap.tsx
@@ -8,7 +8,7 @@ import {
 } from "@mui/material/styles";
 import React, { useEffect, useState } from "react";
 import { DEFAULT_SHADE } from "src/themes";
-import { ColorOptions, Mode, defaultColor } from "src/utils/options";
+import { defaultColor, type ColorOptions, type Mode } from "src/utils/options";
 
 function ModeSwitcher({ themeMode }: { themeMode: Mode }) {
   const { setMode } = useColorScheme();

diff --git a/src/components/layout/Body.tsx b/src/components/layout/Body.tsx
@@ -17,7 +17,6 @@ import Content from "./Content";
 const TabList = styled(MuiTabList)(() => ({
   ".MuiTabs-flexContainer": {
     borderRadius: 40,
-    backgroundColor: "var(--md3-sys-color-surface)",
   },
 }));
 
@@ -49,7 +48,7 @@ const TabPanel = styled(MuiTabPanel)(() => ({
 
 export default function Body() {
   const [tab, setTab] = useState("windows");
-  const handleChange = (event: SyntheticEvent, newValue: string) => {
+  const handleChange = (_e: SyntheticEvent, newValue: string) => {
     setTab(newValue);
   };
 

diff --git a/src/components/layout/ErrorBoundary.tsx b/src/components/layout/ErrorBoundary.tsx
@@ -43,9 +43,9 @@ class ErrorBoundary extends Component<Props, State> {
         <Container>
           <Alert variant="filled" severity="error">
             <AlertTitle>Uh Oh</AlertTitle>
-            {this.state.error.message}
+            {this.state.error?.message}
 
-            {this.state.error.stack && (
+            {this.state.error?.stack && (
               <Paper
                 variant="outlined"
                 sx={{

diff --git a/src/components/list/ListGroupCard.tsx b/src/components/list/ListGroupCard.tsx
@@ -1,7 +1,9 @@
 import ExpandMore from "@mui/icons-material/ExpandMore";
 import Box from "@mui/material/Box";
 import MuiCard, { type CardProps } from "@mui/material/Card";
-import MuiCardActionArea, { type CardActionAreaProps } from "@mui/material/CardActionArea";
+import MuiCardActionArea, {
+  type CardActionAreaProps as MuiCardActionAreaProps,
+} from "@mui/material/CardActionArea";
 import MuiCardContent from "@mui/material/CardContent";
 import MuiCardHeader, {
   type CardHeaderProps as MuiCardHeaderProps,
@@ -16,8 +18,16 @@ const Card = styled(MuiCard)(({ theme }) => ({
   borderRadius: theme.shape.borderRadius * 3,
 }));
 
-const CardActionArea = styled(MuiCardActionArea)(() => ({
+interface CardActionAreaProps extends MuiCardActionAreaProps {
+  selected?: boolean;
+}
+const CardActionArea = styled(MuiCardActionArea, {
+  shouldForwardProp: (prop) => prop !== "selected",
+})<CardActionAreaProps>(({ selected }) => ({
   borderRadius: 22,
+  backgroundColor: selected
+    ? "rgba(var(--mui-palette-primary-mainChannel) / var(--mui-palette-action-selectedOpacity))"
+    : undefined,
   ".MuiCardHeader-action": {
     alignSelf: "auto",
     margin: 0,
@@ -37,13 +47,14 @@ const ExpandIcon = styled(Box)(({ theme }) => ({
 }));
 
 type CardHeaderProps = MuiCardHeaderProps & {
+  selected?: boolean;
   action?: ReactNode;
   onAction?: CardActionAreaProps["onClick"];
 };
-function CardHeader({ action, onAction, ...props }: CardHeaderProps) {
+function CardHeader({ selected, action, onAction, ...props }: CardHeaderProps) {
   if (onAction) {
     return (
-      <CardActionArea onClick={onAction}>
+      <CardActionArea onClick={onAction} selected={selected}>
         <MuiCardHeader {...props} sx={{ py: 1 }} action={action} />
       </CardActionArea>
     );
@@ -67,13 +78,15 @@ type ListGroupCardProps = CardProps & {
   onAction?: CardHeaderProps["onAction"];
   cardTitle?: ReactNode;
   titleTypographyProps?: CardHeaderProps["titleTypographyProps"];
+  selected?: boolean;
 };
 export default function ListGroupCard({
   children,
   collapsible = false,
   initOpen = false,
   elevation = 2,
   cardTitle,
+  selected,
   titleTypographyProps,
   ...props
 }: ListGroupCardProps) {
@@ -93,6 +106,7 @@ export default function ListGroupCard({
             </ExpandIcon>
           ) : null
         }
+        selected={selected}
         title={cardTitle}
         titleTypographyProps={titleTypographyProps}
       />

diff --git a/src/components/list/ListItemFavicon.tsx b/src/components/list/ListItemFavicon.tsx
@@ -13,7 +13,9 @@ function FavIcon({
   readonly faded: boolean;
 }) {
   const favicon = new URL(chrome.runtime.getURL("/_favicon/"));
-  favicon.searchParams.set("pageUrl", url);
+  if (url) {
+    favicon.searchParams.set("pageUrl", url);
+  }
   favicon.searchParams.set("size", "32");
 
   return (
@@ -23,7 +25,7 @@ function FavIcon({
       sx={{
         opacity: faded ? 0.25 : undefined,
         bgcolor: "transparent",
-        color: "var(--md3-palette-divider)",
+        color: "var(--mui-palette-divider)",
         height: FAVICON_SIZE,
         width: FAVICON_SIZE,
       }}

diff --git a/src/components/list/ListItemGroup.tsx b/src/components/list/ListItemGroup.tsx
@@ -48,7 +48,7 @@ export default function ListItemGroup({
       </ListItem>
       <Collapse in={open} timeout="auto" unmountOnExit>
         <List
-          component={indented ? "div" : undefined}
+          component={indented ? "div" : "ul"}
           disablePadding
           dense
           sx={{ pl: indented ? 4 : undefined }}

diff --git a/src/contexts/ChartsTabContext.tsx b/src/contexts/ChartsTabContext.tsx
@@ -1,7 +1,8 @@
+import { PropsWithChildren } from "react";
 import FiltersProvider, { useFilters, useFiltersDispatch } from "./windows/FiltersContext";
 
 export { useFilters, useFiltersDispatch };
 
-export default function ChartsTabProvider({ children }) {
+export default function ChartsTabProvider({ children }: PropsWithChildren) {
   return <FiltersProvider>{children}</FiltersProvider>;
 }
diff --git a/src/contexts/WindowsTabContext.tsx b/src/contexts/WindowsTabContext.tsx
@@ -1,3 +1,4 @@
+import { PropsWithChildren } from "react";
 import FiltersProvider, { useFilters, useFiltersDispatch } from "./windows/FiltersContext";
 import SearchProvider, { useSearch, useSearchDispatch } from "./windows/SearchContext";
 import SelectedTabsProvider, {
@@ -17,7 +18,7 @@ export {
   useSortDispatch,
 };
 
-export default function WindowsTabProvider({ children }) {
+export default function WindowsTabProvider({ children }: PropsWithChildren) {
   return (
     <SortProvider>
       <FiltersProvider>

diff --git a/src/contexts/windows/FiltersContext.tsx b/src/contexts/windows/FiltersContext.tsx
@@ -1,14 +1,14 @@
-import { Dispatch, createContext, useContext, useReducer } from "react";
+import { Dispatch, PropsWithChildren, createContext, useContext, useReducer } from "react";
 import { TAB_PROPERTIES } from "src/utils/chrome";
 
-const FiltersContext = createContext<TAB_PROPERTIES[]>(null);
-const FiltersDispatchContext = createContext<Dispatch<ActionType>>(null);
+const FiltersContext = createContext<TAB_PROPERTIES[]>([]);
+const FiltersDispatchContext = createContext<Dispatch<ActionType>>(() => {});
 
 type ActionType = {
   filters: TAB_PROPERTIES[];
   type: "update" | "reset";
 };
-function filtersReducer(filters: TAB_PROPERTIES[], action: ActionType): TAB_PROPERTIES[] {
+function filtersReducer(_filters: TAB_PROPERTIES[], action: ActionType): TAB_PROPERTIES[] {
   switch (action.type) {
     case "update": {
       return action.filters;
@@ -22,7 +22,7 @@ function filtersReducer(filters: TAB_PROPERTIES[], action: ActionType): TAB_PROP
   }
 }
 
-export default function FiltersProvider({ children }) {
+export default function FiltersProvider({ children }: PropsWithChildren) {
   const [filters, dispatch] = useReducer(filtersReducer, []);
 
   return (

diff --git a/src/contexts/windows/SearchContext.tsx b/src/contexts/windows/SearchContext.tsx
@@ -1,13 +1,13 @@
-import { Dispatch, createContext, useContext, useReducer } from "react";
+import { Dispatch, PropsWithChildren, createContext, useContext, useReducer } from "react";
 
-const SearchContext = createContext<string>(null);
-const SearchDispatchContext = createContext<Dispatch<ActionType>>(null);
+const SearchContext = createContext<string>("");
+const SearchDispatchContext = createContext<Dispatch<ActionType>>(() => {});
 
 type ActionType = {
   value: string;
   type: "update" | "reset";
 };
-function searchReducer(search: string, action: ActionType): string {
+function searchReducer(_search: string, action: ActionType): string {
   switch (action.type) {
     case "update": {
       return action.value;
@@ -21,7 +21,7 @@ function searchReducer(search: string, action: ActionType): string {
   }
 }
 
-export default function SearchProvider({ children }) {
+export default function SearchProvider({ children }: PropsWithChildren) {
   const [search, dispatch] = useReducer(searchReducer, "");
 
   return (

diff --git a/src/contexts/windows/SelectedTabsContext.tsx b/src/contexts/windows/SelectedTabsContext.tsx
@@ -1,9 +1,9 @@
-import { createContext, useContext, useReducer } from "react";
+import { Dispatch, PropsWithChildren, createContext, useContext, useReducer } from "react";
 
-const SelectedTabsContext = createContext(null);
-const SelectedTabsDispatchContext = createContext(null);
+type TabIdType = Exclude<chrome.tabs.Tab["id"], undefined>;
 
-type TabIdType = Required<chrome.tabs.Tab["id"]>;
+const SelectedTabsContext = createContext<TabIdType[]>([]);
+const SelectedTabsDispatchContext = createContext<Dispatch<ActionType>>(() => {});
 
 type ActionType = {
   id: TabIdType;
@@ -26,7 +26,7 @@ function selectedTabsReducer(selectedTabs: TabIdType[], action: ActionType): Tab
   }
 }
 
-export default function SelectedTabsProvider({ children }) {
+export default function SelectedTabsProvider({ children }: PropsWithChildren) {
   const [selectedTabs, dispatch] = useReducer(selectedTabsReducer, []);
 
   return (

diff --git a/src/contexts/windows/SortContext.tsx b/src/contexts/windows/SortContext.tsx
@@ -1,14 +1,14 @@
-import { Dispatch, createContext, useContext, useReducer } from "react";
+import { Dispatch, PropsWithChildren, createContext, useContext, useReducer } from "react";
 import { SORT_OPTION } from "src/utils/options";
 
-const SortContext = createContext<SORT_OPTION>(null);
-const SortDispatchContext = createContext<Dispatch<ActionType>>(null);
+const SortContext = createContext<SORT_OPTION>(SORT_OPTION.Default);
+const SortDispatchContext = createContext<Dispatch<ActionType>>(() => {});
 
 type ActionType = {
   sort: SORT_OPTION;
   type: "update" | "reset";
 };
-function sortReducer(sort: SORT_OPTION, action: ActionType): SORT_OPTION {
+function sortReducer(_sort: SORT_OPTION, action: ActionType): SORT_OPTION {
   switch (action.type) {
     case "update": {
       return action.sort;
@@ -22,7 +22,7 @@ function sortReducer(sort: SORT_OPTION, action: ActionType): SORT_OPTION {
   }
 }
 
-export default function SortProvider({ children }) {
+export default function SortProvider({ children }: PropsWithChildren) {
   const [sort, dispatch] = useReducer(sortReducer, SORT_OPTION.Default);
 
   return (

diff --git a/src/pages/options/settings/ColorSwatches.tsx b/src/pages/options/settings/ColorSwatches.tsx
@@ -107,9 +107,9 @@ export default function ColorSwatches({
 }: {
   disabled?: boolean;
   hue: Hue;
-  setHue: React.Dispatch<React.SetStateAction<Hue>>;
+  setHue: (hue: Hue) => void;
 }) {
-  const handleValue = (event: React.MouseEvent<HTMLElement>, value: Hue | null) => {
+  const handleValue = (_e: React.MouseEvent<HTMLElement>, value: Hue | null) => {
     if (value !== null) {
       setHue(value);
     }

diff --git a/src/pages/options/settings/CustomColor.tsx b/src/pages/options/settings/CustomColor.tsx
@@ -15,7 +15,7 @@ export default function CustomColor({
   options: ColorOptions;
   setOptions: Dispatch<SetStateAction<ColorOptions>>;
 }) {
-  const handleCheckboxChange = (event: ChangeEvent<HTMLInputElement>, value: boolean) => {
+  const handleCheckboxChange = (_e: ChangeEvent<HTMLInputElement>, value: boolean) => {
     setOptions((prev) => ({ ...prev, isCustomTheme: value }));
   };
 

diff --git a/src/pages/options/settings/ThemeMode.tsx b/src/pages/options/settings/ThemeMode.tsx
@@ -14,7 +14,7 @@ export default function ThemeMode({
   themeMode: Mode;
   setOptions: Dispatch<SetStateAction<ColorOptions>>;
 }) {
-  const handleChange = (event: ChangeEvent<HTMLInputElement>, value: string) => {
+  const handleChange = (_e: ChangeEvent<HTMLInputElement>, value: string) => {
     setOptions((prev) => ({ ...prev, themeMode: value as ColorOptions["themeMode"] }));
   };
 

diff --git a/src/tabViews/WindowsTab.tsx b/src/tabViews/WindowsTab.tsx
@@ -6,6 +6,7 @@ export default function WindowsTab() {
   const [windows, setWindows] = useState<chrome.windows.Window[]>([]);
   const [tabGroups, setTabGroups] = useState<chrome.tabGroups.TabGroup[]>([]);
   const [tabCount, setTabCount] = useState<number>(1);
+  const [activeWindowId, setActiveWindowId] = useState<chrome.windows.Window["id"]>(undefined);
 
   useEffect(() => {
     void chrome.tabGroups.query({}).then((values) => {
@@ -15,6 +16,9 @@ export default function WindowsTab() {
       const wins = values.filter((w) => w.tabs?.filter(({ title, url }) => !!title && !!url));
       setWindows(wins);
     });
+    void chrome.windows.getLastFocused().then((win) => {
+      setActiveWindowId(win.id);
+    });
   }, []);
 
   useEffect(() => {
@@ -31,7 +35,12 @@ export default function WindowsTab() {
 
   return (
     <WindowsProvider>
-      <Windows windows={windows} tabGroups={tabGroups} tabCount={tabCount} />
+      <Windows
+        windows={windows}
+        tabGroups={tabGroups}
+        tabCount={tabCount}
+        activeWindowId={activeWindowId}
+      />
     </WindowsProvider>
   );
 }
diff --git a/src/tabViews/charts/Charts.tsx b/src/tabViews/charts/Charts.tsx
@@ -43,7 +43,7 @@ export default function Charts({ windows }: { readonly windows: chrome.windows.W
   const tabs: chrome.tabs.Tab[] = useMemo(() => windows.flatMap((w) => w.tabs || []), [windows]);
 
   const handleToggleChartType = (
-    event: React.MouseEvent<HTMLElement>,
+    _e: React.MouseEvent<HTMLElement>,
     newChartType: ChartViewType,
   ) => {
     setChartType(newChartType);
@@ -64,7 +64,7 @@ export default function Charts({ windows }: { readonly windows: chrome.windows.W
     void groupTabs(tabIds as [number, ...number[]], title);
   };
 
-  const handleChange = (event: Event, newValue: number | number[]) => {
+  const handleChange = (_e: Event, newValue: number | number[]) => {
     setUrlDepth(newValue as number);
   };
 

diff --git a/src/tabViews/window/TabView.tsx b/src/tabViews/window/TabView.tsx
@@ -79,7 +79,10 @@ export default function TabView({
     await chrome.windows.update(tab.windowId, { focused: true });
   };
 
-  const onSelection = (e: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+  const onSelection = (_e: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+    if (!tab.id) {
+      return;
+    }
     dispatchSelectState({
       id: tab.id,
       type: checked ? "selected" : "unselected",

diff --git a/src/tabViews/window/WindowView.tsx b/src/tabViews/window/WindowView.tsx
@@ -16,9 +16,11 @@ type RenderListType = {
 export default function WindowView({
   tabGroups,
   win,
+  focused,
 }: {
   readonly tabGroups: chrome.tabGroups.TabGroup[];
   readonly win: chrome.windows.Window;
+  readonly focused?: boolean;
 }) {
   const tabs = win.tabs || [];
 
@@ -60,6 +62,7 @@ export default function WindowView({
     <ListGroupCard
       collapsible
       initOpen
+      selected={win.focused || focused}
       cardTitle={`${tabs.length} Tabs`}
       titleTypographyProps={{ variant: "subtitle1" }}
     >