some styling in tables

front/js/svelte/content/elements/Reference.svelte

@@ -18,7 +18,7 @@
 
 <div class="references">
     {#each recordEdges as recordEdge}
-        <span class="mr-3">
+        <span class="reference">
             <PreviewCardSmall {schemas} {graph} record={recordEdge}/>
         </span>
     {/each}

front/js/svelte/records/PreviewCardSmall.svelte

@@ -13,11 +13,8 @@
 {#if record?.data}
     <a
         href="{channel.lucentUrl}/records/{record.id}"
-        class="text-decoration-none rounded py-1 px-2 d-inline-block"
         {title}
-        style="border:2px solid {!schema.color
-            ? '#999'
-            : schema.color}!important;white-space: nowrap;"
+        class="reference"
     >
         {title}
     </a>

front/sass/_table.scss

@@ -113,6 +113,18 @@
   .field-ui-number {
     text-align: right;
   }
+
+  .references{
+    display: flex;
+    gap: 4px;
+
+    .reference{
+      font-size: 13px;
+      border-radius: 12px;
+      background: var(--p30);
+      padding: 1px 5px;
+    }
+  }
 }
 
 .file-table-row {

src/macros.php

@@ -45,3 +45,21 @@ if (!function_exists('schemas_path')) {
         return storage_path("lucent/lucent.schemas.json");
     }
 }
+
+if (!function_exists('lucent_file')) {
+    function lucent_file(\Lucent\Record\QueryRecord $record): string
+    {
+        $path = $record->_file->path;
+        return   app()->make(\Lucent\Channel\ChannelService::class)->channel->disks[$record->_file->disk] ."/". $path;
+    }
+}
+
+if (!function_exists('lucent_image')) {
+    function lucent_image(\Lucent\Record\QueryRecord $record, string $template): string
+    {
+        $path = $record->_file->path;
+        return   app()->make(\Lucent\Channel\ChannelService::class)->channel->disks[$record->_file->disk] . "/templates/$template/$path";
+    }
+}
+
+