The Highlights update

app/Http/Controllers/HighlightController.php

@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Highlight;
+use App\Http\Requests\StoreHighlightRequest;
+use Illuminate\Http\Request;
+
+class HighlightController extends Controller
+{
+    /**
+     * Store a newly created resource in storage.
+     *
+     * @param  \App\Http\Requests\StoreHighlightRequest  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function store(StoreHighlightRequest $request)
+    {
+        $data = $request->validated();
+
+        $highlight = new Highlight();
+        $highlight->user_id = $request->user()->id;
+        $highlight->expression = $data['expression'];
+        $highlight->color = $data['color'];
+        $highlight->save();
+
+        return $request->user()->highlights()->get();
+    }
+
+    /**
+     * Update the specified resource in storage.
+     *
+     * @param  \App\Http\Requests\StoreHighlightRequest  $request
+     * @param  \App\Models\Models\Highlight  $highlight
+     * @return \Illuminate\Http\Response
+     */
+    public function update(StoreHighlightRequest $request, Highlight $highlight)
+    {
+        if($highlight->user_id !== $request->user()->id) {
+            abort(404);
+        }
+
+        $data = $request->validated();
+
+        $highlight->expression = $data['expression'];
+        $highlight->color = $data['color'];
+        $highlight->save();
+
+        return $request->user()->highlights()->get();
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     *
+     * @param  \App\Models\Models\Hightlight  $hightlight
+     * @return \Illuminate\Http\Response
+     */
+    public function destroy(Request $request, Highlight $highlight)
+    {
+        if($highlight->user_id !== $request->user()->id) {
+            abort(404);
+        }
+
+        $highlight->delete();
+        return $request->user()->highlights()->get();
+    }
+}

app/Http/Controllers/HomeController.php

@@ -66,6 +66,14 @@ public function theme() {
         return view('account.themes')->with(['availableThemes' => $availableThemes]);
     }
 
+    /**
+     * Manage user's highlights
+     */
+    public function highlights()
+    {
+        return view('account.highlights');
+    }
+
     public function getThemes() {
         return ThemeManager::listAvailableThemes();
     }

app/Http/Requests/StoreHighlightRequest.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace App\Http\Requests;
+
+use App\Models\Highlight;
+use Illuminate\Foundation\Http\FormRequest;
+
+class StoreHighlightRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'expression' => [
+                'required',
+            ],
+            'color'      => [
+                'required',
+                'regex:/^#[0-9a-f]{3,6}$/i',
+            ],
+        ];
+    }
+}

app/Models/Highlight.php

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class Highlight extends Model
+{
+    use HasFactory;
+
+    public function user() {
+        return $this->belongsTo(User::class);
+    }
+}

app/Models/User.php

@@ -66,6 +66,16 @@ public function documents()
         return $this->hasManyThrough(Bookmark::class, Folder::class);
     }
 
+    /**
+     * Highlights registered by this user
+     *
+     * @return \Illuminate\Database\Eloquent\Relations\HasMany
+     */
+    public function highlights()
+    {
+        return $this->hasMany(Highlight::class);
+    }
+
     # --------------------------------------------------------------------------
     # ----| Methods |-----------------------------------------------------------
     # --------------------------------------------------------------------------

app/Providers/BladeServiceProvider.php

@@ -24,6 +24,14 @@ public function register()
      */
     public function boot()
     {
+        $this->registerThemeVariables();
+        $this->registerHighlights();
+    }
+
+    /**
+     * Register theme-specific variables into view
+     */
+    protected function registerThemeVariables() {
         view()->composer('*', function ($view) {
             $theme = config('app.theme');
 
@@ -74,4 +82,16 @@ protected function getIconsFile($theme = null) {
 
         return null;
     }
+
+    protected function registerHighlights() {
+        view()->composer('*', function ($view) {
+            if (!auth()->check()) {
+                return;
+            }
+
+            $highlights = auth()->user()->highlights()->get();
+
+            view()->share('highlights', $highlights);
+        });
+    }
 }

config/version.yml

@@ -5,9 +5,9 @@ current:
   major: 0
   minor: 4
   patch: 4
-  prerelease: 1-g5e5fd76
+  prerelease: 2-gca54dd2
   buildmetadata: ''
-  commit: 5e5fd7
+  commit: ca54dd
   timestamp:
     year: 2020
     month: 10

config/ziggy.php

@@ -27,6 +27,9 @@
         'folder.show',
         'folder.store',
         'folder.update',
+        'highlight.destroy',
+        'highlight.store',
+        'highlight.update',
         'home'
     ],
 ];

database/migrations/2020_10_09_221017_create_highlights_table.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateHighlightsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('highlights', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('user_id')->constrained('users')->onDelete('cascade');
+            $table->text('expression');
+            $table->string('color', 7);
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('highlights');
+    }
+}

package.json

@@ -25,6 +25,7 @@
         "sass": "^1.26.12",
         "sass-loader": "^8.0.0",
         "tailwindcss": "^1.8.11",
