feat: implementa interesses do aluno e melhora responsividade dos menus

- Adiciona nova aba de Interesses nas configura����es do aluno

- Implementa sistema de notifica����es toast usando Radix UI

- Torna menus laterais responsivos e colaps��veis

- Adiciona colapso autom��tico dos menus ao clicar em um item

- Cria tabela interests no banco de dados com pol��ticas RLS

CHANGELOG.md

@@ -1,85 +1,23 @@
 # Changelog
 
-## [1.3.0] - 2024-03-21
+Todas as mudanças notáveis neste projeto serão documentadas neste arquivo.
+
+O formato é baseado em [Keep a Changelog](https://keepachangelog.com/pt-BR/1.0.0/),
+e este projeto adere ao [Semantic Versioning](https://semver.org/lang/pt-BR/).
+
+## [1.1.0] - 2024-03-19
 
 ### Adicionado
-- Implementada funcionalidade de deleção de histórias com confirmação
+- Nova aba "Interesses" nas configurações do aluno para capturar preferências
-- Adicionado modal de confirmação para exclusão
+- Sistema de notificações toast usando Radix UI
-- Integrado sistema de limpeza automática de recursos
+- Tabela `interests` no banco de dados para armazenar interesses dos alunos
-
-### Técnico
-- Implementada lógica de deleção em cascata para recursos relacionados
-- Criado fluxo otimizado para remoção de arquivos no storage
-- Adicionado tratamento de erros robusto para o processo de deleção
 
 ### Modificado
-- Melhorada interface de gerenciamento de histórias
+- Menu lateral do dashboard agora é responsivo e colapsável
-- Adicionado feedback visual durante processo de exclusão
+- Menu lateral do dashboard do aluno agora é responsivo e colapsável
-- Implementada navegação automática após deleção bem-sucedida
+- Menus laterais agora colapsam automaticamente ao clicar em um item
-
-## [1.2.0] - 2024-12-31
-
-### Adicionado
-
-- Implementado componente `WordHighlighter` para destacar palavras importantes durante a leitura
-- Adicionado modal de detalhes da palavra com significado, sílabas e exemplos
-- Integrado sistema de tracking de palavras difíceis por aluno
 
 ### Técnico
-
+- Implementação do hook `useToast` para gerenciamento de notificações
-- Criado sistema de teste para o componente `WordHighlighter`
+- Correção dos caminhos de importação para compatibilidade com Vite
-- Implementada integração com Jest/Vitest para testes de componentes
+- Adição de políticas de segurança RLS na tabela `interests`
-- Adicionado suporte a ARIA labels para acessibilidade
-- Configurado ambiente de teste com setup adequado
-
-### Modificado
-
-- Melhorada a experiência de leitura com destaque visual de palavras importantes
-- Implementado feedback visual para palavras difíceis e importantes
-- Adicionado suporte a interatividade nas palavras destacadas
-
-## [1.2.1] - 2024-03-21
-
-### Técnico
-- Corrigida ordem de deleção de histórias para evitar problemas de integridade
-- Otimizado processo de limpeza de arquivos no storage
-- Melhorado tratamento de erros na deleção de histórias
-
-### Modificado
-- Aprimorado fluxo de exclusão de histórias para garantir remoção completa de recursos
-- Adicionada confirmação visual durante processo de deleção
-
-## [1.4.0] - 2024-03-21
-
-### Adicionado
-- Implementado sistema de exercícios de alfabetização
-- Adicionados três tipos de exercícios: formação de palavras, completar frases e treino de pronúncia
-- Criada página dedicada para exercícios
-- Implementado tracking de progresso nos exercícios
-
-### Técnico
-- Criada nova rota para exercícios
-- Adicionada tabela exercise_progress
-- Implementada lógica de navegação entre exercícios
-
-## [Não Publicado]
-
-### Modificado
-- Melhorada a interface do exercício de Formação de Palavras
-  - Adicionada barra de progresso com animação
-  - Adicionado feedback visual para acertos e erros
-  - Adicionada lista de palavras encontradas
-  - Melhorada a interatividade dos botões de sílabas
-  - Adicionados estados visuais para feedback do usuário
-  - Melhorada a área de exibição da palavra atual
-  - Adicionado contador de progresso
-  - Melhorada a consistência visual com outros exercícios
-
-### Técnico
-- Refatorado componente WordFormation para melhor gerenciamento de estado
-- Adicionada validação para palavras repetidas
-- Implementado sistema de feedback temporário
-- Otimizadas transições e animações
-- Corrigidos erros de tipagem no ExercisePage
-  - Adicionadas interfaces para Story e StoryRecording
-  - Melhorada type safety no acesso aos dados

src/components/ui/toast.tsx

@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border border-gray-200 p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-white text-gray-900",
+        destructive:
+          "destructive group border-red-500 bg-red-500 text-white",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  console.log('Toast component props:', { className, variant, ...props })
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-gray-300 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-red-100 group-[.destructive]:hover:border-red-200 group-[.destructive]:hover:bg-red-100 group-[.destructive]:focus:ring-red-400",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-1 top-1 rounded-md p-1 text-gray-400 opacity-0 transition-opacity hover:text-gray-900 focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-100 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold text-gray-900", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm text-gray-600", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+} 

src/components/ui/toaster.tsx

@@ -0,0 +1,33 @@
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "./toast"
+import { useToast } from "../../hooks/useToast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider duration={3000}>
+      {toasts.map(function ({ id, title, description, action, open, ...props }) {
+        return (
+          <Toast key={id} {...props} open={open}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+} 

src/hooks/useToast.ts

@@ -0,0 +1,191 @@
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "../components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 3000 // 3 segundos
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast } 

src/main.tsx

@@ -3,6 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { router } from './routes';
+import { Toaster } from './components/ui/toaster';
 import './index.css';
 
 const queryClient = new QueryClient({
@@ -15,10 +16,15 @@ const queryClient = new QueryClient({
   },
 });
 
-createRoot(document.getElementById('root')!).render(
+function Root() {
-  <StrictMode>
+  return (
-    <QueryClientProvider client={queryClient}>
+    <StrictMode>
-      <RouterProvider router={router} />
+      <QueryClientProvider client={queryClient}>
-    </QueryClientProvider>
+        <RouterProvider router={router} />
-  </StrictMode>
+        <Toaster />
-);
+      </QueryClientProvider>
+    </StrictMode>
+  );
+}
+
+createRoot(document.getElementById('root')!).render(<Root />);

src/pages/dashboard/DashboardLayout.tsx

@@ -8,126 +8,205 @@ import {
   Settings,
   LogOut,
   School,
-  UserRound
+  UserRound,
+  Menu,
+  X,
+  ChevronLeft,
+  ChevronRight
 } from 'lucide-react';
 import { useAuth } from '../../hooks/useAuth';
+import * as Dialog from '@radix-ui/react-dialog';
 
 export function DashboardLayout() {
   const navigate = useNavigate();
   const { signOut } = useAuth();
+  const [isCollapsed, setIsCollapsed] = React.useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
 
   const handleLogout = async () => {
     await signOut();
     navigate('/');
   };
 
+  const handleNavigation = () => {
+    setIsMobileMenuOpen(false);
+  };
+
+  const NavItems = () => (
+    <nav className="p-4 space-y-1">
+      <NavLink
+        to="/dashboard"
+        end
+        onClick={handleNavigation}
+        className={({ isActive }) =>
+          `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
+            isActive
+              ? 'bg-purple-50 text-purple-700'
+              : 'text-gray-600 hover:bg-gray-50'
+          }`
+        }
+      >
+        <LayoutDashboard className="h-5 w-5" />
+        {!isCollapsed && <span>Visão Geral</span>}
+      </NavLink>
+
+      <NavLink
+        to="/dashboard/turmas"
+        onClick={handleNavigation}
+        className={({ isActive }) =>
+          `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
+            isActive
+              ? 'bg-purple-50 text-purple-700'
+              : 'text-gray-600 hover:bg-gray-50'
+          }`
+        }
+      >
+        <Users className="h-5 w-5" />
+        {!isCollapsed && <span>Turmas</span>}
+      </NavLink>
+
+      <NavLink
+        to="/dashboard/professores"
+        onClick={handleNavigation}
+        className={({ isActive }) =>
+          `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
+            isActive
+              ? 'bg-purple-50 text-purple-700'
+              : 'text-gray-600 hover:bg-gray-50'
+          }`
+        }
+      >
+        <GraduationCap className="h-5 w-5" />
+        {!isCollapsed && <span>Professores</span>}
+      </NavLink>
+
+      <NavLink
+        to="/dashboard/alunos"
+        onClick={handleNavigation}
+        className={({ isActive }) =>
+          `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
+            isActive
+              ? 'bg-purple-50 text-purple-700'
+              : 'text-gray-600 hover:bg-gray-50'
+          }`
+        }
+      >
+        <UserRound className="h-5 w-5" />
+        {!isCollapsed && <span>Alunos</span>}
+      </NavLink>
+
+      <NavLink
+        to="/dashboard/historias"
+        onClick={handleNavigation}
+        className={({ isActive }) =>
+          `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
+            isActive
+              ? 'bg-purple-50 text-purple-700'
+              : 'text-gray-600 hover:bg-gray-50'
+          }`
+        }
+      >
+        <BookOpen className="h-5 w-5" />
+        {!isCollapsed && <span>Histórias</span>}
+      </NavLink>
+
+      <NavLink
+        to="/dashboard/configuracoes"
+        onClick={handleNavigation}
+        className={({ isActive }) =>
+          `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
+            isActive
+              ? 'bg-purple-50 text-purple-700'
+              : 'text-gray-600 hover:bg-gray-50'
+          }`
+        }
+      >
+        <Settings className="h-5 w-5" />
+        {!isCollapsed && <span>Configurações</span>}
+      </NavLink>
+
+      <button
+        onClick={() => {
+          handleNavigation();
+          handleLogout();
+        }}
+        className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-50 w-full mt-4"
+      >
+        <LogOut className="h-5 w-5" />
+        {!isCollapsed && <span>Sair</span>}
+      </button>
+    </nav>
+  );
+
   return (
     <div className="min-h-screen bg-gray-50">
-      {/* Sidebar */}
+      {/* Mobile Menu Button */}
-      <aside className="fixed left-0 top-0 h-full w-64 bg-white border-r border-gray-200">
+      <button
+        onClick={() => setIsMobileMenuOpen(true)}
+        className="fixed top-4 left-4 p-2 bg-white rounded-lg shadow-sm border border-gray-200 lg:hidden z-50"
+      >
+        <Menu className="h-6 w-6 text-gray-600" />
+      </button>
+
+      {/* Desktop Sidebar */}
+      <aside
+        className={`fixed left-0 top-0 h-full bg-white border-r border-gray-200 transition-all duration-300 hidden lg:block ${
+          isCollapsed ? 'w-20' : 'w-64'
+        }`}
+      >
         <div className="flex items-center gap-2 p-6 border-b border-gray-200">
           <School className="h-8 w-8 text-purple-600" />
-          <span className="font-semibold text-gray-900">Histórias Mágicas</span>
+          {!isCollapsed && (
+            <span className="font-semibold text-gray-900">Histórias Mágicas</span>
+          )}
         </div>
 
-        <nav className="p-4 space-y-1">
+        <NavItems />
-          <NavLink
-            to="/dashboard"
-            end
-            className={({ isActive }) =>
-              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
-                isActive
-                  ? 'bg-purple-50 text-purple-700'
-                  : 'text-gray-600 hover:bg-gray-50'
-              }`
-            }
-          >
-            <LayoutDashboard className="h-5 w-5" />
-            Visão Geral
-          </NavLink>
 
-          <NavLink
+        {/* Collapse Button */}
-            to="/dashboard/turmas"
+        <button
-            className={({ isActive }) =>
+          onClick={() => setIsCollapsed(!isCollapsed)}
-              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
+          className="absolute bottom-4 -right-4 p-2 bg-white rounded-full shadow-sm border border-gray-200"
-                isActive
+        >
-                  ? 'bg-purple-50 text-purple-700'
+          {isCollapsed ? (
-                  : 'text-gray-600 hover:bg-gray-50'
+            <ChevronRight className="h-4 w-4 text-gray-600" />
-              }`
+          ) : (
-            }
+            <ChevronLeft className="h-4 w-4 text-gray-600" />
-          >
+          )}
-            <Users className="h-5 w-5" />
+        </button>
-            Turmas
-          </NavLink>
-
-          <NavLink
-            to="/dashboard/professores"
-            className={({ isActive }) =>
-              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
-                isActive
-                  ? 'bg-purple-50 text-purple-700'
-                  : 'text-gray-600 hover:bg-gray-50'
-              }`
-            }
-          >
-            <GraduationCap className="h-5 w-5" />
-            Professores
-          </NavLink>
-
-          <NavLink
-            to="/dashboard/alunos"
-            className={({ isActive }) =>
-              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
-                isActive
-                  ? 'bg-purple-50 text-purple-700'
-                  : 'text-gray-600 hover:bg-gray-50'
-              }`
-            }
-          >
-            <UserRound className="h-5 w-5" />
-            Alunos
-          </NavLink>
-
-          <NavLink
-            to="/dashboard/historias"
-            className={({ isActive }) =>
-              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
-                isActive
-                  ? 'bg-purple-50 text-purple-700'
-                  : 'text-gray-600 hover:bg-gray-50'
-              }`
-            }
-          >
-            <BookOpen className="h-5 w-5" />
-            Histórias
-          </NavLink>
-
-          <NavLink
-            to="/dashboard/configuracoes"
-            className={({ isActive }) =>
-              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
-                isActive
-                  ? 'bg-purple-50 text-purple-700'
-                  : 'text-gray-600 hover:bg-gray-50'
-              }`
-            }
-          >
-            <Settings className="h-5 w-5" />
-            Configurações
-          </NavLink>
-
-          <button
-            onClick={handleLogout}
-            className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-50 w-full"
-          >
-            <LogOut className="h-5 w-5" />
-            Sair
-          </button>
-        </nav>
       </aside>
 
+      {/* Mobile Menu Dialog */}
+      <Dialog.Root open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
+        <Dialog.Portal>
+          <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
+          <Dialog.Content className="fixed inset-y-0 left-0 w-64 bg-white shadow-xl z-50 lg:hidden">
+            <div className="flex items-center justify-between p-6 border-b border-gray-200">
+              <div className="flex items-center gap-2">
+                <School className="h-8 w-8 text-purple-600" />
+                <span className="font-semibold text-gray-900">
+                  Histórias Mágicas
+                </span>
+              </div>
+              <button
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="p-2 hover:bg-gray-100 rounded-lg"
+              >
+                <X className="h-5 w-5 text-gray-600" />
+              </button>
+            </div>
+
+            <NavItems />
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+
       {/* Main Content */}
-      <main className="ml-64 p-8">
+      <main
+        className={`transition-all duration-300 ${
+          isCollapsed ? 'lg:ml-20' : 'lg:ml-64'
+        } p-8`}
+      >
         <Outlet />
       </main>
     </div>

src/pages/student-dashboard/StudentDashboardLayout.tsx

@@ -7,134 +7,190 @@ import {
   LogOut,
   School,
   Trophy,
-  History
+  History,
+  Menu,
+  X,
+  ChevronLeft,
+  ChevronRight
 } from 'lucide-react';
 import { useAuth } from '../../hooks/useAuth';
+import * as Dialog from '@radix-ui/react-dialog';
 
 export function StudentDashboardLayout() {
   const navigate = useNavigate();
   const { signOut } = useAuth();
+  const [isCollapsed, setIsCollapsed] = React.useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
 
   const handleLogout = async () => {
     await signOut();
     navigate('/');
   };
 
+  const handleNavigation = () => {
+    setIsMobileMenuOpen(false);
+  };
+
+  const NavItems = () => (
+    <nav className="p-4 space-y-1">
+      <NavLink
+        to="/aluno"
+        end
+        onClick={handleNavigation}
+        className={({ isActive }) =>
+          `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
+            isActive
+              ? 'bg-purple-50 text-purple-700'
+              : 'text-gray-600 hover:bg-gray-50'
+          }`
+        }
+      >
+        <LayoutDashboard className="h-5 w-5" />
+        {!isCollapsed && <span>Início</span>}
+      </NavLink>
+
+      <NavLink
+        to="/aluno/historias"
+        onClick={handleNavigation}
+        className={({ isActive }) =>
+          `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
+            isActive
+              ? 'bg-purple-50 text-purple-700'
+              : 'text-gray-600 hover:bg-gray-50'
+          }`
+        }
+      >
+        <BookOpen className="h-5 w-5" />
+        {!isCollapsed && <span>Minhas Histórias</span>}
+      </NavLink>
+
+      <NavLink
+        to="/aluno/conquistas"
+        onClick={handleNavigation}
+        className={({ isActive }) =>
+          `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
+            isActive
+              ? 'bg-purple-50 text-purple-700'
+              : 'text-gray-600 hover:bg-gray-50'
+          }`
+        }
+      >
+        <Trophy className="h-5 w-5" />
+        {!isCollapsed && <span>Conquistas</span>}
+      </NavLink>
+
+      <NavLink
+        to="/aluno/historico"
+        onClick={handleNavigation}
+        className={({ isActive }) =>
+          `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
+            isActive
+              ? 'bg-purple-50 text-purple-700'
+              : 'text-gray-600 hover:bg-gray-50'
+          }`
+        }
+      >
+        <History className="h-5 w-5" />
+        {!isCollapsed && <span>Histórico</span>}
+      </NavLink>
+
+      <NavLink
+        to="/aluno/configuracoes"
+        onClick={handleNavigation}
+        className={({ isActive }) =>
+          `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
+            isActive
+              ? 'bg-purple-50 text-purple-600'
+              : 'text-gray-600 hover:bg-gray-50'
+          }`
+        }
+      >
+        <Settings className="h-5 w-5" />
+        {!isCollapsed && <span>Configurações</span>}
+      </NavLink>
+
+      <button
+        onClick={() => {
+          handleNavigation();
+          handleLogout();
+        }}
+        className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-50 w-full mt-4"
+      >
+        <LogOut className="h-5 w-5" />
+        {!isCollapsed && <span>Sair</span>}
+      </button>
+    </nav>
+  );
+
   return (
     <div className="min-h-screen bg-gray-50">
-      {/* Sidebar */}
+      {/* Mobile Menu Button */}
-      <aside className="fixed left-0 top-0 h-full w-64 bg-white border-r border-gray-200">
+      <button
+        onClick={() => setIsMobileMenuOpen(true)}
+        className="fixed top-4 left-4 p-2 bg-white rounded-lg shadow-sm border border-gray-200 lg:hidden z-50"
+      >
+        <Menu className="h-6 w-6 text-gray-600" />
+      </button>
+
+      {/* Desktop Sidebar */}
+      <aside
+        className={`fixed left-0 top-0 h-full bg-white border-r border-gray-200 transition-all duration-300 hidden lg:block ${
+          isCollapsed ? 'w-20' : 'w-64'
+        }`}
+      >
         <div className="flex items-center gap-2 p-6 border-b border-gray-200">
           <School className="h-8 w-8 text-purple-600" />
-          <span className="font-semibold text-gray-900">Histórias Mágicas</span>
+          {!isCollapsed && (
+            <span className="font-semibold text-gray-900">Histórias Mágicas</span>
+          )}
         </div>
 
-        <nav className="p-4 space-y-1">
+        <NavItems />
-          <NavLink
-            to="/aluno"
-            end
-            className={({ isActive }) =>
-              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
-                isActive
-                  ? 'bg-purple-50 text-purple-700'
-                  : 'text-gray-600 hover:bg-gray-50'
-              }`
-            }
-          >
-            <LayoutDashboard className="h-5 w-5" />
-            Início
-          </NavLink>
 
-          <NavLink
+        {/* Collapse Button */}
-            to="/aluno/historias"
+        <button
-            className={({ isActive }) =>
+          onClick={() => setIsCollapsed(!isCollapsed)}
-              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
+          className="absolute bottom-4 -right-4 p-2 bg-white rounded-full shadow-sm border border-gray-200"
-                isActive
+        >
-                  ? 'bg-purple-50 text-purple-700'
+          {isCollapsed ? (
-                  : 'text-gray-600 hover:bg-gray-50'
+            <ChevronRight className="h-4 w-4 text-gray-600" />
-              }`
+          ) : (
-            }
+            <ChevronLeft className="h-4 w-4 text-gray-600" />
-          >
+          )}
-            <BookOpen className="h-5 w-5" />
+        </button>
-            Minhas Histórias
-          </NavLink>
-
-          <NavLink
-            to="/aluno/conquistas"
-            className={({ isActive }) =>
-              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
-                isActive
-                  ? 'bg-purple-50 text-purple-700'
-                  : 'text-gray-600 hover:bg-gray-50'
-              }`
-            }
-          >
-            <Trophy className="h-5 w-5" />
-            Conquistas
-          </NavLink>
-
-          <NavLink
-            to="/aluno/historico"
-            className={({ isActive }) =>
-              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
-                isActive
-                  ? 'bg-purple-50 text-purple-700'
-                  : 'text-gray-600 hover:bg-gray-50'
-              }`
-            }
-          >
-            <History className="h-5 w-5" />
-            Histórico
-          </NavLink>
-
-          <NavLink
-            to="/aluno/configuracoes"
-            className={({ isActive }) =>
-              `flex items-center gap-2 px-4 py-2 rounded-lg text-sm ${
-                isActive
-                  ? 'bg-purple-50 text-purple-600'
-                  : 'text-gray-600 hover:bg-gray-50'
-              }`
-            }
-          >
-            <Settings className="h-5 w-5" />
-            Configurações
-          </NavLink>
-
-          <button
-            onClick={handleLogout}
-            className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm text-gray-600 hover:bg-gray-50 w-full mt-4"
-          >
-            <LogOut className="h-5 w-5" />
-            Sair
-          </button>
-        </nav>
-
-        {/* Footer com informações do aluno */}
-        <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-200">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
-              <span className="text-sm font-medium text-purple-600">
-                {/* Primeira letra do nome do aluno */}
-                A
-              </span>
-            </div>
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-gray-900 truncate">
-                {/* Nome do aluno */}
-                Aluno da Silva
-              </p>
-              <p className="text-xs text-gray-500 truncate">
-                {/* Turma do aluno */}
-                5º Ano A
-              </p>
-            </div>
-          </div>
-        </div>
       </aside>
 
