Merge pull request #22 from uhKayla/dev

Themes, /me fixes, and more.

package.json

@@ -55,6 +55,7 @@
 		"svelte-legos": "^0.2.3",
 		"svelte-sonner": "^0.3.24",
 		"tailwind-merge": "^2.3.0",
-		"tailwind-variants": "^0.2.1"
+		"tailwind-variants": "^0.2.1",
+		"tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#v1"
 	}
 }

src-tauri/Cargo.toml

@@ -21,6 +21,7 @@ tauri = { version = "1.6.1", features = [ "updater", "shell-open", "path-all", "
 reqwest = { version = "0.12", features = ["json", "cookies"] }
 url = "2.5.1"
 dirs = "5.0.1"
+tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "v1" }
 
 
 [features]

src-tauri/src/main.rs

@@ -309,6 +309,7 @@ fn main() {
     tauri::Builder::default()
         .manage(state)
         .invoke_handler(tauri::generate_handler![login, verify_two_factor, logout, get_request, make_request, is_logged_in, get_cookies])
+        .plugin(tauri_plugin_store::Builder::default().build())
         .run(context)
         .expect("error while running tauri application");
 }

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "SpectreVRC",
-    "version": "0.1.10"
+    "version": "0.1.11"
   },
   "tauri": {
     "allowlist": {
@@ -65,7 +65,7 @@
     "updater": {
       "active": true,
       "endpoints": [
-        "https://github.com/uhKayla/Spectre/releases/download/v0.1.10-alpha/latest.json"
+        "https://gist.githubusercontent.com/uhKayla/e3f809d00536399341af561836e3b7db/raw/d5f8a6beb22ec801dd0e5add1a96bd6694539708/spectre.json"
       ],
       "dialog": true,
       "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEQzQUY4OTIzMDVDOTgzMjQKUldRa2c4a0ZJNG12MDBvNHdIa0VRMXhKcVhqbTgyWXVTTVBoUmFGcEowMFd5cjVpbEoxc1hha3AK"

src/app.css

@@ -46,6 +46,178 @@
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
   }
+
+  .rose-light {
+    --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: 346.8 77.2% 49.8%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --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 72.22% 50.59%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 346.8 77.2% 49.8%;
+  }
+
+  .rose-dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;
+    --primary: 346.8 77.2% 49.8%;
+    --primary-foreground: 355.7 100% 97.3%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 346.8 77.2% 49.8%;
+  }
+
+  .blue-light {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;    --destructive: 0 72.22% 50.59%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+  }
+
+  .blue-dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+
+  .green-light {
+    --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: 142.1 76.2% 36.3%;
+    --primary-foreground: 355.7 100% 97.3%;    --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 72.22% 50.59%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 142.1 76.2% 36.3%;
+  }
+
+  .green-dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 95%;
+    --card: 24 9.8% 10%;
+    --card-foreground: 0 0% 95%;    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 95%;    --primary: 142.1 70.6% 45.3%;
+    --primary-foreground: 144.9 80.4% 10%;    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;    --muted: 0 0% 15%;
+    --muted-foreground: 240 5% 64.9%;    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 0 0% 98%;    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 142.4 71.8% 29.2%;
+  }
+
+  .orange-light {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;    --primary: 24.6 95% 53.1%;
+    --primary-foreground: 60 9.1% 97.8%;    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;    --destructive: 0 72.22% 50.59%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
+  }
+
+  .orange-dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;    --primary: 20.5 90.2% 48.2%;
+    --primary-foreground: 60 9.1% 97.8%;    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+  }
+
+  .violet-light {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 224 71.4% 4.1%;    --popover: 0 0% 100%;
+    --popover-foreground: 224 71.4% 4.1%;    --primary: 262.1 83.3% 57.8%;
+    --primary-foreground: 210 20% 98%;    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;    --destructive: 0 72.22% 50.59%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 262.1 83.3% 57.8%;
+  }
+
+  .violet-dark {
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 20% 98%;    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;    --primary: 263.4 70% 50.4%;
+    --primary-foreground: 210 20% 98%;    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --ring: 263.4 70% 50.4%;
+  }
 }
 
 @layer base {

src/lib/components/Footer.svelte

@@ -87,13 +87,13 @@
 
     .ticker-wrapper::before {
         left: 0;
-        background: linear-gradient(to right, #09090b, transparent);
+        background: linear-gradient(to right, hsl(var(--background)), transparent);
         z-index: 1;
     }
 
     .ticker-wrapper::after {
         right: 0;
-        background: linear-gradient(to left, #09090b, transparent);
+        background: linear-gradient(to left, hsl(var(--background)), transparent);
     }
 
 		/* ticker https://code-boxx.com/html-css-news-ticker-horizontal-vertical/*/

src/lib/components/Header.svelte

@@ -116,12 +116,12 @@
 					{/if}
 				</DropdownMenu.Item>
 				<DropdownMenu.Separator />
-				<DropdownMenu.Item disabled href="/user/test">Settings</DropdownMenu.Item>
+				<DropdownMenu.Item href="/settings">Settings</DropdownMenu.Item>
 				<DropdownMenu.Item on:click={openGithub}>Github</DropdownMenu.Item>
 				<DropdownMenu.Separator />
 				<DropdownMenu.Item on:click={logout}>Logout</DropdownMenu.Item>
 				<DropdownMenu.Separator />
-				<DropdownMenu.Item disabled>v0.1.10-ALPHA</DropdownMenu.Item>
+				<DropdownMenu.Item disabled>v0.1.11-ALPHA</DropdownMenu.Item>
 			</DropdownMenu.Content>
 		</DropdownMenu.Root>
 	</div>

src/lib/components/Me.svelte

@@ -112,30 +112,6 @@
 	}
 </script>
 
-<div class="grid gap-8 mt-5">
-	<div class="flex items-center gap-4">
-		<Avatar.Root class="hidden h-9 w-9 sm:flex">
-			<Avatar.Image src={currentUser?.userIcon || currentUser?.currentAvatarImageUrl} alt="Avatar" />
-			<Avatar.Fallback>{currentUser?.displayName?.charAt(0).toUpperCase() || 'NA'}</Avatar.Fallback>
-		</Avatar.Root>
-		<div class="grid gap-1">
-			<p class="text-sm font-medium leading-none">
-				{currentUser?.displayName || 'Username'}
-			</p>
-			<p class="text-sm text-muted-foreground">{currentUser?.statusDescription || currentUser?.status}</p>
-		</div>
-		<Button class="ml-auto font-medium">View Website</Button>
-	</div>
-	<p>
-		{#each getFilteredTags(currentUser?.tags) as tag}
-			{#if tagToBadgeMap[tag]}
-				<Badge variant="outline" style="border-color: {tagToColorMap[tag]}; color: white;">
-					{tagToBadgeMap[tag]}
-				</Badge>
-			{/if}
-		{/each}
-	</p>
-	<Separator />
 	<Tabs.Root value="bio" class="w-[620px]">
 		<Tabs.List class="grid w-full grid-cols-4">
 			<Tabs.Trigger value="bio">Bio</Tabs.Trigger>
@@ -144,7 +120,36 @@
 			<Tabs.Trigger value="json">JSON</Tabs.Trigger>
 		</Tabs.List>
 		<Tabs.Content value="bio">
-			<Bio currentUser="{currentUser}"/>
+			<div class="grid gap-8 mt-5">
+				<div class="">
+					<div class="flex items-center gap-4">
+						<Avatar.Root class="hidden h-9 w-9 sm:flex">
+							<Avatar.Image src={currentUser?.userIcon || currentUser?.currentAvatarImageUrl} alt="Avatar" />
+							<Avatar.Fallback>{currentUser?.displayName?.charAt(0).toUpperCase() || 'NA'}</Avatar.Fallback>
+						</Avatar.Root>
+						<div class="grid gap-1">
+							<p class="text-sm font-medium leading-none">
+								{currentUser?.displayName || 'Username'}
+							</p>
+							<p class="text-sm text-muted-foreground">{currentUser?.statusDescription || currentUser?.status}</p>
+						</div>
+						<Button class="ml-auto font-medium">View Website</Button>
+					</div>
+					<p class="pt-2">
+						{#each getFilteredTags(currentUser?.tags) as tag}
+							{#if tagToBadgeMap[tag]}
+								<Badge variant="outline" style="border-color: {tagToColorMap[tag]}; color: white;">
+									{tagToBadgeMap[tag]}
+								</Badge>
+							{/if}
+						{/each}
+					</p>
+				</div>
+				<Separator />
+			</div>
+			<div class="pt-4">
+				<Bio currentUser="{currentUser}"/>
+			</div>
 		</Tabs.Content>
 		<Tabs.Content value="avatar">
 			{#if currentUser !== null}
@@ -157,4 +162,3 @@
 			<Json currentUser="{currentUser}"/>
 		</Tabs.Content>
 	</Tabs.Root>
-</div>