diff --git a/apps/client/src/widgets/mobile_widgets/TabSwitcher.css b/apps/client/src/widgets/mobile_widgets/TabSwitcher.css index 19360d8c15..f188656259 100644 --- a/apps/client/src/widgets/mobile_widgets/TabSwitcher.css +++ b/apps/client/src/widgets/mobile_widgets/TabSwitcher.css @@ -14,6 +14,15 @@ border-radius: 1em; min-width: 0; + &.active { + outline: 4px solid var(--more-accented-background-color); + background: var(--card-background-hover-color); + + .title { + font-weight: bold; + } + } + header { padding: 0.5em 1em; border-bottom: 1px solid var(--main-border-color); diff --git a/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx b/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx index cb7c79af1d..572cfbbe50 100644 --- a/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx +++ b/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx @@ -9,7 +9,7 @@ import NoteContext from "../../components/note_context"; import { t } from "../../services/i18n"; import { NoteContent } from "../collections/legacy/ListOrGridView"; import { LaunchBarActionButton } from "../launch_bar/launch_bar_widgets"; -import { useTriliumEvent } from "../react/hooks"; +import { useActiveNoteContext, useTriliumEvent } from "../react/hooks"; import Modal from "../react/Modal"; export default function TabSwitcher() { @@ -53,25 +53,34 @@ function TabBarModelContent({ selectTab }: { selectTab: (noteContextToActivate: NoteContext) => void; }) { const mainNoteContexts = useMainNoteContexts(); + const activeNoteContext = useActiveNoteContext(); return (
{mainNoteContexts.map((noteContext) => ( - + ))}
); } -function Tab({ noteContext, selectTab }: { +function Tab({ noteContext, selectTab, activeNtxId }: { noteContext: NoteContext; selectTab: (noteContextToActivate: NoteContext) => void; + activeNtxId: string | null | undefined; }) { const { note } = noteContext; return (
selectTab(noteContext)} >