feat: implement primary account identifier and streamline add account flow via direct Steam login

frontend/src/pages/Dashboard.tsx

@@ -25,6 +25,7 @@ import ShieldIcon from '@mui/icons-material/Shield';
 import GppBadIcon from '@mui/icons-material/GppBad';
 import PeopleIcon from '@mui/icons-material/People';
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
+import WorkspacePremiumIcon from '@mui/icons-material/WorkspacePremium';
 import { useAccounts, type Account } from '../hooks/useAccounts';
 import { useAppTheme } from '../theme/ThemeContext';
 import type { ThemeType } from '../theme/SteamTheme';
@@ -39,47 +40,13 @@ const Dashboard: React.FC = () => {
   } = useAccounts();
   
   const [searchTerm, setSearchTerm] = useState('');
-  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-  const [identifier, setIdentifier] = useState('');
-  
-  const [addTab, setAddTab] = useState(0);
-  const [communityAccounts, setCommunityAccounts] = useState<any[]>([]);
-  const [isCommunityLoading, setIsCommunityLoading] = useState(false);
   const [serverUrl, setServerUrl] = useState('');
 
   useEffect(() => {
     if (serverConfig?.url) setServerUrl(serverConfig.url);
   }, [serverConfig?.url]);
 
-  const loadCommunity = async () => {
-    setIsCommunityLoading(true);
-    try {
-      const data = await getCommunityAccounts();
-      setCommunityAccounts(Array.isArray(data) ? data : []);
-    } catch (e) { } finally { setIsCommunityLoading(false); }
-  };
-
-  useEffect(() => {
-    if (isAddDialogOpen && addTab === 1) loadCommunity();
-  }, [isAddDialogOpen, addTab]);
-
-  const handleAddAccount = async () => {
-    if (!identifier) return;
-    try {
-      await addAccount({ identifier });
-      setIsAddDialogOpen(false);
-      setIdentifier('');
-    } catch (e) { console.error("[Dashboard] Add failed:", e); }
-  };
-
-  const handleAddFromCommunity = async (commAcc: any) => {
-    try {
-      await addAccount({ identifier: commAcc.steamId });
-      setIsAddDialogOpen(false);
-    } catch (e) { }
-  };
-
   const saveSettings = async () => {
     await updateServerConfig({ url: serverUrl });
     alert("Server URL updated!");
@@ -139,7 +106,7 @@ const Dashboard: React.FC = () => {
               variant="contained"
               color="primary"
               startIcon={<AddIcon />}
-              onClick={() => setIsAddDialogOpen(true)}
+              onClick={() => openSteamLogin('')}
               sx={{ height: 32 }}
             >
               Add
@@ -185,161 +152,13 @@ const Dashboard: React.FC = () => {
         {!isLoading && filteredAccounts.length === 0 && (
           <Box sx={{ width: '100%', mt: 10, textAlign: 'center' }}>
             <Typography variant="h6" color="textSecondary">
-              No accounts tracked. Click "Add Account" to get started!
+              No accounts tracked. Click "Add" to get started!
             </Typography>
           </Box>
         )}
       </Container>
 
       {/* Settings Dialog */}
-      <Dialog open={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} maxWidth="sm" fullWidth>
-        <DialogTitle sx={{ backgroundColor: 'background.paper', color: 'text.primary' }}>Settings & Customization</DialogTitle>
-        <DialogContent sx={{ backgroundColor: 'background.paper', pt: 2 }}>
-          <Typography variant="subtitle2" gutterBottom sx={{ color: 'primary.main', mt: 1 }}>THEME SELECTION</Typography>
-          <FormControl fullWidth size="small" sx={{ mb: 3 }}>
-            <InputLabel sx={{ color: 'text.secondary' }}>Active Theme</InputLabel>
-            <Select
-              value={currentTheme || 'steam'}
-              label="Active Theme"
-              onChange={(e) => setTheme(e.target.value as ThemeType)}
-              sx={{ bgcolor: 'rgba(0,0,0,0.1)', color: 'text.primary' }}
-            >
-              <MenuItem value="steam">Steam Classic</MenuItem>
-              <MenuItem value="mocha">Catppuccin Mocha</MenuItem>
-              <MenuItem value="latte">Catppuccin Latte</MenuItem>
-              <MenuItem value="nord">Nord Arctic</MenuItem>
-              <MenuItem value="tokyo">Tokyo Night</MenuItem>
-            </Select>
-          </FormControl>
-
-          <Divider sx={{ my: 2, borderColor: 'divider' }} />
-
-          <Typography variant="subtitle2" gutterBottom sx={{ color: 'primary.main' }}>BACKEND CONFIGURATION</Typography>
-          <TextField
-            fullWidth
-            label="Server URL"
-            value={serverUrl}
-            onChange={(e) => setServerUrl(e.target.value)}
-            placeholder="https://ultimate-ban-tracker.narl.io"
-            margin="dense"
-            sx={{ mb: 2 }}
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <Button variant="contained" size="small" onClick={saveSettings} sx={{ height: 30 }}>Apply</Button>
-                </InputAdornment>
-              ),
-            }}
-          />
-          
-          <Divider sx={{ my: 2, borderColor: 'divider' }} />
-          
-          <Typography variant="subtitle2" gutterBottom sx={{ color: 'primary.main' }}>COMMUNITY AUTHENTICATION</Typography>
-          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', p: 2, bgcolor: 'rgba(0,0,0,0.1)', borderRadius: 1 }}>
-            <Box>
-              <Typography variant="body2" sx={{ fontWeight: 'bold' }}>
-                {serverConfig?.token ? "Connected to Server" : "Not Authenticated"}
-              </Typography>
-              <Typography variant="caption" color="textSecondary">
-                {serverConfig?.token ? "Your accounts can now be shared with others." : "Login to share and sync with your community."}
-              </Typography>
-            </Box>
-            <Box sx={{ display: 'flex', gap: 1 }}>
-              {serverConfig?.token && (
-                <Button 
-                  variant="outlined" 
-                  color="error"
-                  onClick={() => updateServerConfig({ token: undefined, enabled: false })}
-                >
-                  Logout
-                </Button>
-              )}
-              <Button 
-                variant="outlined" 
-                color="primary"
-                onClick={() => loginToServer()}
-                disabled={!serverUrl}
-              >
-                {serverConfig?.token ? "Re-Login" : "Login with Steam"}
-              </Button>
-            </Box>
-          </Box>
-
-          <FormControlLabel
-            control={
-              <Switch 
-                checked={serverConfig?.enabled || false} 
-                onChange={(e) => updateServerConfig({ enabled: e.target.checked })}
-                disabled={!serverConfig?.token}
-              />
-            }
-            label="Enable Community Sync"
-            sx={{ mt: 2 }}
-          />
-        </DialogContent>
-        <DialogActions sx={{ backgroundColor: 'background.paper', p: 2 }}>
-          <Button onClick={() => setIsSettingsOpen(false)} color="inherit" variant="contained">Done</Button>
-        </DialogActions>
-      </Dialog>
-
-      {/* Add Account Dialog */}
-      <Dialog open={isAddDialogOpen} onClose={() => setIsAddDialogOpen(false)} maxWidth="sm" fullWidth>
-        <DialogTitle sx={{ backgroundColor: 'background.paper', color: 'text.primary', p: 0 }}>
-          <Tabs value={addTab} onChange={(_, v) => setAddTab(v)} variant="fullWidth" textColor="inherit" indicatorColor="primary">
-            <Tab label="Manual Add" icon={<AddIcon />} iconPosition="start" />
-            <Tab label="From Community" icon={<PublicIcon />} iconPosition="start" disabled={!serverConfig?.token} />
-          </Tabs>
-        </DialogTitle>
-        <DialogContent sx={{ backgroundColor: 'background.paper', pt: 2, minHeight: 300 }}>
-          {addTab === 0 ? (
-            <>
-              <Typography variant="body2" color="textSecondary" sx={{ mb: 2 }}>
-                Enter a SteamID64 or Profile URL. You will need to authenticate to enable full tracking and instant login features.
-              </Typography>
-              <TextField
-                fullWidth
-                autoFocus
-                placeholder="SteamID64 or Profile URL"
-                value={identifier}
-                onChange={(e) => setIdentifier(e.target.value)}
-                sx={{ '& .MuiOutlinedInput-root': { backgroundColor: 'rgba(0, 0, 0, 0.1)' } }}
-              />
-            </>
-          ) : (
-            <Box>
-              {isCommunityLoading ? (
-                <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress size={32} /></Box>
-              ) : (
-                <List>
-                  {communityAccounts
-                    .filter(ca => !safeAccounts.find(a => a.steamId === ca.steamId))
-                    .map((ca) => (
-                      <ListItem key={ca.steamId} divider sx={{ borderColor: 'divider' }}>
-                        <Avatar src={ca.avatar} variant="square" sx={{ width: 32, height: 32, mr: 2 }} />
-                        <ListItemText 
-                          primary={ca.personaName} 
-                          secondary={ca.steamId} 
-                          primaryTypographyProps={{ sx: { color: 'text.primary', fontWeight: 'bold' } }}
-                        />
-                        <ListItemSecondaryAction>
-                          <Button size="small" variant="contained" onClick={() => handleAddFromCommunity(ca)}>Add</Button>
-                        </ListItemSecondaryAction>
-                      </ListItem>
-                    ))}
-                  {communityAccounts.length === 0 && <Typography align="center" color="textSecondary" sx={{ p: 4 }}>No shared accounts found on server.</Typography>}
-                </List>
-              )}
-            </Box>
-          )}
-        </DialogContent>
-        <DialogActions sx={{ backgroundColor: 'background.paper', p: 2 }}>
-          <Button onClick={() => setIsAddDialogOpen(false)} color="inherit">Cancel</Button>
-          {addTab === 0 && <Button onClick={handleAddAccount} variant="contained" color="success" disabled={!identifier}>Add</Button>}
-        </DialogActions>
-      </Dialog>
-    </Box>
-  );
-};
 
 // --- Sub-Component: AccountRow ---
 
