feat: implement dashboard (#898)

* Proposal for component structure on dashboard
* Template ProfileCard for Sirko
* added profil card styling
* change button component location
* implement first draft of avatar
* add more font variants
* handle profile and organization avatars
* handle empty footer
* extends playground
* add chip component
* adjust avatar stories
* improve card header elements
* added container for cards to scroll
* added headline, link to card container
* Added welcome text
* add more indicator for list of avatars
* use prefix
* differ between primary and secondary colored chips
* implement card link
* update buttons
* finalize profile card
* profiles have usernames not slugs
* finalize organization card
* implement feature access and redirects
* fix: module not found
* button can be used as links
* chip only oneline
* redirect to dashboard on login route
* fix: background image doesn't fit
* add link component
* improve components
* implement dashboard
* improve link component
* improve margins

* adjust deep links
partial of 45a3c45

* rework scroll container
* fix: tests failing
* increase avatar size

---------

Co-authored-by: nac62116 <56918308+nac62116@users.noreply.github.com>
Co-authored-by: Sirko Stenz <sirko.stenz@digitalnoise.de>

app/auth.server.ts

@@ -4,6 +4,7 @@ import { createServerClient } from "@supabase/auth-helpers-remix";
 import { serverError, unauthorized } from "remix-utils";
 import { prismaClient } from "./prisma";
 
+// TODO: use session names based on environment (e.g. sb2-dev, sb2-prod)
 const SESSION_NAME = "sb2";
 
 export const createAuthClient = (request: Request, response: Response) => {

app/root.tsx

@@ -59,6 +59,7 @@ export const loader: LoaderFunction = async (args) => {
   const abilities = await getFeatureAbilities(authClient, [
     "events",
     "projects",
+    "dashboard",
   ]);
 
   const sessionUser = await getSessionUser(authClient);
@@ -168,7 +169,14 @@ function NavBar(props: NavBarProps) {
       <div className="container relative z-10">
         <div className="pt-3 md:pb-3 flex flex-row flex-wrap xl:flex-nowrap md:items-center xl:justify-between">
           <div className="flex-initial w-1/2 xl:w-[150px] xl:order-1">
-            <Link to="/">
+            <Link
+              to={
+                props.sessionUserInfo !== undefined &&
+                props.abilities["dashboard"].hasAccess === true
+                  ? "/dashboard"
+                  : "/"
+              }
+            >
               <HeaderLogo />
             </Link>
           </div>
@@ -289,7 +297,7 @@ function NavBar(props: NavBarProps) {
                   </li>
                   <li>
                     <Link
-                      to={`/profile/${props.sessionUserInfo.username}#organisations`}
+                      to={`/profile/${props.sessionUserInfo.username}#organizations`}
                       className="py-2 hover:bg-neutral-300 focus:bg-neutral-300"
                       onClick={closeDropdown}
                     >