moar stuff.

frontend/src/lib/components/Lamp.svelte

@@ -9,6 +9,7 @@
 	import { SupportFlags } from "$lib/models/device";
 	import { rgb, type ColorRGB } from "../models/color";
 	import DeviceIcon from "./DeviceIcon.svelte";
+	import Icon from "./Icon.svelte";
 
   export let device: Device;
   export let compact: boolean = false;
@@ -25,6 +26,9 @@
   let barColor: ColorRGB | null;
   let barFraction: number | null;
   let roundboiText: string | null;
+  let roles: string[];
+  let tags: string[];
+  let hasRoleOrTag: boolean;
   $: {
     // TODO: Fix device.name on the backend
     const nameAlias = device.aliases?.find(a => a.startsWith("lucifer:name:"));
@@ -34,6 +38,10 @@
       deviceTitle = "";
     }
 
+    roles = device.aliases?.filter(a => a.startsWith("lucifer:role:")).map(a => a.slice("lucifer:role:".length));
+    tags = device.aliases?.filter(a => a.startsWith("lucifer:tag:")).map(a => a.slice("lucifer:tag:".length));
+    hasRoleOrTag = !!(roles.length || tags.length)
+
     barFraction = null;
     barColor = null;
     iconColor = null;
@@ -114,7 +122,25 @@
         </DeviceIcon>
       {/if}
     </div>
-    <div class="title">{displayTitle}</div>
+    <div class="title">
+      <div class="name" class:hasRoleOrTag>{displayTitle}</div>
+      {#if hasRoleOrTag}
+        <div class="tag-list">
+          {#each roles as role}
+            <div class="tag">
+              <Icon block name="masks_theater" />
+              <div class="tag-name">{role}</div>
+            </div>
+          {/each}
+          {#each tags as tag}
+            <div class="tag">
+              <Icon block name="tag" />
+              <div class="tag-name">{tag}</div>
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </div>
   </div>
   <div class="flatboi">
     {#if barColor != null && barFraction != null}
@@ -182,7 +208,24 @@
         margin-left: 2em
         margin-right: 1ch
         height: 1.6em
-          
+
+        > div.name.hasRoleOrTag
+          margin-top: -0.275em
+
+        > div.tag-list
+          display: flex
+          flex-direction: row
+          font-size: 0.5em
+
+          > div.tag
+            display: flex
+            flex-direction: row
+            padding: 0 0.5ch
+            padding-right: 1ch
+            
+            div.tag-name
+              padding-left: 0.5ch
+
     > div.flatboi
       height: 0.2em