92:I[903690,["/chat-static/_next/static/immutable/chunks/19x10s5ceog9a.js","/chat-static/_next/static/immutable/chunks/12f-nm5otxtlb.js","/chat-static/_next/static/immutable/chunks/3iq-dyxnzhw6x.js","/chat-static/_next/static/immutable/chunks/1zebkw4t37hrt.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/1ihyvxny9u4w4.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3tvsw776zkqg9.js","/chat-static/_next/static/immutable/chunks/1e-qtuskm58ha.js","/chat-static/_next/static/immutable/chunks/0x4091fp9uqg3.js","/chat-static/_next/static/immutable/chunks/1e5k5x1kcenwe.js","/chat-static/_next/static/immutable/chunks/3hnrzurk988jk.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1-qk02sdtfqkn.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/2_9d7galk0wiq.js","/chat-static/_next/static/immutable/chunks/0lys-rd0h1ssv.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1vea1ewevhe85.js","/chat-static/_next/static/immutable/chunks/3ucy-zmd9da95.js","/chat-static/_next/static/immutable/chunks/3a3e1uof0x3hs.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/2fjkv44_ofoly.js","/chat-static/_next/static/immutable/chunks/40d8rjwe4x81w.js","/chat-static/_next/static/immutable/chunks/1nma-60foff1_.js","/chat-static/_next/static/immutable/chunks/14jzqba1i3vth.js"],"ExplicitChatIdProvider"] 93:I[838238,["/chat-static/_next/static/immutable/chunks/19x10s5ceog9a.js","/chat-static/_next/static/immutable/chunks/12f-nm5otxtlb.js","/chat-static/_next/static/immutable/chunks/3iq-dyxnzhw6x.js","/chat-static/_next/static/immutable/chunks/1zebkw4t37hrt.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/1ihyvxny9u4w4.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/41hpffipu4cd5.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2_3cf1lh0ov9g.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/3tvsw776zkqg9.js","/chat-static/_next/static/immutable/chunks/1e-qtuskm58ha.js","/chat-static/_next/static/immutable/chunks/0x4091fp9uqg3.js","/chat-static/_next/static/immutable/chunks/1e5k5x1kcenwe.js","/chat-static/_next/static/immutable/chunks/3hnrzurk988jk.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/1-qk02sdtfqkn.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/2_9d7galk0wiq.js","/chat-static/_next/static/immutable/chunks/0lys-rd0h1ssv.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1vea1ewevhe85.js","/chat-static/_next/static/immutable/chunks/3ucy-zmd9da95.js","/chat-static/_next/static/immutable/chunks/3a3e1uof0x3hs.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/2fjkv44_ofoly.js","/chat-static/_next/static/immutable/chunks/40d8rjwe4x81w.js","/chat-static/_next/static/immutable/chunks/1nma-60foff1_.js","/chat-static/_next/static/immutable/chunks/14jzqba1i3vth.js"],"SWRDataProvider"] 94:T3908,[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!) }} >

)}

))} )} )}

) } 88:["$","$L92",null,{"chatId":"RaQOlWt5mbG","children":["$","$L93",null,{"data":{"@\"active-block\",\"RaQOlWt5mbG\",":{"id":"b_ZP3wgZNm9lu","messageId":"cUwNyS3WlqnANYq09FTG1952a6ekbdJ4","source":"$94","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"linear-tasks","type":"code-project","project":"linear-tasks"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"RaQOlWt5mbG\",":false},"children":"$L95"}]}]

About

Tags

Share

About

Tags

Share

More from ctate

More Templates Like This