diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index a5f585c..9d51986 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -37,9 +37,6 @@ export default function App() { Watch Party -
- -
{/* Time sync banner (checks every 5 min; shows if |skew| > 500ms) */} @@ -50,6 +47,11 @@ export default function App() { Timer Shows +
+
管理用サインイン
+
削除や管理にはログインが必要です。
+ +
{/* Backdrop for overlap mode or to close on click */} diff --git a/frontend/src/index.css b/frontend/src/index.css index 7ac9fee..d375809 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -177,13 +177,10 @@ kbd { z-index: 50; top: 0; left: 16px; right: 16px; height: var(--header-h); - - /* three areas: banner (fills), burger (left), title (left of center) */ - display: grid; - grid-template-columns: auto auto 1fr; /* burger | title | banner */ - grid-template-areas: "burger title banner"; + display: flex; align-items: center; - column-gap: 12px; + gap: 12px; + justify-content: flex-start; } @@ -194,11 +191,6 @@ kbd { letter-spacing: 0.2px; text-shadow: 0 1px 10px rgba(0,0,0,0.25); } -.auth-slot { - grid-area: banner; - display: flex; - justify-content: flex-end; -} .auth-chip { display: inline-flex; align-items: center; @@ -266,8 +258,9 @@ kbd { border-right: 1px solid rgba(255,255,255,0.12); transform: translateX(-100%); transition: transform 180ms ease; - display: grid; - align-content: start; + display: flex; + flex-direction: column; + gap: 14px; padding: 70px 16px 16px; /* leave space under header */ } .sidebar.open { transform: translateX(0); } @@ -287,6 +280,32 @@ kbd { } .navlink.active { color: var(--accent); border-color: rgba(121,192,255,0.6); } +.sidebar-auth { + margin-top: auto; + padding-top: 12px; + border-top: 1px solid rgba(255,255,255,0.12); + display: grid; + gap: 8px; +} +.sidebar-auth-title { + font-size: 13px; + font-weight: 800; + color: var(--text); +} +.sidebar-auth-note { + font-size: 12px; + color: var(--subtle); +} +.sidebar-auth .auth-btn { + width: 100%; + justify-content: center; +} +.sidebar-auth .auth-chip { + width: 100%; + justify-content: flex-start; + gap: 10px; +} + /* Backdrop (for overlap mode, also clickable to close) */ .backdrop { position: fixed; @@ -616,7 +635,7 @@ kbd { .debug-overlay { position: fixed; bottom: 16px; - left: 16px; + right: 16px; z-index: 190; color: var(--text); } diff --git a/frontend/src/pages/ShowsPage.tsx b/frontend/src/pages/ShowsPage.tsx index 79ba608..25a3f53 100644 --- a/frontend/src/pages/ShowsPage.tsx +++ b/frontend/src/pages/ShowsPage.tsx @@ -65,7 +65,7 @@ export default function ShowsPage() { const redirectTid = useRef(null); const isRedirecting = redirectIn !== null; const navigate = useNavigate(); - const { enabled: authEnabled, idToken, backendClaims, verifying, signInWithGoogle } = useAuth(); + const { enabled: authEnabled, idToken, backendClaims, verifying } = useAuth(); const isAuthed = authEnabled && !!idToken; // フォーム状態 @@ -314,17 +314,10 @@ export default function ShowsPage() {
エピソードを選び、必要に応じて開始時刻(HH:MM)を入力し、「現在のエピソードに設定」を押してください。 - 削除は認証後のみ実行できます。 - {!isAuthed && ( - <> - {" "} - - )} + 削除は認証後のみ実行できます。サイドバー下部の「管理用サインイン」からログインしてください。 {isAuthed && ( - {verifying ? "トークン確認中…" : backendClaims ? "バックエンドで確認済み" : "未確認トークン"} + {" "} {verifying ? "トークン確認中…" : backendClaims ? "バックエンドで確認済み" : "未確認トークン"} )}