Skip to content

Feat/refonte UI#100

Open
apanchoo wants to merge 4 commits into
Sonar-team:mainfrom
apanchoo:feat/refonte-ui
Open

Feat/refonte UI#100
apanchoo wants to merge 4 commits into
Sonar-team:mainfrom
apanchoo:feat/refonte-ui

Conversation

@apanchoo

Copy link
Copy Markdown

No description provided.

apanchoo and others added 4 commits March 13, 2026 23:28
…ar-team#88)

Replace Capture::from_file with File::open + Capture::from_raw_fd so
that libpcap receives a FILE* instead of a raw path string, bypassing
encoding issues in pcap_open_offline for paths containing spaces,
accents or special characters.
Sur Windows, pcap_open_offline utilise l'API narrow string (ANSI) qui
ne supporte pas les caractères spéciaux/accentués. On utilise
GetShortPathNameW pour obtenir le chemin court 8.3 (ASCII) avant de
le passer à libpcap.
…ort NixOS

UI / Design
- Remontée globale de palette : fonds plus clairs (#282838 app, #363648 panneaux,
  #2c2c3a champs) avec harmonisation des champs de saisie sur tous les panneaux
- Micro-interactions coordonnées : retour visuel scale sur boutons/chips,
  easing uniforme (cubic-bezier(0.25,1,0.5,1)) partout
- Support prefers-reduced-motion via règle CSS globale
- TopBar, StatusBar, BottomLong, widgets status NavBar restylés
- Correction contraste en-têtes tableau (BottomLong)
- Animation d'entrée des lignes dans le tableau de paquets
- Correction débordement IPv6 dans InterfaceStatus (troncature + ellipsis)
- Animation de pulsation du point connecté + correctif alignement dans interfaceSelector
- Panneaux latéraux (Config, Import, Filtre) : animation slide-in harmonisée
- NetworkGraph : correction couleur texte hint, bouton Annuler corrigé,
  animations hover/active sur les contrôles du graphe

Dialogues personnalisés (remplace les dialogues natifs Tauri)
- QuitDialog : modale Vue personnalisée pour la confirmation de fermeture
- ErrorDialog : dialogue d'erreur personnalisé écoutant l'événement 'show-error' ;
  détecte les erreurs CAP_NET_RAW et affiche la commande setcap copiable + hint NixOS

Filtre BPF
- Correctif : le filtre n'était appliqué qu'au démarrage de la capture ;
  redémarre maintenant automatiquement la capture si elle est active
- Correctif : set_filter("") efface désormais le filtre (None) au lieu de
  passer une chaîne vide à pcap
- Correctif : canApply ne bloque plus sur le prévisualisation vide (permet d'effacer)
- Correctif : état du panneau Filtre préservé entre ouverture/fermeture

Gestion des erreurs
- capture.ts : remplacement de message() de @tauri-apps/plugin-dialog par
  document.dispatchEvent('show-error') pour tous les types d'erreurs de capture

NixOS / shell.nix
- Ajout de libcap dans buildInputs (fournit setcap/getcap)
- Ajout d'un rappel shellHook pour la commande setcap CAP_NET_RAW

README
- Correction du nom du binaire (sonar-desktop-app → sonar)
- Ajout d'une section NixOS avec la dépendance libcap et les instructions setcap

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@gemini-code-assist

Copy link
Copy Markdown

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Cette pull request réalise une refonte complète de l'interface utilisateur, transformant l'apparence et la convivialité de l'application avec un thème sombre moderne et des composants visuels cohérents. Elle intègre des décorations de fenêtre personnalisées et des icônes SVG pour une navigation intuitive. Parallèlement, des améliorations significatives ont été apportées à la gestion des fichiers PCAP pour garantir une compatibilité optimale sur différentes plateformes, et de nouveaux dialogues personnalisés gèrent les confirmations de sortie et les rapports d'erreurs de manière plus élégante et informative.

Highlights

  • Refonte de l'interface utilisateur: L'ensemble de l'interface utilisateur a été repensé pour adopter un thème sombre moderne et une esthétique plus cohérente, incluant des décorations de fenêtre personnalisées et des icônes SVG pour une meilleure expérience visuelle.
  • Amélioration de la gestion des fichiers PCAP: La logique d'importation des fichiers PCAP a été mise à jour pour une meilleure compatibilité multiplateforme, notamment sous Windows, en utilisant des appels système spécifiques pour une gestion plus robuste des fichiers.
  • Nouveaux dialogues personnalisés: Des dialogues personnalisés pour la confirmation de sortie et l'affichage des erreurs ont été introduits, offrant une expérience utilisateur plus intégrée et des informations contextuelles pour la résolution des problèmes.
  • Panneaux de configuration et de filtre repensés: Les panneaux de configuration de capture et de filtre BPF ont été entièrement retravaillés avec de nouvelles mises en page, des préréglages et des styles améliorés pour une meilleure ergonomie.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • .gitignore
    • Added new entries for Nix-related files and development tools.
  • README.md
    • Updated non-root execution instructions for Linux.
    • Added a new section for NixOS-specific setup.
  • src-tauri/Cargo.lock
    • Updated the dependency lock file to include windows-sys.
  • src-tauri/Cargo.toml
    • Added the windows-sys dependency specifically for Windows targets.
  • src-tauri/capabilities/default.json
    • Expanded window management permissions for the Tauri application.
  • src-tauri/src/commandes/import/mod.rs
    • Implemented platform-specific logic for opening PCAP files, improving Windows compatibility.
  • src-tauri/src/commandes/net_capture.rs
    • Modified the set_filter function to correctly handle empty filter strings.
  • src-tauri/src/lib.rs
    • Removed the default menu and configured the main window to use custom decorations.
  • src/App.vue
    • Integrated new QuitDialog and ErrorDialog components.
    • Updated global styling and added media query for reduced motion.
    • Refactored window close request handling to use a custom dialog.
  • src/components/AnalyseView/BottomLong.vue
    • Restyled the packet list table with new colors, padding, font sizes, and a row animation.
  • src/components/AnalyseView/LegendComponent.vue
    • Updated the color palette and refined the styling for the network graph legend.
  • src/components/AnalyseView/NetworkGraphComponent.vue
    • Redesigned graph controls with icon buttons.
    • Updated node and edge label styling.
    • Changed default node color and refined overall graph UI styling.
  • src/components/AnalyseView/panels/ConfigPanel.vue
    • Reworked the capture configuration panel with a new layout and updated styling.
    • Simplified getConfig and save methods.
  • src/components/AnalyseView/panels/CustomSelector/interfaceSelector.vue
    • Restyled the network interface selection component with improved detail display and status indicators.
  • src/components/AnalyseView/panels/Filter.vue
    • Redesigned the BPF filter panel, adding presets and updating its visual appearance.
    • Added logic to stop and restart capture when applying a filter if capture is active.
  • src/components/AnalyseView/panels/ImportPalnel.vue
    • Reworked the PCAP import panel, introducing a drop zone and a file list with new styling.
    • Refactored the loading overlay into an inline spinner.
  • src/components/ErrorDialog.vue
    • Added a new component for displaying detailed error messages, including platform-specific advice for capabilities.
  • src/components/NavBar/TopBar.vue
    • Completely redesigned the top navigation bar, replacing text buttons with SVG icons.
    • Added window management controls (minimize, maximize/restore, close) and a draggable title region.
  • src/components/NavBar/status-bar/ChannelStatus.vue
    • Updated the channel buffer status display with a new SVG icon and refined styling.
  • src/components/NavBar/status-bar/Cpu.vue
    • Updated the CPU usage display with a new SVG icon and refined styling.
  • src/components/NavBar/status-bar/InterfaceStatus.vue
    • Updated the styling for the network interface status button.
  • src/components/NavBar/status-bar/StatusBar.vue
    • Updated the bottom status bar with new SVG icons for packet statistics and refined styling.
  • src/components/NavBar/status-bar/Timer.vue
    • Updated the capture timer display with a new SVG icon and refined styling.
  • src/components/QuitDialog.vue
    • Added a new component for a custom quit confirmation dialog.
  • src/components/homeVue/Capture.vue
    • Updated the styling for the live capture configuration panel to match the new UI theme.
  • src/components/homeVue/FromPcap.vue
    • Updated the styling for the PCAP file import section in the home view.
  • src/errors/capture.ts
    • Modified the error handling utility to dispatch custom events for the new ErrorDialog instead of using tauri-apps/plugin-dialog.
  • src/views/analyseView.vue
    • Adjusted the usage of the Filter component to pass its visibility as a prop.
  • src/views/homeView.vue
    • Updated the styling for the view toggle button and the footer.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

Cette pull request introduit une refonte majeure de l'interface utilisateur, passant à une fenêtre sans cadre avec des contrôles personnalisés et un thème visuel moderne et cohérent. De nombreux composants ont été redessinés, et de nouveaux dialogues personnalisés pour les erreurs et la confirmation de fermeture améliorent considérablement l'expérience utilisateur. La logique backend pour l'importation de fichiers pcap a également été rendue plus robuste pour les chemins de fichiers non-ASCII sur Windows et Unix. J'ai ajouté deux suggestions dans le code backend pour améliorer la maintenabilité et corriger un bug potentiel dans la gestion des chemins de fichiers sous Windows.

Comment on lines +54 to +56
unsafe { GetShortPathNameW(wide.as_ptr(), buf.as_mut_ptr(), len) };
// Retire le null-terminator
String::from_utf16_lossy(&buf[..len as usize - 1])

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

L'implémentation actuelle pour Windows ignore la valeur de retour de GetShortPathNameW (ligne 54), qui indique le nombre de caractères réellement écrits dans le buffer. À la place, elle utilise len - 1 (ligne 56), où len est la capacité du buffer. C'est potentiellement dangereux. Si GetShortPathNameW échoue (retourne 0) ou écrit moins de caractères que prévu, vous pourriez soit paniquer, soit lire des données invalides. Il est plus sûr d'utiliser la longueur retournée par l'appel unsafe pour découper le buffer.

Suggested change
unsafe { GetShortPathNameW(wide.as_ptr(), buf.as_mut_ptr(), len) };
// Retire le null-terminator
String::from_utf16_lossy(&buf[..len as usize - 1])
let n_written = unsafe { GetShortPathNameW(wide.as_ptr(), buf.as_mut_ptr(), len) };
if n_written > 0 && n_written < len {
String::from_utf16_lossy(&buf[..n_written as usize])
} else {
file_path.to_string()
}

Comment on lines +30 to +35
unsafe { Capture::from_raw_fd(fd) }.map_err(|e| {
CaptureStateError::Import(PcapImportError::OpenFileError(
file_path.to_string(),
e.to_string(),
))
})

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Ce bloc de mappage d'erreur est répété à l'identique dans les autres branches de compilation conditionnelle (lignes 62-67 et 72-77). Pour améliorer la lisibilité et la maintenabilité, vous pourriez extraire cette logique dans une closure locale et la réutiliser. Cela éviterait la duplication de code.

@Akmot9 Akmot9 added the enhancement Amélioration label Mar 23, 2026
@Akmot9 Akmot9 added this to SONAR Mar 23, 2026
@Akmot9 Akmot9 added this to the V1 milestone Mar 23, 2026
@Akmot9 Akmot9 moved this to En cours in SONAR Apr 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement Amélioration

Projects

Status: En cours

Development

Successfully merging this pull request may close these issues.

2 participants