},
+ },
+})
+ .createMachine({
+ context: ({ input }) => ({
+ entryState: input.entryState,
+ error: {
+ code: "",
+ message: "",
+ },
+ }),
+ });
diff --git a/src/pages/AddEntryPage.vue b/src/pages/AddEntryPage.vue
index a84bd16..82d5d81 100644
--- a/src/pages/AddEntryPage.vue
+++ b/src/pages/AddEntryPage.vue
@@ -3,7 +3,10 @@
import type { TmdbGenreName } from "@/libs/apis/tmdb/schemas/genres.ts";
import type { ArtWorkTitle } from "@/libs/apis/tmdb/schemas/works.ts";
+ import AddDiaryEntryForm from "@/components/entries/AddDiaryEntryForm.vue";
+ import { getCountriesFromCompanies } from "@/libs/apis/tmdb/countries.ts";
import { getMainMovieCrew } from "@/libs/apis/tmdb/crew.ts";
+ import { getLanguagesFromSpokenLanguages } from "@/libs/apis/tmdb/languages";
import { TmdbGenre } from "@/libs/apis/tmdb/schemas/genres.ts";
import { generateDitheredBufferFromUrl } from "@/libs/utils/images.ts";
import { convertToMillions } from "@/libs/utils/numbers.ts";
@@ -11,15 +14,19 @@
import { RuntimeClient } from "@/services/runtime-client.ts";
import { useEntryStore } from "@/stores/entry.ts";
import { canvasFromPixelBuffer } from "@thi.ng/pixel";
- import { Array as Arr, Effect, pipe, String as Str } from "effect";
+ import { Array as Arr, Effect, Option, pipe, String as Str } from "effect";
+ import { isNotUndefined } from "effect/Predicate";
import { ref, type Ref, type ShallowRef, useTemplateRef, watch } from "vue";
import { useRouter } from "vue-router";
// Types
interface AddEntryDisplayData {
budget: string;
+ countries: string[];
genres: TmdbGenreName[];
+ hasDiaryEntry: boolean;
hasUniqueOriginalTitle: boolean;
+ languages: string[];
mainCrew: MovieMainCrew;
originalLanguage: string;
originalTitle: ArtWorkTitle;
@@ -55,9 +62,14 @@
// Récupère les données à afficher.
displayData.value = {
budget: entryStore.tmdbData.budget ? `${String(convertToMillions(entryStore.tmdbData.budget))} M$` : "?",
+ countries: getCountriesFromCompanies(entryStore.tmdbData.production_companies).pipe(
+ Option.getOrElse(() => []),
+ ),
genres: Arr.map(entryStore.tmdbData.genres, (genre: TmdbGenre) => genre.name),
+ hasDiaryEntry: isNotUndefined(entryStore.diaryEntry.artWorkId),
hasUniqueOriginalTitle:
Str.toLowerCase(entryStore.diaryEntry.originalTitle) !== Str.toLowerCase(entryStore.diaryEntry.title),
+ languages: getLanguagesFromSpokenLanguages(entryStore.tmdbData.spoken_languages),
mainCrew: getMainMovieCrew(entryStore.tmdbData.credits.crew),
originalLanguage: entryStore.tmdbData.original_language,
originalTitle: entryStore.diaryEntry.originalTitle,
@@ -133,17 +145,34 @@
+
+
+
+
+ Langues
+ - {{ language }}
+
+
{{ displayData?.tagline }}
{{ displayData?.overview }}
-
+
+
+
+
@@ -198,7 +227,7 @@
text-transform: uppercase;
}
- .genres {
+ .inline-list {
display: inline-flex;
strong {
@@ -215,4 +244,8 @@
}
}
}
+
+ .diary-entry-state {
+ margin-block-end: var(--s2);
+ }
diff --git a/src/pages/SearchPage.vue b/src/pages/SearchPage.vue
index c2408f3..00b9ff1 100644
--- a/src/pages/SearchPage.vue
+++ b/src/pages/SearchPage.vue
@@ -166,7 +166,7 @@
posterUrl: result.poster_path,
releaseDate: DateTime.format(result.release_date, { dateStyle: "short", locale: "sv-SE" }),
title: result.title,
- tmdbGenres: result.genre_ids,
+ tmdbGenreIds: result.genre_ids,
tmdbId: result.id,
} satisfies MergedTmdbDataDiaryEntry,
);
diff --git a/src/styles/base/elements.css b/src/styles/base/elements.css
index f017eef..0a50be1 100644
--- a/src/styles/base/elements.css
+++ b/src/styles/base/elements.css
@@ -68,8 +68,3 @@
}
}
}
-
-:where(fieldset > legend) {
- float: left;
- inline-size: 100%;
-}
diff --git a/src/styles/themes/default/forms.css b/src/styles/themes/default/forms.css
index 8f04762..0980873 100644
--- a/src/styles/themes/default/forms.css
+++ b/src/styles/themes/default/forms.css
@@ -1,11 +1,13 @@
:root {
--fields-padding: var(--s-4);
--fieldset-legend-spacing: var(--s0);
- --input-border: 1px solid var(--root-text-color);
- --radio-marker-size: var(--s-2);
- --radio-marker-background-color: var(--root-text-color);
- --radio-background-color: var(--root-background-color);
+ --field-background-color: var(--root-background-color);
+ --field-border: 1px solid var(--root-text-color);
+ --field-padding: var(--s-2);
+ --field-text-color: var(--root-text-color);
--radio-label-spacing: var(--s-2);
+ --radio-marker-background-color: var(--root-text-color);
+ --radio-marker-size: var(--s-2);
}
/* Groupe de champs. */
@@ -13,13 +15,30 @@
padding: var(--fields-padding);
}
-input[type="text"], input[type="number"] {
- padding: var(--fields-padding);
- border: var(--input-border);
+/* Ensemble label-champ. */
+.field {
+ display: flex;
+ flex-flow: column nowrap;
+
+ &:has(input[type="radio"]) {
+ flex-flow: row nowrap;
+ }
+}
+
+/* Champs particuliers. */
+:is(input, select, textarea):not(input[type="radio"]) {
+ padding: var(--field-padding);
+ border: var(--field-border);
+ color: var(--field-text-color);
+ background-color: var(--field-background-color);
&::selection {
- color: var(--root-text-color);
- background-color: var(--root-background-color);
+ color: var(--field-background-color);
+ background-color: var(--field-text-color);
+ }
+
+ label:has(~ &) {
+ font-weight: var(--brkly-font-weight-semibold);
}
}
@@ -28,9 +47,9 @@ input[type="radio"] {
aspect-ratio: 1/1;
inline-size: var(--s-1);
block-size: var(--s-1);
- border: var(--input-border);
+ border: var(--field-border);
border-radius: 50%;
- background: var(--radio-background-color);
+ background: var(--field-background-color);
&::after {
content: "";
@@ -45,13 +64,13 @@ input[type="radio"] {
background: var(--radio-marker-background-color);
}
- + label {
- padding-left: var(--radio-label-spacing);
- }
-
&:checked {
&::after {
opacity: 1;
}
}
+
+ + label {
+ padding-left: var(--radio-label-spacing);
+ }
}