Summary

The new Dashboard is the one overview for your whole Nextcloud, and for individual projects. It is a logical continuation of Nextcloud Hub, and an overview of what happens.

Nextcloud Dashboard is the first thing you open at the start of your workday.

It helps you catch up with what happened while you were gone, and focus on what needs doing.

Implementation

• API and dashboard app Dashboard API #21346
• App frontend enhanceents Dashboard frontend enhancements #21598

Panels

• Files 🍱 Dashboard adaption for Nextcloud 20 recommendations#229
• Talk 🍱 Dashboard adaption for Nextcloud 20 spreed#3890
• Mail Implement dashboard panel mail#3388
• Calendar Dashboard widget calendar#2414

Details

The dashboard should show an overview of what is going on in your account. This is done via a a clean overview and a plugin systems where apps can hook in. Hence if you don't have talk you won't see talk. But if you do it shows up (as an example).

Mockups

Polishing

From design review call:

• Make sure user and weather statuses are always sorted the same way: status left, weather right Ability to toggle statuses in dashboard #22357
• Overlap of header: Use dark fade and don’t have widgets vanish/"cut" into the background Dashboard polishing #22392
• Make sure empty content views look nice for the default widgets (Files, Talk, Mail, Calendar) Dashboard empty state improvements and unification #22339
• Some better loading feedback than the white space. Ideally already show skeleton content, background color, etc. Dashboard polishing #22392
• "Adjust the dashboard to your needs" overlays the firstrunwizard Polishing - "Adjust the dashboard to your needs" overlays the firstrunwizard #22246
• Nice fancy blur/transparency effect for the hover/focus effect of the widget entries would be nice too, instead of just grey
• Look into fixing backdrop-filter for Firefox https://codepen.io/iamvdo/pen/VLOGdw Dashboard backdrop filter in firefox #22398
• We discussed how we do opening in same tab vs new tab and decided we first keep it like now → open everything in new tab (cause of loading times, and cause external apps need to be opened in new tab anyway)
• Check vertical space used by greeting and subline
• Mobile improvement: When only 1 column, don’t extend widgets to full height
• Whitespace between weather and status
• Overlap of "Edit widgets" button: Only sticky on first run, afterwards put to the bottom
• High contrast mode: Full opaque background for widgets
• The "Customize" button should also use the same background+blur style.
• "Customize" modal breaks on mobile / narrow screens
• Fix firstrunwizard not loading in Dashboard: Register firstrunwizard with Dashboard firstrunwizard#380
• Files widget: Icon in header would be better black
• Weather status: Line which currently states location could say "More weather for [city]" and clicking could go to the service that we use @eneiluj

Tasks

• Custom backgrounds
  • Ability to set custom background, via the "Edit widgets" modal. (There we can also properly credit the pictures.)
  • We can collect some default backgrounds, possibly some from our example files and/or some new ones. :)
  • We need to make sure the navigation icons and heading text works on other types of background images too (possibly need to add a dark fade into either the images or by default).
• Only show name if display name is set.
  • Otherwise just the "Good morning" part – do not show the username.
  • We could additionally prompt people to set their username and avatar?
• Empty content states for the initial installation experience
  • to be discussed for each widget
  • Additionally we could also have example data for other apps like we do for Files. Talk already has the "Talk updates" conversation, Calendar could have some generic events. Dashboard empty state improvements and unification #22339
• Panel management
  • Ability to rearrange panels
  • Ability to delete panels
  • Ability to add other panels
  • Add app store category for dashboard supported apps
  • UI needs polishing
• Ability to disable the app per-user – related: Ability to set default app per-user
  • If we ever need in-app settings: Settings icon + text in the bottom left, which can open a settings area or modal. Discussed not to do this for now
• Possibly weather integration via the emoji or in a subline. Jan will contact: met.no (used by GNOME), OpenWeatherMap
• Make sure there’s a smooth migration from the existing Dashboard app
• Logo icon: 3 panels looks too much like the app interface. Maybe a circle instead, referencing the Nextcloud logo (Jan): Circle looks very nice but might conflict with Nextcloud logo or Talk logo
• Finish API and basic dashboard app implementation
• Write documentation for app developers
• Make "Edit panels" button more prominent on first view, possibly centered below the panels initially
• Set fixed height for every panel, max and min height is the same
• Accessibility testing
  • Accessible way of rearranging panels Accessible way of widget rearrangement #22397
• Ability to rearrange panels in the "Edit panels" view
• Sidebar not available in Viewer for Recommendations – would be nice. Ref @tacruc who according to @eneiluj managed to get the sidebar to show up.

• Show status and possibly weather as subline between greeting and panels
• Create Vue component for PanelList and Items
  • Default layout (use Recommended files and Spreed as base)
  • Emptycontent view with link to app
  • Add "+ 2 more" on the bottom if there are more entries than 7
  • Plus+ button next to the title (optional)
  • Future: Action menu for e.g. direct deletion, unsubscribe etc
