wip

public/build/manifest.json

@@ -1,66 +1,66 @@
 {
   "resources/js/app.css": {
-    "file": "assets/app-f3558307.css",
+    "file": "assets/app-31a2203c.css",
     "src": "resources/js/app.css"
   },
   "resources/js/app.js": {
     "css": [
-      "assets/app-f3558307.css"
+      "assets/app-31a2203c.css"
     ],
-    "file": "assets/app-1e861c10.js",
+    "file": "assets/app-2a95995e.js",
     "isEntry": true,
     "src": "resources/js/app.js"
   },
   "resources/js/chart.js": {
-    "file": "assets/chart-cdfe4a3f.js",
+    "file": "assets/chart-89c3886a.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/chart.js"
   },
   "resources/js/dropdown.js": {
-    "file": "assets/dropdown-cdfe4a3f.js",
+    "file": "assets/dropdown-89c3886a.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/dropdown.js"
   },
   "resources/js/editor.js": {
-    "file": "assets/editor-cdfe4a3f.js",
+    "file": "assets/editor-89c3886a.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/editor.js"
   },
   "resources/js/media-manager.js": {
-    "file": "assets/media-manager-cdfe4a3f.js",
+    "file": "assets/media-manager-89c3886a.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/media-manager.js"
   },
   "resources/js/repeater.js": {
-    "file": "assets/repeater-cdfe4a3f.js",
+    "file": "assets/repeater-89c3886a.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/repeater.js"
   },
   "resources/js/table.js": {
-    "file": "assets/table-cdfe4a3f.js",
+    "file": "assets/table-89c3886a.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/table.js"
   },
   "resources/sass/app.scss": {
-    "file": "assets/app-ae0fb693.js",
+    "file": "assets/app-49feabf0.js",
     "imports": [
       "resources/js/app.js"
     ],

resources/sass/component/_index.scss

@@ -8,17 +8,19 @@
 @forward 'data-group';
 @forward 'data-table';
 @forward 'form';
+@forward 'media-uploader';
+@forward 'modal';
+@forward 'notification-dot';
+@forward 'notification';
 @forward 'open-search';
 @forward 'or-separator';
 @forward 'pagination';
 @forward 'preloader';
 @forward 'prism';
 @forward 'range-group';
+@forward 'search-modal';
 @forward 'skip-link';
 @forward 'theme-switcher';
 @forward 'user-menu';
-@forward 'modal';
-@forward 'notification';
-@forward 'media-uploader';
-@forward 'search-modal';
+@forward 'welcome-card';
 @forward 'widget';

resources/sass/component/_notification-dot.scss

@@ -0,0 +1,23 @@
+@use 'sprucecss/scss/spruce' as *;
+
+.notification-dot {
+  --size: 1em;
+  background-color: color('success', 'alert');
+  block-size: calc(var(--size) / 2);
+  border-radius: 50%;
+  display: inline-flex;
+  inline-size: calc(var(--size) / 2);
+  margin-left: 10px;
+  position: relative;
+
+  &::before {
+    block-size: var(--size);
+    border: 3px solid color('success', 'alert');
+    border-radius: 50%;
+    content: '';
+    inline-size: var(--size);
+    inset: calc(var(--size) / 4 * -1) auto auto calc(var(--size) / 4 * -1);
+    opacity: 0;
+    position: absolute;
+  }
+}

resources/sass/component/_notification.scss

@@ -133,6 +133,12 @@
 
   &__title {
     font-size: config('font-size-base', $typography);
+
+    .notification-dot {
+      inset-block-start: -0.1em;
+      margin-inline-end: spacer('xxs');
+      position: relative;
+    }
   }
 
   &__link {

resources/sass/component/_welcome-card.scss

@@ -0,0 +1,48 @@
+@use 'sprucecss/scss/spruce' as *;
+
+.welcome-card {
+  @include a11y-card-link('.welcome-card__link', true);
+  $this: &;
+  display: flex;
+  gap: spacer('m');
+  padding: spacer-clamp('m', 2rem);
+
+  &__icon {
+    --size: 3rem;
+    align-items: center;
+    background-color: color('icon-background', 'widget');
+    block-size: var(--size);
+    border-radius: config('border-radius-sm', $display);
+    color: color('primary');
+    display: flex;
+    flex-shrink: 0;
+    inline-size: var(--size);
+    justify-content: center;
+
+    svg {
+      --size: 1.4rem;
+      block-size: var(--size);
+      inline-size: var(--size);
+    }
+  }
+
+  &__title {
+    font-size: font-size('h4');
+    font-weight: 600;
+    margin-block: 0;
+  }
+
+  &__link {
+    color: color('heading');
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      color: color('heading');
+    }
+  }
+
+  &__body {
+    @include layout-stack('xs');
+  }
+}

resources/sass/component/_widget.scss

@@ -12,6 +12,36 @@
   display: flex;
   justify-content: space-between;
 
+  &--welcome {
+    --column: 1;
+    display: grid;
+    grid-template-columns: repeat(var(--column), minmax(0, 1fr));
+
+    > * {
+      block-size: 100%;
+    }
+
+    > * + * {
+      border-block-start: 1px solid color('border');
+    }
+
+    @include breakpoint('lg') {
+      --column: 2;
+
+      > * {
+        border-block-start: none;
+      }
+
+      > *:not(:nth-last-of-type(1), :nth-last-of-type(2)) {
+        border-block-end: 1px solid color('border');
+      }
+
+      > *:nth-of-type(even) {
+        border-inline-start: 1px solid color('border');
+      }
+    }
+  }
+
   &--primary {
     background-color: color('primary');
     border: 0;

resources/views/app.blade.php

@@ -69,6 +69,9 @@
         </main>
     </div>
 
+    {{-- Notifications --}}
+    <x-root::layout.notifications />
+
     {{-- Modals --}}
     <div id="modals"></div>
 

resources/views/components/layout/notifications.blade.php

@@ -1,10 +1,4 @@
-<div id="notifications" class="app-notification" x-data="notifications('{{ $url }}')" x-on:click.outside="open = false" data-turbo-permanent>
-    <div
-        class="app-notification__backdrop"
-        x-on:click="open = ! open"
-        x-transition
-        x-show="open"
-    ></div>
+<div id="notifications" class="app-notification" x-data="notifications('{{ $url }}')" data-turbo-permanent>
     <button
         class="btn btn--light btn--icon btn--counter app-notification__toggle"
         aria-label="{{ __('Notifications') }}"
@@ -16,54 +10,64 @@ class="btn btn--light btn--icon btn--counter app-notification__toggle"
             <span class="btn__counter" x-text="unread"></span>
         </template>
     </button>
-    <div class="app-notification__drawer" x-bind:data-state="open ? 'open' : 'closed'" x-transition>
-        <div class="app-notification__header">
-            <h2 class="app-notification__title">{{ __('Notifications') }}</h2>
-            <button
-                type="button"
-                class="btn btn--sm btn--icon btn--light"
-                aria-label="{{ __('Close') }}"
-                x-on:click="open = false"
-            >
-                <x-root::icon name="close" class="btn__icon" />
-            </button>
-        </div>
-        <div class="app-notification__list">
-            <template x-if="notifications.length === 0">
-                <div class="notification-card">
-                    <div class="alert alert--info">{{ __("You don't have any notifications yet.") }}</div>
+    <template x-teleport="#modals">
+        <div>
+            <div class="app-notification__backdrop" x-on:click="open = false" x-transition x-show="open"></div>
+            <div class="app-notification__drawer" x-bind:data-state="open ? 'open' : 'closed'" x-transition>
+                <div class="app-notification__header">
+                    <h2 class="app-notification__title">{{ __('Notifications') }}</h2>
+                    <button
+                        type="button"
+                        class="btn btn--sm btn--icon btn--light"
+                        aria-label="{{ __('Close') }}"
+                        x-on:click="open = false"
+                    >
+                        <x-root::icon name="close" class="btn__icon" />
+                    </button>
                 </div>
-            </template>
-            <template x-for="notification in notifications" x-bind:key="notification.id">
-                <div
-                    class="notification-card"
-                    x-data="{ open: false }"
-                    x-bind:class="{ 'notification-card--open': open }"
-                >
-                    <div class="notification-card__header">
-                        <div class="notification-card__caption">
-                            <h3 x-bind:id="notification.id" class="notification-card__title" x-text="notification.subject"></h3>
-                            <p x-text="notification.formatted_created_at"></p>
+                <div class="app-notification__list">
+                    <template x-if="notifications.length === 0">
+                        <div class="notification-card">
+                            <div class="alert alert--info">{{ __("You don't have any notifications yet.") }}</div>
                         </div>
-                        <button
-                            aria-label="{{ __('Toggle notification') }}"
-                            class="btn btn--primary btn--sm btn--icon notification-card__control"
-                            x-bind:aria-describedby="notification.id"
-                            x-on:click="open = ! open; markAsRead(notification)"
+                    </template>
+                    <template x-for="notification in notifications" x-bind:key="notification.id">
+                        <div
+                            class="notification-card"
+                            x-data="{ open: false }"
+                            x-bind:class="{ 'notification-card--open': open }"
                         >
-                            <x-root::icon name="plus" class="btn__icon" />
-                        </button>
-                    </div>
-                    <div class="notification-card__body" x-bind:aria-hidden="open ? 'false' : 'true'">
-                        <div x-html="notification.message"></div>
-                    </div>
+                            <div class="notification-card__header">
+                                <div class="notification-card__caption">
+                                    <h3 x-bind:id="notification.id" class="notification-card__title">
+                                        <template x-if="! notification.is_read">
+                                            <span class="notification-dot"></span>
+                                        </template>
+                                        <span x-text="notification.subject"></span>
+                                    </h3>
+                                    <p x-text="notification.formatted_created_at"></p>
+                                </div>
+                                <button
+                                    aria-label="{{ __('Toggle notification') }}"
+                                    class="btn btn--primary btn--sm btn--icon notification-card__control"
+                                    x-bind:aria-describedby="notification.id"
+                                    x-on:click="open = ! open; markAsRead(notification)"
+                                >
+                                    <x-root::icon name="plus" class="btn__icon" />
+                                </button>
+                            </div>
+                            <div class="notification-card__body" x-bind:aria-hidden="open ? 'false' : 'true'">
+                                <div x-html="notification.message"></div>
+                            </div>
+                        </div>
+                    </template>
                 </div>
-            </template>
+                <template x-if="nextPageUrl">
+                    <button type="button" class="btn btn--primary btn--block" x-on:click="fetch">
+                        {{ __('Load more') }}
+                    </button>
+                </template>
+            </div>
         </div>
-        <template x-if="nextPageUrl">
-            <button type="button" class="btn btn--primary btn--block" x-on:click="fetch">
-                {{ __('Load more') }}
-            </button>
-        </template>
-    </div>
+    </template>
 </div>