From 91c3cd42f6eca23ce2cc714380170e8eeed8f819 Mon Sep 17 00:00:00 2001
From: LeoMortari <leo.mortari.forinn@gmail.com>
Date: Sun, 2 Nov 2025 00:07:56 -0300
Subject: [PATCH] Ajustes de layout

---
 src/App.vue               | 19 ++--------
 src/auth/router.js        |  7 ++--
 src/routes/videos/new.vue | 76 +++++++++++++++++++++++----------------
 3 files changed, 50 insertions(+), 52 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5ff320f..28e06a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,23 +23,6 @@
         </div>
 
         <div class="app-toolbar__actions">
-          <Button
-            v-if="quickAction"
-            :icon="quickAction.icon || 'sym_o_add'"
-            :label="quickAction.label"
-            @click="handleQuickAction"
-          />
-
-          <q-btn
-            flat
-            round
-            dense
-            color="primary"
-            icon="sym_o_notifications"
-            class="app-toolbar__icon"
-            aria-label="Notificações"
-          />
-
           <Toggle v-model="darkMode" color="primary" @toggle="toggleDarkMode" />
 
           <q-btn
@@ -656,6 +639,7 @@ body.body--dark .app-toolbar__avatar {
   align-items: center;
   gap: 12px;
   padding: 0 16px 8px;
+  margin-top: 10px;
 }
 
 .app-user-menu__info {
@@ -709,6 +693,7 @@ body.body--dark .app-drawer {
   align-items: center;
   gap: 12px;
   padding: 0 24px 24px;
+  margin-top: 15px;
 }
 
 .app-drawer__brand {
diff --git a/src/auth/router.js b/src/auth/router.js
index 2860d3b..cd561f4 100644
--- a/src/auth/router.js
+++ b/src/auth/router.js
@@ -33,7 +33,9 @@ const getUserRoles = () => {
   const decodedRoles = extractRolesFromToken(token);
 
   if (decodedRoles.length) {
-    Cookies.set("user_roles", JSON.stringify(decodedRoles), { sameSite: "lax" });
+    Cookies.set("user_roles", JSON.stringify(decodedRoles), {
+      sameSite: "lax",
+    });
   }
 
   return decodedRoles;
@@ -60,7 +62,6 @@ export const routes = [
       showinModal: true,
       menu: MENUS.VIDEOS,
       icon: "sym_o_video_library",
-      description: "Acompanhe e gerencie os vídeos capturados automaticamente.",
       quickAction: {
         label: "Novo vídeo",
         to: "/videos/new",
@@ -80,7 +81,6 @@ export const routes = [
       showinModal: false,
       menu: MENUS.VIDEOS,
       icon: "sym_o_add_to_queue",
-      description: "Cole o link do YouTube e deixe a IA preparar seus cortes.",
       quickAction: false,
       order: 2,
     },
@@ -96,7 +96,6 @@ export const routes = [
       showinModal: true,
       menu: MENUS.USUARIOS,
       icon: "sym_o_groups",
-      description: "Gerencie quem tem acesso ao Clipper IA.",
       quickAction: false,
       order: 1,
     },
diff --git a/src/routes/videos/new.vue b/src/routes/videos/new.vue
index ed14e75..b11647c 100644
--- a/src/routes/videos/new.vue
+++ b/src/routes/videos/new.vue
@@ -8,17 +8,6 @@
           picos de atenção e gere sugestões de clipes automaticamente.
         </p>
       </div>
-
-      <div class="app-actions-bar">
-        <Button
-          variant="ghost"
-          color="secondary"
-          text-color="primary"
-          icon="sym_o_lightbulb"
-          label="Guia de cortes rápidos"
-          @click="handleGuide"
-        />
-      </div>
     </section>
 
     <div class="video-create__grid">
@@ -69,10 +58,11 @@
 
         <ul class="video-create__hints">
           <li>Informe apenas o link completo do vídeo no YouTube.</li>
+          <li>Suporte a vídeos até 1 hora e canais com integração liberada.</li>
           <li>
-            Suporte a vídeos até 4 horas e canais com integração liberada.
+            Após a busca, confirme os dados, selecione a qualidade, e envie para
+            processamento.
           </li>
-          <li>Após a busca, confirme os dados e envie para processamento.</li>
         </ul>
       </q-card>
 
@@ -135,12 +125,6 @@
               <h3>Insights do vídeo</h3>
               <span>Resumo dos dados coletados diretamente da plataforma.</span>
             </div>
-            <Button
-              variant="ghost"
-              icon="sym_o_download"
-              label="Exportar dados"
-              @click="handleExport"
-            />
           </header>
 
           <div class="video-create__stats">
@@ -219,13 +203,14 @@
           </div>
 
           <div class="video-create__actions">
-            <Button
-              variant="ghost"
-              color="secondary"
-              text-color="primary"
-              icon="sym_o_notifications_active"
-              label="Ativar alertas do canal"
-              @click="handleChannelAlerts"
+            <Dropdown
+              v-model="quality"
+              class="video-create__quality"
+              label="Qualidade"
+              :options="qualityOptions"
+              :emit-value="true"
+              :map-options="true"
+              :disable="saveLoading"
             />
 
             <Button
@@ -249,6 +234,7 @@ import duration from "dayjs/plugin/duration";
 import Button from "@components/Button";
 import TextField from "@components/TextField";
 import DisplayValue from "@components/DisplayValue";
+import Dropdown from "@components/Dropdown";
 
 import { API } from "@config/axios";
 import { getErrorMessage } from "@utils/axios";
@@ -261,16 +247,31 @@ export default {
     Button,
     TextField,
     DisplayValue,
+    Dropdown,
   },
   data() {
     return {
       url: "",
       loading: false,
       saveLoading: false,
+      quality: "automatic",
+      qualityOptions: [
+        { label: "Automática", value: "automatic" },
+        { label: "Alta (1080p)", value: "1080p" },
+        { label: "Média (720p)", value: "720p" },
+        { label: "Baixa (480p)", value: "480p" },
+      ],
       video: {},
     };
   },
   computed: {
+    selectedQualityLabel() {
+      const current = this.qualityOptions.find(
+        (option) => option.value === this.quality
+      );
+
+      return current?.label || this.qualityOptions[0]?.label || "Automática";
+    },
     videoLoaded() {
       return Object.keys(this.video).length > 0;
     },
@@ -398,13 +399,23 @@ export default {
 
       try {
         this.saveLoading = true;
-        // Chamada de criação ainda não implementada.
-        await new Promise((resolve) => setTimeout(resolve, 1200));
+
+        const { duration, id, title } = this.video;
+
+        await API.post("/videos", {
+          url: this.url,
+          qualidade: this.quality,
+          videoid: id,
+          title,
+          duration,
+        });
+
         this.$q.notify({
           type: "positive",
-          message:
-            "Vídeo enviado para processamento. Você será notificado quando os cortes estiverem prontos!",
+          message: `Vídeo enviado para processamento`,
         });
+
+        this.$router.push("/videos");
       } catch (error) {
         this.$q.notify({
           type: "negative",
@@ -558,7 +569,6 @@ export default {
   justify-content: space-between;
   align-items: flex-start;
   gap: 16px;
-  margin-bottom: 20px;
 }
 
 .video-create__section-head h3 {
@@ -601,6 +611,10 @@ export default {
   justify-content: flex-end;
 }
 
+.video-create__quality {
+  min-width: 220px;
+}
+
 .fade-slide-enter-active,
 .fade-slide-leave-active {
   transition: opacity 0.22s ease, transform 0.22s ease;