Toggle

• Used for
  • Live updates
  • Group results by page
• Needs to include:
  • Enabled / disabled state
  • Ability to start in a state (live updates always starts false, group results can start true)
  • Optional icon based on state (should icon live in a separate component?)
  • Text for display
  • Emit notice on change
• Category: Generic elements

Button

• Used for
  • Refresh
  • Potentially extended by Toggle
  • Mark all sites as seen
• Needs to include
  • Optional icon
  • Text for display
  • Emit notice on click
• Category: Generic elements

Will need an overall component for the Special:GlobalWatchlist page content

Indeterminate progress bar

• Used for
  • Loading display
• Needs to include
  • Nothing but the loading bar
• Category: Generic elements

See https://doc.wikimedia.org/wikibase-vuejs-components/master/ui/?path=/story/indeterminateprogressbar--default / https://gerrit.wikimedia.org/r/plugins/gitiles/wikibase/vuejs-components/+/refs/heads/master/src/components/IndeterminateProgressBar.vue

Site display

• Used for
  • Rendering a specific site
• Needs to include
  • Mark as seen button
  • Entry for each page
• Category: project-specific

Entry

• Used for
  • Actually rendering watchlist changes
• Needs to include
  • Everything currently handled in site.js makePageLink
  • Conditional display of watch/unwatch text based on input
  • Conditional display of globalWatchlist-strike class
  • Emit an event when toggling watch/unwatch (actual handling is done in site)
• Category: project-specific

Label

• Used for
  • As of
  • Sites with changes
  • Sites without changes
• Needs to include
  • Text to display
  • (optional) horizontal alignment of display
• Category: generic

Sites without changes wrapper

• Used for
  • Sites without changes
• Needs to include
  • Label
  • List with entry for each site without changes
• Category: project-specific

Okay, preliminary layout:

[toggle (live changes)] [toggle (group results by page)] [button (refresh)] [link (Special:GlobalWatchlist)[1]] [button (mark all sites as seen)]

[label (as of)]

[label (sites with changes)]
[site]
[site]

[label (sites without changes)]
[list of sites without changes]

[1] Do we need a dedicated link element so it looks like the buttons, like currently?

Would probably also be useful to have a wrapper for making things collapsible, like https://www.mediawiki.org/wiki/ResourceLoader/Core_modules#jquery.makeCollapsible