From 9059314cd18f5d1b25ead7df9c0093e0bbfcf7fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Thu, 2 Apr 2026 00:16:20 +0300
Subject: [PATCH] feat: implement main application dashboard with service
 management and project configuration UI

---
 src/renderer/src/App.tsx | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 0544684..50f4799 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -746,8 +746,20 @@ function App(): JSX.Element {
                         backdropFilter: 'blur(10px)'
                     }}
                 >
-                    <Toolbar sx={{ gap: 2 }}>
-                        <FormControl size="small" variant="outlined" sx={{ minWidth: 120 }}>
+                    <Toolbar sx={{ gap: 1 }}>
+                        <Box sx={{ flexGrow: 1 }} />
+                        <Tooltip title={t('dashboard.start_all')}>
+                            <IconButton color="inherit" onClick={handleStartAll} sx={{ '&:hover': { color: 'success.main' } }}>
+                                <StartIcon />
+                            </IconButton>
+                        </Tooltip>
+                        <Tooltip title={t('dashboard.stop_all')}>
+                            <IconButton color="inherit" onClick={handleStopAll} sx={{ '&:hover': { color: 'error.main' } }}>
+                                <StopIcon />
+                            </IconButton>
+                        </Tooltip>
+                        <Divider orientation="vertical" flexItem sx={{ mx: 1, borderColor: 'rgba(255,255,255,0.1)' }} />
+                        <FormControl size="small" variant="outlined" sx={{ minWidth: 80 }}>
                             <Select
                                 value={i18n.language}
                                 onChange={handleLanguageChange}
@@ -755,8 +767,10 @@ function App(): JSX.Element {
                                 IconComponent={LanguageIcon}
                                 sx={{
                                     color: 'white',
-                                    '.MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.3)' },
-                                    '&:hover .MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.5)' },
+                                    height: '35px',
+                                    fontSize: '0.8rem',
+                                    '.MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.2)' },
+                                    '&:hover .MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.4)' },
                                     '&.Mui-focused .MuiOutlinedInput-notchedOutline': { borderColor: 'primary.main' },
                                     '.MuiSelect-icon': { color: 'white' }
                                 }}
@@ -768,7 +782,7 @@ function App(): JSX.Element {
                                 ))}
                             </Select>
                         </FormControl>
-                        <IconButton color="inherit" onClick={() => setActiveTab('settings')}>
+                        <IconButton color="inherit" onClick={() => setActiveTab('settings')} sx={{ ml: 1 }}>
                             <SettingsIcon />
                         </IconButton>
                     </Toolbar>
@@ -1281,15 +1295,6 @@ function App(): JSX.Element {
                                         </Grid>
                                     ))}
                                 </Grid>
-
-                                <Box sx={{ display: 'flex', gap: 2 }}>
-                                    <Button variant="contained" fullWidth startIcon={<StartIcon />} size="large" onClick={handleStartAll} sx={{ borderRadius: 2, padding: '12px', background: 'linear-gradient(45deg, #153E5E 30%, #4A7CA3 90%)', boxShadow: '0 3px 5px 2px rgba(21, 62, 94, .3)' }}>
-                                        {t('common.start')}
-                                    </Button>
-                                    <Button variant="outlined" fullWidth startIcon={<StopIcon />} size="large" color="error" onClick={handleStopAll} sx={{ borderRadius: 2, padding: '12px', borderWidth: 2, '&:hover': { borderWidth: 2 } }}>
-                                        {t('common.stop')}
-                                    </Button>
-                                </Box>
                             </>
                         )}