Remove unused components and models for improved maintainability

- Deleted redundant components (`AddActionButton`, `AlertBox`, `AlertStack`, `BackButton`, `CancelButton`, and `CollapsableArea`) and related files. - Removed unused models (`Book`, `BookSerie`, `BookTables`, `Character`, and `Chapter`) to reduce codebase clutter. - Updated project structure and references to reflect these removals.
2026-03-22 22:37:31 -04:00
parent e8aaef108b
commit 64ed90d993
229 changed files with 15091 additions and 21289 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,30 +1,178 @@
@import "tailwindcss";

+/*
+ * === ERitors Scribe Design Tokens ===
+ *
+ * Theme values are defined in :root and overridable via [data-theme].
+ * The @theme block references these variables so Tailwind utilities
+ * (bg-primary, text-muted, etc.) automatically follow the active theme.
+ *
+ * COLORS:
+ *   Brand ........... primary, primary-dark, primary-light
+ *   Surfaces ........ background, dark-background, darkest-background, secondary, tertiary
+ *   Semantic surfaces surface-primary, surface-secondary, surface-elevated
+ *   Text ............ text-primary, text-secondary, muted, text-dimmed
+ *   Semantic ........ success, error, warning, info
+ *   Editor .......... editor-text, editor-bold, editor-heading, editor-page-sepia
+ *   Scrollbar ....... scrollbar-track, scrollbar-thumb, scrollbar-thumb-hover
+ *   Utility ......... glass-bg, surface-gradient-dark, surface-gradient-light
+ *   Accents ......... accent-blue, accent-green, accent-orange, accent-purple, accent-red
+ *   Interactive ..... interactive, interactive-hover
+ *
+ * SHADOWS: shadow-feature-hover, shadow-focus-ring
+ * FONTS:   font-family-lora, font-family-lora-italic, font-family-adlam
+ */
+
+:root, :root[data-theme="dark"] {
+    /* Brand */
+    --theme-primary: #51AE84;
+    --theme-primary-dark: #3A8B69;
+    --theme-primary-light: #74C9A0;
+
+    /* Surfaces */
+    --theme-secondary: #393B40;
+    --theme-tertiary: #26272B;
+    --theme-background: #1E1E22;
+    --theme-dark-background: #1B1C1F;
+    --theme-darkest-background: #191A1C;
+    --theme-surface-gradient-dark: #313337;
+    --theme-surface-gradient-light: #45474D;
+    --theme-glass-bg: rgba(43, 45, 48, 0.7);
+
+    /* Text */
+    --theme-text-primary: #F0F0F4;
+    --theme-text-secondary: #BCBEC4;
+    --theme-muted: #B0B0B0;
+    --theme-text-dimmed: #6F737A;
+
+    /* Semantic */
+    --theme-success: #28A745;
+    --theme-error: #DC3545;
+    --theme-warning: #FFC107;
+    --theme-info: #17A2B8;
+
+    /* Gray scale */
+    --theme-gray: #808388;
+    --theme-gray-light: #A0A3A8;
+    --theme-gray-dark: #45474D;
+
+    /* Scrollbar */
+    --theme-scrollbar-track: #1E1F22;
+    --theme-scrollbar-thumb: #51AE84;
+    --theme-scrollbar-thumb-hover: #3A8B69;
+
+    /* Editor content */
+    --theme-editor-text: #E0E0E4;
+    --theme-editor-bold: #F0F0F4;
+    --theme-editor-heading: #34acd0;
+    --theme-editor-page-sepia: #f4f1e8;
+
+    /* Accents */
+    --theme-accent-blue: #5C9CE6;
+    --theme-accent-green: #5FB87B;
+    --theme-accent-orange: #D4923A;
+    --theme-accent-purple: #B07CD8;
+    --theme-accent-red: #E06C75;
+
+    /* Shadows */
+    --theme-shadow-feature-hover: 0 10px 25px -5px rgba(81, 174, 132, 0.2);
+    --theme-shadow-focus-ring: 0 0 0 4px rgba(81, 174, 132, 0.1);
+}
+
+/* Light theme — à remplir quand le design sera prêt */
+:root[data-theme="light"] {
+    --theme-background: #F5F5F5;
+    --theme-secondary: #E0E0E0;
+    --theme-tertiary: #EBEBEB;
+    --theme-dark-background: #D5D5D5;
+    --theme-darkest-background: #C0C0C0;
+    --theme-surface-gradient-dark: #D0D0D0;
+    --theme-surface-gradient-light: #E8E8E8;
+    --theme-glass-bg: rgba(240, 240, 240, 0.7);
+    --theme-text-primary: #1A1A1A;
+    --theme-text-secondary: #555555;
+    --theme-muted: #888888;
+    --theme-text-dimmed: #999999;
+    --theme-scrollbar-track: #E0E0E0;
+    --theme-scrollbar-thumb: #51AE84;
+    --theme-scrollbar-thumb-hover: #3A8B69;
+    --theme-editor-text: #333333;
+    --theme-editor-bold: #1A1A1A;
+    --theme-editor-heading: #2196B8;
+    --theme-editor-page-sepia: #f4f1e8;
+    --theme-gray: #999999;
+    --theme-gray-light: #BBBBBB;
+    --theme-gray-dark: #666666;
+    --theme-accent-blue: #3A7BD5;
+    --theme-accent-green: #2E8B57;
+    --theme-accent-orange: #C47F17;
+    --theme-accent-purple: #8B5CC4;
+    --theme-accent-red: #C94F5A;
+}
+
@theme {
-    /* Colors */
-    --color-primary: #51AE84;
-    --color-primary-dark: #3A8B69;
-    --color-primary-light: #74C9A0;
-    --color-secondary: #3E3E3E;
-    --color-tertiary: #2C2C2C;
-    --color-background: #2B2D30;
-    --color-dark-background: #2C2C2C;
-    --color-darkest-background: #1A1A1A;
-    --color-text-primary: #FFFFFF;
-    --color-text-secondary: #B0B0B0;
-    --color-muted: #B0B0B0;
-    --color-success: #28A745;
-    --color-error: #DC3545;
-    --color-warning: #FFC107;
-    --color-info: #17A2B8;
+    /* Brand */
+    --color-primary: var(--theme-primary);
+    --color-primary-dark: var(--theme-primary-dark);
+    --color-primary-light: var(--theme-primary-light);

-    --color-gray: #808080;
-    --color-gray-light: #A0A0A0;
-    --color-gray-dark: #404040;
+    /* Surfaces */
+    --color-secondary: var(--theme-secondary);
+    --color-tertiary: var(--theme-tertiary);
+    --color-background: var(--theme-background);
+    --color-dark-background: var(--theme-dark-background);
+    --color-darkest-background: var(--theme-darkest-background);
+    --color-surface-gradient-dark: var(--theme-surface-gradient-dark);
+    --color-surface-gradient-light: var(--theme-surface-gradient-light);
+    --color-glass-bg: var(--theme-glass-bg);

-    /* Aliases pour compatibilité */
-    --color-textPrimary: #FFFFFF;
-    --color-textSecondary: #B0B0B0;
+    /* Semantic surfaces */
+    --color-surface-primary: var(--theme-background);
+    --color-surface-secondary: var(--theme-secondary);
+    --color-surface-elevated: var(--theme-darkest-background);
+
+    /* Text */
+    --color-text-primary: var(--theme-text-primary);
+    --color-text-secondary: var(--theme-text-secondary);
+    --color-muted: var(--theme-muted);
+    --color-text-dimmed: var(--theme-text-dimmed);
+
+    /* Semantic */
+    --color-success: var(--theme-success);
+    --color-error: var(--theme-error);
+    --color-warning: var(--theme-warning);
+    --color-info: var(--theme-info);
+
+    /* Gray scale */
+    --color-gray: var(--theme-gray);
+    --color-gray-light: var(--theme-gray-light);
+    --color-gray-dark: var(--theme-gray-dark);
+
+    /* Scrollbar */
+    --color-scrollbar-track: var(--theme-scrollbar-track);
+    --color-scrollbar-thumb: var(--theme-scrollbar-thumb);
+    --color-scrollbar-thumb-hover: var(--theme-scrollbar-thumb-hover);
+
+    /* Editor content */
+    --color-editor-text: var(--theme-editor-text);
+    --color-editor-bold: var(--theme-editor-bold);
+    --color-editor-heading: var(--theme-editor-heading);
+    --color-editor-page-sepia: var(--theme-editor-page-sepia);
+
+    /* Accents */
+    --color-accent-blue: var(--theme-accent-blue);
+    --color-accent-green: var(--theme-accent-green);
+    --color-accent-orange: var(--theme-accent-orange);
+    --color-accent-purple: var(--theme-accent-purple);
+    --color-accent-red: var(--theme-accent-red);
+
+    /* Interactive */
+    --color-interactive: var(--theme-primary);
+    --color-interactive-hover: var(--theme-primary-dark);
+
+    /* Shadows */
+    --shadow-feature-hover: var(--theme-shadow-feature-hover);
+    --shadow-focus-ring: var(--theme-shadow-focus-ring);

    /* Font Family */
    --font-family-lora: 'Lora', Georgia, serif;
@@ -53,15 +201,8 @@
    font-style: normal;
 }

