solid_cache_dashboard 0.0.1

data/app/assets/stylesheets/solid_cache_dashboard/tailwind.css

@@ -0,0 +1,625 @@
+@import 'tailwindcss';
+
+@plugin 'tailwindcss-animate';
+@plugin '@tailwindcss/forms' {
+  strategy: 'class';
+}
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+@utility label {
+  /*
+    Label
+  */
+  @apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
+}
+
+@utility select {
+  /*
+    Select
+  */
+  @apply form-select w-48 border border-input bg-white dark:bg-black text-foreground rounded-md h-10 px-3 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
+}
+
+@utility badge {
+  /*
+    Badge
+  */
+  @apply border inline-flex items-center gap-x-1.5 rounded-md px-1.5 py-0.5 text-sm/5 font-medium sm:text-xs/5 forced-colors:outline;
+}
+
+@utility badge-primary {
+  @apply border-transparent bg-primary text-primary-foreground hover:bg-primary/80;
+}
+
+@utility badge-secondary {
+  @apply border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80;
+}
+
+@utility badge-destructive {
+  @apply border-transparent bg-destructive/15 text-destructive dark:bg-destructive/10 dark:text-destructive-foreground;
+}
+
+@utility badge-outline {
+  @apply text-foreground;
+}
+
+@utility badge-red {
+  @apply border-transparent bg-red-500/15 text-red-700 dark:bg-red-500/10 dark:text-red-400;
+}
+
+@utility badge-orange {
+  @apply border-transparent bg-orange-500/15 text-orange-700 dark:bg-orange-500/10 dark:text-orange-400;
+}
+
+@utility badge-amber {
+  @apply border-transparent bg-amber-400/20 text-amber-700 dark:bg-amber-400/10 dark:text-amber-400;
+}
+
+@utility badge-yellow {
+  @apply border-transparent bg-yellow-400/20 text-yellow-700 dark:bg-yellow-400/10 dark:text-yellow-300;
+}
+
+@utility badge-lime {
+  @apply border-transparent bg-lime-400/20 text-lime-700 dark:bg-lime-400/10 dark:text-lime-300;
+}
+
+@utility badge-green {
+  @apply border-transparent bg-green-500/15 text-green-700 dark:bg-green-500/10 dark:text-green-400;
+}
+
+@utility badge-emerald {
+  @apply border-transparent bg-emerald-500/15 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400;
+}
+
+@utility badge-teal {
+  @apply border-transparent bg-teal-500/15 text-teal-700 dark:bg-teal-500/10 dark:text-teal-300;
+}
+
+@utility badge-cyan {
+  @apply border-transparent bg-cyan-400/20 text-cyan-700 dark:bg-cyan-400/10 dark:text-cyan-300;
+}
+
+@utility badge-sky {
+  @apply border-transparent bg-sky-500/15 text-sky-700 dark:bg-sky-500/10 dark:text-sky-300;
+}
+
+@utility badge-blue {
+  @apply border-transparent bg-blue-500/15 text-blue-700 dark:text-blue-400;
+}
+
+@utility badge-indigo {
+  @apply border-transparent bg-indigo-500/15 text-indigo-700 dark:text-indigo-400;
+}
+
+@utility badge-violet {
+  @apply border-transparent bg-violet-500/15 text-violet-700 dark:text-violet-400;
+}
+
+@utility badge-purple {
+  @apply border-transparent bg-purple-500/15 text-purple-700 dark:text-purple-400;
+}
+
+@utility badge-fuchsia {
+  @apply border-transparent bg-fuchsia-400/15 text-fuchsia-700 dark:bg-fuchsia-400/10 dark:text-fuchsia-400;
+}
+
+@utility badge-pink {
+  @apply border-transparent bg-pink-400/15 text-pink-700 dark:bg-pink-400/10 dark:text-pink-400;
+}
+
+@utility badge-rose {
+  @apply border-transparent bg-rose-400/15 text-rose-700 dark:bg-rose-400/10 dark:text-rose-400;
+}
+
+@utility badge-zinc {
+  @apply border-transparent bg-zinc-600/7.5 text-zinc-700 dark:bg-white/5 dark:text-zinc-400;
+}
+
+@utility circle {
+  /*
+    Circle
+  */
+  @apply size-2 inline-flex items-center justify-center rounded-full;
+}
+
+@utility circle-primary {
+  @apply bg-primary;
+}
+
+@utility circle-secondary {
+  @apply bg-secondary;
+}
+
+@utility circle-destructive {
+  @apply bg-destructive;
+}
+
+@utility circle-outline {
+  @apply border border-current bg-background;
+}
+
+@utility circle-red {
+  @apply bg-red-500;
+}
+
+@utility circle-orange {
+  @apply bg-orange-500;
+}
+
+@utility circle-amber {
+  @apply bg-amber-400;
+}
+
+@utility circle-yellow {
+  @apply bg-yellow-400;
+}
+
+@utility circle-lime {
+  @apply bg-lime-400;
+}
+
+@utility circle-green {
+  @apply bg-green-500;
+}
+
+@utility circle-emerald {
+  @apply bg-emerald-500;
+}
+
+@utility circle-teal {
+  @apply bg-teal-500;
+}
+
+@utility circle-cyan {
+  @apply bg-cyan-400;
+}
+
+@utility circle-sky {
+  @apply bg-sky-500;
+}
+
+@utility circle-blue {
+  @apply bg-blue-500;
+}
+
+@utility circle-indigo {
+  @apply bg-indigo-500;
+}
+
+@utility circle-violet {
+  @apply bg-violet-500;
+}
+
+@utility circle-purple {
+  @apply bg-purple-500;
+}
+
+@utility circle-fuchsia {
+  @apply bg-fuchsia-400;
+}
+
+@utility circle-pink {
+  @apply bg-pink-400;
+}
+
+@utility circle-rose {
+  @apply bg-rose-400;
+}
+
+@utility circle-zinc {
+  @apply bg-zinc-400;
+}
+
+@utility alert {
+  /*
+    Alert
+  */
+  @apply relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground;
+}
+
+@utility alert-default {
+  @apply bg-background text-foreground;
+}
+
+@utility alert-destructive {
+  @apply border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive;
+}
+
+@utility alert-red {
+  @apply border-red-500/50 text-red-700 dark:border-red-500 dark:text-red-300 [&>svg]:text-red-500;
+}
+
+@utility alert-green {
+  @apply border-green-500/50 text-green-700 dark:border-green-500 dark:text-green-300 [&>svg]:text-green-500;
+}
+
+@utility alert-yellow {
+  @apply border-yellow-500/50 text-yellow-700 dark:border-yellow-500 dark:text-yellow-300 [&>svg]:text-yellow-500;
+}
+
+@utility alert-blue {
+  @apply border-blue-500/50 text-blue-700 dark:border-blue-500 dark:text-blue-300 [&>svg]:text-blue-500;
+}
+
+@utility alert-purple {
+  @apply border-purple-500/50 text-purple-700 dark:border-purple-500 dark:text-purple-300 [&>svg]:text-purple-500;
+}
+
+@utility alert-pink {
+  @apply border-pink-500/50 text-pink-700 dark:border-pink-500 dark:text-pink-300 [&>svg]:text-pink-500;
+}
+
+@utility alert-title {
+  @apply mb-1 font-medium leading-none tracking-tight;
+}
+
+@utility alert-description {
+  @apply text-sm [&_p]:leading-relaxed;
+}
+
+@utility btn {
+  /*
+    Button
+  */
+  @apply inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+}
+
+@utility btn-default {
+  @apply bg-primary text-primary-foreground hover:bg-primary/90;
+}
+
+@utility btn-destructive {
+  @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
+}
+
+@utility btn-outline {
+  @apply border border-input bg-background hover:bg-accent hover:text-accent-foreground;
+}
+
+@utility btn-secondary {
+  @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
+}
+
+@utility btn-ghost {
+  @apply hover:bg-accent hover:text-accent-foreground;
+}
+
+@utility btn-link {
+  @apply text-primary underline-offset-4 hover:underline;
+}
+
+@utility btn-xs {
+  @apply h-7 rounded-md px-2 gap-1;
+}
+
+@utility btn-sm {
+  @apply h-9 rounded-md px-3 gap-1.5;
+}
+
+@utility btn-md {
+  @apply h-10 px-4 py-2 gap-1.5;
+}
+
+@utility btn-lg {
+  @apply h-11 rounded-md px-8 gap-2;
+}
+
+@utility btn-icon {
+  @apply h-10 w-10;
+}
+
+@utility info-line {
+  /*
+    Info Line
+  */
+  @apply flex items-center gap-4;
+}
+
+@utility info-line-label {
+  @apply text-zinc-500 whitespace-nowrap;
+}
+
+@utility info-line-separator {
+  @apply h-px flex-1 bg-zinc-950/10 dark:border-white/10 translate-y-px;
+}
+
+@utility info-line-value {
+  @apply font-medium text-right text-zinc-950 dark:text-white;
+}
+
+@utility card {
+  /*
+    Card
+  */
+  @apply rounded-lg border bg-card text-card-foreground shadow-xs;
+}
+
+@utility card-header {
+  @apply flex flex-col space-y-1.5 p-6;
+}
+
+@utility card-title {
+  @apply text-2xl font-semibold leading-none tracking-tight;
+}
+
+@utility card-description {
+  @apply text-sm text-muted-foreground;
+}
+
+@utility card-content {
+  @apply p-6 pt-0;
+}
+
+@utility card-footer {
+  @apply flex items-center p-6 pt-0;
+}
+
+@utility navbar {
+  /*
+    Navbar
+  */
+  @apply flex items-center gap-4 bg-background py-4;
+}
+
+@utility navbar-section {
+  @apply flex gap-1.5;
+}
+
+@utility navbar-item {
+  @apply inline-flex items-center rounded-md justify-center px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+}
+
+@utility navbar-item-default {
+  @apply text-foreground hover:bg-accent hover:text-accent-foreground;
+}
+
+@utility navbar-item-current {
+  @apply bg-primary text-primary-foreground;
+}
+
+@utility table-wrapper {
+  /*
+    Table
+  */
+  @apply relative w-full overflow-auto;
+}
+
+@utility table {
+  @apply w-full caption-bottom text-sm;
+}
+
+@utility table-header {
+  @apply [&_tr]:border-b;
+}
+
+@utility table-body {
+  @apply [&_tr:last-child]:border-0;
+}
+
+@utility table-footer {
+  @apply border-t bg-muted/50 font-medium last:[&>tr]:border-b-0;
+}
+
+@utility table-row {
+  @apply border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted;
+}
+
+@utility table-head {
+  @apply h-12 px-4 text-left align-middle font-medium text-muted-foreground whitespace-nowrap [&:has([role=checkbox])]:pr-0;
+}
+
+@utility table-cell {
+  @apply p-4 align-middle [&:has([role=checkbox])]:pr-0;
+}
+
+@utility table-caption {
+  @apply mt-4 text-sm text-muted-foreground;
+}
+
+@utility pagination {
+  /*
+    Pagination
+  */
+  @apply flex justify-center;
+}
+
+@utility pagination-content {
+  @apply flex flex-row items-center gap-1;
+}
+
+@utility pagination-item {
+  @apply inline-block;
+}
+
+@utility pagination-link {
+  @apply inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+}
+
+@utility pagination-link-active {
+  @apply border border-input bg-background hover:bg-accent hover:text-accent-foreground;
+}
+
+@utility pagination-link-inactive {
+  @apply hover:bg-accent hover:text-accent-foreground;
+}
+
+@utility pagination-link-icon {
+  @apply h-9 w-9;
+}
+
+@utility pagination-link-default {
+  @apply h-10 px-4 py-2;
+}
+
+@utility pagination-previous {
+  @apply h-10 px-4 py-2 gap-1;
+  @apply pl-2.5;
+}
+
+@utility pagination-next {
+  @apply h-10 px-4 py-2 gap-1;
+  @apply pr-2.5;
+}
+
+@utility pagination-ellipsis {
+  @apply flex h-9 w-9 items-center justify-center;
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 98%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 93.8%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.65rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 240 10% 5.4%;
+    --foreground: 0 0% 92%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 92%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 95%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 11%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-zinc-300;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+
+  [data-href] {
+    @apply cursor-pointer;
+  }
+
+  .link {
+    @apply underline hover:opacity-75;
+  }
+}

