v0.1.4-pre.005

2026-08-16 11:11:09 +02:00
parent db80e58ff1
commit f719821392
25 changed files with 1362 additions and 51 deletions
--- a/crates/ksp-app-config-desk/frontend/imgs/logo.png
+++ b/crates/ksp-app-config-desk/frontend/imgs/logo.png
--- a/crates/ksp-app-config-desk/frontend/imgs/splash.png
+++ b/crates/ksp-app-config-desk/frontend/imgs/splash.png
--- a/crates/ksp-app-config-desk/frontend/main.html
+++ b/crates/ksp-app-config-desk/frontend/main.html
@@ -0,0 +1,53 @@
+<!-- file: crates/ksp-app-config-desk/frontend/main.html -->
+<!-- version: 1 -->
+<!DOCTYPE html>
+<html lang="fr">
+
+    <head>
+        <meta charset="utf-8">
+        <meta content="width=device-width, initial-scale=1.0" name="viewport">
+        <link rel="icon" href="imgs/logo.png">
+        <link rel="stylesheet" href="sass/main.scss">
+        <title>KSP Config Desk</title>
+    </head>
+
+    <body>
+        <header class="app-header">
+            <nav class="navbar navbar-expand-lg h-100 py-0 bg-light text-dark">
+                <div class="container-fluid px-4">
+                    <div class="navbar-brand d-flex align-items-center">
+                        <img alt="KSP" src="imgs/logo.png" class="app-logo">
+                        <span class="ps-2 fs-4 fw-bold text-primary">KSP — <span class="badge text-bg-primary">Config Desk</span></span>
+                    </div>
+                </div>
+            </nav>
+        </header>
+
+        <main class="app-main">
+            <div class="app-scrollable" data-simplebar>
+                <div class="container-fluid px-4 py-4">
+                    <div class="card app-shell-card mx-auto shadow-sm border-0">
+                        <div class="card-body p-4">
+                            <h1 class="h3 mb-3">Configuration KSP</h1>
+                            <p class="text-body-secondary mb-4">
+                                Le shell desktop est prêt. Les panneaux Documents, Profils, Environnement et Logging seront ajoutés dans les prereleases suivantes.
+                            </p>
+                            <div class="alert alert-primary mb-0" role="status">
+                                <i class="fa-solid fa-desktop me-2" aria-hidden="true"></i>
+                                <span id="shellStatus" class="app-shell-status">Initialisation du frontend...</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <footer class="app-footer bg-dark text-light">
+            <div class="container h-100 d-flex align-items-center justify-content-center">
+                <small>&copy; 2026 SASEDEV</small>
+            </div>
+        </footer>
+        <script type="module" src="ts/main.ts" defer></script>
+    </body>
+
+</html>
--- a/crates/ksp-app-config-desk/frontend/sass/_app.scss
+++ b/crates/ksp-app-config-desk/frontend/sass/_app.scss
@@ -0,0 +1,60 @@
+// file: crates/ksp-app-config-desk/frontend/sass/_app.scss
+// version: 1
+
+$app-header-height: 72px;
+$app-footer-height: 42px;
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    overflow: hidden;
+    background: $gray-100;
+}
+
+.app-header {
+    position: fixed;
+    inset: 0 0 auto;
+    height: $app-header-height;
+    z-index: 1020;
+    border-bottom: 2px solid rgba($primary, 0.3);
+}
+
+.app-footer {
+    position: fixed;
+    inset: auto 0 0;
+    height: $app-footer-height;
+    z-index: 1020;
+    border-top: 2px solid rgba($primary, 0.3);
+}
+
+.app-main {
+    position: relative;
+    height: calc(100vh - $app-header-height - $app-footer-height);
+    margin-top: $app-header-height;
+    margin-bottom: $app-footer-height;
+    overflow: hidden;
+}
+
+.app-scrollable {
+    height: 100%;
+    max-height: 100%;
+}
+
+.app-logo {
+    display: block;
+    width: auto;
+    height: 42px;
+}
+
+.app-shell-card {
+    max-width: 980px;
+}
+
+.app-shell-status {
+    font-family: var(--bs-font-monospace);
+}
--- a/crates/ksp-app-config-desk/frontend/sass/_bootswatch.scss
+++ b/crates/ksp-app-config-desk/frontend/sass/_bootswatch.scss
@@ -0,0 +1,160 @@
+// file: crates/ksp-app-config-desk/frontend/sass/_bootswatch.scss
+// version: 1
+
+// Pulse 5.3.8
+// Bootswatch
+
+
+// Variables
+
+// Buttons
+
+.btn {
+
+    &:focus,
+    &:active,
+    &:active:focus,
+    &.active:focus {
+        outline: none;
+    }
+
+    &-secondary {
+        color: $gray-900;
+        background-color: $white;
+        border-color: #ccc;
+
+        &:hover {
+            color: $gray-900;
+            background-color: $gray-300;
+            border-color: $gray-500;
+        }
+
+        &.disabled {
+            color: tint-color($gray-900, 5%);
+            background-color: $white;
+            border-color: tint-color(#ccc, 5%);
+        }
+    }
+
+    &-warning {
+        color: $white;
+    }
+
+    &-primary:focus {
+        box-shadow: 0 0 5px tint-color($primary, 10%);
+    }
+
+    &-secondary:focus {
+        box-shadow: 0 0 5px $gray-400;
+    }
+
+    &-success:focus {
+        box-shadow: 0 0 5px tint-color($success, 10%);
+    }
+
+    &-info:focus {
+        box-shadow: 0 0 5px tint-color($info, 10%);
+    }
+
+    &-warning:focus {
+        box-shadow: 0 0 5px tint-color($warning, 10%);
+    }
+
+    &-danger:focus {
+        box-shadow: 0 0 5px tint-color($danger, 10%);
+    }
+
+    &.disabled:focus {
+        box-shadow: none;
+    }
+}
+
+// Tables
+
+.table .thead-dark th {
+    background-color: $secondary;
+    border-color: $table-border-color;
+}
+
+.table-primary,
+.table-secondary,
+.table-success,
+.table-warning,
+.table-danger,
+.table-info,
+.table-light {
+    --#{$prefix}table-color: #{$body-color};
+}
+
+// Forms
+
+.form-control:focus {
+    box-shadow: 0 0 5px rgba(100, 65, 164, .4);
+}
+
+// Navs
+
+.nav-tabs {
+
+    .nav-link,
+    .nav-link.active {
+        border-width: 0 0 1px;
+    }
+
+    .nav-link:hover,
+    .nav-link.active,
+    .nav-link.active:hover,
+    .nav-link.active:focus {
+        border-bottom: 1px solid $primary;
+    }
+
+    .nav-item+.nav-item {
+        margin-left: 0;
+    }
+}
+
+.breadcrumb {
+    &-item.active {
+        color: $gray-700;
+    }
+}
+
+// Indicators
+
+.badge {
+    &.bg-light {
+        color: $dark;
+    }
+}
+
+// Progress bars
+
+.progress {
+    height: 8px;
+}
+
+// Containers
+
+.list-group {
+    &-item {
+        color: rgba(255, 255, 255, .8);
+
+        &.active,
+        &:hover,
+        &:focus {
+            color: $white;
+        }
+
+        &.active {
+            font-weight: 700;
+
+            &:hover {
+                background-color: $list-group-hover-bg;
+            }
+        }
+
+        &.disabled:hover {
+            color: $list-group-disabled-color;
+        }
+    }
+}
--- a/crates/ksp-app-config-desk/frontend/sass/_fontawesome.scss
+++ b/crates/ksp-app-config-desk/frontend/sass/_fontawesome.scss
@@ -0,0 +1,19 @@
+// file: crates/ksp-app-config-desk/frontend/sass/_fontawesome.scss
+// version: 1
+
+//@use '@fortawesome/fontawesome-free/scss/variables' with (
+//    // customizing $font-path - make sure it points to where your webfonts are stored in your project
+//  $font-path: '../webfonts',
+//);
+@use '@fortawesome/fontawesome-free/scss/variables' with (
+    // use fonts from @fortawesome/fontawesome-free
+  $font-path: '@fortawesome/fontawesome-free/webfonts',
+);
+// load Font Awesome core
+@use '@fortawesome/fontawesome-free/scss/fontawesome';
+
+// load and make available Font Awesome helpers (mixins, functions, and variables)
+@use '@fortawesome/fontawesome-free/scss/fa' as fa;
+@use '@fortawesome/fontawesome-free/scss/brands' as fa-brands;
+@use '@fortawesome/fontawesome-free/scss/regular' as fa-regular;
+@use '@fortawesome/fontawesome-free/scss/solid' as fa-solid;
--- a/crates/ksp-app-config-desk/frontend/sass/_simplebar.scss
+++ b/crates/ksp-app-config-desk/frontend/sass/_simplebar.scss
@@ -0,0 +1,248 @@
+// file: crates/ksp-app-config-desk/frontend/sass/_simplebar.scss
+// version: 1
+
+/* Rtl support */
+[data-simplebar] {
+    position: relative;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: flex-start;
+}
+
+.simplebar-wrapper {
+    overflow: hidden;
+    width: inherit;
+    height: inherit;
+    max-width: inherit;
+    max-height: inherit;
+}
+
+.simplebar-mask {
+    direction: inherit;
+    position: absolute;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: auto !important;
+    height: auto !important;
+//    z-index: 0;
+    inset: 0;
+}
+
+.simplebar-offset {
+    direction: inherit !important;
+    box-sizing: inherit !important;
+    resize: none !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding: 0;
+    margin: 0;
+    -webkit-overflow-scrolling: touch;
+    inset: 0;
+}
+
+.simplebar-content-wrapper {
+    direction: inherit;
+    box-sizing: border-box !important;
+    position: relative;
+    display: block;
+    height: 100%;
+    width: auto;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+        display: none;
+        width: 0;
+        height: 0;
+    }
+}
+
+.simplebar-hide-scrollbar {
+    &::-webkit-scrollbar {
+        display: none;
+        width: 0;
+        height: 0;
+    }
+
+    position: fixed;
+    left: 0;
+    visibility: hidden;
+    overflow-y: scroll;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.simplebar-content {
+    &:before {
+        content: ' ';
+        display: table;
+    }
+
+    &:after {
+        content: ' ';
+        display: table;
+    }
+}
+
+.simplebar-placeholder {
+    max-height: 100%;
+    max-width: 100%;
+    width: 100%;
+    pointer-events: none;
+}
+
+.simplebar-height-auto-observer-wrapper {
+    box-sizing: inherit !important;
+    height: 100%;
+    width: 100%;
+    max-width: 1px;
+    position: relative;
+    float: left;
+    max-height: 1px;
+    overflow: hidden;
+//    z-index: -1;
+    padding: 0;
+    margin: 0;
+    pointer-events: none;
+    flex-grow: inherit;
+    flex-shrink: 0;
+    flex-basis: 0;
+}
+
+.simplebar-height-auto-observer {
+    box-sizing: inherit;
+    display: block;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 1000%;
+    width: 1000%;
+    min-height: 1px;
+    min-width: 1px;
+    overflow: hidden;
+    pointer-events: none;
+//    z-index: -1;
+}
+
+.simplebar-track {
+//    z-index: 1;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    overflow: hidden;
+}
+
+[data-simplebar].simplebar-dragging {
+    pointer-events: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
+    .simplebar-content {
+        pointer-events: none;
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+    .simplebar-track {
+        pointer-events: all;
+    }
+}
+
+.simplebar-scrollbar {
+    position: absolute;
+    left: 0;
+    right: 0;
+    min-height: 10px;
+    
+
+    &:before {
+        position: absolute;
+        content: '';
+        background: black;
+        border-radius: 7px;
+        left: 2px;
+        right: 2px;
+        opacity: 0;
+        transition: opacity 0.2s 0.5s linear;
+        top: 2px;
+        bottom: 2px;
+    }
+}
+
+.simplebar-scrollbar.simplebar-visible {
+    &:before {
+        opacity: 0.5;
+        transition-delay: 0s;
+        transition-duration: 0s;
+    }
+}
+
+.simplebar-track.simplebar-vertical {
+    top: 0;
+    width: 11px;
+}
+
+.simplebar-track.simplebar-horizontal {
+    left: 0;
+    height: 11px;
+
+    .simplebar-scrollbar {
+        right: auto;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        min-height: 0;
+        min-width: 10px;
+        width: auto;
+    }
+}
+
+[data-simplebar-direction='rtl'] {
+    .simplebar-track.simplebar-vertical {
+        right: auto;
+        left: 0;
+    }
+}
+
+.simplebar-dummy-scrollbar-size {
+    direction: rtl;
+    position: fixed;
+    opacity: 0;
+    visibility: hidden;
+    height: 500px;
+    width: 500px;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    -ms-overflow-style: scrollbar !important;
+
+    >div {
+        width: 200%;
+        height: 200%;
+        margin: 10px 0;
+    }
+}
+
+.simplebar-hover {
+    cursor: pointer;
+}
--- a/crates/ksp-app-config-desk/frontend/sass/_variables.scss
+++ b/crates/ksp-app-config-desk/frontend/sass/_variables.scss
@@ -0,0 +1,95 @@
+// file: crates/ksp-app-config-desk/frontend/sass/_variables.scss
+// version: 1
+
+// Pulse 5.3.8
+// Bootswatch
+
+$theme: "pulse" !default;
+
+//
+// Color system
+//
+
+$white:    #fff !default;
+$gray-100: #fafafa !default;
+$gray-200: #f9f8fc !default;
+$gray-300: #ededed !default;
+$gray-400: #cbc8d0 !default;
+$gray-500: #adb5bd !default;
+$gray-600: #868e96 !default;
+$gray-700: #444 !default;
+$gray-800: #343a40 !default;
+$gray-900: #17141f !default;
+$black:    #000 !default;
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #593196 !default;
+$pink:    #e83e8c !default;
+$red:     #fc3939 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #efa31d !default;
+$green:   #13b955 !default;
+$teal:    #20c997 !default;
+$cyan:    #009cdc !default;
+
+$primary:       $purple !default;
+$secondary:     #a991d4 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-200 !default;
+$dark:          $gray-900 !default;
+
+$min-contrast-ratio:   2.1 !default;
+
+// Options
+
+$enable-rounded: false !default;
+
+// Body
+
+$body-color:                $gray-700 !default;
+
+// Links
+
+$link-hover-color:          $primary !default;
+
+// Tables
+
+$table-color:                 initial !default;
+
+$table-border-color:          rgba(0, 0, 0, .05) !default;
+
+// Forms
+
+$input-focus-border-color:              $primary !default;
+
+// Dropdowns
+
+$dropdown-link-hover-color:         $white !default;
+$dropdown-link-hover-bg:            $primary !default;
+
+// Navs
+
+$nav-tabs-border-color:             $gray-300 !default;
+$nav-tabs-link-hover-border-color:  $primary !default;
+
+// Navbar
+
+$navbar-padding-y:                  1.2rem !default;
+
+// Progress bars
+
+$progress-bg:                       $gray-300 !default;
+$progress-bar-bg:                   $primary !default;
+
+// List group
+
+$list-group-bg:                     $gray-900 !default;
+$list-group-border-color:           transparent !default;
+$list-group-hover-bg:               lighten($list-group-bg, 10%) !default;
+$list-group-active-color:           $white !default;
+$list-group-active-bg:              $list-group-bg !default;
+$list-group-disabled-color:         lighten($list-group-bg, 30%) !default;
--- a/crates/ksp-app-config-desk/frontend/sass/main.scss
+++ b/crates/ksp-app-config-desk/frontend/sass/main.scss
@@ -0,0 +1,10 @@
+// file: crates/ksp-app-config-desk/frontend/sass/main.scss
+// version: 1
+
+@import "bootstrap/scss/functions";
+@import "variables";
+@import "fontawesome";
+@import "simplebar";
+@import "bootstrap/scss/bootstrap";
+@import "bootswatch";
+@import "app";
--- a/crates/ksp-app-config-desk/frontend/sass/splash.scss
+++ b/crates/ksp-app-config-desk/frontend/sass/splash.scss
@@ -0,0 +1,57 @@
+// file: crates/ksp-app-config-desk/frontend/sass/splash.scss
+// version: 1
+
+body {
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    font-family: Arial, sans-serif;
+}
+
+#splash-container {
+    position: relative;
+    width: 960px;
+    height: 637px;
+    opacity: 1;
+}
+
+#splash-image {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+#app-name {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 2;
+    transform: translate(-50%, -50%);
+    color: #fff;
+    font-family: "Arial Black", Arial, sans-serif;
+    font-size: 76px;
+    font-weight: bold;
+    text-align: center;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+#splash-status {
+    position: absolute;
+    right: 1rem;
+    bottom: 1rem;
+    left: 1rem;
+    z-index: 3;
+    padding: 0.55rem 0.75rem;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.35);
+    font-family: monospace;
+    font-size: 0.82rem;
+}
--- a/crates/ksp-app-config-desk/frontend/splash.html
+++ b/crates/ksp-app-config-desk/frontend/splash.html
@@ -0,0 +1,22 @@
+<!-- file: crates/ksp-app-config-desk/frontend/splash.html -->
+<!-- version: 1 -->
+<!DOCTYPE html>
+<html lang="fr">
+
+    <head>
+        <meta charset="utf-8">
+        <meta content="width=device-width, initial-scale=1.0" name="viewport">
+        <link rel="stylesheet" href="sass/splash.scss">
+        <title>KSP Config Desk — Chargement</title>
+    </head>
+
+    <body>
+        <div id="splash-container">
+            <img id="splash-image" src="imgs/splash.png" alt="Chargement de KSP Config Desk">
+            <div id="app-name">KSP</div>
+            <div id="splash-status" aria-live="polite">Chargement du shell frontend...</div>
+        </div>
+        <script type="module" src="ts/splash.ts" defer></script>
+    </body>
+
+</html>
--- a/crates/ksp-app-config-desk/frontend/ts/main.ts
+++ b/crates/ksp-app-config-desk/frontend/ts/main.ts
@@ -0,0 +1,16 @@
+// file: crates/ksp-app-config-desk/frontend/ts/main.ts
+// version: 1
+
+import "bootstrap";
+import ResizeObserver from "resize-observer-polyfill";
+import "simplebar";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+
+(window as Window & typeof globalThis & { ResizeObserver?: typeof ResizeObserver }).ResizeObserver = ResizeObserver;
+
+document.addEventListener("DOMContentLoaded", () => {
+    const status = document.querySelector<HTMLElement>("#shellStatus");
+    if (status) {
+        status.textContent = `Frontend chargé dans la fenêtre '${getCurrentWindow().label}'.`;
+    }
+});
--- a/crates/ksp-app-config-desk/frontend/ts/splash.ts
+++ b/crates/ksp-app-config-desk/frontend/ts/splash.ts
@@ -0,0 +1,11 @@
+// file: crates/ksp-app-config-desk/frontend/ts/splash.ts
+// version: 1
+
+import { getCurrentWindow } from "@tauri-apps/api/window";
+
+document.addEventListener("DOMContentLoaded", () => {
+    const status = document.querySelector<HTMLElement>("#splash-status");
+    if (status) {
+        status.textContent = `Frontend chargé dans la fenêtre '${getCurrentWindow().label}'. Lifecycle complet prévu en pre.008.`;
+    }
+});