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 ? "バックエンドで確認済み" : "未確認トークン"}
)}