added refresh button to habit list, fixed touch reordering

Author: roboslone

src/components/collection/context.tsx

@@ -3,6 +3,7 @@ import React from "react"
 
 interface S {
     collection: Collection
+    isFetching: boolean
 
     tags: string[]
     tagSet: Set<string>

src/components/collection/provider.tsx

@@ -9,7 +9,7 @@ import { CollectionContext } from "./context"
 
 export const CollectionProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
     const collection = useCollection()
-    const repoContent = useRepoContentContext()
+    const { repoContent } = useRepoContentContext()
 
     const habits = [...iterHabitNames(repoContent)]
 
@@ -23,6 +23,7 @@ export const CollectionProvider: React.FC<React.PropsWithChildren> = ({ children
             <CollectionContext.Provider
                 value={{
                     collection: collection.data,
+                    isFetching: collection.isFetching,
                     tags,
                     tagSet: new Set(tags),
                     habits: new Set(habits),

src/components/habit/card.tsx

@@ -65,7 +65,7 @@ export const HabitCard: React.FC = () => {
         <div
             {...extraProps}
             className={cn(
-                "habit-card rounded truncate w-full max-w-211 flex flex-col gap-1",
+                "habit-card rounded truncate w-full max-w-211 flex flex-col gap-1 touch-none",
                 {
                     "min-h-40": !displayOptions.hideChart,
                 },

src/components/habit/list.tsx

@@ -2,6 +2,7 @@ import { useCollectionContext } from "@/components/collection/context"
 import { HabitCard } from "@/components/habit/card"
 import { HabitFetcher } from "@/components/habit/fetcher"
 import { useOrderingContext } from "@/components/ordering/context"
+import { RefreshButton } from "@/components/refresh-button"
 import { TagContext } from "@/components/tag/context"
 import { TagList } from "@/components/tag/list"
 import { Button } from "@/components/ui/button"
@@ -55,7 +56,8 @@ export const HabitList: React.FC = () => {
                         </Link>
                     </>
                 ) : (
-                    <div className="flex justify-center">
+                    <div className="flex items-center justify-center gap-2">
+                        <RefreshButton />
                         <Button
                             variant="ghost"
                             className="w-fit"

src/components/refresh-button.tsx

@@ -0,0 +1,22 @@
+import { useRefresh } from "@/lib/queries"
+import { cn } from "@/lib/utils"
+import { RefreshCw } from "lucide-react"
+import type React from "react"
+
+import { useCollectionContext } from "./collection/context"
+import { useRepoContentContext } from "./repo/content-context"
+import { Button } from "./ui/button"
+
+export const RefreshButton: React.FC<React.ComponentProps<typeof Button>> = (props) => {
+    const { isFetching: repoIsFetching } = useRepoContentContext()
+    const { isFetching: collectionIsFetching } = useCollectionContext()
+    const refresh = useRefresh()
+    const loading = repoIsFetching || collectionIsFetching
+
+    return (
+        <Button variant="ghost" disabled={loading} onClick={() => void refresh()} {...props}>
+            <RefreshCw className={cn({ "animate-spin": loading })} />
+            Refresh
+        </Button>
+    )
+}

src/components/repo/content-context.tsx

@@ -1,7 +1,12 @@
 import type { RepoContent } from "@/lib/git"
 import React from "react"
 
-export const RepoContentContext = React.createContext<RepoContent | undefined>(undefined)
+interface S {
+    repoContent: RepoContent
+    isFetching: boolean
+}
+
+export const RepoContentContext = React.createContext<S | undefined>(undefined)
 
 export const useRepoContentContext = () => {
     const ctx = React.useContext(RepoContentContext)

src/components/repo/content-provider.tsx

@@ -1,25 +1,26 @@
 import { ErrorView } from "@/components/util/error-view"
 import { LoadingPage } from "@/components/util/loading-page"
-import { useRefresh, useRepoContent } from "@/lib/queries"
+import { useRepoContent } from "@/lib/queries"
 import React from "react"
 
 import { RepoContentContext } from "./content-context"
 
 export const RepoContentProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
     const content = useRepoContent()
-    const refresh = useRefresh()
 
     if (content.isLoading) {
         return <LoadingPage label="Loading repository..." />
     }
 
     if (content.data) {
         return (
-            <RepoContentContext.Provider value={content.data}>
+            <RepoContentContext.Provider
+                value={{ repoContent: content.data, isFetching: content.isFetching }}
+            >
                 {children}
             </RepoContentContext.Provider>
         )
     }
 
-    return <ErrorView error={content.error} retry={refresh} />
+    return <ErrorView error={content.error} retry={content.refetch} />
 }

src/lib/queries.ts

@@ -168,15 +168,15 @@ export const useRepoContent = () => {
 export const useCollection = () => {
     const account = useStoredAccountContext()
     const repo = useRepoContext()
-    const content = useRepoContentContext()
+    const { repoContent } = useRepoContentContext()
     const octokit = useOctokit()
 
     const [stored, setStored] = useStoredCollection()
 
     return useQuery({
         queryKey: ["repo", repo.id, "collection"],
         queryFn: async ({ signal }) => {
-            if (content.tree.length === 0) {
+            if (repoContent.tree.length === 0) {
                 return create(CollectionSchema, {})
             }