Skip to content

Refactor frontend to sidebar layout for better UX #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Yuri-NagaSaki merged 1 commit into from
Dec 23, 2025
Merged

Refactor frontend to sidebar layout for better UX #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
632 changes: 135 additions & 497 deletions ui/src/App.vue
View file
Open in desktop

Large diffs are not rendered by default.

88 changes: 27 additions & 61 deletions ui/src/assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,61 +2,53 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
/* Using system fonts for fast loading - no external fonts */

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Fix overscroll bounce background color */
background-color: #f0f7ff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: #f9fafb;
}

html.dark {
background-color: #0f172a;
background-color: #111827;
}

body {
margin: 0;
padding: 0;
line-height: 1.6;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Fix overscroll bounce background color */
background-color: #f0f7ff;
background-color: #f9fafb;
overscroll-behavior: none;
}

body.dark {
background-color: #0f172a;
background-color: #111827;
}

#app {
min-height: 100vh;
min-height: 100dvh;
/* Fix overscroll bounce background color */
background: linear-gradient(to bottom right, #f0f7ff, #ffffff, #f0f7ff);
}

#app.dark {
background: linear-gradient(to bottom right, #0f172a, #1e293b, #0f172a);
}

/* Custom scrollbar */
/* Custom scrollbar - minimal style */
::-webkit-scrollbar {
width: 10px;
height: 10px;
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
@apply bg-gray-100/50 dark:bg-gray-800/50;
background: transparent;
}

::-webkit-scrollbar-thumb {
@apply bg-gray-300 dark:bg-gray-600 rounded-full border-2 border-transparent bg-clip-content;
@apply bg-gray-300 dark:bg-gray-600 rounded;
}

::-webkit-scrollbar-thumb:hover {
Expand All @@ -78,59 +70,38 @@ body.dark {

/* ApexCharts dark mode fixes */
.apexcharts-tooltip {
@apply !bg-gray-800/80 !backdrop-blur-sm !border-gray-600;
@apply !bg-gray-800/90 !border-gray-600;
}

.apexcharts-tooltip-title,
.apexcharts-tooltip-text {
@apply !text-white;
}

/* Transitions */
/* Simple transitions */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
transition: opacity 0.15s ease;
}

.fade-enter-from,
.fade-leave-to {
opacity: 0;
}

.slide-up-enter-active,
.slide-up-leave-active {
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
.slide-enter-active,
.slide-leave-active {
transition: transform 0.2s ease, opacity 0.2s ease;
}

.slide-up-enter-from {
.slide-enter-from {
opacity: 0;
transform: translateY(30px);
transform: translateY(8px);
}

.slide-up-leave-to {
.slide-leave-to {
opacity: 0;
transform: translateY(-30px);
}

/* Loading animations */
@keyframes shimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
}

.shimmer {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200px 100%;
animation: shimmer 1.5s infinite;
}

.dark .shimmer {
background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
background-size: 200px 100%;
transform: translateY(-8px);
}

/* Focus styles */
Expand All @@ -140,27 +111,22 @@ body.dark {

/* Button styles */
.btn-primary {
@apply bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 focus-ring shadow-md hover:shadow-lg hover:-translate-y-0.5;
@apply bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-150 focus-ring;
}

.btn-secondary {
@apply bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 focus-ring shadow-md hover:shadow-lg hover:-translate-y-0.5;
@apply bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white font-medium py-2 px-4 rounded-lg transition-colors duration-150 focus-ring;
}

/* Card styles */
.card-base {
@apply bg-white/60 dark:bg-gray-800/60 backdrop-blur-xl rounded-2xl shadow-lg border border-white/20 dark:border-gray-700/50 overflow-hidden transition-all duration-300;
@apply bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden;
}

.card-header {
@apply px-6 py-4;
@apply px-5 py-4 border-b border-gray-100 dark:border-gray-700;
}

.card-body {
@apply p-6;
}

/* Utility classes */
.text-gradient {
@apply bg-gradient-to-r from-primary-600 to-purple-600 bg-clip-text text-transparent;
@apply p-5;
}
21 changes: 5 additions & 16 deletions ui/src/components/Loading.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,20 @@
<script setup>
import { ref, onMounted } from 'vue'
import { useMotion } from '@vueuse/motion'

const cardRef = ref()
const { apply } = useMotion(cardRef, {
initial: { opacity: 0, y: 20 },
enter: { opacity: 1, y: 0, transition: { duration: 500 } }
})

onMounted(() => {
apply()
})
// Simple loading component - no external dependencies
</script>

<template>
<div ref="cardRef" class="max-w-md mx-auto">
<div class="max-w-md mx-auto p-4">
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 p-8">
<div class="text-center">
<div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-primary-500 to-primary-600 rounded-2xl mb-6">
<div class="w-8 h-8 border-4 border-white border-t-transparent rounded-full animate-spin"></div>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Connecting...</h3>
<p class="text-gray-600 dark:text-gray-400 mb-6">Establishing connection to the server</p>

<!-- Progress bar -->
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
<div class="bg-gradient-to-r from-primary-500 to-primary-600 h-2 rounded-full animate-pulse" style="width: 100%"></div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden">
<div class="bg-gradient-to-r from-primary-500 to-primary-600 h-2 rounded-full w-full animate-pulse"></div>
</div>
</div>
</div>
Expand Down
Loading