Dashboard overview

[rullzer]

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 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

[Spartachetto]

I do think that a dashboard would be extremely useful.

My impression is that you should consider if you want only something that offers an overview of the different apps (Recent files, Upcoming events, ...) or if you want to provide also other two possibilities:

• combine the different apps' information in a meaningful way. For example you could visualize only the info (emails, events with, shared files) that are linked to contacts tagged as "work" (or "family", "band", ...). Of course the relationship between different apps info could be also provided by projects, geographic context, ...
• provide an overview on the data not specific of a single app. For example you could show the interactions with users without being linked to the type of interaction (Talk chat, email, comment on a shared file, ...) and show the users I interact more with, the time-line for my interactions with a specific user. The same is true for tags (see also Tag usage through ~all apps #13330), projects, ...

[splitt3r]

I think https://github.com/nextcloud/dashboard should be the base fot that. It is not mentionbed yet but looks like a good starting point for your idea.

[juliusknorr]

I've added some basic writeup of my thoughts regarding the implementation to the first post. Please have a look @rullzer and also @jancborchardt. Feedback is very welcome.

[Spartachetto]

First of all excuse me if I am hijacking an organisational issue and tell me if my feedback is improper.
Second point: If you are interested I could try to prepare mockups even if I am not a designer.

Said that I stress that the mockup of @juliushaertl is exactly what I was describing with "having an overview of the different apps".
I think that, as an user, I am not interested in the different Nextcloud apps, but in my different things to do.
So it could be more interesting to know that Julius communicated with me (via an email and a comment in a file and a Talk message) rather than having mail, file and talk apps resumes.
At the same time I'd like to have a quick overview of my ToDos (apps: calendar + tasks + deck +...).
And also a resume of my current projects (new files, updates from members, ToDos, maybe trending tags,....).

Let me know if you are interested in these ideas.

[juliusknorr]

@Spartachetto Feedback is of course always welcome. 😉

As written in the proposal above we aim for small steps here. The first part will be implementing a generic dashboard that tries to give important information to the user in general. That would already cover what you describe with your "todos" (e.g. calendar would show the next upcoming events, tasks/deck your todo list for today/upcoming due, talk your recent mentions for example).

For a second iteration we can then think about how we can provide filters that would offer different dashboards e.g. based on a a group or circle for example as proposed. If course we could also consider having something like a user profile dashboard, but as mentioned let's try to get the basics done first and see if that is adopted and how we can extend that to further use cases.

[Spartachetto]

@juliushaertl Thank you!

I agree with the small steps. I just hope that the beginning will make possible the next steps. If you could build something that makes possible (even if not realized in the first iterations) a section like the following:
Mentions
you were mentioned by:

• Joe in a comment to the file NicePresentation (folder "JuneMeeting")
• Jane in the chat of the project next version
• Julius in the board NoIdea

That would be more than enough for my taste ;)

[juliusknorr]

So from the technical specification this would not be an issue, the limitation to an app is just from a code perspective, so there could be one app that provides the mentions list panel but collects all of those from across different deck, talk, comments.

cc @jancborchardt As this sounds like nice additional app integration 😉

[juliusknorr]

and cc @Clementine46 on this issue since we were talking about the dashboard during our projects design call

[Spartachetto]

That sounds great!!!
Maybe, if technically meaningful, the files app could provide a set of basic functionalities that collect the different apps data, like mentions, tags and DAV (calendars)...

[ChristophWurst]

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

How about we do it via #20573/#20865 instead? 😬

[juliusknorr]

Sounds good, I can move that over when it is ready 😁

Let me add a todo to the pr.

[ChristophWurst]

Sounds good, I can move that over when it is read

Awesome. I want to continue this evening!

[ChristophWurst]

when it is ready

Go go go 🐨 🚀

[e-alfred]

Is there a way for apps using the old dashboard app to migrate to the new dashboard?

[juliusknorr]

@nickvergessen @ChristophWurst @georgehrke I'd prepare some basic implementation skeleton for the Talk/Mail/Calendar dashboard panels similar to what I already started in Talk. Do you have time to look into this so we have at least a basic dashboard panel for our core apps in 20? Would you be able to pick up from the provided skeleton then, since you basically know your apps internals a lot better, especially how the relevant data to show could be obtained?

cc @rullzer

[ChristophWurst]

Sure, but I'll need some specs about what to show there :)

Mail: Important & unread, important mails, unread, favorite, recent.

Just some stats or actual messages?

[juliusknorr]

Sure, I'll discuss that with @jancborchardt and provide you with details in the skeleton pr then.

[rullzer]

Sure, but I'll need some specs about what to show there :)

Mail: Important & unread, important mails, unread, favorite, recent.

Just some stats or actual messages?

Basically what you show in the mail client as well. Then when you click on it we open mail.

[marcelklehr]

I'm happy to join such a call :)

[Rello]

@jancborchardt
can you hook us up to a NC of yours? then we can plan a NC-Talk there? I think this might be the easiest.
...then we can chat, talk and share docs/ideas...

[datenangebot]

@Rello I'm also interested in a "complex dashboard" with different sources. You say you will talk to the dashboardChart developer. Is there another discussion where I could join?
For my learning purpose I started to develop an own dashboard called "cockpit". But I'm not interested in reinventing the wheel...

@Spartachetto

I think that a really interesting possibility would be to provide other visualizations that are not bound to the apps and display informations of different apps but logically related.

I do get that this could be an evolution and having a functional and useful dashboard is a really good step. Yet I am just trying to provide what I deem a good suggestion.

I think so too. Combining different data to new information is interesting. Are you interested in thinking about this approach together? Maybe we could talk about it in general, not specially in the dashboard context...
Or is there already a discussion about that?

[jancborchardt]

@Rello @datenangebot @MarkPartlett and anyone else who wants to join, please send me an email to jan at our project website dot com just stating the email address and name you want to be added with to our Talk server. I’ll then add you to the Dashboard chat as well as our Community chat channel. (@marcelklehr you should already have an account, let me know if there are any issues. :)

For reference, pull request with the latest state is #21598 and I updated the original post on the very top with current planning as well as links to available panels.
For everyone who was developing for the old Dashboard, we have received feedback that developing for the new one is much simpler, and there are plans to make it even more simple. :)

[tacruc]

Sidebar in viewer:

https://github.com/nextcloud/maps/pull/418/files#diff-0890c93f5ce80bae2585ae5c9f129f31R54

Sorry for the short reply send from my phone. There is a longer post somewhere in the community chat where somebody (sorry for got who exactly) anwsert my question regarding this.

[Spartachetto]

@jancborchardt no idea if you could be interested in the point of view of a non developer.... 🙂

[juliusknorr]

The remaining open todos have either already a PR open or have been moved to individual issues now. Let's close this.

[Spartachetto]

@datenangebot

I think so too. Combining different data to new information is interesting. Are you interested in thinking about this approach together? Maybe we could talk about it in general, not specially in the dashboard context...
Or is there already a discussion about that?

I just realized I did not answer you! Sorry!!!
I'd like to have that chat

[datenangebot]

@Spartachetto
hehe, thanks for your answer.

Where is the best place for that discussion?
Maybe the forum, cause it's just brainthinking, no direct connection to any code (yet).

[sunjam]

Where is the best place for that discussion?

Perhaps this issue could be re-opened as it is still the on-going overview discussion for Dashboard development, as opposed to the vue-components or old Dashboard repo.

[Spartachetto]

@datenangebot I am sorry but I am having a really busy period... it should end in one or two months. Sorry again to let you wait so much!