v0.1.4-pre.005
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
# file: crates/ksp-app-config-desk/Cargo.toml
|
||||
# version: 1
|
||||
# version: 2
|
||||
|
||||
[package]
|
||||
name = "ksp-app-config-desk"
|
||||
@@ -25,6 +25,7 @@ tauri-build.workspace = true
|
||||
fs2.workspace = true
|
||||
ksp-core-lib = { path = "../ksp-core-lib" }
|
||||
tauri.workspace = true
|
||||
tauri-plugin-tracing.workspace = true
|
||||
|
||||
[lints]
|
||||
workspace = true
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!-- file: crates/ksp-app-config-desk/README.md -->
|
||||
<!-- version: 1 -->
|
||||
<!-- version: 2 -->
|
||||
|
||||
# `ksp-app-config-desk`
|
||||
|
||||
@@ -15,41 +15,71 @@ bin : ksp-app-config-desk
|
||||
|
||||
## Responsabilités
|
||||
|
||||
L'application restera une couche d'interface/composition. Les responsabilités de parsing, validation, profils, environnement, `.env`, secrets et persistence restent dans `ksp-config-lib`; le runtime Logging restera possédé par `ksp-logging-lib`.
|
||||
L'application reste une couche d'interface/composition. Les responsabilités de parsing, validation, profils, environnement, `.env`, secrets et persistence restent dans `ksp-config-lib`; le runtime Logging restera possédé par `ksp-logging-lib`.
|
||||
|
||||
La première tranche de squelette établit uniquement :
|
||||
Le gabarit desktop actif fournit maintenant :
|
||||
|
||||
- le membre workspace Rust ;
|
||||
- le couple `lib` + `bin` ;
|
||||
- le verrou single-instance ;
|
||||
- l'assemblage Tauri minimal dans `src/tauri.rs` ;
|
||||
- l'assemblage Tauri centralisé dans `src/tauri.rs` ;
|
||||
- les fenêtres `splash` et `main` ;
|
||||
- les capabilities initiales ;
|
||||
- l'icône de référence reprise du gabarit desktop éprouvé ;
|
||||
- le port de développement réservé `1430`, avec `1431` réservé au HMR Vite ;
|
||||
- le répertoire frontend cible `frontend/`, dont `frontend/ts/` et `frontend/ts/bindings/`.
|
||||
- le frontend Vanilla TypeScript + Vite sous `frontend/` ;
|
||||
- SCSS, Bootstrap et Font Awesome ;
|
||||
- SimpleBar + `resize-observer-polyfill` pour le scrolling du shell ;
|
||||
- `tauri-plugin-tracing` côté Rust et `@fltsci/tauri-plugin-tracing` côté frontend ;
|
||||
- les ports dédiés `1430` pour Vite HTTP et `1431` pour le WebSocket de développement ;
|
||||
- la destination frontend externe commune à Tauri et Vite.
|
||||
|
||||
Le frontend Vite/TypeScript/SCSS et les dépendances npm sont introduits dans la tranche suivante. Tant que cette tranche n'est pas appliquée, `cargo tauri dev` n'est pas un scénario de validation attendu de ce squelette.
|
||||
Le bridge de logging frontend KSP à target explicite n'est pas encore introduit : il appartient à une tranche dédiée afin de passer par `ksp-logging-lib` et de ne pas figer le target vide du bridge JS générique comme contrat KSP.
|
||||
|
||||
## Layout frontend
|
||||
|
||||
```text
|
||||
frontend/
|
||||
├── imgs/
|
||||
├── sass/
|
||||
│ ├── _app.scss
|
||||
│ ├── _bootswatch.scss
|
||||
│ ├── _fontawesome.scss
|
||||
│ ├── _simplebar.scss
|
||||
│ ├── _variables.scss
|
||||
│ ├── main.scss
|
||||
│ └── splash.scss
|
||||
├── ts/
|
||||
│ ├── main.ts
|
||||
│ └── splash.ts
|
||||
├── main.html
|
||||
└── splash.html
|
||||
```
|
||||
|
||||
Les futurs bindings TS-RS seront générés sous :
|
||||
|
||||
```text
|
||||
frontend/ts/bindings/ksp_app_config_desk/...
|
||||
```
|
||||
|
||||
Le répertoire de bindings n'est pas créé artificiellement avant le premier DTO réel.
|
||||
|
||||
## Artefacts frontend
|
||||
|
||||
Les artefacts frontend construits ne doivent pas être versionnés. `tauri.conf.json` fixe dès maintenant la destination contractuelle :
|
||||
Les artefacts frontend construits ne sont pas versionnés. `tauri.conf.json` fixe :
|
||||
|
||||
```text
|
||||
../../builds/khadhroony-solana-project/ksp-app-config-desk/dist
|
||||
```
|
||||
|
||||
`vite.config.ts` utilisera la même destination lors de son introduction.
|
||||
|
||||
Les commandes npm servent uniquement à installer/mettre à jour les dépendances. Le cycle normal de développement/build de l'application passe par Tauri, qui déclenche les scripts frontend déclarés dans sa configuration.
|
||||
`vite.config.ts` résout cette même destination depuis la racine de la crate, ce qui maintient `dist` hors du workspace source et l'aligne avec la stratégie `.cargo/config.toml` pour les artefacts Rust.
|
||||
|
||||
## Ports desktop
|
||||
|
||||
KSP réserve des couples de ports distincts par application desk. `ksp-app-config-desk`, première application, utilise :
|
||||
`ksp-app-config-desk` utilise :
|
||||
|
||||
```text
|
||||
Vite HTTP : 1430
|
||||
Vite HMR : 1431
|
||||
Vite WS : 1431
|
||||
```
|
||||
|
||||
Les applications desk suivantes incrémentent le couple de deux ports afin de pouvoir fonctionner simultanément sans collision.
|
||||
Le port HTTP est strict. Les futures applications desk utilisent les couples suivants `1432/1433`, `1434/1435`, etc.
|
||||
|
||||
## Dépendances frontend
|
||||
|
||||
Les dépendances frontend sont déclarées comme dépendances de développement car elles sont bundlées dans l'application desktop. Les commandes npm directes sont réservées à leur installation/mise à jour. Le cycle normal de développement et de build passe par Tauri, qui déclenche les scripts `dev` et `build`.
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<!-- file: crates/ksp-app-config-desk/TODO.md -->
|
||||
<!-- version: 1 -->
|
||||
<!-- version: 2 -->
|
||||
|
||||
# TODO `ksp-app-config-desk`
|
||||
|
||||
Les éléments suivants appartiennent aux prochaines tranches de `0.1.4` :
|
||||
Le gabarit frontend de base est maintenant en place : Vite/TypeScript/SCSS, Bootstrap, Font Awesome, SimpleBar, resize observer, plugin tracing et ports dédiés.
|
||||
|
||||
Les prochaines tranches doivent encore :
|
||||
|
||||
- ajouter le gabarit frontend Vite/TypeScript/SCSS sous `frontend/` ;
|
||||
- ajouter `package.json`, `tsconfig.json` et `vite.config.ts` ;
|
||||
- réserver strictement `1430` pour Vite et `1431` pour HMR ;
|
||||
- introduire SimpleBar, `resize-observer-polyfill`, Bootstrap et Font Awesome selon le gabarit retenu ;
|
||||
- intégrer `tauri-plugin-tracing` et `@fltsci/tauri-plugin-tracing` ;
|
||||
- introduire les DTO TS-RS au premier contrat Tauri réel, avec bindings générés sous `frontend/ts/bindings/` ;
|
||||
- introduire `AppState`, Config et l'ownership de `LoggingGuard` ;
|
||||
- introduire `AppState`, `ksp-config-lib`, `ksp-logging-lib` et l'ownership durable de `LoggingGuard` ;
|
||||
- reprendre/refondre `frontend_log.ts` depuis bot3 avec targets KSP whitelistés et émission via `ksp-logging-lib` ;
|
||||
- finaliser le lifecycle splash configurable sans temporisation environnementale codée en dur ;
|
||||
- développer les panneaux Documents, Profils, Environnement/`.env`, Secrets et Logging ;
|
||||
- introduire DataTables au premier tableau qui exige tri, filtrage, sélection ou checkbox ;
|
||||
- démontrer le hot reload Logging et le panneau de test de routage.
|
||||
|
||||
@@ -1,34 +1,81 @@
|
||||
<!-- file: crates/ksp-app-config-desk/USAGE.md -->
|
||||
<!-- version: 1 -->
|
||||
<!-- version: 2 -->
|
||||
|
||||
# Utilisation de `ksp-app-config-desk`
|
||||
|
||||
## État actuel
|
||||
|
||||
La tranche `0.1.4-pre.004` introduit le squelette Rust/Tauri uniquement. Les fenêtres frontend ne deviennent exécutables qu'après l'ajout du gabarit Vite/TypeScript prévu par la tranche suivante.
|
||||
Le gabarit Rust/Tauri et le frontend Vite/TypeScript/SCSS sont maintenant présents. Les panneaux métier Config restent volontairement absents à ce stade.
|
||||
|
||||
## Entrée binaire
|
||||
La fenêtre `splash` est la fenêtre visible au démarrage. La fenêtre `main` est déjà construite et bundlée, mais son lifecycle d'affichage est finalisé dans la tranche splash/shell dédiée afin de ne pas introduire une temporisation codée en dur.
|
||||
|
||||
Le binaire `ksp-app-config-desk` :
|
||||
## Première installation des dépendances frontend
|
||||
|
||||
1. acquiert un verrou single-instance dans le répertoire temporaire du système ;
|
||||
2. collecte les arguments de processus sans lire directement de variable `KSP_*`/`KSPB_*` ;
|
||||
3. appelle `ksp_app_config_desk_lib::run()` ;
|
||||
4. convertit explicitement le résultat en `ExitCode`.
|
||||
Depuis :
|
||||
|
||||
Les arguments Config `--cfgpath`, `--schemapath` et `--filemap` seront consommés par les APIs `ksp-config-lib` dans la tranche de bootstrap applicatif prévue plus loin ; le binaire ne doit pas en réimplémenter le parsing.
|
||||
```text
|
||||
crates/ksp-app-config-desk
|
||||
```
|
||||
|
||||
## Fenêtres réservées
|
||||
installer les dépendances déclarées avec la commande de gestion prévue par le projet :
|
||||
|
||||
Deux fenêtres sont déjà déclarées dans `tauri.conf.json` :
|
||||
```bash
|
||||
npm i -D
|
||||
```
|
||||
|
||||
- `splash` : lifecycle de démarrage commun ;
|
||||
- `main` : shell de management Config.
|
||||
Les lockfiles frontend restent ignorés et ne sont pas versionnés.
|
||||
|
||||
Leur contenu HTML/TypeScript est ajouté avec le gabarit frontend.
|
||||
## Développement normal
|
||||
|
||||
## Développement frontend
|
||||
Le frontend n'est pas lancé directement avec npm. Depuis la crate ou avec le package explicitement sélectionné selon l'environnement Cargo/Tauri, utiliser le cycle Tauri habituel :
|
||||
|
||||
Le cycle normal utilisera `cargo tauri dev`. Tauri déclenchera alors `npm run dev` via `beforeDevCommand` et chargera le serveur Vite sur le port `1430`.
|
||||
```bash
|
||||
cargo tauri dev
|
||||
```
|
||||
|
||||
Les commandes npm directes sont réservées à la gestion des dépendances (`npm i -D ...` selon la politique du projet), et non au lancement quotidien de l'application.
|
||||
Tauri exécute alors le hook :
|
||||
|
||||
```text
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Vite écoute strictement sur :
|
||||
|
||||
```text
|
||||
HTTP : 1430
|
||||
WS : 1431
|
||||
```
|
||||
|
||||
Si le port HTTP est déjà occupé, le démarrage doit échouer au lieu de sélectionner silencieusement un autre port.
|
||||
|
||||
## Build frontend
|
||||
|
||||
Le build de l'application passe également par Tauri. `beforeBuildCommand` déclenche :
|
||||
|
||||
```text
|
||||
npm run build
|
||||
```
|
||||
|
||||
Vite construit les pages `main.html` et `splash.html` vers :
|
||||
|
||||
```text
|
||||
../../builds/khadhroony-solana-project/ksp-app-config-desk/dist
|
||||
```
|
||||
|
||||
Cette destination est résolue depuis la racine de la crate dans `vite.config.ts` et correspond au `frontendDist` de `tauri.conf.json`.
|
||||
|
||||
## Tracing desktop
|
||||
|
||||
`tauri-plugin-tracing` est enregistré côté Rust et la capability contient `tracing:default`. Le package frontend associé est installé avec le gabarit.
|
||||
|
||||
Cette tranche n'utilise pas encore le bridge JavaScript pour émettre les logs KSP applicatifs : `frontend_log.ts`, les targets KSP whitelistés et la commande `emit_frontend_log` sont introduits dans la tranche dédiée après initialisation de `ksp-logging-lib`.
|
||||
|
||||
## Bindings TS-RS
|
||||
|
||||
Le layout cible est :
|
||||
|
||||
```text
|
||||
frontend/ts/bindings/ksp_app_config_desk/...
|
||||
```
|
||||
|
||||
Les bindings sont générés au premier DTO Tauri réel ; aucune structure factice n'est ajoutée uniquement pour créer le répertoire.
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
"main"
|
||||
],
|
||||
"permissions": [
|
||||
"core:default"
|
||||
"core:default",
|
||||
"tracing:default"
|
||||
]
|
||||
}
|
||||
}
|
||||
BIN
crates/ksp-app-config-desk/frontend/imgs/logo.png
Normal file
BIN
crates/ksp-app-config-desk/frontend/imgs/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
crates/ksp-app-config-desk/frontend/imgs/splash.png
Normal file
BIN
crates/ksp-app-config-desk/frontend/imgs/splash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 611 KiB |
53
crates/ksp-app-config-desk/frontend/main.html
Normal file
53
crates/ksp-app-config-desk/frontend/main.html
Normal file
@@ -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>© 2026 SASEDEV</small>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="module" src="ts/main.ts" defer></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
60
crates/ksp-app-config-desk/frontend/sass/_app.scss
Normal file
60
crates/ksp-app-config-desk/frontend/sass/_app.scss
Normal file
@@ -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);
|
||||
}
|
||||
160
crates/ksp-app-config-desk/frontend/sass/_bootswatch.scss
Normal file
160
crates/ksp-app-config-desk/frontend/sass/_bootswatch.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
19
crates/ksp-app-config-desk/frontend/sass/_fontawesome.scss
Normal file
19
crates/ksp-app-config-desk/frontend/sass/_fontawesome.scss
Normal file
@@ -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;
|
||||
248
crates/ksp-app-config-desk/frontend/sass/_simplebar.scss
Normal file
248
crates/ksp-app-config-desk/frontend/sass/_simplebar.scss
Normal file
@@ -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;
|
||||
}
|
||||
95
crates/ksp-app-config-desk/frontend/sass/_variables.scss
Normal file
95
crates/ksp-app-config-desk/frontend/sass/_variables.scss
Normal file
@@ -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;
|
||||
10
crates/ksp-app-config-desk/frontend/sass/main.scss
Normal file
10
crates/ksp-app-config-desk/frontend/sass/main.scss
Normal file
@@ -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";
|
||||
57
crates/ksp-app-config-desk/frontend/sass/splash.scss
Normal file
57
crates/ksp-app-config-desk/frontend/sass/splash.scss
Normal file
@@ -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;
|
||||
}
|
||||
22
crates/ksp-app-config-desk/frontend/splash.html
Normal file
22
crates/ksp-app-config-desk/frontend/splash.html
Normal file
@@ -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>
|
||||
16
crates/ksp-app-config-desk/frontend/ts/main.ts
Normal file
16
crates/ksp-app-config-desk/frontend/ts/main.ts
Normal file
@@ -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}'.`;
|
||||
}
|
||||
});
|
||||
11
crates/ksp-app-config-desk/frontend/ts/splash.ts
Normal file
11
crates/ksp-app-config-desk/frontend/ts/splash.ts
Normal file
@@ -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.`;
|
||||
}
|
||||
});
|
||||
22
crates/ksp-app-config-desk/package.json
Normal file
22
crates/ksp-app-config-desk/package.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "ksp-app-config-desk",
|
||||
"private": true,
|
||||
"version": "0.1.4",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc && vite build"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@fltsci/tauri-plugin-tracing": "^0.3",
|
||||
"@fortawesome/fontawesome-free": "^7.3",
|
||||
"@tauri-apps/api": "^2.11",
|
||||
"@types/node": "^26.1",
|
||||
"bootstrap": "^5.3",
|
||||
"resize-observer-polyfill": "^1.5",
|
||||
"sass-embedded": "^1.102",
|
||||
"simplebar": "^6.3",
|
||||
"typescript": "^7.0",
|
||||
"vite": "^8.2"
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
// file: crates/ksp-app-config-desk/src/main.rs
|
||||
// version: 1
|
||||
// version: 2
|
||||
|
||||
//! Binary entry point for the KSP configuration desktop application.
|
||||
|
||||
@@ -13,7 +13,7 @@ use fs2::FileExt; // rust-rules: trait-import
|
||||
fn main() -> std::process::ExitCode {
|
||||
let mut lock_path = std::env::temp_dir();
|
||||
lock_path.push("com_sasedev_ksp_app_config_desk.lock");
|
||||
let lock_file = match std::fs::OpenOptions::new().read(true).write(true).create(true).open(&lock_path) {
|
||||
let lock_file = match std::fs::OpenOptions::new().read(true).write(true).create(true).truncate(false).open(&lock_path) {
|
||||
std::result::Result::Ok(file) => file,
|
||||
std::result::Result::Err(error) => {
|
||||
eprintln!("cannot create application lock '{}': {error}", lock_path.display());
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// file: crates/ksp-app-config-desk/src/tauri.rs
|
||||
// version: 1
|
||||
// version: 2
|
||||
|
||||
//! Tauri runtime assembly for the KSP configuration desktop application.
|
||||
|
||||
@@ -9,6 +9,7 @@ use tauri::Manager; // rust-rules: trait-import
|
||||
#[cfg_attr(mobile, tauri::mobile_entry_point)]
|
||||
pub fn run(_arguments: &[std::ffi::OsString]) -> ksp_core_lib::Result<()> {
|
||||
let mut builder = tauri::Builder::default();
|
||||
builder = configure_plugins(builder);
|
||||
builder = configure_setup(builder);
|
||||
let run_result = builder.run(tauri::generate_context!());
|
||||
return match run_result {
|
||||
@@ -20,6 +21,11 @@ pub fn run(_arguments: &[std::ffi::OsString]) -> ksp_core_lib::Result<()> {
|
||||
};
|
||||
}
|
||||
|
||||
fn configure_plugins(builder: tauri::Builder<tauri::Wry>) -> tauri::Builder<tauri::Wry> {
|
||||
let tracing_plugin = tauri_plugin_tracing::Builder::new().build::<tauri::Wry>();
|
||||
return builder.plugin(tracing_plugin);
|
||||
}
|
||||
|
||||
fn configure_setup(builder: tauri::Builder<tauri::Wry>) -> tauri::Builder<tauri::Wry> {
|
||||
return builder.setup(|app| {
|
||||
if app.get_webview_window("splash").is_none() {
|
||||
|
||||
31
crates/ksp-app-config-desk/tsconfig.json
Normal file
31
crates/ksp-app-config-desk/tsconfig.json
Normal file
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"types": [
|
||||
"vite/client",
|
||||
"node"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"frontend",
|
||||
"vite.config.ts"
|
||||
]
|
||||
}
|
||||
73
crates/ksp-app-config-desk/vite.config.ts
Normal file
73
crates/ksp-app-config-desk/vite.config.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
// file: crates/ksp-app-config-desk/vite.config.ts
|
||||
// version: 1
|
||||
|
||||
import { NodePackageImporter } from "sass-embedded";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import { resolve } from "node:path";
|
||||
import { defineConfig, normalizePath } from "vite";
|
||||
|
||||
const appRoot = fileURLToPath(new URL(".", import.meta.url));
|
||||
const frontendRoot = normalizePath(resolve(appRoot, "frontend"));
|
||||
const frontendDist = normalizePath(resolve(appRoot, "../../builds/khadhroony-solana-project/ksp-app-config-desk/dist"));
|
||||
const devHost = process.env.TAURI_DEV_HOST;
|
||||
|
||||
export default defineConfig({
|
||||
clearScreen: false,
|
||||
root: frontendRoot,
|
||||
publicDir: false,
|
||||
input: {
|
||||
main: normalizePath(resolve(frontendRoot, "main.html")),
|
||||
splash: normalizePath(resolve(frontendRoot, "splash.html")),
|
||||
},
|
||||
build: {
|
||||
outDir: frontendDist,
|
||||
emptyOutDir: true,
|
||||
minify: true,
|
||||
sourcemap: false,
|
||||
cssCodeSplit: true,
|
||||
rolldownOptions: {
|
||||
output: {
|
||||
entryFileNames: "js/[name]-[hash].js",
|
||||
chunkFileNames: "js/chunks/[name]-[hash].js",
|
||||
assetFileNames: assetInfo => {
|
||||
const originalName = assetInfo.names[0] ?? "";
|
||||
const extension = originalName.substring(originalName.lastIndexOf(".") + 1).toLowerCase();
|
||||
if (extension === "css") {
|
||||
return "css/[name]-[hash][extname]";
|
||||
}
|
||||
if (["eot", "otf", "ttf", "woff", "woff2"].includes(extension)) {
|
||||
return "fonts/[name]-[hash][extname]";
|
||||
}
|
||||
if (["png", "jpg", "jpeg", "gif", "svg", "webp", "ico"].includes(extension)) {
|
||||
return "imgs/[name][extname]";
|
||||
}
|
||||
return "otherassets/[name][extname]";
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
quietDeps: true,
|
||||
silenceDeprecations: ["import", "color-functions", "global-builtin"],
|
||||
verbose: false,
|
||||
api: "modern",
|
||||
importers: [new NodePackageImporter()],
|
||||
},
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: 1430,
|
||||
strictPort: true,
|
||||
host: devHost || false,
|
||||
ws: {
|
||||
protocol: "ws",
|
||||
host: devHost || "localhost",
|
||||
port: 1431,
|
||||
},
|
||||
watch: {
|
||||
ignored: ["**/src/**"],
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user