e8d3df032c
The News page was a hardcoded "under construction" stub, and the Friends/ Alerts header icons did nothing -- both replaced with real Vue pages/ widgets backed by the server's existing news/notifications/community APIs, reached through a generic authenticated REST bridge (community_api.rs: api_get/api_post/api_delete) and a websocket bridge for live chat/presence (community_ws.rs, mirrors the reqwest_websocket pattern remote.rs already uses for the auth-code exchange). - News: GET /api/v1/client/news, rendered with micromark, with real loading/empty/error states. - Alerts: GET/POST /api/v1/notifications/*, polled (not the notifications websocket -- see notifications.ts for why), unread badge + mark one/all read. - Friends: full friends composable (list/requests/search/presence) plus a header dropdown and a /community/friends management page. - Chat: /community/chat, rooms (server/global/title/DM) over the live community websocket with a REST history/read-state load on room switch. - Achievements: per-game card on the library detail page and a per-user summary on the new read-only profile page (/community/profile/:username). - The Community tab's "opens in your system browser" page is gone; /community is now a real in-app hub (activity feed + server list) linking into friends/chat. Also fixes a real auth gap found by actually running the built client against the live server: notifications/community routes are gated by aclManager.getUserIdACL, which only accepts a session cookie or an opaque Bearer APIToken -- never the client's own short-lived signed JWT (generate_authorization_header). The client already had a bridge for this (POST /api/v1/client/user/webtoken, JWT-authenticated, mints an opaque token), but CLIENT_WEBTOKEN_ACLS never granted it the notifications/ community scopes, so the exchange succeeded and the minted token still got 403'd on every one of these routes. Extended that ACL list (04.auth-init.ts) and switched community_api.rs/community_ws.rs to mint and use that webtoken instead of the JWT for these specific calls. Client version bumped to 0.4.2 (tauri.conf.json).
113 lines
3.5 KiB
Vue
113 lines
3.5 KiB
Vue
<template>
|
|
<Menu v-if="state?.user" as="div" class="relative inline-block">
|
|
<MenuButton>
|
|
<HeaderWidget>
|
|
<div class="inline-flex items-center text-zinc-300 hover:text-white">
|
|
<img :src="profilePictureUrl" class="w-5 h-5 rounded-sm" />
|
|
<span class="ml-2 text-sm font-bold">{{
|
|
state.user.displayName
|
|
}}</span>
|
|
<ChevronDownIcon class="ml-3 h-4" />
|
|
</div>
|
|
</HeaderWidget>
|
|
</MenuButton>
|
|
|
|
<transition
|
|
enter-active-class="transition ease-out duration-100"
|
|
enter-from-class="transform opacity-0 scale-95"
|
|
enter-to-class="transform opacity-100 scale-100"
|
|
leave-active-class="transition ease-in duration-75"
|
|
leave-from-class="transform opacity-100 scale-100"
|
|
leave-to-class="transform opacity-0 scale-95"
|
|
>
|
|
<MenuItems
|
|
class="absolute bg-zinc-900 right-0 top-10 z-50 w-56 origin-top-right focus:outline-none shadow-md"
|
|
>
|
|
<div class="flex-col gap-y-2">
|
|
<NuxtLink
|
|
:to="`/community/profile/${state.user.username}`"
|
|
class="transition inline-flex items-center w-full py-3 px-4 hover:bg-zinc-800"
|
|
>
|
|
<div class="inline-flex items-center text-zinc-300">
|
|
<img :src="profilePictureUrl" class="w-5 h-5 rounded-sm" />
|
|
<span class="ml-2 text-sm font-bold">{{
|
|
state.user.displayName
|
|
}}</span>
|
|
</div>
|
|
</NuxtLink>
|
|
<div class="h-0.5 rounded-full w-full bg-zinc-800" />
|
|
<div class="flex flex-col mb-1">
|
|
<MenuItem v-if="state.user.admin" v-slot="{ active }">
|
|
<a
|
|
:href="adminUrl"
|
|
target="_blank"
|
|
:class="[
|
|
active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
|
|
'transition block px-4 py-2 text-sm',
|
|
]"
|
|
>
|
|
Admin Dashboard
|
|
</a>
|
|
</MenuItem>
|
|
<MenuItem
|
|
v-for="(nav, navIdx) in navigation"
|
|
v-slot="{ active, close }"
|
|
>
|
|
<button
|
|
@click="() => navigate(close, nav)"
|
|
:href="nav.route"
|
|
:class="[
|
|
active ? 'bg-zinc-800 text-zinc-100' : 'text-zinc-400',
|
|
'transition text-left block px-4 py-2 text-sm',
|
|
]"
|
|
>
|
|
{{ nav.label }}
|
|
</button>
|
|
</MenuItem>
|
|
</div>
|
|
</div>
|
|
</MenuItems>
|
|
</transition>
|
|
</Menu>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
|
|
import { ChevronDownIcon } from "@heroicons/vue/16/solid";
|
|
import type { NavigationItem } from "../types";
|
|
import HeaderWidget from "./HeaderWidget.vue";
|
|
import { useAppState } from "~/composables/app-state";
|
|
import { invoke } from "@tauri-apps/api/core";
|
|
|
|
const open = ref(false);
|
|
const router = useRouter();
|
|
router.afterEach(() => {
|
|
open.value = false;
|
|
});
|
|
|
|
const state = useAppState();
|
|
const profilePictureUrl: string = await useObject(
|
|
state.value?.user?.profilePictureObjectId ?? ""
|
|
);
|
|
const adminUrl: string = await invoke("gen_drop_url", {
|
|
path: "/admin",
|
|
});
|
|
|
|
function navigate(close: () => any, to: NavigationItem) {
|
|
close();
|
|
router.push(to.route);
|
|
}
|
|
|
|
const navigation: NavigationItem[] = [
|
|
{
|
|
label: "App settings",
|
|
route: "/settings",
|
|
prefix: "",
|
|
},
|
|
{
|
|
label: "Quit Drop",
|
|
route: "/quit",
|
|
prefix: "",
|
|
},
|
|
];
|
|
</script>
|