truncgit/voicext
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement initial renderer dashboard UI and transcription workflow integration

Browse Source
This commit is contained in:
Ümit Tunç
2026-04-23 11:03:19 +03:00
parent e267fca6cb
commit 2351ba72ed
2 changed files with 175 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/App.jsx
+1 -1
View File
@@ -314,7 +314,7 @@ function App() {
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 1.05 }}
className="queue-view"
style={{ flex: 1, display: 'flex', flexDirection: 'column' }}
style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}
>
{selectedSrt ? (
<SrtEditor filePath={selectedSrt} onClose={() => setSelectedSrt(null)} />
src/renderer/src/index.css
+174 -45
View File
@@ -90,7 +90,8 @@ body {
flex-direction: column;
padding: 20px;
padding-top: 0;
min-height: 0; /* Important for flex children to scroll */
min-height: 0;
/* Important for flex children to scroll */
}
.header {
@@ -217,9 +218,20 @@ body {
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.1); opacity: 0.5; }
100% { transform: scale(1); opacity: 0.3; }
0% {
transform: scale(1);
opacity: 0.3;
}
50% {
transform: scale(1.1);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 0.3;
}
}
.drop-zone h2 {
@@ -347,22 +359,72 @@ body {
}
/* Custom Select Styles */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-y-0 { top: 0; bottom: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.z-50 { z-index: 50; }
.mt-1 { margin-top: 4px; }
.w-full { width: 100%; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.text-left { text-align: left; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block { display: block; }
.h-4 { height: 16px; }
.w-4 { width: 16px; }
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.inset-y-0 {
top: 0;
bottom: 0;
}
.left-0 {
left: 0;
}
.right-0 {
right: 0;
}
.z-50 {
z-index: 50;
}
.mt-1 {
margin-top: 4px;
}
.w-full {
width: 100%;
}
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.text-left {
text-align: left;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.block {
display: block;
}
.h-4 {
height: 16px;
}
.w-4 {
width: 16px;
}
.bg-dark-glass {
background: rgba(15, 15, 25, 0.95);
@@ -374,45 +436,106 @@ body {
overflow: hidden;
}
.max-height-60 { max-height: 240px; }
.overflow-auto { overflow: auto; }
.rounded-md { border-radius: 8px; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.pl-3 { padding-left: 12px; }
.pl-10 { padding-left: 40px; }
.pr-4 { padding-right: 16px; }
.max-height-60 {
max-height: 240px;
}
.select-none { user-select: none; }
.cursor-default { cursor: default; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.overflow-auto {
overflow: auto;
}
.text-primary-cyan { color: var(--primary-cyan); }
.text-white { color: #ffffff; }
.rounded-md {
border-radius: 8px;
}
.shadow-lg {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.py-1 {
padding-top: 4px;
padding-bottom: 4px;
}
.py-2 {
padding-top: 8px;
padding-bottom: 8px;
}
.pl-3 {
padding-left: 12px;
}
.pl-10 {
padding-left: 40px;
}
.pr-4 {
padding-right: 16px;
}
.select-none {
user-select: none;
}
.cursor-default {
cursor: default;
}
.font-normal {
font-weight: 400;
}
.font-medium {
font-weight: 500;
}
.text-primary-cyan {
color: var(--primary-cyan);
}
.text-white {
color: #ffffff;
}
/* Scrollbar styling for dropdown */
.bg-dark-glass::-webkit-scrollbar {
width: 6px;
}
.bg-dark-glass::-webkit-scrollbar-track {
background: transparent;
}
.bg-dark-glass::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
.bg-dark-glass::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.2);
}
/* Animation for select dropdown */
.transition { transition-property: opacity, transform; }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.duration-100 { transition-duration: 100ms; }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.transition {
transition-property: opacity, transform;
}
.ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.duration-100 {
transition-duration: 100ms;
}
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.drop-zone.drag-active {
border-color: var(--primary-cyan);
@@ -450,8 +573,13 @@ body {
}
@keyframes shimmer {
0% { filter: hue-rotate(0deg); }
100% { filter: hue-rotate(360deg); }
0% {
filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
}
}
/* Models View */
@@ -604,7 +732,8 @@ body {
.srt-editor-container {
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
min-height: 0;
padding: 25px;
position: relative;
overflow: hidden;
@@ -662,10 +791,10 @@ body {
.segments-list {
flex: 1;
min-height: 0;
overflow-y: auto;
padding-right: 15px;
margin-bottom: 20px;
min-height: 0;
}
.segments-list::-webkit-scrollbar {
@@ -874,4 +1003,4 @@ body {
height: 100%;
font-size: 20px;
color: var(--primary-cyan);
}
}