+      {/* Mobile Menu Dialog */}
+      <Dialog.Root open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
+        <Dialog.Portal>
+          <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
+          <Dialog.Content className="fixed inset-y-0 left-0 w-64 bg-white shadow-xl z-50 lg:hidden">
+            <div className="flex items-center justify-between p-6 border-b border-gray-200">
+              <div className="flex items-center gap-2">
+                <School className="h-8 w-8 text-purple-600" />
+                <span className="font-semibold text-gray-900">
+                  Histórias Mágicas
+                </span>
+              </div>
+              <button
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="p-2 hover:bg-gray-100 rounded-lg"
+              >
+                <X className="h-5 w-5 text-gray-600" />
+              </button>
+            </div>
+
+            <NavItems />
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+
       {/* Main Content */}
-      <main className="ml-64 p-8">
+      <main
+        className={`transition-all duration-300 ${
+          isCollapsed ? 'lg:ml-20' : 'lg:ml-64'
+        } p-8`}
+      >
         <Outlet />
       </main>
     </div>

src/pages/student-dashboard/StudentSettingsPage.tsx

@@ -3,8 +3,246 @@ import { Input } from '../../components/ui/input';
 import { DatePicker } from '../../components/ui/date-picker';
 import { Select } from '../../components/ui/select';
 import { AvatarUpload } from '../../components/ui/avatar-upload';
