Tune visibility, closes: #797

src/css/App.less

@@ -195,3 +195,9 @@ select:-webkit-autofill:focus {
 .sponsor-button {
   animation: wiggle 2s linear 1;
 }
+
+.ant-table-row {
+  &.unlisted {
+    opacity: 0.5;
+  }
+}

src/pages/Hub.tsx

@@ -210,6 +210,7 @@ const Hub = () => {
         loading={isLoading}
         scroll={xs ? undefined : { x: 1360 }}
         pagination={false}
+        rowClassName={(tune) => tune.visibility}
       />
       <div style={{ textAlign: 'right' }}>
         <Pagination

src/pages/Upload.tsx

@@ -547,7 +547,7 @@ const UploadPage = () => {
     <Row style={{ marginTop: 10 }} {...rowProps}>
       <Col {...colProps}>
         <Item name="visibility">
-          <Select disabled>
+          <Select>
             <Select.Option value="public">
               <Space><GlobalOutlined />Public</Space>
             </Select.Option>

src/pages/auth/Profile.tsx

@@ -22,6 +22,8 @@ import {
   MailOutlined,
   ArrowRightOutlined,
   EditOutlined,
+  GlobalOutlined,
+  EyeOutlined,
 } from '@ant-design/icons';
 import validateMessages from './validateMessages';
 import { useAuth } from '../../contexts/AuthContext';
@@ -205,6 +207,7 @@ const Profile = () => {
           renderItem={(tune) => (
             <List.Item
               actions={[
+                tune.visibility === 'public' ? <GlobalOutlined /> : <EyeOutlined />,
                 <Button icon={<EditOutlined />} onClick={() => goToEdit(tune.tuneId)} />,
                 <Button icon={<ArrowRightOutlined />} onClick={() => navigate(tunePath(tune.tuneId))} />,
               ]}