chore: migrated ui from db

.editorconfig

@@ -0,0 +1,17 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab
+indent_size = 4

.github/workflows/ci.yml

@@ -0,0 +1,59 @@
+name: Deploy tweaks to GitHub Pages
+
+on:
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: write
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - run: bun ci
+
+      - name: Validate Tweaks
+        run: bun test
+
+      - run: bun run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './dist'
+
+  deploy:
+    needs: build
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+tweaks/schema.json
+tweaks/tweaks.json
+tweaks/*.md
+# Ignore any sub directories under tweaks
+tweaks/*/
+dist/
+*.py

.postcssrc.json

@@ -0,0 +1,8 @@
+{
+  "plugins": {
+    "autoprefixer": {},
+    "tailwindcss/nesting": {},
+    "tailwindcss": {},
+    "cssnano": {}
+  }
+}

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": true,
+  "editorconfig": true,
+  "printWidth": 120
+}

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+  "css.customData": [".vscode/tailwind.json"],
+  "nixEnvSelector.suggestion": false,
+  "editor.detectIndentation": false,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": ["source.addMissingImports", "source.fixAll.eslint"],
+  "[nix]": {
+    "editor.defaultFormatter": "jnoortheen.nix-ide"
+  },
+  "nix.enableLanguageServer": true,
+  "nix.serverPath": "nixd",
+  "[toml]": {
+    "editor.defaultFormatter": "tamasfe.even-better-toml"
+  },
+  "[rust]": {
+    "editor.defaultFormatter": "rust-lang.rust-analyzer"
+  },
+  "nixEnvSelector.nixFile": "${workspaceFolder}/shell.nix",
+  "nixEnvSelector.args": "--impure",
+  "tailwindCSS.suggestions": true,
+  "tailwindCSS.experimental.classRegex": ["className: '(.*)'"]
+}

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

LICENSE

@@ -0,0 +1,7 @@
+Copyright 2023 Rainbow Café
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Makefile

@@ -0,0 +1,6 @@
+develop:
+ifeq ($(shell printenv IN_NIX_SHELL),)
+	@nix develop --impure --command $(shell printenv SHELL)
+else
+	$(info You are already running in a nix shell!)
+endif

README.md

@@ -0,0 +1,47 @@
+## Protontweaks DB
+
+> [!IMPORTANT]  
+> This is the Protontweaks DB repository, you can find the `protontweaks` cli [over here](https://github.com/rain-cafe/protontweaks)
+
+### Usage
+
+Its highly recommended that if you're planning on fetching tweaks from our api that you lock into a specific version.
+
+`https://tweaks.rains.cafe/api/v2/<app-id>.json`
+
+Old versions will get any new apps that are added, however if a feature isn't supported in the old api it won't get mapped.
+
+### Adding a tweak?
+
+- Lookup your the app id of your steam app.
+
+> [!TIP]
+> You can discover the app id by using [https://steamdb.info](https://steamdb.info/apps/)!
+
+- Copy the contents of [template](./tweaks/.template.json) and create a json file with the name `[your-app-id].json`
+- Add any dlls, fonts, etc.
+- Create a PR with your changes!
+
+### Example Tweak File
+
+```ts
+{
+  "name": "They Are Billions",
+  "tweaks": {
+    // Specify any protontricks here
+    "tricks": ["gdiplus"],
+    // Set any environment variables here
+    "env": {},
+    "settings": {
+      // Informs the client that ESync should be disabled
+      "esync": false,
+      // Informs the client that FSync should be disabled
+      "fsync": false
+    }
+  }
+}
+```
+
+### TODO
+
+- Add support for gpu vendor specific configs

app/App.tsx

@@ -0,0 +1,35 @@
+import { useState, type FC } from 'react';
+import { Outlet, useNavigate } from 'react-router-dom';
+import { AppHeader } from './components/AppHeader';
+import { SearchContext } from './context/search';
+import { Toaster } from 'sonner';
+import { AppFooter } from './components/AppFooter';
+
+export const Component: FC = () => {
+  const navigate = useNavigate();
+  const [search, setSearch] = useState('');
+
+  return (
+    <SearchContext.Provider value={search}>
+      <AppHeader
+        onChange={(value) => {
+          navigate('/');
+          setSearch(value);
+        }}
+      />
+      <div className="flex flex-1 flex-col p-4 gap-4 w-screen max-w-screen-2xl mx-auto">
+        <Outlet />
+        <Toaster
+          toastOptions={{
+            unstyled: true,
+            classNames: {
+              toast: 'overflow-hidden flex gap-4 items-center bg-black p-4 w-full rounded-md text-white',
+              title: 'text-lg',
+            },
+          }}
+        />
+      </div>
+      <AppFooter />
+    </SearchContext.Provider>
+  );
+};

app/components/AppFooter.tsx

@@ -0,0 +1,47 @@
+import { type FC } from 'react';
+import { Link } from 'react-router-dom';
+import { Bug, Code2 } from 'lucide-react';
+import { Button } from './Button';
+
+export const AppFooter: FC = () => {
+  return (
+    <div className="flex gap-4 px-4 py-3 bg-zinc-900 items-center">
+      <div className="flex flex-col gap-2 flex-1 text-white/70">
+        <div>
+          Built with ❤️ by the{' '}
+          <Link className="underline" to="https://github.com/rain-cafe" target="_blank">
+            Rainbow Cafe
+          </Link>{' '}
+          Team~
+        </div>
+        <div>
+          This site uses data from Steam as well as data provided by{' '}
+          <Link className="underline" to="https://steamdb.info" target="_blank">
+            SteamDB
+          </Link>{' '}
+          via{' '}
+          <Link
+            className="underline"
+            to="https://www.algolia.com/?utm_source=steamdb_search&utm_medium=link&utm_term=logo&utm_campaign=steamdb"
+            target="_blank"
+          >
+            Algolia
+          </Link>
+          .
+        </div>
+        <div>
+          This site has no affiliation with Valve Software. This site uses data from All game images and logos are
+          property of their respective owners.
+        </div>
+      </div>
+      <div className="flex flex-col gap-4">
+        <Button to="https://github.com/rain-cafe/protontweaks-db/issues">
+          <Bug />
+        </Button>
+        <Button to="https://github.com/rain-cafe/protontweaks-db">
+          <Code2 />
+        </Button>
+      </div>
+    </div>
+  );
+};