[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import "./globals.css" import { Geist } from "next/font/google" const geist = Geist({ subsets: ["latin"] }) export const metadata = { title: "Linear Tasks", description: "A minimal list of my top Linear tasks", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; :root { color-scheme: dark; } body { @apply bg-black text-white; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" import { TaskList } from "../components/task-list" export default function Page() { return } [V0_FILE]typescriptreact:file="components/demo-mode-toggle.tsx" isMerged="true" interface DemoModeToggleProps { isDemoMode: boolean toggleDemoMode: () => void } export function DemoModeToggle({ isDemoMode, toggleDemoMode }: DemoModeToggleProps) { return (

Demo Mode

) } [V0_FILE]typescriptreact:file="components/missing-token-message.tsx" isMerged="true" export function MissingTokenMessage() { return (

Missing Token

Please add the LINEAR_API_TOKEN environment variable to your v0 project to see your minimal Linear task list

) } [V0_FILE]typescriptreact:file="components/powered-by-linear.tsx" isMerged="true" import Image from "next/image" export function PoweredByLinear() { return (

) } [V0_FILE]typescript:file="constants/demoTasks.ts" isMerged="true" export interface Task { id: string title: string team?: { name: string } completed?: boolean url?: string } export const demoTasks: Task[] = [ { id: "1", title: "Implement new feature", url: "https://linear.app/demo/issue/DEMO-1" }, { id: "2", title: "Fix critical bug", url: "https://linear.app/demo/issue/DEMO-2" }, { id: "3", title: "Update documentation", url: "https://linear.app/demo/issue/DEMO-3" }, { id: "4", title: "Prepare for team meeting", url: "https://linear.app/demo/issue/DEMO-4" }, { id: "5", title: "Review pull requests", url: "https://linear.app/demo/issue/DEMO-5" }, ] [V0_FILE]typescript:file="lib/linear.ts" isEdit="true" isMerged="true" import { LinearClient } from "@linear/sdk" import type { Task } from "../constants/demoTasks" export async function getLinearTasks(): Promise { const client = new LinearClient({ apiKey: process.env.LINEAR_API_TOKEN, }) const me = await client.viewer const issues = await me.assignedIssues({ filter: { state: { type: { in: ["started", "unstarted"] } }, }, }) const sortedIssues = issues.nodes.sort((a, b) => { const priorityOrder = { urgent: 0, high: 1, medium: 2, low: 3, "": 4 } return (priorityOrder[a.priority ?? ""] ?? 5) - (priorityOrder[b.priority ?? ""] ?? 5) }) return sortedIssues.slice(0, 5).map((issue) => ({ id: issue.id, title: issue.title, team: { name: issue.team.name }, completed: false, url: issue.url, })) } export async function updateLinearTaskStatus(taskId: string): Promise<{ completed: boolean }> { const client = new LinearClient({ apiKey: process.env.LINEAR_API_TOKEN, }) const issue = await client.issue(taskId) const team = await issue.team const states = await team.states() const isDoneState = Boolean(issue.completedAt) const newState = states.nodes.find((state) => isDoneState ? ["backlog", "unstarted", "started"].includes(state.type) : state.type === "completed", ) if (!newState) { throw new Error(`Could not find appropriate state to move to`) } await issue.update({ stateId: newState.id }) return { completed: newState.type === "completed" } } [V0_FILE]typescriptreact:file="components/task-list.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { ExternalLink } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { DemoModeToggle } from "../components/demo-mode-toggle" import { MissingTokenMessage } from "../components/missing-token-message" import { PoweredByLinear } from "../components/powered-by-linear" import { type Task, demoTasks } from "../constants/demoTasks" import { getLinearTasks, updateLinearTaskStatus } from "../lib/linear" function SkeletonLoader() { return (

) } export function TaskList() { const [tasks, setTasks] = useState([]) const [isDemoMode, setIsDemoMode] = useState(true) const [isLoading, setIsLoading] = useState(true) const [error, setError] = useState(null) const [updatingTaskId, setUpdatingTaskId] = useState(null) useEffect(() => { const initializeApp = async () => { const hasLinearToken = !!process.env.LINEAR_API_TOKEN setIsDemoMode(!hasLinearToken) await fetchTasks(!hasLinearToken) } initializeApp() }, []) const fetchTasks = async (isDemo: boolean) => { setIsLoading(true) setError(null) if (isDemo) { // Artificial delay for demo mode await new Promise((resolve) => setTimeout(resolve, 1000)) setTasks(demoTasks) } else { if (!process.env.LINEAR_API_TOKEN) { setError("Missing Token") setTasks([]) } else { try { const linearTasks = await getLinearTasks() setTasks(linearTasks) } catch (error) { console.error("Failed to fetch Linear tasks:", error) setError("Failed to fetch tasks. Please try again.") setTasks([]) } } } setIsLoading(false) } const toggleDemoMode = () => { const newDemoMode = !isDemoMode setIsDemoMode(newDemoMode) fetchTasks(newDemoMode) } const toggleTaskCompletion = async (taskId: string) => { setUpdatingTaskId(taskId) if (isDemoMode) { setTasks((prevTasks) => prevTasks .map((task) => (task.id === taskId ? { ...task, completed: !task.completed } : task)) .sort((a, b) => (a.completed === b.completed ? 0 : a.completed ? 1 : -1)), ) setTimeout(() => setUpdatingTaskId(null), 500) } else { try { const { completed } = await updateLinearTaskStatus(taskId) setTasks((prevTasks) => prevTasks .map((task) => (task.id === taskId ? { ...task, completed } : task)) .sort((a, b) => (a.completed === b.completed ? 0 : a.completed ? 1 : -1)), ) } catch (error) { console.error("Failed to update task status:", error) setError("Failed to update task status. Please try again.") } finally { setUpdatingTaskId(null) } } } const openTaskInNewWindow = (url: string) => { window.open(url, "_blank", "noopener,noreferrer") } return (

{error === "Missing Token" ? ( ) : ( <>

Due Today

{isLoading ? ( ) : error ? (

{error}

) : ( {tasks.map((task) => ( toggleTaskCompletion(task.id)} >

{task.title} {!isDemoMode && task.team && ( {task.team.name} )}

{task.url && (

{ e.stopPropagation() openTaskInNewWindow(task.url!) }} >

)}

))} )} )}

) }

About

Tags

Share

More from ctate

More Templates Like This

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This