Add Ongeki challenge songs, admin tab and themed date picker

- Show each event's chapter name and its challenge song list, and localize the
  whole challenge page in English and Chinese
- Move the event editor into an admin tab with editable type, KoP id, dates and
  song list, and drop the standalone route plus its sidebar link
- Add DateTimeField on top of the themed date and time pickers instead of the
  native browser input, and render dates without timezone timestamps
- Let a wrapped event title stop stretching the badge row

Author: mxihan

src/components/shared/DateTimeField.tsx

@@ -0,0 +1,79 @@
+import { DatePicker, TimePicker } from 'animal-island-ui';
+import { LiquidTextField } from '@liquefy-ui/react';
+import { useTheme } from '@/lib/theme';
+
+/**
+ * Date + time input for the admin screens.
+ *
+ * Each interface style gets its own control: Animal Island UI ships a themed
+ * picker pair, Liquid Glass has its own text field, and the classic theme keeps
+ * the browser's native control with the Bootstrap input classes.
+ */
+interface DateTimeFieldProps {
+  /** Value in the native `datetime-local` format, `YYYY-MM-DDTHH:mm`. */
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  label?: string;
+}
+
+function splitDateTime(value: string): { date: string; time: string } {
+  const [date = '', time = ''] = value.split('T');
+  return { date, time: time.slice(0, 5) };
+}
+
+function joinDateTime(date: string, time: string): string {
+  if (!date) return '';
+  return `${date}T${time || '00:00'}`;
+}
+
+export function DateTimeField({ value, onChange, disabled, label }: DateTimeFieldProps) {
+  const { family } = useTheme();
+  const { date, time } = splitDateTime(value);
+
+  if (family === 'animal-island') {
+    return (
+      <div className="d-flex flex-wrap gap-1" role="group" aria-label={label}>
+        <DatePicker
+          size="small"
+          value={date || null}
+          disabled={disabled}
+          aria-label={label}
+          onChange={(next) => onChange(joinDateTime(typeof next === 'string' ? next : '', time))}
+        />
+        <TimePicker
+          size="small"
+          format="HH:mm"
+          value={time || undefined}
+          disabled={disabled}
+          allowClear={false}
+          aria-label={label}
+          onChange={(next) => onChange(joinDateTime(date, (next ?? '').slice(0, 5)))}
+        />
+      </div>
+    );
+  }
+
+  if (family === 'liquefy') {
+    return (
+      <LiquidTextField
+        type="datetime-local"
+        value={value}
+        disabled={disabled}
+        aria-label={label}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    );
+  }
+
+  return (
+    <input
+      className="form-control form-control-sm"
+      type="datetime-local"
+      value={value}
+      disabled={disabled}
+      aria-label={label}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  );
+}

src/components/shell/AppShell.tsx

@@ -140,18 +140,11 @@ function SidebarNav({ onNavigate }: { onNavigate?: () => void }) {
               </a>
             </li>
             {admin && (
-              <>
-                <li className="pb-2">
-                  <a className={'link-btn rounded' + (isActive('admin') ? ' active' : '')} onClick={() => go('admin')}>
-                    {t('App.Sidebar.Admin')}
-                  </a>
-                </li>
-                <li className="pb-2">
-                  <a className={'link-btn rounded' + (isActive('admin/ongeki-events') ? ' active' : '')} onClick={() => go('admin/ongeki-events')}>
-                    Ongeki Events
-                  </a>
-                </li>
-              </>
+              <li className="pb-2">
+                <a className={'link-btn rounded' + (isActive('admin') ? ' active' : '')} onClick={() => go('admin')}>
+                  {t('App.Sidebar.Admin')}
+                </a>
+              </li>
             )}
           </ul>
         </li>