ajuste de layout mobile, melhorias e criação de novas funções. Detalhes adicionados no CHANGELOG.md

app/(dashboard)/ajustes/actions.ts

@@ -70,6 +70,8 @@ const VALID_FONTS = [
 
 const updatePreferencesSchema = z.object({
 	disableMagnetlines: z.boolean(),
+	extratoNoteAsColumn: z.boolean(),
+	lancamentosColumnOrder: z.array(z.string()).nullable(),
 	systemFont: z.enum(VALID_FONTS).default("ai-sans"),
 	moneyFont: z.enum(VALID_FONTS).default("ai-sans"),
 });
@@ -417,6 +419,8 @@ export async function updatePreferencesAction(
 				.update(schema.preferenciasUsuario)
 				.set({
 					disableMagnetlines: validated.disableMagnetlines,
+					extratoNoteAsColumn: validated.extratoNoteAsColumn,
+					lancamentosColumnOrder: validated.lancamentosColumnOrder,
 					systemFont: validated.systemFont,
 					moneyFont: validated.moneyFont,
 					updatedAt: new Date(),
@@ -427,6 +431,8 @@ export async function updatePreferencesAction(
 			await db.insert(schema.preferenciasUsuario).values({
 				userId: session.user.id,
 				disableMagnetlines: validated.disableMagnetlines,
+				extratoNoteAsColumn: validated.extratoNoteAsColumn,
+				lancamentosColumnOrder: validated.lancamentosColumnOrder,
 				systemFont: validated.systemFont,
 				moneyFont: validated.moneyFont,
 			});

app/(dashboard)/ajustes/data.ts

@@ -4,6 +4,8 @@ import { db, schema } from "@/lib/db";
 
 export interface UserPreferences {
 	disableMagnetlines: boolean;
+	extratoNoteAsColumn: boolean;
+	lancamentosColumnOrder: string[] | null;
 	systemFont: string;
 	moneyFont: string;
 }
@@ -32,6 +34,8 @@ export async function fetchUserPreferences(
 	const result = await db
 		.select({
 			disableMagnetlines: schema.preferenciasUsuario.disableMagnetlines,
+			extratoNoteAsColumn: schema.preferenciasUsuario.extratoNoteAsColumn,
+			lancamentosColumnOrder: schema.preferenciasUsuario.lancamentosColumnOrder,
 			systemFont: schema.preferenciasUsuario.systemFont,
 			moneyFont: schema.preferenciasUsuario.moneyFont,
 		})

app/(dashboard)/ajustes/page.tsx

@@ -1,3 +1,4 @@
+import { RiArrowRightSLine } from "@remixicon/react";
 import { headers } from "next/headers";
 import { redirect } from "next/navigation";
 
@@ -35,17 +36,28 @@ export default async function Page() {
 	return (
 		<div className="w-full">
 			<Tabs defaultValue="preferencias" className="w-full">
-				<TabsList>
-					<TabsTrigger value="preferencias">Preferências</TabsTrigger>
-					<TabsTrigger value="companion">Companion</TabsTrigger>
-					<TabsTrigger value="nome">Alterar nome</TabsTrigger>
-					<TabsTrigger value="senha">Alterar senha</TabsTrigger>
-					<TabsTrigger value="email">Alterar e-mail</TabsTrigger>
-					<TabsTrigger value="changelog">Changelog</TabsTrigger>
-					<TabsTrigger value="deletar" className="text-destructive">
-						Deletar conta
-					</TabsTrigger>
-				</TabsList>
+				{/* No mobile: rolagem horizontal + seta indicando mais opções à direita */}
+				<div className="relative -mx-6 px-6 md:mx-0 md:px-0">
+					<div className="overflow-x-auto overflow-y-hidden scroll-smooth md:overflow-visible [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+						<TabsList className="inline-flex w-max flex-nowrap md:w-full">
+							<TabsTrigger value="preferencias">Preferências</TabsTrigger>
+							<TabsTrigger value="companion">Companion</TabsTrigger>
+							<TabsTrigger value="nome">Alterar nome</TabsTrigger>
+							<TabsTrigger value="senha">Alterar senha</TabsTrigger>
+							<TabsTrigger value="email">Alterar e-mail</TabsTrigger>
+							<TabsTrigger value="changelog">Changelog</TabsTrigger>
+							<TabsTrigger value="deletar" className="text-destructive">
+								Deletar conta
+							</TabsTrigger>
+						</TabsList>
+					</div>
+					<div
+						className="pointer-events-none absolute right-0 top-0 hidden h-9 w-10 items-center justify-end bg-gradient-to-l from-background to-transparent md:hidden"
+						aria-hidden
+					>
+						<RiArrowRightSLine className="size-5 shrink-0 text-muted-foreground" />
+					</div>
+				</div>
 
 				<TabsContent value="preferencias" className="mt-4">
 					<Card className="p-6">
@@ -61,6 +73,12 @@ export default async function Page() {
 								disableMagnetlines={
 									userPreferences?.disableMagnetlines ?? false
 								}
+								extratoNoteAsColumn={
+									userPreferences?.extratoNoteAsColumn ?? false
+								}
+								lancamentosColumnOrder={
+									userPreferences?.lancamentosColumnOrder ?? null
+								}
 								systemFont={userPreferences?.systemFont ?? "ai-sans"}
 								moneyFont={userPreferences?.moneyFont ?? "ai-sans"}
 							/>