From 3cc70db82bb3ff2254758acd0eea94d4200e4aa8 Mon Sep 17 00:00:00 2001
From: Samantaz Fox <coding@samantaz.fr>
Date: Thu, 24 Feb 2022 04:38:29 +0100
Subject: [PATCH] user: Add menu to 'data_control.ecr'

---
 src/invidious/views/user/data_control.ecr | 98 +++++++++++++----------
 1 file changed, 55 insertions(+), 43 deletions(-)

diff --git a/src/invidious/views/user/data_control.ecr b/src/invidious/views/user/data_control.ecr
index 74ccc06c..e7234467 100644
--- a/src/invidious/views/user/data_control.ecr
+++ b/src/invidious/views/user/data_control.ecr
@@ -1,58 +1,70 @@
 <% content_for "header" do %>
 <title><%= translate(locale, "Import and Export Data") %> - Invidious</title>
+<link rel="stylesheet" href="/css/user.css?v=<%= ASSET_COMMIT %>">
 <% end %>
 
-<div class="h-box">
-    <form class="pure-form pure-form-aligned" enctype="multipart/form-data" action="/data_control?referer=<%= URI.encode_www_form(referer) %>" method="post">
-        <fieldset>
-            <legend><%= translate(locale, "Import") %></legend>
+<div class="h-box pure-g">
+	<div class="pure-u-1 pure-u-md-1-5">
+		<%= Invidious::Frontend::UserMenu.make_menu(env, :import_export) %>
+	</div>
 
-            <div class="pure-control-group">
-                <label for="import_youtube"><%= translate(locale, "Import Invidious data") %></label>
-                <input type="file" id="import_invidious" name="import_invidious">
-            </div>
+	<div class="pure-u-1 pure-u-md-4-5">
+		<div class="user-tab">
 
-            <div class="pure-control-group">
-                <label for="import_youtube">
-                    <a rel="noopener" target="_blank" href="https://github.com/iv-org/documentation/blob/master/Export-YouTube-subscriptions.md">
-                        <%= translate(locale, "Import YouTube subscriptions") %>
-                    </a>
-                </label>
-                <input type="file" id="import_youtube" name="import_youtube">
-            </div>
+			<form class="pure-form pure-form-aligned" enctype="multipart/form-data" action="/data_control?referer=<%= URI.encode_www_form(referer) %>" method="post">
+				<fieldset>
+					<legend><%= translate(locale, "Import") %></legend>
 
-            <div class="pure-control-group">
-                <label for="import_freetube"><%= translate(locale, "Import FreeTube subscriptions (.db)") %></label>
-                <input type="file" id="import_freetube" name="import_freetube">
-            </div>
+					<div class="pure-control-group">
+						<label for="import_youtube"><%= translate(locale, "Import Invidious data") %></label>
+						<input type="file" id="import_invidious" name="import_invidious">
+					</div>
 
-            <div class="pure-control-group">
-                <label for="import_newpipe_subscriptions"><%= translate(locale, "Import NewPipe subscriptions (.json)") %></label>
-                <input type="file" id="import_newpipe_subscriptions" name="import_newpipe_subscriptions">
-            </div>
+					<div class="pure-control-group">
+						<label for="import_youtube">
+							<a rel="noopener" target="_blank" href="https://github.com/iv-org/documentation/blob/master/Export-YouTube-subscriptions.md">
+								<%= translate(locale, "Import YouTube subscriptions") %>
+							</a>
+						</label>
+						<input type="file" id="import_youtube" name="import_youtube">
+					</div>
 
-            <div class="pure-control-group">
-                <label for="import_newpipe"><%= translate(locale, "Import NewPipe data (.zip)") %></label>
-                <input type="file" id="import_newpipe" name="import_newpipe">
-            </div>
+					<div class="pure-control-group">
+						<label for="import_freetube"><%= translate(locale, "Import FreeTube subscriptions (.db)") %></label>
+						<input type="file" id="import_freetube" name="import_freetube">
+					</div>
 
-            <div class="pure-controls">
-                <button type="submit" class="pure-button pure-button-primary"><%= translate(locale, "Import") %></button>
-            </div>
+					<div class="pure-control-group">
+						<label for="import_newpipe_subscriptions"><%= translate(locale, "Import NewPipe subscriptions (.json)") %></label>
+						<input type="file" id="import_newpipe_subscriptions" name="import_newpipe_subscriptions">
+					</div>
 
-            <legend><%= translate(locale, "Export") %></legend>
+					<div class="pure-control-group">
+						<label for="import_newpipe"><%= translate(locale, "Import NewPipe data (.zip)") %></label>
+						<input type="file" id="import_newpipe" name="import_newpipe">
+					</div>
 
-            <div class="pure-control-group">
-                <a href="/subscription_manager?action_takeout=1"><%= translate(locale, "Export subscriptions as OPML") %></a>
-            </div>
+					<div class="pure-controls">
+						<button type="submit" class="pure-button pure-button-primary"><%= translate(locale, "Import") %></button>
+					</div>
 
-            <div class="pure-control-group">
-                <a href="/subscription_manager?action_takeout=1&format=newpipe"><%= translate(locale, "Export subscriptions as OPML (for NewPipe & FreeTube)") %></a>
-            </div>
+					<legend><%= translate(locale, "Export") %></legend>
+
+					<div class="pure-control-group">
+						<a href="/subscription_manager?action_takeout=1"><%= translate(locale, "Export subscriptions as OPML") %></a>
+					</div>
+
+					<div class="pure-control-group">
+						<a href="/subscription_manager?action_takeout=1&format=newpipe"><%= translate(locale, "Export subscriptions as OPML (for NewPipe & FreeTube)") %></a>
+					</div>
+
+					<div class="pure-control-group">
+						<a href="/subscription_manager?action_takeout=1&format=json"><%= translate(locale, "Export data as JSON") %></a>
+					</div>
+				</fieldset>
+			</form>
+
+		</div>
+	</div>
 
-            <div class="pure-control-group">
-                <a href="/subscription_manager?action_takeout=1&format=json"><%= translate(locale, "Export data as JSON") %></a>
-            </div>
-        </fieldset>
-    </form>
 </div>