feat: Add new domain/device type dropdown for Web Analytics + filters UI revamp ✨

[rafaeelaudibert]

Problem

We want a domain dropdown on web analytics! It'll look much nicer.

Changes

There are a lot of changes. I'm not hiding anything behind a FF because the change is pretty big, and I didn't want to keep the old code around. I had to change a lot of it.

Desktop view is nicer, tablet view is much better, mobile view is 2000% better. It feels like an actual thought-out navbar now - I put way too much thought into it, 2 days to build this.

See video to understand what it looks like now, snapshots should update too

https://www.loom.com/share/e454b9890a8f4397b685e326ef1575bc?sid=31ca6ef8-d45b-4a63-b3b4-9df3d5d48c9b

Does this work well for both Cloud and self-hosted?

Yep

How did you test this code?

Manually, plus snapshots will update

[greptile-apps]

PR Summary

Based on the provided files, I'll summarize the key changes in this PR that adds a new domain dropdown for web analytics:

This PR introduces significant UI improvements for web analytics domain management:

• Added new domain dropdown using LemonSelect with authorized URLs list in the web analytics dashboard header
• Restructured the filters section into AllFilters and FoldableFields components for better organization and responsiveness
• Created new WebAnalyticsLiveUserCount component with an animated online/offline indicator and user count display
• Improved responsive layout handling across desktop, tablet and mobile views with collapsible filters
• Added health check warning when no authorized domains are configured, guiding users to set them up in settings

Key implementation details:

• Moved URL management from toolbar-specific to a more general authorized URLs system
• Added domain filter state management in webAnalyticsLogic with URL sync and persistence
• Filters out $host property filters since they're now controlled by the domain dropdown
• Consolidated settings by replacing TeamToolbarURLs with TeamAuthorizedURLs for broader URL management

The changes represent a significant UI overhaul focused on improving usability across different device sizes while maintaining core functionality.

_{19 file(s) reviewed, 8 comment(s)
Edit PR Review Bot Settings | Greptile}

[robbie-c]

It'd be cool to have this link to where I can set up hosts. This is probably the first place people will encounter this feature, so it'd be good to give them an action to take if they want more sites on this list!

Actually - would it be possible, if the list is empty, to add some suggestions right here in this UI?

Like

All domains
---
No authorized domains found, go to settings? :cog:
+ Add hedgebox.net
+ Add app.hedgebox.net

[robbie-c]

Slightly tricky edge case here, I tried to add a host via the filters UI

nothing seemed to happen. I think this is due to how you are filtering out host filters from this list.

[robbie-c]

Ah this doesn't work on the demo env because we don't initialize propdefs in the demo env setup.

I think this is fine, but if you were super keen you could make it do this. Orrrrr, you could simultaneously query events from last few hours and grab some candidate hostnames that way

[robbie-c]

I found this UI a bit confusing, I started type in the search box to add a domain. I don't think it makes sense to have the search bar and the add button on the same row given that they aren't related.

[rafaeelaudibert]

@robbie-c

It'd be cool to have this link to where I can set up hosts. This is probably the first place people will encounter this feature, so it'd be good to give them an action to take if they want more sites on this list!

Didn't you have a warning about you having no set-up domains? I set one up like the ones we have for missing $pageview events. I'll try and improve on that, though, agreed they'll need to set this up. I'm gonna be adding setting that up to the onboarding flow as well (follow-up PR) so that should also help

Slightly tricky edge case here, I tried to add a host via the filters UI

Yeah, aware, I'll add a way to "disable" specific filters from being added, that doesn't exist yet, so I chose to just let it die silently

I think this is fine, but if you were super keen you could make it do this. Orrrrr, you could simultaneously query events from last few hours and grab some candidate hostnames that way

That's what I'm doing actually, I wonder why that doesn't work for you? I'm seeing hedgebox as a suggestion for example

I found this UI a bit confusing, I started type in the search box to add a domain. I don't think it makes sense to have the search bar and the add button on the same row given that they aren't related.

Oh yeah, good call. I just reused the UI we have, but it needs to be improved before we launch this, let me take that UI for a ride

[rafaeelaudibert]

@robbie-c @lricoy ready for the second round.

Pay attention to dd598ac. Do you expect $host to not be filterable because we already have a higher-level $host filter or is that too restrictive and we should let people compound them? I've decided to remove that restriction and allow people to filter by $host, this will make it slightly more powerful, they'll be able to search by partial match for example, which they won't be capable of if we simply remove the filter and tell them to rely on the dropdown

[github-actions]

Size Change: +197 B (0%)

Total Size: 9.72 MB

ℹ️ View Unchanged

Filename	Size	Change
frontend/dist/toolbar.js	9.72 MB	+197 B (0%)

_{compressed-size-action}

[lricoy]

@robbie-c @lricoy ready for the second round.

~Pay attention to dd598ac. Do you expect $host to not be filterable because we already have a higher-level $host filter or is that too restrictive and we should let people compound them? ~ I've decided to remove that restriction and allow people to filter by $host

I think hiding the host filter option there is a sensible choice. Maybe adding a informative note on the "empty result" or disabling it instead could also work but I would go with hiding for now to avoid impossible states.

[posthog-bot]

📸 UI snapshots have been updated

66 snapshot changes in total. 0 added, 66 modified, 0 deleted:

• chromium: 0 added, 59 modified, 0 deleted (diff for shard 1, diff for shard 2, diff for shard 3)
• webkit: 0 added, 7 modified, 0 deleted (diff for shard 2)

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[posthog-bot]

📸 UI snapshots have been updated

2 snapshot changes in total. 0 added, 2 modified, 0 deleted:

• chromium: 0 added, 2 modified, 0 deleted (diff for shard 2)
• webkit: 0 added, 0 modified, 0 deleted

Triggered by this commit.

👉 Review this PR's diff of snapshots.

[robbie-c]

Oh yeah, good call. I just reused the UI we have, but it needs to be improved before we launch this, let me take that UI for a ride

Ha nice one!

I've decided to remove that restriction

I still found some slightly weird interactions here. I managed to get into a state where I have a host filter set, but it doesn't show up in either the domain chooser UI or the filters UI. The only way I know it's set is that it's still in the URL. Here's a link: http://localhost:8000/project/1/web?filters=%5B%7B%22key%22%3A%22%24host%22%2C%22value%22%3A%5B%22hedgebox.net%22%5D%2C%22operator%22%3A%22exact%22%2C%22type%22%3A%22event%22%7D%2C%7B%22type%22%3A%22event%22%2C%22key%22%3A%22%24host%22%2C%22value%22%3A%22all%22%2C%22operator%22%3A%22exact%22%7D%5D&path_cleaning=false&filter_test_accounts=false&compare_filter=%7B%22compare%22%3Atrue%7D&domain=all

I'm happy to merge though, let's keep this moving forward especially with a diff this big