style(Frontend): 🎨 fmt+Clippy

frontend/src/components/paginate_navbar.rs

@@ -70,8 +70,7 @@ fn PaginateNavbarButton(
     #[prop(into)] page: ParamsMapKey<u32>,
 ) -> impl IntoView {
     let query_map = use_query_map();
-    let href =
-        query_map.with_key_map(move |map| map.set_key(page, Some(i())));
+    let href = query_map.with_key_map(move |map| map.set_key(page, Some(i())));
     let page = query_map.use_key_with_default(page);
     let disabled = create_memo(move |_| page() == i());
     view! {

frontend/src/components/paginate_table.rs

@@ -25,8 +25,7 @@ where
             };
             let mut query_map = query_map.get_untracked();
             if s == query_map.get_key_with_default(sort) {
-                let toggle_order = match query_map.get_key_with_default(order)
-                {
+                let toggle_order = match query_map.get_key_with_default(order) {
                     grpc::Order::Ascend => grpc::Order::Descend,
                     grpc::Order::Descend => grpc::Order::Ascend,
                 };

frontend/src/components/toast.rs

@@ -104,10 +104,7 @@ fn Toast(
         stop,
         is_pending,
         ..
-    } = {
-        let close = close;
-        use_timeout_fn(move |_| close(), 4.0 * 1000.0)
-    };
+    } = { use_timeout_fn(move |_| close(), 4.0 * 1000.0) };
 
     let node_ref = create_node_ref::<html::Div>();
     let hover = use_element_hover(node_ref);

frontend/src/pages/mod.rs

@@ -1,12 +1,96 @@
 mod about;
+mod contest;
 mod contests;
 mod create;
 mod home;
 mod login;
-mod pages;
 mod problem;
 mod problems;
 mod rank;
 mod submission;
-mod contest;
-pub use pages::*;
+
+use about::About;
+use contest::Contest;
+use contests::Contests;
+use home::Home;
+use leptos::*;
+use leptos_router::*;
+use leptos_use::*;
+use login::Login;
+use problem::ProblemRouter;
+use problems::Problems;
+use rank::Rank;
+use submission::Submission;
+
+use crate::{components::*, utils::*};
+
+/// |Permission|Root|Admin|SuperUser|User|Guest
+/// |:-|:-:|:-:|:-:|:-:|:-:|
+/// |Register User|/|/|/|/|/|
+/// |Join *any* Contest|V||||
+/// |Create Admin|V||||
+/// |Create SuperUser|V|V|||
+/// |Create User|V|V|||
+/// |Create Announcement for Contest|V|V|||
+/// |Create/Publish Announcement|V|V|||
+/// |Create/Publish Problem|V|V|V||
+/// |Create/Publish Contest|V|V|V||
+/// |Submit Problem|V|V|V|V|
+/// > `/` 代表看 backend config
+#[component]
+pub fn Pages() -> impl IntoView {
+    let token = use_token();
+    let role = use_role();
+    let can_create_problem_or_contest = move || {
+        role().is_some_and(|role| match role {
+            grpc::Role::User => false,
+            grpc::Role::Super | grpc::Role::Admin | grpc::Role::Root => true,
+        })
+    };
+
+    let show_footer = move || {
+        !use_location()
+            .pathname
+            .with(|path| path.starts_with("/problem/"))
+    };
+    let page_wrapper = move || {
+        view! {
+            <Navbar />
+            <Outlet />
+            <Show when=show_footer fallback=|| ()>
+                <Footer />
+            </Show>
+        }
+    };
+
+    view! {
+        <Routes>
+            <Route path="" view=page_wrapper>
+                <Route path="" view=Home />
+                <Route path="/problems" view=Problems ssr=SsrMode::Async />
+                <Route path="/submissions" view=Submission />
+                <Route path="/contests" view=Contests />
+                <Route path="/contest" view=Contest />
+                <Route path="/about" view=About />
+                <Route path="/rank" view=Rank />
+                <ProblemRouter />
+
+                <ProtectedRoute
+                    path="/login"
+                    redirect_path="/"
+                    condition=is_none(token)
+                    view=Login
+                />
+                <ProtectedRoute
+                    path="/create/problem"
+                    redirect_path="/login"
+                    condition=can_create_problem_or_contest
+                    view=create::Problem
+                />
+
+                // Fallback
+                <Route path="/*any" view=NotFound />
+            </Route>
+        </Routes>
+    }
+}

frontend/src/pages/problem/mod.rs

@@ -2,11 +2,150 @@ mod content;
 mod discussion;
 mod editor;
 mod education;
-mod problem;
 mod submission;
 pub use content::ProblemContent;
 pub use discussion::ProblemDiscussion;
 pub use editor::ProblemEditor;
 pub use education::ProblemEducation;
-pub use problem::ProblemRouter;
+use leptos::*;
+use leptos_icons::*;
+use leptos_router::*;
 pub use submission::ProblemSubmission;
+
+use crate::{components::*, utils::*};
+
+#[derive(Params, PartialEq, Clone, Copy)]
+struct ProblemParams {
+    id: i32,
+}
+
+#[component(transparent)]
+pub fn ProblemRouter() -> impl IntoView {
+    view! {
+        <Route path="/problem/:id" view=Problem>
+            <Route path="" view=Content ssr=SsrMode::Async />
+            <Route path="/education" view=ProblemEducation ssr=SsrMode::Async />
+            <Route path="/discussion" view=ProblemDiscussion />
+            <Route path="/submission" view=ProblemSubmission />
+        </Route>
+    }
+}
+
+#[component]
+fn Problem() -> impl IntoView {
+    let params = use_params::<ProblemParams>();
+    let token = use_token();
+
+    let langs = create_resource(
+        move || token.get_untracked(),
+        |token| {
+            let mut client =
+                grpc::submit_client::SubmitClient::new(grpc::new_client());
+            async move {
+                let langs =
+                    client.list_lang(().with_optional_token(token)).await?;
+                Result::<_>::Ok(langs.into_inner())
+            }
+        },
+    );
+
+    let editor = move || {
+        langs().map(|v| {
+            v.map(|langs| {
+                let id = params()?.id;
+
+                Result::<_>::Ok(view! { <ProblemEditor id langs /> })
+            })
+        })
+    };
+
+    view! {
+        <main class="grow grid grid-cols-5 grid-flow-row gap-4">
+
+            <div class="col-span-3 flex flex-row">
+                <VerticalNavbar />
+                <Outlet />
+            </div>
+            <div class="col-span-2 col-start-4">
+                <Suspense fallback=|| {
+                    view! { <p>loading</p> }
+                }>
+                    <ErrorFallback>{editor}</ErrorFallback>
+                </Suspense>
+            </div>
+        </main>
+    }
+}
+
+#[component]
+fn VerticalNavbar() -> impl IntoView {
+    view! {
+        <ul class="grid auto-rows-min gap-y-8 p-2 my-auto bg-black-900">
+            <VerticalNavbarButton icon=icondata::BsBook href="">
+                Problem
+            </VerticalNavbarButton>
+            <VerticalNavbarButton icon=icondata::BiInstitutionSolid href="education">
+                Education
+            </VerticalNavbarButton>
+            <VerticalNavbarButton icon=icondata::BsChatLeftText href="discussion">
+                Discussion
+            </VerticalNavbarButton>
+            <VerticalNavbarButton icon=icondata::ImUpload href="submission">
+                Submission
+            </VerticalNavbarButton>
+        </ul>
+    }
+}
+
+#[component]
+fn VerticalNavbarButton(
+    icon: icondata::Icon,
+    href: impl ToHref + 'static,
+    children: Children,
+) -> impl IntoView {
+    view! {
+        <li class="relative size-8 group">
+            <A href=href>
+                <Icon icon class="size-full group-hover:text-primary" />
+            </A>
+            <span class="absolute left-3/4 top-0 h-full px-4 ml-4 z-10 pointer-events-none bg-black-800 group-hover:opacity-100 group-hover:left-full transition-all opacity-0">
+                {children()}
+            </span>
+        </li>
+    }
+}
+
+#[component]
+fn Content() -> impl IntoView {
+    let params = use_params::<ProblemParams>();
+    let token = use_token();
+
+    let full_info = create_resource(
+        move || (params(), token()),
+        |(params, token)| {
+            let mut client =
+                grpc::problem_client::ProblemClient::new(grpc::new_client());
+            async move {
+                let id: grpc::Id = params?.id.into();
+                let full_info =
+                    client.full_info(id.with_optional_token(token)).await?;
+                Result::<_>::Ok(full_info.into_inner())
+            }
+        },
+    );
+
+    let content = move || {
+        full_info().map(|v| {
+            v.map(|full_info| {
+                view! { <ProblemContent full_info /> }
+            })
+        })
+    };
+    view! {
+        <Suspense fallback=|| {
+            view! { <p>loading</p> }
+        }>
+            <ErrorFallback>{content}</ErrorFallback>
+        </Suspense>
+    }
+}