quietlight/skraak.app - Change M4UG5FMI5ICQRLJCCNSLV3ZKCGIXDQ65ECJM4PBE3NZYHT3CJLDAC

Replaced nav buttons with breadcrumbs

Created by AEj8dahVWy718uSSFPe9VSRJ5qX5G8pC2zvFzJJ8yzBd on April 21, 2025

M4UG5FMI5ICQRLJCCNSLV3ZKCGIXDQ65ECJM4PBE3NZYHT3CJLDAC

Dependencies

In channels

main

Change contents

File addition: breadcrumb.tsx (----------)

[3.481]

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { ChevronRight, MoreHorizontal } from "lucide-react"
import { cn } from "@/lib/utils"
const Breadcrumb = React.forwardRef<
  HTMLElement,
  React.HTMLAttributes<HTMLElement>
>(({ className, ...props }, ref) => (
  <nav
    ref={ref}
    aria-label="breadcrumb"
    className={cn(
      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground",
      className
    )}
    {...props}
  />
))
Breadcrumb.displayName = "Breadcrumb"
const BreadcrumbList = React.forwardRef<
  HTMLOListElement,
  React.OlHTMLAttributes<HTMLOListElement>
>(({ className, ...props }, ref) => (
  <ol
    ref={ref}
    className={cn(
      "flex flex-wrap items-center gap-1.5 break-words",
      className
    )}
    {...props}
  />
))
BreadcrumbList.displayName = "BreadcrumbList"
const BreadcrumbItem = React.forwardRef<
  HTMLLIElement,
  React.LiHTMLAttributes<HTMLLIElement>
>(({ className, ...props }, ref) => (
  <li
    ref={ref}
    className={cn("inline-flex items-center gap-1.5", className)}
    {...props}
  />
))
BreadcrumbItem.displayName = "BreadcrumbItem"
const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  React.AnchorHTMLAttributes<HTMLAnchorElement> & {
    asChild?: boolean
  }