@@ -415,6 +234,9 @@ const AccountRow: React.FC<{
 
   const isBanned = account?.vacBanned || (account?.gameBans && account.gameBans > 0);
   
+  // Primary account check
+  const isPrimaryAccount = serverConfig?.serverSteamId === account.steamId;
+
   // Refined Shared Logic: 
   // 1. It was shared WITH you (starts with shared_) 
   // 2. OR you are the owner but you have shared it with at least one person
@@ -427,6 +249,11 @@ const AccountRow: React.FC<{
       <TableCell>
         <Box sx={{ position: 'relative' }}>
           <Avatar src={imgSrc} variant="square" sx={{ width: 32, height: 32, border: '1px solid', borderColor: 'divider' }} />
+          {isPrimaryAccount && (
+            <Tooltip title="Primary Community Account">
+              <WorkspacePremiumIcon sx={{ position: 'absolute', top: -8, left: -8, fontSize: 18, color: '#FFD700', filter: 'drop-shadow(0 0 2px rgba(0,0,0,0.5))' }} />
+            </Tooltip>
+          )}
           {showCommunityIcon && (
             <Tooltip title={isSharedWithYou ? "Remote Shared Account" : "Actively Shared with Community"}>
               <PeopleIcon sx={{ position: 'absolute', bottom: -4, right: -4, fontSize: 14, color: 'primary.main', bgcolor: 'background.default', borderRadius: '50%', border: '1px solid', borderColor: 'divider', p: 0.2 }} />