From ecb4295a59d1a0106bd69eae6595176aa4865fdb Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Sat, 26 Sep 2026 20:21:27 -0400
Subject: [PATCH] feat(oauth-ui): decouverte import Google/Twitch (sidebar,
 empty states, aide)

---
 src/components/library/import/import.component.html   | 11 +++++++++++
 src/components/library/liked/liked.component.html     |  7 ++++++-
 .../subscriptions/subscriptions.component.html        |  6 ++++++
 src/components/sidebar/sidebar.component.html         |  6 ++++++
 src/services/i18n.service.ts                          |  2 ++
 5 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/library/import/import.component.html b/src/components/library/import/import.component.html
index 517557d..6d061ad 100644
--- a/src/components/library/import/import.component.html
+++ b/src/components/library/import/import.component.html
@@ -13,6 +13,17 @@
   </div>
 
   <div *ngIf="notice()" class="mb-4 rounded-lg border border-blue-700 bg-blue-900/30 p-3 text-sm text-blue-200">{{ notice() }}</div>
+
+  <details class="mb-4 rounded-xl border border-slate-800 bg-slate-900/60 p-4 text-sm text-slate-300">
+    <summary class="cursor-pointer font-semibold text-slate-100">Comment ça marche ? (scopes, URLs, ré-import)</summary>
+    <ul class="mt-2 list-disc space-y-1 pl-5 text-slate-400">
+      <li><strong class="text-slate-200">Google</strong> : abonnements + favoris YouTube, scopes lecture seule <code>openid userinfo.profile youtube.readonly</code>. Redirect URI à enregistrer dans Google Cloud : <code>/api/oauth/google/callback</code>.</li>
+      <li><strong class="text-slate-200">Twitch</strong> : chaînes suivies uniquement (<strong>pas de likes côté Twitch</strong>), scopes <code>user:read:follows user:read:subscriptions</code>. Redirect URI à enregistrer sur dev.twitch.tv : <code>/api/oauth/twitch/callback</code>.</li>
+      <li><strong class="text-slate-200">Prévisualiser</strong> ne change rien ; <strong class="text-slate-200">Importer</strong> ajoute abonnements / favoris dans NewTube.</li>
+      <li>Ré-importer est <strong class="text-slate-200">sans doublons</strong> : relancez sans crainte après de nouveaux abos/likes.</li>
+    </ul>
+  </details>
+
   <div *ngIf="loading()" class="text-sm text-slate-400">Chargement…</div>
 
   <div *ngIf="!loading()" class="grid gap-4 md:grid-cols-2">
diff --git a/src/components/library/liked/liked.component.html b/src/components/library/liked/liked.component.html
index 93c8425..390a262 100644
--- a/src/components/library/liked/liked.component.html
+++ b/src/components/library/liked/liked.component.html
@@ -33,7 +33,12 @@
     } @else if (error(); as err) {
       <div class="text-red-300">{{ err }}</div>
     } @else if (items().length === 0) {
-      <div class="text-slate-400">Aucune vidéo aimée pour le moment.</div>
+      <div class="flex flex-col items-center gap-3 py-8 text-center">
+        <div class="text-slate-400">Aucune vidéo aimée pour le moment.</div>
+        <a [routerLink]="['/library/import']" class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-500">
+          ⬇ Importer mes favoris (Google / Twitch)
+        </a>
+      </div>
     } @else {
       <ul class="space-y-3">
         @for (it of items(); track it.provider + ':' + it.video_id) {
diff --git a/src/components/library/subscriptions/subscriptions.component.html b/src/components/library/subscriptions/subscriptions.component.html
index 9dba335..a04b3c8 100644
--- a/src/components/library/subscriptions/subscriptions.component.html
+++ b/src/components/library/subscriptions/subscriptions.component.html
@@ -368,6 +368,12 @@
         <div class="flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed border-slate-700 bg-slate-900/60 p-10 text-center">
           <h3 class="text-lg font-semibold text-slate-100">Aucune chaîne dans ce filtre</h3>
           <p class="text-sm text-slate-400">Changez de groupe, de filtre ou abonnez-vous à de nouvelles chaînes.</p>
+          <a
+            [routerLink]="['/library/import']"
+            class="mt-2 rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-500"
+          >
+            ⬇ Importer mes abonnements (Google / Twitch)
+          </a>
         </div>
       </ng-template>
     </div>
diff --git a/src/components/sidebar/sidebar.component.html b/src/components/sidebar/sidebar.component.html
index 8f360a3..54cf72f 100644
--- a/src/components/sidebar/sidebar.component.html
+++ b/src/components/sidebar/sidebar.component.html
@@ -63,6 +63,12 @@
                 <span [class.hidden]="collapsed">{{ 'nav.downloads' | t }}</span>
               </a>
             </li>
+            <li>
+              <a routerLink="/library/import" routerLinkActive="bg-slate-800" class="flex items-center px-3 py-2 rounded hover:bg-slate-800 transition" [ngClass]="{ 'gap-0 justify-center': collapsed, 'gap-3': !collapsed }" [attr.title]="collapsed ? ('nav.import' | t) : null">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M12 4v12m0 0l-4-4m4 4l4-4"/></svg>
+                <span [class.hidden]="collapsed">{{ 'nav.import' | t }}</span>
+              </a>
+            </li>
           </ul>
         </div>
       </div>
diff --git a/src/services/i18n.service.ts b/src/services/i18n.service.ts
index 90b914b..8fc11ca 100644
--- a/src/services/i18n.service.ts
+++ b/src/services/i18n.service.ts
@@ -56,6 +56,7 @@ const EN: Record<string, string> = {
   'nav.playlists': 'Playlists',
   'nav.liked': 'Liked videos',
   'nav.downloads': 'Downloads',
+  'nav.import': 'Import',
   'nav.explore': 'Explore',
   'nav.providers': 'Providers',
   'nav.info': 'Information',
@@ -201,6 +202,7 @@ const FR: Record<string, string> = {
   'nav.playlists': 'Listes de lecture',
   'nav.liked': 'Vidéos que vous aimez',
   'nav.downloads': 'Téléchargements',
+  'nav.import': 'Importer',
   'nav.explore': 'Explorer',
   'nav.providers': 'Fournisseurs',
   'nav.info': 'Informations',