fix bugs and minor edits

app/layout.tsx

@@ -1,14 +1,13 @@
-"use client";
 
 import React, { FC } from "react";
-import Layout from "@/pages/Layout/_index"
+import Layout from "@/pages/Layout/layout"
 import "./globals.css";
 
-interface RootLayoutProps {
+interface Props {
   children: React.ReactNode;
 }
 
-const RootLayout: FC<RootLayoutProps> = ({ children }) => {
+const RootLayout: FC<Props> = ({ children }) => {
   return <Layout>{children}</Layout>;
 };
 

app/page.tsx

@@ -23,4 +23,4 @@ export default function Home() {
             <SearchBar />
         </MainLayout>
     );
-}
+}

src/pages/Layout/_index.tsx → src/pages/Layout/layout.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC, useEffect, useState } from "react";
 import { useStore } from "@/features/store";
 import { Footer, Header } from "@/widgets";

src/pages/public/account/publicnet.tsx

@@ -22,7 +22,7 @@ interface Props {
 }
 
 const PublicNet: FC<Props> = ({ id }) => {
-  const account = id;
+  const account = id
   const { net } = useStore(useShallow((state) => ({ net: state.net })));
   const [information, setInformation] = useState<Information>(
     {} as Information

src/pages/public/assets/AssetsListItem.tsx

@@ -11,15 +11,25 @@ export interface AssetsItem {
 
 type Props = {
   item: AssetsItem;
+  tags: string[];
 };
 
-const AssetsListItem: FC<Props> = ({ item }) => {
+const AssetsListItem: FC<Props> = ({ item, tags }) => {
   const { net } = useStore(
     useShallow((state) => ({
       net: state.net,
     }))
   );
 
+  const addToHref = (tag: string) => {
+    if (!tags[0]) return `?tag[]=${tag}`;
+    return `?tag[]=${tags.join(",")},${tag}`;
+  };
+
+  const removeFromHref = (tag: string) => {
+    return `?tag[]=${tags.filter((t) => t !== tag).join(",")}`;
+  };
+
   return (
     <li style={{ padding: "1em", lineHeight: "1.6", overflow: "hidden" }}>
       <div>
@@ -31,29 +41,36 @@ const AssetsListItem: FC<Props> = ({ item }) => {
             href={`/${net}/account?id=${item?.issuer}`}
             style={{ marginRight: "1em" }}
           >
-            <span className="account-key">{item?.code}</span>
+            <span className="account-key" style={{ fontSize: "1.6rem" }}>
+              {item?.code}
+            </span>
           </Link>
-        </b>
-        {" "}
-        {item?.tag ? (
-          <a href="#" className="inline-tag">
-            #{item?.tag}
-          </a>
-        ) : (
-          <a href="#" className="inline-tag">
-            #other
-          </a>
-        )}
+        </b>{" "}
+        {item?.tag &&
+          (tags.includes(item.tag) ? (
+            <Link
+              href={removeFromHref(item?.tag)}
+              className="inline-tag active"
+            >
+              #{item?.tag}
+            </Link>
+          ) : (
+            <Link href={addToHref(item?.tag)} className="inline-tag">
+              #{item?.tag}
+            </Link>
+          ))}
       </div>
       <Link
-            title={item?.issuer}
-            aria-label={item?.issuer}
-            className="account-address"
-            href={`/${net}/account?id=${item?.issuer}`}
-            style={{ marginRight: "1em" }}
-          >
-            <span className="account-key">{item?.issuer}</span>
-          </Link>
+        title={item?.issuer}
+        aria-label={item?.issuer}
+        className="account-address"
+        href={`/${net}/account?id=${item?.issuer}`}
+        style={{ marginRight: "1em" }}
+      >
+        <span className="account-key" style={{ fontSize: "1.6rem" }}>
+          {item?.issuer}
+        </span>
+      </Link>
     </li>
   );
 };

src/pages/public/assets/page.tsx

@@ -5,23 +5,27 @@ import { useSearchParams } from "next/navigation";
 import { MainLayout } from "@/widgets";
 import AssetsListItem, { AssetsItem } from "./AssetsListItem";
 import trustedMtlAssets from "@/shared/configs/trusted-mtl-assets.json";
+import Link from "next/link";
 
 const ITEMS_PER_PAGE = 20;
 
 const Assets: FC = () => {
   const searchParams = useSearchParams();
   const paramsSearch = searchParams?.get("search");
-
+  const tags = searchParams?.get("tag[]")?.split(",") || [];
+  const [staticTags, setStaticTags] = useState<string[]>([]);
   const [filter, setFilter] = useState<string>(paramsSearch || "");
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [displayedItems, setDisplayedItems] = useState<AssetsItem[]>([]);
   const observerRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
-    const filteredItems = trustedMtlAssets.filter(
-      (item) => item.code.includes(filter) || item.issuer.includes(filter)
+    const filtredItems = trustedMtlAssets.filter(
+      (item) =>
+        item.code.toLowerCase().includes(filter.toLowerCase()) ||
+        item.issuer.toLowerCase().includes(filter.toLowerCase())
     );
-    setDisplayedItems(filteredItems.slice(0, currentPage * ITEMS_PER_PAGE));
+    setDisplayedItems(filtredItems.slice(0, currentPage * ITEMS_PER_PAGE));
   }, [filter, currentPage]);
 
   useEffect(() => {
@@ -34,24 +38,41 @@ const Assets: FC = () => {
       { threshold: 1 }
     );
 
-    if (observerRef.current) {
-      observer.observe(observerRef.current);
+    const currentObserverRef = observerRef.current;
+    if (currentObserverRef) {
+      observer.observe(currentObserverRef);
     }
 
     return () => {
-      if (observerRef.current) {
-        observer.unobserve(observerRef.current);
+      if (currentObserverRef) {
+        observer.unobserve(currentObserverRef);
       }
     };
   }, []);
 
+  useEffect(() => {
+    if (!filter) {
+      const uniqueTags = [...new Set(displayedItems.map((item) => item.tag))];
+      setStaticTags(uniqueTags.sort());
+    }
+  }, [displayedItems, filter]);
+
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
     setFilter(formData.get("search") as string);
     setCurrentPage(1);
   };
 
+  const addToHref = (tag: string) => {
+    if (!tags[0]) return `?tag[]=${tag}`;
+    return `?tag[]=${tags.join(",")},${tag}`;
+  };
+
+  const removeFromHref = (tag: string) => {
+    return `?tag[]=${tags.filter((t) => t !== tag).join(",")}`;
+  };
+
   return (
     <MainLayout>
       <div className="container narrow">
@@ -62,6 +83,7 @@ const Assets: FC = () => {
             className="icon icon-github"
             title="Log in with Github"
             style={{ fontSize: "1.4em" }}
+            target="_blank"
           ></a>
         </div>
         <div className="segment blank directory">
@@ -72,19 +94,43 @@ const Assets: FC = () => {
                 name="search"
                 className="primary"
                 defaultValue={filter}
+                onChange={(e) => setFilter(e.target.value)}
                 placeholder="Search assets by code, or public key"
                 style={{ maxWidth: "36em" }}
               />
             </form>
             <div>
               <div className="dimmed text-small">Filter by tag:</div>
-              <div className="row"></div>
+              <div className="row">
+                {staticTags.map((value: string, index: number) => (
+                  <div key={index} className="column column-25">
+                    {tags.includes(value) ? (
+                      <Link
+                        className="tag-block active"
+                        href={removeFromHref(value)}
+                      >
+                        #{value}
+                      </Link>
+                    ) : (
+                      <Link className="tag-block" href={addToHref(value)}>
+                        #{value}
+                      </Link>
+                    )}
+                  </div>
+                ))}
+              </div>
             </div>
           </div>
           <ul className="striped space">
-            {displayedItems.map((value: AssetsItem, index: number) => (
-              <AssetsListItem key={index} item={value} />
-            ))}
+            {tags[0]
+              ? displayedItems
+                  .filter((item) => tags.includes(item.tag))
+                  .map((value: AssetsItem, index: number) => (
+                    <AssetsListItem key={index} item={value} tags={tags} />
+                  ))
+              : displayedItems.map((value: AssetsItem, index: number) => (
+                  <AssetsListItem key={index} item={value} tags={tags} />
+                ))}
           </ul>
           <div ref={observerRef} />
         </div>

src/shared/lib/processKeys/index.ts

@@ -36,7 +36,7 @@ const processKeys = (key: string, value: string): { processedKey: string, proces
           processedValue = `<a href="/public/account?id=${decodedValue}">${decodedValue}</a>`;
           break;
         case 'links':
-          processedValue = `<a href="${decodedValue}">${decodedValue}</a>`;
+          processedValue = `<a target="_blank" href="${decodedValue}">${decodedValue}</a>`;
           break;
         case 'names':
           processedValue = decodedValue; // Add specific processing for names if needed