+import React from 'react';
+import { Heart, Gamepad2, Dog, Map, Pizza, School as SchoolIcon, Tv, Music, Palette, Trophy, Loader2 } from 'lucide-react';
+import { supabase } from '../../lib/supabase';
+import { useToast } from '../../hooks/useToast';
+
+interface InterestState {
+  category: string;
+  items: string[];
+}
 
 export function StudentSettingsPage() {
+  const { toast } = useToast();
+  const [interests, setInterests] = React.useState<InterestState[]>([
+    { category: 'pets', items: [] },
+    { category: 'entertainment', items: [] },
+    { category: 'hobbies', items: [] },
+    { category: 'places', items: [] },
+    { category: 'food', items: [] },
+    { category: 'school', items: [] },
+    { category: 'shows', items: [] },
+    { category: 'music', items: [] },
+    { category: 'art', items: [] },
+    { category: 'dreams', items: [] }
+  ]);
+  const [loading, setLoading] = React.useState(false);
+  const [saving, setSaving] = React.useState(false);
+
+  React.useEffect(() => {
+    const loadInterests = async () => {
+      try {
+        setLoading(true);
+        const { data: { session } } = await supabase.auth.getSession();
+        if (!session?.user?.id) return;
+
+        const { data, error } = await supabase
+          .from('interests')
+          .select('*')
+          .eq('student_id', session.user.id);
+
+        if (error) throw error;
+
+        if (data) {
+          // Agrupa os interesses por categoria
+          const groupedInterests = data.reduce((acc, interest) => {
+            const category = interest.category;
+            if (!acc[category]) {
+              acc[category] = [];
+            }
+            if (interest.item) {
+              acc[category].push(interest.item);
+            }
+            return acc;
+          }, {} as Record<string, string[]>);
+
+          // Atualiza o estado com os interesses agrupados
+          const loadedInterests = interests.map(interest => ({
+            ...interest,
+            items: groupedInterests[interest.category] || []
+          }));
+          setInterests(loadedInterests);
+        }
+      } catch (error) {
+        console.error('Erro ao carregar interesses:', error);
+        toast({
+          title: 'Erro',
+          description: 'Não foi possível carregar seus interesses',
+          variant: 'destructive'
+        });
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadInterests();
+  }, []);
+
+  const handleInterestChange = async (category: string, value: string) => {
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session?.user?.id) {
+        toast({
+          title: 'Erro',
+          description: 'Você precisa estar logado para adicionar interesses',
+          variant: 'destructive'
+        });
+        return;
+      }
+
+      // Adiciona o novo interesse no banco de dados
+      const { error } = await supabase
+        .from('interests')
+        .insert({
+          student_id: session.user.id,
+          category: category,
+          item: value,
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString()
+        });
+
+      if (error) throw error;
+
+      // Atualiza o estado local
+      setInterests(prev => 
+        prev.map(interest => 
+          interest.category === category
+            ? { ...interest, items: [...interest.items, value] }
+            : interest
+        )
+      );
+
+      toast({
+        title: 'Sucesso',
+        description: 'Interesse adicionado com sucesso',
+      });
+    } catch (error) {
+      console.error('Erro ao adicionar interesse:', error);
+      toast({
+        title: 'Erro',
+        description: 'Não foi possível adicionar o interesse',
+        variant: 'destructive'
+      });
+    }
+  };
+
+  const handleRemoveInterest = async (category: string, item: string) => {
+    try {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session?.user?.id) {
+        toast({
+          title: 'Erro',
+          description: 'Você precisa estar logado para remover interesses',
+          variant: 'destructive'
+        });
+        return;
+      }
+
+      // Remove o interesse do banco de dados
+      const { error } = await supabase
+        .from('interests')
+        .delete()
+        .match({
+          student_id: session.user.id,
+          category: category,
+          item: item
+        });
+
+      if (error) throw error;
+
+      // Atualiza o estado local
+      setInterests(prev => 
+        prev.map(interest =>
+          interest.category === category
+            ? { ...interest, items: interest.items.filter(i => i !== item) }
+            : interest
+        )
+      );
+
+      toast({
+        title: 'Sucesso',
+        description: 'Interesse removido com sucesso',
+      });
+    } catch (error) {
+      console.error('Erro ao remover interesse:', error);
+      toast({
+        title: 'Erro',
+        description: 'Não foi possível remover o interesse',
+        variant: 'destructive'
+      });
+    }
+  };
+
+  const InterestInput = ({ category, icon, placeholder }: { category: string; icon: React.ReactNode; placeholder: string }) => {
+    const [inputValue, setInputValue] = React.useState('');
+    const [isAdding, setIsAdding] = React.useState(false);
+
+    const handleAdd = async () => {
+      const value = inputValue.trim();
+      if (value && !isAdding) {
+        setIsAdding(true);
+        await handleInterestChange(category, value);
+        setInputValue('');
+        setIsAdding(false);
+      }
+    };
+
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center gap-2 text-sm font-medium text-gray-700">
+          {icon}
+          <span className="capitalize">{category}</span>
+        </div>
+        <div className="space-y-2">
+          <div className="flex gap-2">
+            <Input
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder={placeholder}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  handleAdd();
+                }
+              }}
+            />
+            <button
+              onClick={handleAdd}
+              disabled={!inputValue.trim() || isAdding}
+              className="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+            >
+              {isAdding ? (
+                <>
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  Adicionando...
+                </>
+              ) : (
+                'Adicionar'
+              )}
+            </button>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {interests.find(i => i.category === category)?.items.map((item) => (
+              <span
+                key={item}
+                className="inline-flex items-center gap-1 px-2 py-1 bg-purple-50 text-purple-700 rounded-full text-sm"
+              >
+                {item}
+                <button
+                  onClick={() => handleRemoveInterest(category, item)}
+                  className="hover:text-purple-900"
+                >
+                  ×
+                </button>
+              </span>
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div className="max-w-4xl mx-auto">
       <h1 className="text-2xl font-bold text-gray-900 mb-6">
@@ -14,6 +252,7 @@ export function StudentSettingsPage() {
       <Tabs defaultValue="personal">
         <TabsList>
           <TabsTrigger value="personal">Informações Pessoais</TabsTrigger>
+          <TabsTrigger value="interests">Interesses</TabsTrigger>
           <TabsTrigger value="preferences">Preferências</TabsTrigger>
           <TabsTrigger value="accessibility">Acessibilidade</TabsTrigger>
           <TabsTrigger value="notifications">Notificações</TabsTrigger>
@@ -60,6 +299,83 @@ export function StudentSettingsPage() {
             </div>
           </div>
         </TabsContent>
+
+        <TabsContent value="interests">
+          <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+            {loading ? (
+              <div className="flex items-center justify-center py-8">
+                <Loader2 className="h-8 w-8 text-purple-600 animate-spin" />
+              </div>
+            ) : (
+              <div className="space-y-8">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                  <InterestInput
+                    category="pets"
+                    icon={<Dog className="h-5 w-5 text-purple-600" />}
+                    placeholder="Adicione seus pets ou animais favoritos..."
+                  />
+                  <InterestInput
+                    category="entertainment"
+                    icon={<Gamepad2 className="h-5 w-5 text-purple-600" />}
+                    placeholder="Adicione seus jogos e diversões favoritos..."
+                  />
+                  <InterestInput
+                    category="hobbies"
+                    icon={<Heart className="h-5 w-5 text-purple-600" />}
+                    placeholder="Adicione seus hobbies e atividades..."
+                  />
+                  <InterestInput
+                    category="places"
+                    icon={<Map className="h-5 w-5 text-purple-600" />}
+                    placeholder="Adicione lugares que você gosta..."
+                  />
+                  <InterestInput
+                    category="food"
+                    icon={<Pizza className="h-5 w-5 text-purple-600" />}
+                    placeholder="Adicione suas comidas favoritas..."
+                  />
+                  <InterestInput
+                    category="school"
+                    icon={<SchoolIcon className="h-5 w-5 text-purple-600" />}
+                    placeholder="Adicione suas matérias favoritas..."
+                  />
+                  <InterestInput
+                    category="shows"
+                    icon={<Tv className="h-5 w-5 text-purple-600" />}
+                    placeholder="Adicione seus programas e séries favoritos..."
+                  />
+                  <InterestInput
+                    category="music"
+                    icon={<Music className="h-5 w-5 text-purple-600" />}
+                    placeholder="Adicione suas músicas e artistas favoritos..."
+                  />
+                  <InterestInput
+                    category="art"
+                    icon={<Palette className="h-5 w-5 text-purple-600" />}
+                    placeholder="Adicione suas artes e criações favoritas..."
+                  />
+                  <InterestInput
+                    category="dreams"
+                    icon={<Trophy className="h-5 w-5 text-purple-600" />}
+                    placeholder="Adicione seus sonhos e conquistas..."
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </TabsContent>
+
+        <TabsContent value="preferences">
+          {/* Conteúdo da tab de preferências */}
+        </TabsContent>
+
+        <TabsContent value="accessibility">
+          {/* Conteúdo da tab de acessibilidade */}
+        </TabsContent>
+
+        <TabsContent value="notifications">
+          {/* Conteúdo da tab de notificações */}
+        </TabsContent>
       </Tabs>
     </div>
   );

src/types/database.ts

@@ -148,3 +148,88 @@ export interface StoryRecording {
   created_at: string;
   processed_at: string | null;
 }
+
+export interface Interest {
+  id: string;
+  student_id: string;
+  category: string;
+  items: string[];
+  created_at: string;
+  updated_at: string;
+}
+
+export interface Student {
+  id: string;
+  name: string;
+  email: string;
+  avatar_url?: string;
+  class_id: string;
+  school_id: string;
+  status: 'active' | 'inactive';
+  created_at: string;
+  updated_at: string;
+  interests?: Interest[];
+  class?: {
+    id: string;
+    name: string;
+    grade: string;
+  };
+  school?: {
+    id: string;
+    name: string;
+  };
+}
+
+export interface Story {
+  id: string;
+  title: string;
+  content: string;
+  student_id: string;
+  status: 'draft' | 'published';
+  created_at: string;
+  updated_at: string;
+  cover?: {
+    id: string;
+    image_url: string;
+  };
+  students?: {
+    name: string;
+  };
+}
+
+export interface Class {
+  id: string;
+  name: string;
+  grade: string;
+  school_id: string;
+  created_at: string;
+  updated_at: string;
+  students?: {
+    count: number;
+  };
+}
+
+export interface School {
+  id: string;
+  name: string;
+  email: string;
+  phone?: string;
+  address?: string;
+  city?: string;
+  state?: string;
+  zip_code?: string;
+  director_name?: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface SchoolSettings {
+  name: string;
+  email: string;
+  phone: string;
+  address: string;
+  city: string;
+  state: string;
+  zipCode: string;
+  directorName: string;
+} 

supabase/migrations/20240111_create_interests.sql

@@ -0,0 +1,51 @@
+-- Create the interests table
+CREATE TABLE IF NOT EXISTS interests (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  student_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  category TEXT NOT NULL,
+  item TEXT NOT NULL,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL,
+  UNIQUE(student_id, category, item)
+);
+
+-- Enable Row Level Security
+ALTER TABLE interests ENABLE ROW LEVEL SECURITY;
+
+-- Create policies
+CREATE POLICY "Students can view their own interests"
+  ON interests FOR SELECT
+  USING (auth.uid() = student_id);
+
+CREATE POLICY "Students can insert their own interests"
+  ON interests FOR INSERT
+  WITH CHECK (auth.uid() = student_id);
+
+CREATE POLICY "Students can update their own interests"
+  ON interests FOR UPDATE
+  USING (auth.uid() = student_id)
+  WITH CHECK (auth.uid() = student_id);
+
+CREATE POLICY "Students can delete their own interests"
+  ON interests FOR DELETE
+  USING (auth.uid() = student_id);
+
+-- Create indexes
+CREATE INDEX interests_student_id_idx ON interests(student_id);
+CREATE INDEX interests_category_idx ON interests(category);
+CREATE INDEX interests_item_idx ON interests(item);
+
+-- Create function to automatically update updated_at
+CREATE OR REPLACE FUNCTION update_updated_at_column()
+RETURNS TRIGGER AS $$
+BEGIN
+  NEW.updated_at = timezone('utc'::text, now());
+  RETURN NEW;
+END;
+$$ language 'plpgsql';
+
+-- Create trigger to automatically update updated_at
+CREATE TRIGGER update_interests_updated_at
+  BEFORE UPDATE ON interests
+  FOR EACH ROW
+  EXECUTE FUNCTION update_updated_at_column();