data/app/controllers/solid_cache_dashboard/appearance_controller.rb

@@ -0,0 +1,9 @@
+module SolidCacheDashboard
+  class AppearanceController < ApplicationController
+    def toggle
+      cookies[:solid_cache_dashboard_dark_mode] = dark_mode? ? "false" : "true"
+      
+      redirect_back(fallback_location: root_path)
+    end
+  end
+end

data/app/controllers/solid_cache_dashboard/application_controller.rb

@@ -0,0 +1,12 @@
+module SolidCacheDashboard
+  class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception
+
+    helper SolidCacheDashboard::ApplicationHelper
+
+    def dark_mode?
+      cookies[:solid_cache_dashboard_dark_mode] == "true"
+    end
+    helper_method :dark_mode?
+  end
+end

data/app/controllers/solid_cache_dashboard/cache_entries_controller.rb

@@ -0,0 +1,37 @@
+module SolidCacheDashboard
+  class CacheEntriesController < ApplicationController
+    def index
+      @cache_entries = SolidCacheDashboard.decorate(
+        SolidCache::Entry.order(created_at: :desc)#.page(params[:page]).per(25)
+      )
+    end
+
+    def show
+      @cache_entry = SolidCacheDashboard.decorate(
+        SolidCache::Entry.find_by_key_hash(params[:id].to_i)
+      )
+
+      unless @cache_entry
+        redirect_to cache_entries_path, alert: "Cache entry not found"
+        return
+      end
+    end
+
+    def delete
+      cache_entry = SolidCache::Entry.find_by_key_hash(params[:id].to_i)
+
+      if cache_entry
+        cache_entry.delete
+        redirect_to cache_entries_path, notice: "Cache entry deleted"
+      else
+        redirect_to cache_entries_path, alert: "Cache entry not found"
+      end
+    end
+
+    def clear_all
+      SolidCache::Entry.delete_all
+      SolidCacheDashboard::CacheEvent.delete_all if defined?(SolidCacheDashboard::CacheEvent)
+      redirect_to cache_entries_path, notice: "All cache entries and statistics have been reset"
+    end
+  end
+end

data/app/controllers/solid_cache_dashboard/cache_events_controller.rb

@@ -0,0 +1,9 @@
+module SolidCacheDashboard
+  class CacheEventsController < ApplicationController
+    def index
+      @cache_events = SolidCacheDashboard.decorate(
+        SolidCacheDashboard::CacheEvent.order(created_at: :desc)#.page(params[:page]).per(25)
+      )
+    end
+  end
+end