I'm trying to create a custom module in Odoo 16.0, that adds a systray for timesheets, the idea is to have the currently active one and below it a list of the latest ones.

Here is the code of what I have for now:

timesheet_menu.js

/** @odoo-module **/

import {Dropdown} from "@web/core/dropdown/dropdown";
import {DropdownItem} from "@web/core/dropdown/dropdown_item";
import {registry} from "@web/core/registry";

import {Component, onWillStart, useState} from "@odoo/owl";
import {useService} from "@web/core/utils/hooks";

export class TimesheetMenu extends Component {
    model = "account.analytic.line";

    setup() {
        this.orm = useService("orm");

        this.state = useState({
            timesheets: [],
        });

        onWillStart(async () => {
            await this.loadTimesheetsData();
        });
    }

    async loadTimesheetsData() {
        this.state.timesheets = await this.orm.searchRead(this.model, [["project_id", "!=", false]], ["id", "name"]);
    }
}

TimesheetMenu.template = "advanced_timesheet.TimesheetMenu";
TimesheetMenu.components = {Dropdown, DropdownItem};

export const timesheetItem = {
    Component: TimesheetMenu,
};

registry.category("systray").add("advanced_timesheet.timesheet_menu", timesheetItem, {sequence: 85});

timesheet_menu.xml

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="se7_advanced_timesheet.TimesheetMenu" owl="1">
        <Dropdown class="'d-none d-md-block'">
            <t t-set-slot="toggler">
                <i class="fa fa-play-circle"/>
            </t>
            <t t-foreach="state.timesheets" t-as="timesheet" t-key="timesheet.id">
                <DropdownItem>
                    <t t-esc="timesheet.name"/>
                </DropdownItem>
            </t>
        </Dropdown>
    </t>

</templates>

It works well and adds it correctly.

The problem now is that I want to use the bus so that when a timesheet is updated, it also updates the component in JavaScript.

For example, when a timesheet starts/stops is added, it is reflected in the systray.

My idea to do that was to use the bus, but I haven't found anything to receive the bus update in javascript.

In python, if I'm not mistaken, it would be done like this:

self.env['bus.bus']._sendone(channel, notification_type, message)

I think I don't quite understand how buses work, but it seems to me that it would be something like this.

Can anyone guide me in the right direction to do this, or is this not possible?

Thank you