-:root {
-    --foreground-rgb: 0, 0, 0;
-    --background-start-rgb: 214, 219, 220;
-    --background-end-rgb: 255, 255, 255;
-}
-
 body {
-    --tw-bg-opacity: 1;
-    background-color: rgb(17 24 39 / var(--tw-bg-opacity))
+    background-color: var(--color-background);
 }

 ::-webkit-scrollbar {
@@ -70,23 +211,23 @@ body {
 }

 ::-webkit-scrollbar-track {
-    background: #2d2d2d;
+    background: var(--color-scrollbar-track);
    border-radius: 10px;
 }

 ::-webkit-scrollbar-thumb {
-    background: #51AE84;
+    background: var(--color-scrollbar-thumb);
    border-radius: 10px;
 }

 ::-webkit-scrollbar-thumb:hover {
-    background: #3a8b69;
+    background: var(--color-scrollbar-thumb-hover);
 }

 /* Scrollbar Styles for Firefox */
 * {
    scrollbar-width: thin;
-    scrollbar-color: #51AE84 #2d2d2d;
+    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
 }

 .fade-in {
@@ -200,8 +341,15 @@ body {
 }

 /* Styles pour l'éditeur principal avec classes dynamiques */
+.editor-content .tiptap > p:first-child,
+.editor-content .tiptap > h1:first-child,
+.editor-content .tiptap > h2:first-child,
+.editor-content .tiptap > h3:first-child {
+    margin-top: 0;
+}
+
 .editor-content .tiptap p {
-    color: #dedede;
+    color: var(--color-editor-text);
    margin-top: 0.7em;
    margin-bottom: 0.7em;
 }
@@ -212,11 +360,11 @@ body {

 .editor-content .tiptap p strong {
    font-weight: 900;
-    color: #f9f9f9;
+    color: var(--color-editor-bold);
 }

 .editor-content .tiptap h1, .editor-content .tiptap h2, .editor-content .tiptap h3 {
-    color: #34acd0;
+    color: var(--color-editor-heading);
    margin-top: 1em;
    margin-bottom: 0.5em;
 }
@@ -251,6 +399,7 @@ body {
    border: none !important;
 }

+
 .composer-panel-h {
    height: calc(100vh - 8rem);
 }
@@ -286,13 +435,13 @@ body {
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
-    background-color: #3E3E3E;
+    background-color: var(--color-secondary);
    border-radius: 0.75rem;
 }

 .feature-card:hover {
    transform: translateY(-5px);
-    box-shadow: 0 10px 25px -5px rgba(81, 174, 132, 0.2);
+    box-shadow: var(--shadow-feature-hover);
 }

 .feature-card-bg {
@@ -310,7 +459,7 @@ body {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
-    background: linear-gradient(135deg, #313131, #4A4A4A);
+    background: linear-gradient(135deg, var(--color-surface-gradient-dark), var(--color-surface-gradient-light));
    display: flex;
    align-items: center;
    justify-content: center;
@@ -331,7 +480,7 @@ body {
    display: flex;
    align-items: center;
    justify-content: center;
-    color: white;
+    color: var(--color-text-primary);
 }

 .feature-title-container {
@@ -356,7 +505,7 @@ body {
 .feature-shine-line {
    width: 100%;
    height: 1px;
-    background-color: #4A4A4A;
+    background-color: var(--color-surface-gradient-light);
    position: relative;
    overflow: hidden;
 }
@@ -421,7 +570,7 @@ body {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: var(--color-glass-bg);
    display: flex;
    align-items: center;
    justify-content: center;
@@ -446,7 +595,7 @@ body {
 }

 .last-updated {
-    color: #777777;
+    color: var(--color-text-dimmed);
    font-size: 0.75rem;
    text-align: center;
    margin-top: 1rem;
@@ -484,19 +633,42 @@ body {
    margin-bottom: 0.7em;
 }

+/* Form input base */
+.input-base {
+    @apply w-full text-text-primary bg-dark-background px-4 py-2.5 rounded-xl
+    border border-secondary
+    focus:border-primary focus:ring-4 focus:ring-primary/20
+    placeholder:text-muted
+    outline-none transition-all duration-200;
+}
+
+.input-base:disabled {
+    @apply opacity-50 cursor-not-allowed;
+}
+
+.input-base[readonly] {
+    @apply cursor-default;
+}
+
+.scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;
+}
+
 /* Smooth transitions for all interactive elements */
 button, a, input, textarea, select {
    transition: all 0.2s ease-in-out;
 }

 /* Enhanced focus states */
-button:focus-visible,
-input:focus-visible,
-textarea:focus-visible,
-select:focus-visible {
-    outline: 2px solid #51AE84;
+button:focus-visible {
+    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
-    box-shadow: 0 0 0 4px rgba(81, 174, 132, 0.1);
+    box-shadow: var(--shadow-focus-ring);
 }

 /* Smooth hover scale for interactive elements */
@@ -509,7 +681,7 @@ select:focus-visible {
 .literary-ornament::before,
 .literary-ornament::after {
    content: "❖";
-    color: #51AE84;
+    color: var(--color-primary);
    opacity: 0.3;
    font-size: 0.8em;
    margin: 0 0.5em;
@@ -531,9 +703,9 @@ select:focus-visible {

 /* Glass morphism effect */
 .glass-effect {
-    background: rgba(62, 62, 62, 0.7);
+    background: var(--color-glass-bg);
    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--color-surface-gradient-light);
 }

 /* Fade in pour le texte qui stream */
@@ -549,3 +721,38 @@ select:focus-visible {
        opacity: 1;
    }
 }
+
+/* Alert animations */
+@keyframes shrink {
+    from {
+        width: 100%;
+    }
+    to {
+        width: 0%;
+    }
+}
+
+.alert-progress-shrink {
+    animation: shrink 5s linear forwards;
+    width: 100%;
+}
+
+.alert-slide-in {
+    animation: slideInFromRight 0.3s ease-out forwards;
+}
+
+/* Pulse dots for loading indicators */
+.pulse-dot-1 {
+    animation-delay: 0ms;
+    animation-duration: 1.5s;
+}
+
+.pulse-dot-2 {
+    animation-delay: 300ms;
+    animation-duration: 1.5s;
+}
+
+.pulse-dot-3 {
+    animation-delay: 600ms;
+    animation-duration: 1.5s;
+}