diff --git a/components/actors/tile.vue b/components/actors/tile.vue
index 8d31fb5..70e7783 100644
--- a/components/actors/tile.vue
+++ b/components/actors/tile.vue
@@ -74,7 +74,10 @@
- {{ actor.name }}
+ {{ actor.name }}
actorStash.id ===
}
.label {
+ height: 1.75rem;
display: flex;
justify-content: space-between;
align-items: center;
@@ -168,7 +172,7 @@ const favorited = ref(props.actor.stashes.some((actorStash) => actorStash.id ===
}
.name {
- padding: .35rem .25rem .35rem .5rem;
+ padding: 0 .25rem 0 .5rem;
}
.favicon {
diff --git a/pages/scene/+Page.vue b/pages/scene/+Page.vue
index 91e68dc..c39d187 100644
--- a/pages/scene/+Page.vue
+++ b/pages/scene/+Page.vue
@@ -140,30 +140,41 @@
-
+
+
+
+
+
tag.actorId === null),
- actor: null,
- },
- ...scene.actors.map((actor) => ({
- actor,
- tags: scene.tags.filter((tag) => tag.actorId === actor.id),
- })),
-]
- .filter((actorTags) => actorTags.tags.length > 0)
- .toSorted((actorTagsA, actorTagsB) => {
- const priorityA = actorTagsA.tags.reduce((acc, tag) => acc + tag.priority, 0) / actorTagsA.tags.length;
- const priorityB = actorTagsB.tags.reduce((acc, tag) => acc + tag.priority, 0) / actorTagsB.tags.length;
+/*
+const tags = scene.tags.map((tag) => ({
+ ...tag,
+ actor: scene.actors.find((actor) => actor.id === tag.actorId) || null,
+}));
+*/
- return priorityB - priorityA;
- });
+const actorsById = Object.fromEntries(scene.actors.map((actor) => [actor.id, actor]));
+
+const tags = Array.from(scene.tags
+ .reduce((acc, tag) => {
+ const accTag = acc.get(tag.id);
+
+ if (accTag && tag.actorId) {
+ return acc.set(tag.id, {
+ ...tag,
+ actors: [...accTag.actors, actorsById[tag.actorId]].toSorted((actorA, actorB) => actorA.name.localeCompare(actorB.name)),
+ });
+ }
+
+ if (accTag) {
+ // shouldn't happen, but account for it
+ return acc;
+ }
+
+ if (tag.actorId) {
+ return acc.set(tag.id, {
+ ...tag,
+ actors: [actorsById[tag.actorId]],
+ });
+ }
+
+ return acc.set(tag.id, {
+ ...tag,
+ actors: [],
+ });
+ }, new Map())
+ .values());
const showSummaryDialog = ref(false);
@@ -671,7 +704,7 @@ function copySummary() {
.tags {
display: flex;
flex-wrap: wrap;
- gap: .25rem 1rem;
+ gap: .35rem;
}
.tags-section {
@@ -691,25 +724,60 @@ function copySummary() {
overflow-x: auto;
.actor {
- width: 10rem;
+ width: 9rem;
flex-shrink: 0;
}
}
.tag {
- padding: .5rem;
+ display: flex;
border-radius: .25rem;
- margin: 0 .25rem .25rem 0;
background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak-30);
+ overflow: hidden;
+
+ &:hover {
+ box-shadow: 0 0 3px var(--shadow-weak-20);
+ }
+}
+
+.tag-name {
+ display: inline-flex;
+ align-items: center;
+ padding: .5rem;
&:hover {
color: var(--primary);
- box-shadow: 0 0 3px var(--shadow-weak-20);
cursor: pointer;
}
}
+.tag-frame {
+ display: inline-flex;
+ justify-content: center;
+ width: 2.25rem;
+ height: 2.25rem;
+ position: relative;
+ overflow: hidden;
+
+ &::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ box-shadow: inset 0 0 3px var(--shadow-weak-20);
+ pointer-events: none; /* so it doesn't block hover/click on the image */
+ }
+}
+
+.tag-avatar {
+ height: 350%;
+}
+
+.tag-star {
+ height: 100%;
+ fill: var(--primary);
+}
+
.movies,
.series {
display: grid;