feat: implement initial renderer dashboard UI and transcription workflow integration

src/renderer/src/App.jsx

@@ -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

@@ -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; }
+  0% {
-  50% { transform: scale(1.1); opacity: 0.5; }
+    transform: scale(1);
-  100% { transform: scale(1); opacity: 0.3; }
+    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; }
+.relative {
-.absolute { position: absolute; }
+  position: relative;
-.inset-y-0 { top: 0; bottom: 0; }
+}
-.left-0 { left: 0; }
+
-.right-0 { right: 0; }
+.absolute {
-.z-50 { z-index: 50; }
+  position: absolute;
-.mt-1 { margin-top: 4px; }
+}
-.w-full { width: 100%; }
+
-.flex { display: flex; }
+.inset-y-0 {
-.items-center { align-items: center; }
+  top: 0;
-.justify-between { justify-content: space-between; }
+  bottom: 0;
-.text-left { text-align: left; }
+}
-.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
-.block { display: block; }
+.left-0 {
-.h-4 { height: 16px; }
+  left: 0;
-.w-4 { width: 16px; }
+}
+
+.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; }
+.max-height-60 {
-.overflow-auto { overflow: auto; }
+  max-height: 240px;
-.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; }
+.overflow-auto {
-.cursor-default { cursor: default; }
+  overflow: auto;
-.font-normal { font-weight: 400; }
+}
-.font-medium { font-weight: 500; }
 
-.text-primary-cyan { color: var(--primary-cyan); }
+.rounded-md {
-.text-white { color: #ffffff; }
+  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; }
+.transition {
-.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
+  transition-property: opacity, transform;
-.duration-100 { transition-duration: 100ms; }
+}
-.opacity-0 { opacity: 0; }
+
-.opacity-100 { opacity: 1; }
+.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); }
+  0% {
-  100% { filter: hue-rotate(360deg); }
+    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 {