Move to TanStack Start from Next.js (#184)

web/app/styles/app.css

@@ -0,0 +1,91 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
+
+@import "./command-palette.css";
+@import "./custom.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --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% 95.9%;
+    --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% 96%;
+    --result: 240 5.9% 96%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+    --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%;
+    --boxShadow: rgba(0, 0, 0, 0.05);
+  }
+
+  .dark {
+    --background: 240 10% 4.5%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --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% 15.9%;
+    --input: 220 9% 10%;
+    --result: 0 0% 7%;
+    --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%;
+    --boxShadow: rgba(255, 255, 255, 0.04);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  html {
+    @apply size-full;
+  }
+  body,
+  div#root {
+    @apply bg-background text-foreground size-full font-sans antialiased;
+  }
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}

web/app/styles/command-palette.css

@@ -0,0 +1,129 @@
+@keyframes scaleIn {
+  0% {
+    transform: scale(0.97) translateX(-50%);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1) translateX(-50%);
+    opacity: 1;
+  }
+}
+
+@keyframes scaleOut {
+  0% {
+    transform: scale(1) translateX(-50%);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0.97) translateX(-50%);
+    opacity: 0;
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  to {
+    opacity: 0.8;
+  }
+}
+@keyframes fadeOut {
+  0% {
+    opacity: 0.8;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+:root {
+  --cmdk-shadow: rgba(0, 0, 0, 0.12) 0px 4px 30px,
+    rgba(0, 0, 0, 0.04) 0px 3px 17px, rgba(0, 0, 0, 0.04) 0px 2px 8px,
+    rgba(0, 0, 0, 0.04) 0px 1px 1px;
+  --cmdk-bg: rgb(255, 255, 255);
+  --cmdk-border-color: rgb(216, 216, 216);
+
+  --cmdk-input-color: rgb(48, 48, 49);
+  --cmdk-input-placeholder: hsl(0, 0%, 56.1%);
+
+  --cmdk-accent: rgb(243, 243, 243);
+}
+
+.dark {
+  --cmdk-shadow: rgba(0, 0, 0, 0.15) 0px 4px 40px,
+    rgba(0, 0, 0, 0.184) 0px 3px 20px, rgba(0, 0, 0, 0.184) 0px 3px 12px,
+    rgba(0, 0, 0, 0.184) 0px 2px 8px, rgba(0, 0, 0, 0.184) 0px 1px 1px;
+  --cmdk-bg: rgb(27, 28, 31);
+  --cmdk-border-color: rgb(56, 59, 65);
+
+  --cmdk-input-color: rgb(228, 229, 233);
+  --cmdk-input-placeholder: hsl(0, 0%, 43.9%);
+
+  --cmdk-accent: rgb(44, 48, 57);
+}
+
+[la-overlay][cmdk-overlay] {
+  animation: fadeIn 0.2s ease;
+  @apply fixed inset-0 z-50 opacity-80;
+}
+
+[la-dialog][cmdk-dialog] {
+  top: 15%;
+  transform: translateX(-50%);
+  max-width: 640px;
+  background: var(--cmdk-bg);
+  box-shadow: var(--cmdk-shadow);
+  transform-origin: left;
+  animation: scaleIn 0.2s ease;
+  transition: transform 0.1s ease;
+  border: 0.5px solid var(--cmdk-border-color);
+  @apply fixed left-1/2 z-50 w-full overflow-hidden rounded-lg outline-none;
+}
+
+[la-dialog][cmdk-dialog][data-state="closed"] {
+  animation: scaleOut 0.2s ease;
+}
+
+.la [cmdk-input-wrapper] {
+  border-bottom: 1px solid var(--cmdk-border-color);
+  height: 62px;
+  font-size: 1.125rem;
+  @apply relative;
+}
+
+.la [cmdk-input] {
+  font-size: inherit;
+  height: 62px;
+  color: var(--cmdk-input-color);
+  caret-color: rgb(110, 94, 210);
+  @apply m-0 w-full appearance-none border-none bg-transparent p-5 outline-none;
+}
+
+.la [cmdk-input]::placeholder {
+  color: var(--cmdk-input-placeholder);
+}
+
+.la [cmdk-list] {
+  max-height: 400px;
+  overflow: auto;
+  overscroll-behavior: contain;
+  transition: 100ms ease;
+  transition-property: height;
+  @apply p-2;
+}
+
+.la [cmdk-group-heading] {
+  font-size: 13px;
+  height: 30px;
+  @apply text-muted-foreground flex items-center px-2;
+}
+
+.la [cmdk-empty] {
+  @apply text-muted-foreground flex h-16 items-center justify-center whitespace-pre-wrap text-sm;
+}
+
+.la [cmdk-item] {
+  scroll-margin: 8px 0;
+  @apply flex min-h-10 cursor-pointer items-center gap-3 rounded-md px-2 text-sm aria-selected:bg-[var(--cmdk-accent)];
+}

web/app/styles/custom.css

@@ -0,0 +1,11 @@
+:root {
+  --link-background-muted: hsl(0, 0%, 97.3%);
+  --link-border-after: hsl(0, 0%, 91%);
+  --link-shadow: hsl(240, 5.6%, 82.5%);
+}
+
+.dark {
+  --link-background-muted: hsl(220, 6.7%, 8.8%);
+  --link-border-after: hsl(230, 10%, 11.8%);
+  --link-shadow: hsl(234.9, 27.1%, 25.3%);
+}