UI: layout, подсказки по ролям, ограничения для не залогиненных

- Overview: grid вместо flex для Feed+Chart (стабильный layout при логине)
- FeedCard: подсказка feed.adminOnly вместо passwordRequired
- ProtectedRoute: protected.passwordRequired для Settings/System/Library
- Ограничения: PDF, экспорт, корм — только для залогиненных
- FoodManagement: чекбоксы только для admin

Made-with: Cursor

Author: gfer

app/ui/locales/en.json

@@ -1,4 +1,7 @@
 {
+  "protected": {
+    "passwordRequired": "Enter admin password to access this section."
+  },
   "nav": {
     "dashboard": "Dashboard",
     "timeline": "Timeline",
@@ -341,6 +344,7 @@
     "mergeSpeciesFailed": "Failed to merge duplicate species"
   },
   "common": {
+    "loginRequiredForExport": "Sign in to export data and reports",
     "retry": "Retry",
     "cancel": "Cancel",
     "noData": "No data available",
@@ -430,7 +434,8 @@
     "feedDispensed": "Feed dispensed",
     "lastDispense": "Last dispense",
     "donate": "Donate",
-    "donatePlaceholder": "Donate (set URL in Settings)"
+    "donatePlaceholder": "Donate (set URL in Settings)",
+    "adminOnly": "Button available to admin. Volunteers can help with species — contact us."
   },
   "speciesSummary": {
     "totalDetectionStats": "Total Detection Stats",
@@ -490,7 +495,8 @@
     "food": "Food",
     "description": "Description",
     "active": "Active",
-    "noDescription": "No description available"
+    "noDescription": "No description available",
+    "loginRequired": "Sign in to change food in the feeder"
   },
   "status": {
     "motion": "Motion",

app/ui/locales/ru.json

@@ -1,4 +1,7 @@
 {
+  "protected": {
+    "passwordRequired": "Введите пароль администратора для доступа к этому разделу."
+  },
   "nav": {
     "dashboard": "Панель",
     "timeline": "Записи",
@@ -341,6 +344,7 @@
     "mergeSpeciesFailed": "Ошибка объединения дубликатов видов"
   },
   "common": {
+    "loginRequiredForExport": "Войдите для экспорта и отчётов",
     "retry": "Повторить",
     "cancel": "Отмена",
     "noData": "Нет данных",
@@ -430,7 +434,8 @@
     "feedDispensed": "Корм выдан",
     "lastDispense": "Последняя выдача",
     "donate": "Пожертвовать",
-    "donatePlaceholder": "Пожертвовать (укажите ссылку в Настройках)"
+    "donatePlaceholder": "Пожертвовать (укажите ссылку в Настройках)",
+    "adminOnly": "Кнопка доступна администратору. Волонтёры могут помочь с видами — свяжитесь с нами."
   },
   "speciesSummary": {
     "totalDetectionStats": "Статистика обнаружений",
@@ -490,7 +495,8 @@
     "food": "Корм",
     "description": "Описание",
     "active": "Активен",
-    "noDescription": "Описание отсутствует"
+    "noDescription": "Описание отсутствует",
+    "loginRequired": "Войдите для изменения состава корма в кормушке"
   },
   "status": {
     "motion": "Триггер",

app/ui/src/components/FeedCard.tsx

@@ -64,10 +64,7 @@ export const FeedCard = () => {
         <Typography variant="h6">{t('feed.feederControl')}</Typography>
         {!isAdmin && (
           <Typography variant="body2" color="text.secondary">
-            {t('unknowns.passwordRequired')}{' '}
-            <Link to="/settings" style={{ fontWeight: 600 }}>
-              {t('nav.settings')}
-            </Link>
+            {t('feed.adminOnly')}
           </Typography>
         )}
         <Button

app/ui/src/components/ProtectedRoute.tsx

@@ -58,7 +58,7 @@ export function ProtectedRoute({ children, title }: ProtectedRouteProps) {
           {title}
         </Typography>
         <Typography color="text.secondary" sx={{ mb: 3 }}>
-          {t('settings.passwordRequired')}
+          {t('protected.passwordRequired')}
         </Typography>
         <SettingsPasswordDialog
           open

app/ui/src/pages/FoodManagement/index.tsx

@@ -8,19 +8,23 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
+import Alert from '@mui/material/Alert';
 import CircularProgress from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
 import Checkbox from '@mui/material/Checkbox';
 import Avatar from '@mui/material/Avatar';
 import Info from '@mui/icons-material/Info';
+import Tooltip from '@mui/material/Tooltip';
 import { resolveImageUrl, fetchBirdFood, toggleBirdFood } from '../../api/api';
 import { BirdFood } from '../../types';
 import { PageHelp } from '../../components/PageHelp';
 import { foodHelpConfig } from '../../page-help-config';
+import { useProtectedArea } from '../../contexts/ProtectedAreaContext';
 
 export const FoodManagement = () => {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
+  const { isAdmin } = useProtectedArea();
   const { data: foodData, isLoading } = useQuery({
     queryKey: ['birdFood'],
     queryFn: fetchBirdFood,
@@ -59,6 +63,11 @@ export const FoodManagement = () => {
   return (
     <Box mb={4}>
       <PageHelp {...foodHelpConfig} />
+      {!isAdmin && (
+        <Alert severity="info" sx={{ mb: 2 }}>
+          {t('food.loginRequired')}
+        </Alert>
+      )}
       <TableContainer component={Paper}>
         <Table>
           <TableHead>
@@ -94,11 +103,16 @@ export const FoodManagement = () => {
                   </Typography>
                 </TableCell>
                 <TableCell align="center" sx={{ width: '100px' }}>
-                  <Checkbox
-                    checked={food.active}
-                    onChange={() => toggleMutation.mutate(food.id)}
-                    color="primary"
-                  />
+                  <Tooltip title={!isAdmin ? t('food.loginRequired') : ''}>
+                    <span>
+                      <Checkbox
+                        checked={food.active}
+                        onChange={() => isAdmin && toggleMutation.mutate(food.id)}
+                        color="primary"
+                        disabled={!isAdmin}
+                      />
+                    </span>
+                  </Tooltip>
                 </TableCell>
               </TableRow>
             ))}

app/ui/src/pages/Overview/index.tsx

@@ -27,6 +27,8 @@ import VideocamOutlined from '@mui/icons-material/VideocamOutlined';
 import { BirdIcon } from '../../components/icons/BirdIcon';
 import { PageHelp } from '../../components/PageHelp';
 import { overviewHelpConfig } from '../../page-help-config';
+import { useProtectedArea } from '../../contexts/ProtectedAreaContext';
+import Tooltip from '@mui/material/Tooltip';
 
 const formatHour = (hour: number) => {
   const date = new Date();
@@ -36,6 +38,7 @@ const formatHour = (hour: number) => {
 
 export const Overview = () => {
   const { t } = useTranslation();
+  const { canEdit } = useProtectedArea();
   const [selectedDay, setSelectedDay] = useState<Dayjs>(dayjs());
   const [downloadingPdf, setDownloadingPdf] = useState(false);
 
@@ -114,24 +117,29 @@ export const Overview = () => {
                 format="YYYY-MM-DD"
               />
             </LocalizationProvider>
-            <Button
-              variant="outlined"
-              size="medium"
-              startIcon={<DownloadIcon />}
-              disabled={downloadingPdf}
-              onClick={async () => {
-                setDownloadingPdf(true);
-                try {
-                  await downloadReportPdf(selectedDay.format('YYYY-MM'));
-                } catch (err) {
-                  console.error('PDF download failed:', err);
-                } finally {
-                  setDownloadingPdf(false);
-                }
-              }}
-            >
-              {downloadingPdf ? '...' : t('overview.downloadPdf')}
-            </Button>
+            <Tooltip title={!canEdit ? t('common.loginRequiredForExport') : undefined}>
+              <span>
+                <Button
+                  variant="outlined"
+                  size="medium"
+                  startIcon={<DownloadIcon />}
+                  disabled={downloadingPdf || !canEdit}
+                  onClick={async () => {
+                    if (!canEdit) return;
+                    setDownloadingPdf(true);
+                    try {
+                      await downloadReportPdf(selectedDay.format('YYYY-MM'));
+                    } catch (err) {
+                      console.error('PDF download failed:', err);
+                    } finally {
+                      setDownloadingPdf(false);
+                    }
+                  }}
+                >
+                  {downloadingPdf ? '...' : t('overview.downloadPdf')}
+                </Button>
+              </span>
+            </Tooltip>
           </Box>
         </Grid>
       </Grid>
@@ -254,25 +262,33 @@ export const Overview = () => {
           {weather && <WeatherCard weather={weather} />}
         </Grid>
 
-        {/* Feed Control */}
-        <Grid size={{ xs: 12, sm: 6, md: 4 }} sx={{ display: 'flex' }}>
-          <FeedCard />
-        </Grid>
-
-        {/* Hourly Activity Line Chart */}
-        <Grid size={{ xs: 12, md: 8 }} sx={{ display: 'flex' }}>
-          <Paper sx={{ p: 2, width: '100%' }}>
-            <Typography variant="h6" gutterBottom>
-              {t('overview.hourlyActivity')}
-            </Typography>
-            {overviewData?.topSpecies && overviewData.topSpecies.length > 0 ? (
-              <HourlyActivityChart data={overviewData.topSpecies} />
-            ) : (
-              <Typography color="text.secondary" sx={{ py: 4 }}>
-                {t('overview.noData')}
+        {/* Feed Control + Hourly Activity — в одной строке без зазора */}
+        <Grid size={12}>
+          <Box
+            sx={{
+              display: 'grid',
+              gridTemplateColumns: { xs: '1fr', sm: 'minmax(280px, 320px) 1fr' },
+              gap: 2,
+              alignItems: 'stretch',
+              width: '100%',
+            }}
+          >
+            <Box>
+              <FeedCard />
+            </Box>
+            <Paper sx={{ p: 2, minWidth: 0 }}>
+              <Typography variant="h6" gutterBottom>
+                {t('overview.hourlyActivity')}
               </Typography>
-            )}
-          </Paper>
+              {overviewData?.topSpecies && overviewData.topSpecies.length > 0 ? (
+                <HourlyActivityChart data={overviewData.topSpecies} />
+              ) : (
+                <Typography color="text.secondary" sx={{ py: 4 }}>
+                  {t('overview.noData')}
+                </Typography>
+              )}
+            </Paper>
+          </Box>
         </Grid>
       </Grid>
 

app/ui/src/pages/Timeline/index.tsx

@@ -31,6 +31,7 @@ import ListItemText from '@mui/material/ListItemText';
 import { PageHelp } from '../../components/PageHelp';
 import { timelineHelpConfig } from '../../page-help-config';
 import { getTimeRange, type TimeOfDay } from '../../utils/timeUtils';
+import { useProtectedArea } from '../../contexts/ProtectedAreaContext';
 
 function useSpeciesList(visits: SpeciesVisit[] | undefined) {
   return visits
@@ -56,6 +57,7 @@ function useFilteredVisits(
 
 export function TimelinePage() {
   const { t } = useTranslation();
+  const { canEdit } = useProtectedArea();
   const [searchParams] = useSearchParams();
   const [selectedSpeciesIds, setSelectedSpeciesIds] = useState<number[]>([]);
   const [timeOfDay, setTimeOfDay] = useState<TimeOfDay>('all');
@@ -233,11 +235,11 @@ export function TimelinePage() {
             ))}
           </Select>
         </FormControl>
-        <Tooltip title={t('timeline.export')}>
+        <Tooltip title={!canEdit ? t('common.loginRequiredForExport') : t('timeline.export')}>
           <span>
             <IconButton
               onClick={(e) => setExportAnchor(e.currentTarget)}
-              disabled={exporting}
+              disabled={exporting || !canEdit}
               aria-label={t('timeline.export')}
             >
               <DownloadIcon />