+        "textcolor": "^1.0.2",
         "vue": "^2.6.12",
         "vue-template-compiler": "^2.6.12",
         "vuex": "^3.5.1"

public/js/highlights.js.LICENSE.txt

@@ -0,0 +1,11 @@
+/*!
+ * Vue.js v2.6.12
+ * (c) 2014-2020 Evan You
+ * Released under the MIT License.
+ */
+
+/*!
+ * vuex v3.5.1
+ * (c) 2020 Evan You
+ * @license MIT
+ */

public/mix-manifest.json

@@ -1,9 +1,10 @@
 {
-    "/js/app.js": "/js/app.js?id=a60b304e941732617ba9",
-    "/themes/cyca-dark/theme.css": "/themes/cyca-dark/theme.css?id=413c81b3aca59764179f",
-    "/themes/cyca-light/theme.css": "/themes/cyca-light/theme.css?id=fdac9b3775b2e876b310",
-    "/js/import.js": "/js/import.js?id=ae7efb211c07b0292933",
-    "/js/themes-browser.js": "/js/themes-browser.js?id=62022c1fe5d200aad9b6",
+    "/js/app.js": "/js/app.js?id=00a40eda576f46e93f37",
+    "/themes/cyca-dark/theme.css": "/themes/cyca-dark/theme.css?id=f95a8b57b8bf8c8993a9",
+    "/themes/cyca-light/theme.css": "/themes/cyca-light/theme.css?id=ddebef2fd3bdf5569cbc",
+    "/js/highlights.js": "/js/highlights.js?id=7d434ae3e4e2f88330f7",
+    "/js/import.js": "/js/import.js?id=a22d9f4a7e1f9bb440f3",
+    "/js/themes-browser.js": "/js/themes-browser.js?id=952525d10bea2b418aef",
     "/themes/cyca-dark/theme.json": "/themes/cyca-dark/theme.json?id=e6af9f523b70bc467aa4",
     "/themes/cyca-light/theme.json": "/themes/cyca-light/theme.json?id=bb59033be8f29999311e"
 }

resources/css/components/layout.css

@@ -53,3 +53,13 @@
 #account-content-wrapper {
     @apply w-1/4 pl-6;
 }
+
+/* Right part of account-related pages - Large wrapper */
+#account-content-wrapper.large {
+    @apply w-1/2;
+}
+
+/* Right part of account-related pages - Title */
+#account-content-wrapper h2 {
+    @apply text-4xl my-4;
+}

resources/css/components/list-items.css

@@ -61,3 +61,7 @@
 
     color: theme("colors.feed-item.meta");
 }
+
+.highlight {
+    @apply rounded px-1;
+}

resources/js/components/FeedItem.vue

@@ -6,7 +6,7 @@
         rel="noopener noreferrer"
         v-on:click.left.exact.stop.prevent="onClicked"
     >
-        <div class="feed-item-label" v-html="feedItem.title"></div>
+        <div class="feed-item-label" v-html="highlight(feedItem.title)"></div>
         <div class="feed-item-meta">
             <date-time
                 class="flex-none mr-4 w-2/12"
@@ -20,6 +20,7 @@
 </template>
 
 <script>
+import TEXTColor from 'textcolor';
 import { mapGetters, mapActions } from "vuex";
 
 export default {
@@ -84,6 +85,15 @@ export default {
 
             self.$emit("selected-feeditems-changed", selectedFeedItems);
         },
+        highlight: function(title) {
+            highlights.forEach(function(highlight) {
+                var regex = new RegExp("(" + highlight.expression + ")(?![^<]*>|[^<>]*</)", "i");
+                let textColor = TEXTColor.findTextColor(highlight.color);
+                title = title.replace(regex, '<span class="highlight" style="color: ' + textColor + '; background-color: ' + highlight.color + '">$1</span>');
+            });
+
+            return title;
+        }
     },
 };
 </script>

resources/js/components/Highlight.vue

@@ -0,0 +1,36 @@
+<template>
+    <tr>
+        <td class="w-1/2"><input type="text" class="w-full" v-model="highlight.expression" v-bind:aria-label="__('Expression')" /></td>
+        <td class="w-1/4"><input type="color" class="w-full" v-model="highlight.color" v-bind:aria-label="__('Color')" /></td>
+        <td>
+            <button type="button" class="danger" v-on:click="removeHighlight(highlight.id)" v-bind:title="__('Remove highlight')">
+                <svg fill="currentColor" width="16" height="16">
+                    <use v-bind:xlink:href="icon('trash')" />
+                </svg>
+            </button>
+        </td>
+    </tr>
+</template>
+
+<script>
+export default {
+    props: ['highlight'],
+    mounted: function() {
+        const self = this;
+
+        self.$watch('highlight.expression', self.updateHighlight);
+    },
+    methods: {
+        updateHighlight: async function() {
+            const self = this;
+            const json = await api.put(route('highlight.update', self.highlight), {
+                expression: self.highlight.expression,
+                color: self.highlight.color
+            });
+        },
+        removeHighlight: function(id) {
+            this.$emit('destroy', id);
+        }
+    }
+}
+</script>