• Defaults: Files, Talk, Mail, Calendar – rest can be available in "Edit panels" but not enabled
  • Files: Recommended files 🍱 Dashboard adaption for Nextcloud 20 recommendations#229
  • Talk: @-mentions and ongoing calls 🍱 Dashboard adaption for Nextcloud 20 spreed#3890
    • Prioritize active calls and @mentions in the list
    • Fix the small design issues
  • Mail: Important mail Implement dashboard panel mail#3388
    • Needs input from @ChristophWurst @GretaD
  • Calendar: Upcoming events Dashboard widget calendar#2414
    • Needs actual data @georgehrke
    • Possibly use colored circle with time as "avatar" slot, ref Business Calendar on Android Already possible with the avatar slot of DashboardWidgetItem
• More panels
  • Deck: basically done Dashboard panel deck#2115
    • The requirement of being assigned doesn’t work well for instances you use on your own. Can we check if there’s assigned cards at all, and if not, show the non-assigned ones you created for example?
    • No emptycontent view
  • Serverinfo with the 2 main graphs below each other Dashboard widget serverinfo#226
  • Status, show 7 people with last status changes @georgehrke: "Recent status changes" Dashboard #22284
  • Unread news @Grotax @JonathanTreffler
  • Tasks @raimund-schluessler
  • Forms responses @jotoeri
  • Favorite notes @korelstar
  • Bookmarks @marcelklehr
  • Announcements
  • Flows by last run
  • Social-specific boost @daita @violoncelloCH Dashboard widget for notifications AlohaSocial/social#983
    • Social mentions in a panel
    • Post to Social
• Ability to create (via +Plus button on the right next to the title) Allow apps to register custom create callback #22396
  • Upload files
  • Start chats or reply
  • Create events
  • Write mail
  • Have to figure out how to do it uniformly, and for external services
• Integration with external platforms
  • GitHub basically done https://github.com/eneiluj/github
  • GitLab basically done https://github.com/eneiluj/gitlab
  • Mastodon basically done https://github.com/eneiluj/mastodon
    • Should show notifications like their web interface: @mentions, likes, retweets, follows
  • Twitter
    • Admins will have to create their own app
    • Should show notifications like their web interface: @mentions, likes, retweets, follows
  • Zammad assignments
  • Discourse notifications
  • Reddit subscriptions (maybe also @-mentions and direct messages)
  • Moodle assignments/tasks

Panels

Core

• Files: recommended files, shares to accept. Additional: recent, favorite, commented with @mention of you.
• Talk: mentions and ongoing calls. Future possibly: favorites, recent conversations. When only one conversation is linked to a project, it can be directly shown. Possibly even only show the messages where you were @mentioned.
• Mail: Important & unread, important mails, unread, favorite, recent.
• Calendar: upcoming, invitations

Possible additional

• Activity: In the future possibly show Activity feed below the Dashboard panels (Basecamp comparison)
• Text: a "Rich workspace" for your dashboard. Possibly we could just use the Readme.md from the root folder for this.
• Notes: recent, favorite
• Contacts: not necessary as it duplicates the Contacts dropdown – we thought about showing the status of people you commonly work with but this should be in the Contacts dropdown as well
• Deck: in progress, assigned to you, set for today
• Forms: Running forms or new answers
• Tasks: tasks for today, upcoming, assigned
• Social: @mentions, notifications, direct messages
• News?: recent, linked folder

API

Dashboards

In the first iteration we will only provide a general dashboard. In a second step this API can be extended to provide different dashboards based on circles/user groups/projects that only show related entries.

Possible considerations for later

• Views for groups/circles could be generated automatically and be available for each member of those
• For projects a somehow manual process should be considered since for the current approach projects are created this might be an overwhelming list that would probably clutter the UI
• Apps can annotate that they support a certain view type as they need to be able to filter their panel

Panels

Apps can register their implementation of IPanel at a DashboardManager. The panel has a set of static properties (appId, title, order, icon). For the second iteration additional interfaces can be implemented so apps can indicate their support for a group or circle dashboard.

For registering we would dispatch an event that apps can use then.

Frontend

Apps that do not provide a list of entries can register a custom handler to render their UI like this:

registerDashboardPanel(appId, (view, el) => {
  const app = new VueComponent()
  app.$mount(el)
})

The frontend would then just receive a list of panels from the backend and call the related callback in order to let the apps render their panel UI.

Considered alternative

The app integration that were collected can be abstracted to a simple list view for each dashboard column where each list entry would be provided by the backend and mapped to the following wireframe for rendering: icon/avatar, title, description (optional), link (optional) which would be similar to how activities work.

This should be suitable for most of the app scenarios from above. While the static frontend approach would have the benefit of being a more standardized UI and most likely would be better from a performance perspective, I think we will run into limitations with that as soon as we want to add more interaction on the dashboard panels (e.g. writing a social post directly from there) or if apps need custom rendering (e.g. talk messages containing mentions or images) this approach will not be suitable anymore and we need to allow apps to provide their own frontend logic. That is I decided to mainly propose the dynamic frontend approach.

To clarify: Depending on if and how we want to integrate mobile apps at a later point, we still might need to have something like that so apps can fetch the list of entries and render it with native UI elements. If mobile integration is a requirement from the beginning on, we would need to implement both approaches.

Acceptance criteria

To be extended.

• I want to have a new app that show an overview of my Nextcloud account
• I want to have an overview of several apps
  • Recent files (recommended files?)
  • Upcomming event, today, this week (calendar)
  • Important mails, priority inbox (mail)
  • Chats with unread messages (maybe fancier filtering) (talk)
• I want to have a clear API so 3rdparty apps can hook in as well