Add alternate tag types

resources/assets/js/app.js

@@ -52,7 +52,7 @@ $.when($.ready).then(() => {
         }
       }); */
 
-  const sortableEl = document.getElementById("sortable");
+  let sortableEl = document.getElementById("sortable");
   let sortable;
   if (sortableEl !== null) {
     // eslint-disable-next-line no-undef
@@ -171,6 +171,16 @@ $.when($.ready).then(() => {
         }, 350);
       }
     })
+    .on("click", ".tag", (e) => {
+      e.preventDefault();
+      const tag =  $(e.target).data('tag')
+      $('#taglist .tag').removeClass('current')
+      $(e.target).addClass('current')
+      $('#sortable .item-container').show()
+      if (tag !== 'all') {
+        $('#sortable .item-container:not(.'+tag+')').hide()
+      }
+    })
     .on("click", "#add-item, #pin-item", (e) => {
       e.preventDefault();
       const app = $("#app");

resources/assets/sass/_app.scss

@@ -188,7 +188,11 @@ body {
 			border-radius: 10px;
 			> .title {
 				padding: 20px 20px 0;
-				color: white;
+				
+				a {
+					color: white;
+					text-decoration: none;
+				}
 			}
 		}
 	}
@@ -291,6 +295,9 @@ body {
 		z-index: 1;
 	}
 }
+.categorytitle {
+	color: #fff!important;
+}
 .tooltip {
 	padding: 25px;
 	border-radius: 5px;
@@ -306,13 +313,32 @@ body {
 	opacity: 0;
 	transform: translateY(-20px);
 	transition: all 0.3s;
+	pointer-events: none;
 	&.active {
 		transform: translateY(0);
 		opacity: 1;
 		z-index: 4;
 	}
 }
-
+.taglist {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 5px;
+	.tag {
+		padding: 10px 20px;
+		background: rgba(0, 0, 0, 0.608);
+		border-radius: 6px;
+		font-size: 12px;
+		cursor: pointer;
+		opacity: 0.6;
+		&.current {
+			opacity: 1;
+		}
+		&:hover:not(.current) {
+			opacity: 0.8;
+		}
+	}
+}
 .tile-actions {
     position: absolute;
     top: 0px;

resources/views/partials/taglist.blade.php

@@ -0,0 +1,13 @@
+<?php
+$treat_tags_as = \App\Setting::fetch('treat_tags_as');
+?>
+@if( $treat_tags_as == 'tags')
+    @if($taglist->first())
+        <div id="taglist" class="taglist">
+            <div class="tag white current" data-tag="all">All</div>
+            @foreach($taglist as $tag)
+                <div class="tag link{{ title_color($tag->colour) }}" style="background-color: {{ $tag->colour }}" data-tag="tag-{{ $tag->url }}">{{ $tag->title }}</div>
+            @endforeach
+        </div>
+    @endif
+@endif

resources/views/sortable.blade.php

@@ -1,10 +1,10 @@
-    <div id="sortable" class="{{ $treat_tags_as }}">
-        @if($treat_tags_as == 'categories')
+    <div id="sortable" class="{{ $treat_tags_as ?? '' }}">
+        @if(isset($treat_tags_as) && $treat_tags_as == 'categories')
 
             @foreach($categories as $category)
                 <?php $apps = $category->children; ?>
-                <div class="category">
-                <div class="title">{{ $category->title }}</div>
+                <div class="category item-container" data-name="{{ $category->title }}" data-id="{{ $category->id }}">
+                <div class="title"><a href="{{ $category->link }}" style="{{ $category->colour ? 'color: ' . $category->colour .';' : '' }}">{{ $category->title }}</a></div>
                 @foreach($apps as $app)
                     @include('item')
                 @endforeach
@@ -17,7 +17,8 @@
             @foreach($apps as $app)
                 @include('item')
             @endforeach
+            @include('add')
         @endif
 
-        @include('add')
+        
     </div>

resources/views/welcome.blade.php

@@ -1,6 +1,7 @@
 @extends('layouts.app')
 
 @section('content')
+    @include('partials.taglist')
     @include('partials.search')
 
     @if((isset($apps) && $apps->first()) || (isset($categories) && $categories->first()))