>(({ asChild, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a"
  return (
    <Comp
      ref={ref}
      className={cn("hover:text-foreground transition-colors", className)}
      {...props}
    />
  )
})
BreadcrumbLink.displayName = "BreadcrumbLink"
const BreadcrumbPage = React.forwardRef<
  HTMLSpanElement,
  React.HTMLAttributes<HTMLSpanElement>
>(({ className, ...props }, ref) => (
  <span
    ref={ref}
    role="link"
    aria-current="page"
    aria-disabled="true"
    className={cn("font-normal text-foreground", className)}
    {...props}
  />
))
BreadcrumbPage.displayName = "BreadcrumbPage"
const BreadcrumbSeparator = ({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) => (
  <li
    role="presentation"
    aria-hidden="true"
    className={cn("[&>svg]:size-3.5", className)}
    {...props}
  >
    {children || <ChevronRight className="size-3" />}
  </li>
)
BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
const BreadcrumbEllipsis = ({
  className,
  ...props
}: React.ComponentProps<"span">) => (
  <span
    role="presentation"
    aria-hidden="true"
    className={cn("flex h-9 w-9 items-center justify-center", className)}
    {...props}
  >
    <MoreHorizontal className="h-4 w-4" />
    <span className="sr-only">More</span>
  </span>
)
BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis"
export {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
}

Insertion in src/components/Locations.tsx at line 35 [5.1]
[4.7113]
[5.680]
```
  hideDatasetName?: boolean;
```

Replacement in src/components/Locations.tsx at line 38 [5.1]

B:BD[5.683] → [4.7114:7197]

const Locations: React.FC<LocationsProps> = ({ datasetId, onLocationSelect }) => {

[5.683]

[5.748]

const Locations: React.FC<LocationsProps> = ({ datasetId, onLocationSelect, hideDatasetName = false }) => {

Replacement in src/components/Locations.tsx at line 118 [5.1]

B:BD[5.3219] → [2.26:132]

      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-bold">

[5.3219]

[2.132]

      {!hideDatasetName && (
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-bold">
            Locations
          </h2>
          {datasetName && (
            <div className="text-gray-600 text-sm flex items-center">
              {datasetName}
            </div>
          )}
        </div>
      )}
      {hideDatasetName && (
        <h2 className="text-xl font-bold mb-4">

Replacement in src/components/Locations.tsx at line 134 [5.1]

B:BD[2.166] → [2.166:327]

        {datasetName && (
          <div className="text-gray-600 text-sm flex items-center">
            {datasetName}
          </div>
        )}
      </div>

[2.166]

[5.3493]

)}

Replacement in src/components/Clusters.tsx at line 34 [4.1]
B:BD[4.766] → [4.766:789]
```
  datasetName: string;
```
[4.766]
[4.789]
```
  datasetName?: string;
  hideDatasetName?: boolean;
```

Replacement in src/components/Clusters.tsx at line 38 [4.1]

B:BD[4.792] → [4.792:883]

const Clusters: React.FC<ClustersProps> = ({ locationId, locationName, datasetName }) => {

[4.792]

[4.883]

const Clusters: React.FC<ClustersProps> = ({ 
  locationId, 
  locationName, 
  datasetName = "", 
  hideDatasetName = false 
}) => {

Replacement in src/components/Clusters.tsx at line 101 [4.1]

B:BD[4.2529] → [4.2529:2635]

      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-bold">

[4.2529]

[4.2635]

      {!hideDatasetName && (
        <div className="flex justify-between items-center mb-4">
          <h2 className="text-xl font-bold">
            <span className="text-gray-800">{locationName}</span>
            <span className="ml-2">Clusters</span>
          </h2>
          <div className="text-gray-600 text-sm flex items-center">
            {datasetName}
          </div>
        </div>
      )}
      {hideDatasetName && (
        <h2 className="text-xl font-bold mb-4">

Replacement in src/components/Clusters.tsx at line 117 [4.1]

B:BD[4.2762] → [4.2762:2880]

        <div className="text-gray-600 text-sm flex items-center">
          {datasetName}
        </div>
      </div>

[4.2762]

[4.2880]

)}

Insertion in src/components/AuthorisedContent.tsx at line 7 [3.3215]

[3.3396]

[3.3439]

import { 
  Breadcrumb, 
  BreadcrumbItem, 
  BreadcrumbLink, 
  BreadcrumbList, 
  BreadcrumbPage, 
  BreadcrumbSeparator 
} from "./ui/breadcrumb";

Replacement in src/components/AuthorisedContent.tsx at line 65 [3.3215]

B:BD[4.8814] → [4.8814:9136]

              <div className="flex">
                <button
                  onClick={handleBackToDatasets}
                  className="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center"
                >
                  <span className="mr-1">←</span> Datasets
                </button>

[4.8814]

[4.9136]

              <div className="flex justify-between items-center py-1">
                <Breadcrumb className="text-sm py-0">
                  <BreadcrumbList className="py-0">
                    <BreadcrumbItem>
                      <BreadcrumbLink onClick={handleBackToDatasets} className="cursor-pointer">
                        Datasets
                      </BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbSeparator />
                    <BreadcrumbItem>
                      <BreadcrumbPage>
                        Locations
                      </BreadcrumbPage>
                    </BreadcrumbItem>
                  </BreadcrumbList>
                </Breadcrumb>
                <div className="text-gray-600 text-sm flex items-center">
                  {selectedDatasetName}
                </div>

Replacement in src/components/AuthorisedContent.tsx at line 88 [3.3215]

B:BD[4.9231] → [4.9231:9288]

                onLocationSelect={handleLocationSelect}

[4.9231]

[4.9288]

                onLocationSelect={handleLocationSelect}
                hideDatasetName={true}

Replacement in src/components/AuthorisedContent.tsx at line 95 [3.3215]

B:BD[4.9469] → [4.9469:9695]

              <button
                onClick={handleBackToDatasets}
                className="mt-3 px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md"
              >
                Datasets
              </button>

[4.9469]

[4.9695]

              <div className="mt-3">
                <Breadcrumb className="text-sm py-0">
                  <BreadcrumbList className="py-0">
                    <BreadcrumbItem>
                      <BreadcrumbLink onClick={handleBackToDatasets} className="cursor-pointer">
                        Datasets
                      </BreadcrumbLink>
                    </BreadcrumbItem>
                  </BreadcrumbList>
                </Breadcrumb>
              </div>

Replacement in src/components/AuthorisedContent.tsx at line 112 [3.3215]

B:BD[4.9832] → [2.332:939]

              <div className="flex">
                <button
                  onClick={handleBackToLocations}
                  className="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md flex items-center mr-2"
                >
                  <span className="mr-1">←</span> Locations
                </button>
                <button
                  onClick={handleBackToDatasets}
                  className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 flex items-center"
                >
                  <span className="mr-1">↑</span> Datasets
                </button>

[4.9832]

[4.10564]

              <div className="flex justify-between items-center py-1">
                <Breadcrumb className="text-sm py-0">
                  <BreadcrumbList className="py-0">
                    <BreadcrumbItem>
                      <BreadcrumbLink onClick={handleBackToDatasets} className="cursor-pointer">
                        Datasets
                      </BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbSeparator />
                    <BreadcrumbItem>
                      <BreadcrumbLink onClick={handleBackToLocations} className="cursor-pointer">
                        Locations
                      </BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbSeparator />
                    <BreadcrumbItem>
                      <BreadcrumbPage>
                        Clusters
                      </BreadcrumbPage>
                    </BreadcrumbItem>
                  </BreadcrumbList>
                </Breadcrumb>
                <div className="text-gray-600 text-sm flex items-center">
                  {selectedDatasetName}
                </div>

Replacement in src/components/AuthorisedContent.tsx at line 142 [3.3215]
B:BD[4.10712] → [4.10712:10762]
```
                datasetName={selectedDatasetName}
```
[4.10712]
[4.10762]
```
                hideDatasetName={true}
```

Replacement in src/components/AuthorisedContent.tsx at line 148 [3.3215]

B:BD[4.10963] → [2.940:1534]

              <div className="flex mt-3">
                <button
                  onClick={handleBackToLocations}
                  className="px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 rounded-md mr-2"
                >
                  <span className="mr-1">←</span> Locations
                </button>
                <button
                  onClick={handleBackToDatasets}
                  className="px-4 py-2 text-sm text-gray-600 hover:text-gray-800 flex items-center"
                >
                  <span className="mr-1">↑</span> Datasets
                </button>

[4.10963]

[4.11433]

              <div className="mt-3">
                <Breadcrumb className="text-sm py-0">
                  <BreadcrumbList className="py-0">
                    <BreadcrumbItem>
                      <BreadcrumbLink onClick={handleBackToDatasets} className="cursor-pointer">
                        Datasets
                      </BreadcrumbLink>
                    </BreadcrumbItem>
                    <BreadcrumbSeparator />
                    <BreadcrumbItem>
                      <BreadcrumbLink onClick={handleBackToLocations} className="cursor-pointer">
                        Locations
                      </BreadcrumbLink>
                    </BreadcrumbItem>
                  </BreadcrumbList>
                </Breadcrumb>