add refresh button for videos in admin

frontend/src/pages/AdminPage.css

@@ -148,6 +148,49 @@
   line-height: 1.5;
 }
 
+.refresh-videos-button {
+  padding: 10px 20px;
+  background: var(--color-primary);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 2px 8px var(--color-shadow);
+}
+
+.refresh-videos-button:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
+}
+
+.refresh-videos-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.refresh-message {
+  margin-top: 12px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.refresh-message.success {
+  background-color: #d4edda;
+  color: #155724;
+  border: 1px solid #c3e6cb;
+}
+
+.refresh-message.error {
+  background-color: #f8d7da;
+  color: #721c24;
+  border: 1px solid #f5c6cb;
+}
+
 @media (max-width: 1024px) {
   .admin-content {
     grid-template-columns: 1fr;

frontend/src/pages/VideosAdminPage.tsx

@@ -1,9 +1,33 @@
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { ChannelManager } from '../components/ChannelManager/ChannelManager';
 import { TimeLimitManager } from '../components/TimeLimitManager/TimeLimitManager';
+import { videosApi } from '../services/apiClient';
 import './AdminPage.css';
 
 export function VideosAdminPage() {
+  const [refreshing, setRefreshing] = useState(false);
+  const [refreshMessage, setRefreshMessage] = useState<string | null>(null);
+  const [refreshError, setRefreshError] = useState<string | null>(null);
+
+  const handleRefreshVideos = async () => {
+    setRefreshing(true);
+    setRefreshMessage(null);
+    setRefreshError(null);
+
+    try {
+      const response = await videosApi.refresh();
+      const data = response.data;
+      setRefreshMessage(
+        `Refreshed ${data.channelsRefreshed} channel(s). Added ${data.videosAdded} video(s).`
+      );
+    } catch (err: any) {
+      setRefreshError(err.response?.data?.error?.message || 'Failed to refresh videos');
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
   return (
     <div className="admin-page">
       <div className="admin-header">
@@ -12,6 +36,21 @@ export function VideosAdminPage() {
         </Link>
         <h1>Video App Settings</h1>
         <p>Manage YouTube channels and video time limits</p>
+        <div style={{ marginTop: '16px' }}>
+          <button
+            onClick={handleRefreshVideos}
+            disabled={refreshing}
+            className="refresh-videos-button"
+          >
+            {refreshing ? 'Refreshing...' : '🔄 Refresh All Videos'}
+          </button>
+          {refreshMessage && (
+            <div className="refresh-message success">{refreshMessage}</div>
+          )}
+          {refreshError && (
+            <div className="refresh-message error">{refreshError}</div>
+          )}
+        </div>
       </div>
       
       <div className="admin-content">