Add grid for user dashboard

app/Http/Controllers/UserController.php

@@ -36,7 +36,7 @@ class UserController extends Controller
         return json('', 0, auth()->user()->makeHidden(['password', 'ip', 'remember_token'])->toArray());
     }
 
-    public function index()
+    public function index(Filter $filter)
     {
         $user = Auth::user();
 
@@ -50,6 +50,19 @@ class UserController extends Controller
                 : trans('user.score-intro.no-return-score'),
         ]);
 
+        $grid = [
+            'layout' => [
+                ['md-7', 'md-5'],
+            ],
+            'widgets' => [
+                [
+                    ['user.widgets.dashboard.usage'],
+                    ['user.widgets.dashboard.announcement'],
+                ]
+            ],
+        ];
+        $grid = $filter->apply('grid:user.index', $grid);
+
         return view('user.index')->with([
             'statistics' => [
                 'players' => $this->calculatePercentageUsed($user->players->count(), option('score_per_player')),
@@ -62,6 +75,7 @@ class UserController extends Controller
                 'closet' => option('score_per_closet_item'),
             ],
             'announcement' => app('parsedown')->text(option_localized('announcement')),
+            'grid' => $grid,
             'extra' => ['unverified' => option('require_verification') && ! $user->verified],
         ]);
     }

resources/views/user/index.twig

@@ -3,35 +3,8 @@
 {% block title %}{{ trans('general.dashboard') }}{% endblock %}
 
 {% block content %}
-  <div class="row">
-    <div class="col-md-7">
-      <div class="card" id="usage-box">
-        <div class="card-header"></div>
-        <div class="card-body"></div>
-        <div class="card-footer"></div>
-      </div>
-    </div>
+  {{ include('shared.grid') }}
 
-    <div class="col-md-5">
-      <div class="card card-primary card-outline">
-        <div class="card-header">
-          <h3 class="card-title">{{ trans('user.announcement') }}</h3>
-          {% if auth_user().admin %}
-            &nbsp;
-            <a href="{{ url('/admin/options') }}">
-              <i class="fas fa-edit"></i>
-            </a>
-          {% endif %}
-        </div>
-        <div class="card-body">
-          {{ announcement|raw }}
-        </div>
-      </div>
-    </div>
-  </div>
-{% endblock %}
-
-{% block before_foot %}
   <div id="modal-score-instruction" class="modal fade" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg">
       <div class="modal-content">
@@ -60,7 +33,9 @@
       </div>
     </div>
   </div>
+{% endblock %}
 
+{% block before_foot %}
   <script>
     Object.defineProperty(blessing, 'extra', {
       get: () => Object.freeze({{ extra|json_encode|raw }})

resources/views/user/widgets/dashboard/announcement.twig

@@ -0,0 +1,14 @@
+<div class="card card-primary card-outline">
+  <div class="card-header">
+    <h3 class="card-title">{{ trans('user.announcement') }}</h3>
+    {% if auth_user().admin %}
+      &nbsp;
+      <a href="{{ url('/admin/options') }}">
+        <i class="fas fa-edit"></i>
+      </a>
+    {% endif %}
+  </div>
+  <div class="card-body">
+    {{ announcement|raw }}
+  </div>
+</div>

resources/views/user/widgets/dashboard/usage.twig

@@ -0,0 +1 @@
+<div class="card" id="usage-box"></div>